Abstract Art With Sass

Many times I’ve heard designers say they wake up early just to explore and draw, to hone their skills. But what about those of us in the front-end world? So I decided to search the Internet, asking the question, “Can I do something similar using Sass and Haml only?” While researching this week, I came across a series of 55 animated vintage book graphics by Henning M. Lederer, and wanted to try to create the first one (I call it “Eclipse”). While working on the recreation, I discovered I was going to use the Sass function random(). So today I want to share with you how I’ve been honing my front-end craft creating art with Sass.

What Is Random()?

The random function is pretty simple — it returns a random number, as you might expect. When using the Sass function, keep in mind that it starts at 1, not 0. Or, you can also pass in a number to the function and it will return a random number between 1 and that number. For example, if I use random(100) in my code, the function will return a random number between 1 and 100.

Creation

Take a look at my CodePen — you can see I used the random function all over the place. I used it to randomize colors, sizes, position, and rotation of all the little particles.

Randomize Color

To randomize the colors of the particles, I wanted the colors to fall between a specific range, so I used Hue, Saturation, Lightness (HSL). I set up variables for HSL to keep things organized, and the Hue value setup is pretty standard. The value will fall between 1 and 20. For saturation and lightness, it’s a little different. The saturation is set to random(50) + 50%. That means, instead of a range of 1 to 50, the function will return a range of 51% to 100%. Lightness is set up the same way, but with different values.

Increase variation

Next, I added a little math to provide more control to this experiment (that, and some trial and error). Good examples of this are the size and offset variables. At first, I created the rotate value with a random range of 360, and used seconds for the delay. It wasn’t random enough, so I increased the rotate value to 1080 and the delay variable to 2000 milliseconds.

Proper positioning

The particles are in a circle, almost like they are orbiting around a planet. To get the particles in the proper radius, I used transform-origin. The transform-origin is set to($size / 2) +px ($size / 2 + $radius) +px. The $size / 2 moves the origin to the center of the particle and the radius references the larger circle (or planet) the particles are orbiting. If I change the circle variable at the top of the CodePen, it will change the size of the ring of particles.

Takeaways

While the performance on this is terrible, it was just an experiment. The more particles you want, the more DOM elements you create. What does this mean? Everything can easily get bloated. Additionally, I had trouble moving the individual particles as they faded out. I was combining 2 transforms: rotate and translate. I tried to only animate translate, but I wasn’t getting the result I wanted. I also tried to animate the top value, but it still didn’t look right. So, I just scrapped that idea altogether.

The best part of this experiment is what happens just by changing a few numbers — you get a completely different design. Here are a couple examples I created when messing around.