5 Lines: SVG Stroke Animation

5-lines-svg-stroke-animation.markdown

5 Lines: SVG Stroke Animation

Created for the 5 lines CodePen Challenge

A Pen by Ryan Mulligan on CodePen.

License.

index.pug

- var colors = ['#6699CC', '#FFF275', '#FF8C42', '#FF3C38', '#A23E48']
svg(viewbox="0 0 50 50")
  each color, i in colors
    - var j = i + 1; 
    circle(stroke=color stroke-width="1" stroke-dasharray=j * 10 stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="2" * j style="transform-origin: 50% 50%; --index: " + j * 20)

script.js

document.querySelector("svg").style.animation = `animate 1s linear infinite`
document.querySelector("svg").style.maxWidth = '400px'
document.querySelectorAll("circle").forEach((c, i) => {
  c.style.animation = `animate 2s ${i * -0.05}s linear infinite alternate`
})

style.sass

@keyframes animate
  to
    stroke-dashoffset: var(--index)
    transform: rotate(1turn)
    stroke-width: 1.5