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.
#COLORFUL WAVE DESIGN VERTICAL CODE#
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 kommentar(er)
