Unlock the Power of CSS: Create a Stunning Yin-Yang Symbol from Scratch

Recreate Iconic Designs with Pure CSS

Mastering CSS is crucial to building visually stunning websites and applications. One effective way to hone your CSS skills is to recreate iconic designs, such as the yin-yang symbol, using only CSS and a single line of HTML.

Crafting the Perfect Shape

To begin, we need to create a round shape with black and white colors to differentiate the two sides of our yin-yang body. We’ll use a clever trick with the border-width property to achieve this.

.yin-yang {
  width: 100px;
  height: 100px;
  border-width: 2px 50px 2px 2px;
  border-style: solid;
  border-color: black white;
  border-radius: 50%;
}

Adding Inner Circles with Pseudo-Elements

The concept behind both inner circles is the same. We’ll utilize CSS pseudo-elements, such as :before and :after, to create the desired effect.

.yin-yang:before {
  content: "";
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: white;
}

.yin-yang:after {
  content: "";
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: black;
}

Bringing it to Life with Animation

To take our design to the next level, we’ll add a simple animation to make it interactive.

@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.yin-yang {
  animation: roll 3s linear infinite;
}

The Final Result

And there you have it – a stunning, continuously rolling yin-yang symbol crafted entirely with CSS.

• Feel free to modify this element or use it as a foundation to create something even more amazing.