Random animated pattern

index.jade

- i = 0
while i < 50
  div
  - i++ 

Random animated pattern.markdown

Random animated pattern

Randomize all the things. Inspired by @mknadler's SassConf talk.

A Pen by Giana on CodePen.

License.

style.scss

body {
  background: rgb(5,5,15);
  overflow: hidden;
}

div {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

@for $n from 0 through 50 {
  $size: random(1,40);
  $hue: random(180,360);
  
  div:nth-child(#{$n}) {
    animation: anim-#{$n} random(15,50)+s infinite alternate random(0,10)/10 + s;
    background: radial-gradient(
      hsl($hue,95,65),
      hsl($hue + 60,95,65) 49%,
      transparent 51%
    );
    border: 2px solid hsl($hue,80,85);
    transform: translate3d(random(100) + vw, random(100) + vh, 0);
    opacity: random(10)/10;
    width: $size + px;
    height: $size + px;
  }
  
  @keyframes anim-#{$n} {
    33% {
        transform: translate3d(random(100) + vw,random(100) + vh, 0);
        opacity: 0;
    }
    
    66% {
        transform: translate3d(random(100) + vw,random(100) + vh, 0);
    }
    
    100% {
        transform: translate3d(random(100) + vw,random(100) + vh, 0);
    }
  }
  
}