AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Simple circe in background css4/10/2024 And since two circles define our wave, we will logically be using two radial gradients. Our waves use circles, and when talking about circles we talk about radial gradients. We have everything to start converting all of this into gradients in CSS! Creating gradients When P is equal to 0, we will have R = S/2. Let’s not forget the radius of our circle! That can also be defined using S and P like this: R = sqrt(P² + S²)/2 We can go bigger, but after a few tests I found that anything above 2 produces bad, flat shapes. 0 will give us the first particular case where both circles are aligned horizontally. This allows us to always have the same curvature, even if we update S. I am defining P as P = m*S where m is the variable you adjust when updating the curvature of the wave. S is the “Size of the wave” and P is the “curvature of the wave”. You have probably noticed that, in the online generator, we control the wave using two inputs. We can even create variables for them, which I will call P and S, respectively. ![]() By controlling the position and size of the circles, we can create any wave we want. Now take that line and repeat it and you get another wave, a smoother one. That line crosses the point where both circles meet. This area is limited by the dashed red line. In this case, the red line no longer covers half the area of each circle, but a smaller area instead. We still have two circles with the same radii but they are no longer horizontally aligned. Let’s add a bit of complexity by taking the first illustration and moving the circles a little: This is one of the easiest waves we can make and it’s the one I showed off in th is previous article Tada! We have a wavy shape, and one that we can control using one variable for the circle radii. Now let’s fill the bottom part (or the top one) to get the following: Now imagine you take that line and repeat it. ![]() Do you see that red line? It covers the top half of the first circle and the bottom half of the second one. We have two circles with the same radius next to each other. Let’s start with a simple example using two circle shapes: Instead, we will reproduce a wave using the basics of geometry. Any shape with curves that go up and down can be called a wave, so we are not going to restrict ourselves to complex math. Strictly speaking, there isn’t one magic formula behind wavy shapes. I highly recommend checking that article as it uses the same technique we will cover here, but in greater detail. This article is a follow-up to a previous one where I built all kinds of different zig-zag, scoped, scalloped, and yes, wavy border borders. Some of the values may look like “ magic numbers” but there’s actually logic behind them and we will dissect the code and discover all the secrets behind creating waves. Not to mention that we can easily control the size and the curvature of the waves while we’re at it. ![]() If you play with the generator, you can see that the CSS it spits out is only two gradients and a CSS mask property - just those two things and we can make any kind of wave shape or pattern.
0 Comments
Read More
Leave a Reply. |