Search articles, tutorials, tips...
Master single-element CSS art by creating a classic spinning Yin-Yang symbol. This tutorial breaks down how to use gradients, pseudo-elements, and CSS keyframes to create complex geometry without images.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Kuasai seni CSS satu elemen dengan membuat simbol Yin-Yang klasik yang berputar. Tutorial ini menguraikan cara menggunakan gradien, elemen semu (pseudo-elements), dan keyframe CSS untuk membuat geometri kompleks tanpa gambar.
Let's get acquainted with hibuno.com, Muhibbudin Suretno's personal portfolio, featuring free articles, tutorials, and open source projects.
In this tutorial, we will create a spinning Yin-Yang symbol. While this may look like a complex graphic, it can be constructed entirely using CSS and a single HTML element. This is a perfect exercise for understanding pseudo-elements (::before and ::after) and CSS gradients.
To build a Yin-Yang without images, we need to think about its geometry:
The Base: A main circle split into two colors (black and white).
The Swirls: Two smaller circles placed on the centerline. One matches the top color but has a contrasting dot; the other matches the bottom color.
We only need a single container. We will use a div with the class yin-yang.
<div class="balance"></div>First, we style the main body. Instead of using complex border hacks, we use a linear-gradient to split the background perfectly in half.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #363588;
}
.balance {
width: 100px;
height: 50px;
background-color: white;
border: 4px solid black;
border-bottom-width: 52px;
border-radius: 100%;
position: relative;
box-sizing: content-box;
animation: rotate 3s infinite linear;
}Now we use ::before and ::after to create the two inner circles. We use a border trick here: the background-color creates the small inner dot, while the border creates the swirling part of the circle.
/* The top white/black swirl with a black dot */
.balance::before,
.balance::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 12.5px; /* The size of the inner dot */
height: 12.5px;
background-color: white;
border: 18.8px solid black; /* The border creates the black head */
border-radius: 100%;
box-sizing: content-box;
}
.balance::after {
left: 50%;
background-color: black;
border-color: white; /* The border creates the white head */
}Finally, we define the keyframes to make the symbol rotate continuously.
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}By combining a linear gradient on the parent with centered pseudo-elements using thick borders, we achieved a scalable, resolution-independent Yin-Yang animation with zero JavaScript.