Now let’s move on to the smaller circles which we create with pseudo-elements. $d: 80vmin īackground: linear-gradient(black 50%, white 0) We set this diameter value as its width and height, we make the element round with border-radius and we give it a top to bottom gradient background with a sharp transition from black to white in the middle. We use viewport units so that everything scales nicely on resize.
So let’s start writing the code that can achieve this!įirst of all, we decide upon a diameter $d for the big circle. Both smaller circles are vertically middle-aligned with the big circle. The diameter of one of the smaller circles is half the diameter of the big circle. The pseudo-elements are the smaller circles we place over it. The actual element is the big circle and it has a top to bottom gradient with a sharp transition right in the middle. The how behind building the symbol is illustrated by the following animation (since the whole thing is going to rotate, it doesn’t matter if we switch axes): In this case, we can do it with one element and its two pseudo-elements.
Knowing all of this, let’s get started with the first method! Plain old HTML + CSS This means that the diameter of one of the smallest circles is r/3 (or d/6) and its radius is r/6.
If we are to draw a diameter for the big circle that passes through all the central points of all these circles – the line segment AB in the illustration above, the intersections between it and the inner circles split it into 6 equal smaller segments. Inside each of these circles of diameter r we have an even smaller concentric circle. This means that the diameter for each of these two smaller circles is equal to the big circle’s radius r (or. Inside this circle, we tightly fit two smaller circles, each one of them having a diameter that’s half the diameter of our initial big circle. The structure of this starting shape is described by the following illustration: The structure of the static symbol ( live demo).įirst off, we have a big circle of diameter d.
No matter what method we choose to use to recreate the above animation, we always start from the static yin and yang shape which looks as illustrated below: The static yin and yang symbol ( live demo). This article is going to guide you through the process of building these demos.īefore anything else, this is the animation we’re trying to achieve here: The desired result: a rotating ☯ symbol, with its two lobes increasing and decreasing in size. I came across a couple such animations a while ago and this gave me the idea of creating my own versions with as little code as possible, no external libraries, using various methods, some of which take advantage of more recent features we can use these days, such as CSS variables.