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.
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.
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.
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.
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.
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.
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.Read more
Why your best tech talent quits
Your best developers and IT pros receive recruiting offers in their InMail and inboxes daily. Because the competition for the top tech talent is so fierce, how do you keep your best employees in house?Read more
Technology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.Read more