Splines is a mathematical concept used to draw smooth lines between points. There is an extensive literature about splines, and there are multiple types. The details aren't too important, unless you will be implementing this yourself, but in this text we will consider quadratic Bézier curves. That means that a curve is controlled by two end points (●) and a mid point (๐).
You can think of it as a string which is connected to two points. Then the midpoint is used to stretch (or bend) the string in a certain direction. To get an idea you can have a look at the illustration below.
You can click or tap all animations to restart them.
Even More Nodes
It is generally difficult to strike a nice balance between detail and simplicity. Often you will get more chaotic behaviour when you increase the level of detail. In this case the level of detail corresponds to the number of nodes.
By drawing transparent dots along the length of a spline we can get a nice smoke-like effect. This is exactly the same method that was used previously on straight lines.
We can change the amount of noise applied to each node individually. For instance we can increase the amount of noise—randomness—as we get further to the right.
In addition to changing the amount of applied noise, we can change the number of points in the spline. Different configurations result in different results. Below we apply these parameters at random to a number of different splines.
You can pretty much distribute these splines any way you like. Here are multiple splines, with varying number of points, distributed evenly along the circumference of a circle.
What can I say, I really like circles.
You can make quite nice things if you scale this technique up a little. One of the challenges of doing this in the browser is the that we are limited by relatively low resolution, and low color depth. The latter becomes important when gradually combining transparent strokes like we do above. Solving this challenge is outside the scope of this brief introduction.
Hopefully you enjoyed this guide, and you can see a few more images here and here. I've also written about this method previously in my essay On Generative Algorithms in the section called Sand Spline.