Skip to content

Instantly share code, notes, and snippets.

@linw1995
Last active June 11, 2017 11:47
Show Gist options
  • Save linw1995/dfc4b9eee64bfa4cebc90038c8d1f603 to your computer and use it in GitHub Desktop.
Save linw1995/dfc4b9eee64bfa4cebc90038c8d1f603 to your computer and use it in GitHub Desktop.
Dizzy Circles
- var n = 1
svg
while n < 5
circle(class="circle"+n)
- n++
$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}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment