Circles ○

circles.markdown

Circles ○

SVG circle animation

A Pen by William Kennedy on CodePen.

License.

index.html

<main rel="main">
  <svg viewBox="0 0 100 100">
    <circle class="circle-0" cx="50" cy="50" r="45" fill="none" stroke-width="2" />
    <circle class="circle-1" cx="50" cy="50" r="41" fill="none" stroke-width="2" />
    <circle class="circle-2" cx="50" cy="50" r="37" fill="none" stroke-width="2" />
    <circle class="circle-3" cx="50" cy="50" r="33" fill="none" stroke-width="2" />
    <circle class="circle-4" cx="50" cy="50" r="29" fill="none" stroke-width="2" />
    <circle class="circle-5" cx="50" cy="50" r="25" fill="none" stroke-width="2" />
    <circle class="circle-6" cx="50" cy="50" r="21" fill="none" stroke-width="2" />
    <circle class="circle-7" cx="50" cy="50" r="17" fill="none" stroke-width="2" />
    <circle class="circle-8" cx="50" cy="50" r="13" fill="none" stroke-width="2" />
    <circle class="circle-9" cx="50" cy="50" r="9" fill="none" stroke-width="2" />
    <circle class="circle-10" cx="50" cy="50" r="5" fill="none" stroke-width="2" />
    <circle class="circle-11" cx="50" cy="50" r="1" fill="none" stroke-width="2" />
  </svg>
</main>

script.js

// ᕙ༼ຈل͜ຈ༽ᕗ

style.scss

$n: 12;
$c: #382ec1 #fff;
$d: 20em;
$t: 8s;
$bg: #fff;

html,
body {
  background: $bg;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  svg {
    width: $d;
    height: $d;
  }
}

@for $i from 0 to $n {
  .circle-#{$i} {
    stroke: mix(nth($c, 2), nth($c, 1), $i*100%/($n - 1));
    stroke-dasharray: 283 - ($i*25), 300;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: circleInMotion-#{$i} $t random(10) + s linear infinite alternate;
  }

  @keyframes circleInMotion-#{$i} {
    0%,
    40% {
      stroke-dasharray: 283 - ($i*25), 300;
      stroke-dashoffset: 0;
      stroke-linecap: round;
    }
    60%,
    100% {
      stroke-dasharray: 0, 300;
      stroke-dashoffset: -140 + ($i*20);
      stroke-linecap: butt;
    }
  }
}