# SASS random() and circle animation

DevFeed: [SASS random() and circle animation](<https://devfeed.tech/articles/sass-random-and-circle-animation-37345.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/sass-random-and-circle-animation/>)

Author: Stanko

Published: 2016-08-30T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [function](<https://devfeed.tech/topics/function.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [css](<https://devfeed.tech/tags/css.md>), [js](<https://devfeed.tech/tags/js.md>), [sass](<https://devfeed.tech/tags/sass.md>)

## AI overview

A CSS-only circle animation uses JavaScript to create 50 elements and demonstrates Sass's random() function. The article explains its range behavior, examples using positive and negative offsets, and how generated values remain static in CSS until the next Sass compilation.

## Source excerpt

I decided to move my CSS playground to the CodePen, and this is the first one I made. Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it's redesign. This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function. random() will return random integer between 1 and n, where n is the number you pass to it. Default param is 100. Note that random does not return 0. To get different random ranges just add or subtract your base. This will return number between 11 and 20. $random-number: random(10) + 10; Same thing with negative numbers, this one covers the range between -10 and 10. $random-number: random(21) - 11; Something to have in mind, new random numbers will be generated on every SASS compilation. But once generated, CSS will stay static, until the next compilation.