Yin and yang - Pure CSS, transparent, single element icon

As you might already know I have created recently css.gg a pure CSS Icon library.
So now on the v2 I am trying to add 200 more icons for a 700 total.

This library has some restrictions such as:

1. Single HTML tag
2. No colored negative space, only transparent
3. Scale Good
4. No path
5. No data-uri PNG or SVG

So everything is harder as if I would do it on multiple tags and not transparent.

So here is my approach.

Step 1

First I created as usual a circle with 2px border and note how I do not specify when not needed the color so it inherits from the parent, when is a must I use currentColor.

.gg-yinyang {
  box-sizing: border-box;
  position: relative;
  display: block;
  /* ^ this is only to contain the icon as box is applied on all icons */

  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 22px
}

Step 2

Now second step to create pseudo elements with half of the parent width minus the border and positioned center vertically. I do always fixed pixels to contain it and for better cross-browser support.

.gg-yinyang::after,
.gg-yinyang::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  top: 4px
}

Step 3

The ::before pseudo selector needs to be on the left and with standard border

.gg-yinyang::before {
  border: 2px solid;
  left: 0
}

Step 4

Now comes the most challenging, tricky & ugly part where I cover the rest of the area with the box shadow of the ::after pseudo selector

.gg-yinyang::after {
  border: 2px solid transparent;
  right: 0;
  box-shadow:
    inset 0 0 0 4px,
    0 -3px 0 1px,
    -2px -4px 0 1px,
    -8px -5px 0 -1px,
    -11px -3px 0 -2px,
    -12px -1px 0 -3px,
    -6px -6px 0 -1px
}

Final Result

Animated

This version also has as unit em where I am looking to switch for all the icons, better performance specially on animation.

For more please check the current icons on github and give it a ⭐ if you like it.

astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

Table of Contents

• Get Started
• HTML include
  • 1. All icons
  • 2. Single icon
  • 3. Collection
  • 4. Markup
  • 5. Example
• CSS @import
  • 1. All icons
  • 2. Single icon
  • 3. Collection
  • 4. Resizing
  • 5. Coloring
• SVG
  • 1. SVG Sprite - Download Path
    • 1.1. Example
  • 2. SVG Single Icon - Download Path
    • 2.1. Example - SVG Sprite
    • 2.2. Example - Inline SVG Sprite/Symbol
    • 2.3. Example Single copy/paste icon
  • 3. Encode SVG for CSS
    • 3.1. Example - Encoded SVG for CSS icon
  • 4. Coloring a SVG icon
    • 4.1. Directly on the icon
    • 4.2. using class
• JSON - paths
  • 1. All icons
  • 2. Single icon
  • 3. Collection
• …

View on GitHub

Would love to see your approach on this with as less CSS as possible.

AM

Comments

[Luke Shiru]

Thanks for the explanation, Astrit! You achieve a lot by just using "3 elements" (1 element and 2 pseudo), is great! 💖

[Maelig]

You are crazy, and I love it !