Dizzy Circles

dizzy-circles.markdown

Dizzy Circles

A Pen by linw1995 on CodePen.

License.

index.pug

- var n = 1
svg
  while n < 5
    circle(class="circle"+n)
    - n++

style.sass

$w: 512
$h: 512
$n: 5
$frameN: 30
$diff: 100% / $frameN
$a: $w / $n / 2

svg
  width: #{$w}px
  height: #{$h}px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

circle
  cx: #{$w / 2}
  cy: #{$h / 2}
  fill: transparent
  stroke: black

@for $i from 1 to $n  
  @keyframes circle#{$i}
    @for $s from 0 to $frameN + 1
      $current-frame: ($s * $diff)
      $θ: $s * $i / pi() * 16
      $sr: sin($θ)
      #{$current-frame}
        r: $i * $a + $sr
        stroke-width: abs($sr) * $a / 4 * 3
 
@for $i from 1 to $n
  .circle#{$i}
    animation: 3s linear 0s infinite alternate circle#{$i}