12/25/2023 0 Comments Yin and yang symbol outline![]() $d: 80vmin Īlright, now let’s move on to the JavaScript part! Before anything else, we need to get the canvas element, the 2D context and set the canvas element’s width and height attributes (things we draw on the canvas would appear stretched otherwise). We also make it circular with border-radius so that we simplify our job when drawing on the canvas. We start with a canvas element and some basic styles just to put it in the middle of its container (which is the body element in our case) and make it visible. While some people might think this method is overkill, I really like it because it requires about the same amount of code as the CSS one, it has good support and good performance. Update: Firefox 57+ supports calc() as an animation-delay value and Firefox 59+ also supports using it inside hsl(). This eliminates the need for witing all these rules twice: all we need to do now is flip the switch! Sadly, this only works in WebKit browsers for now because Firefox and Edge don’t support using calc() as an animation-delay value and Firefox doesn’t support using it inside hsl() either. Finally, we make them round with border-radius, give them a dummy background and set the content property just so that we can see them. We make these pseudo-elements have half the height ( 50%) of their parent element and make sure that, horizontally, they each cover half of the big circle. We give our element display: flex and make its children (or pseudo-elements in our case) middle aligned with it vertically by setting align-items: center. ![]() 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |