The strangest thing happens when you rotate Bezier control points: Result/Video
Inspired by this tweet from Rune Madsen: https://twitter.com/runemadsen/status/726200375909474304
Let's start by saying that the demo has 10 Cubic Bezier curves rendered around a circle.
It's a nice way to describe a smooth line (a curve) without having to specify every single pixel. To render a Bezier curve we need to tell only four points, and computer does the rest:
(x0, y0)- where curve starts;(x3, y3)- where curve ends;(x1, y1)and(x2, y2)are first and second control points
Here is how computer then renders a cubic Bezier curve:
Luckily we don't need to implement this from scratch, since SVG already has built in support for bezier curves.
All we need to do is construct a value for a path's data attribute (called d).
Here is an example that data attribute value and corresponding result:
You can also read more about bezier curves on MDN.
That's the fun part! I just keep (x0, y0) and (x3, y3) points static, so that
curve always starts and ends at the same position. Then on each frame I move control
points (x1, y1) and (x2, y2) around the circle.
By adjusting control points we also change the shape of the curve. And since there are ten of them - a nice pattern emerges (Interactive/Video).
MIT