<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  
  <circle cx="50" cy="50" r="24" fill="none"/>
  
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
  <circle cx="50" cy="50" r="24" fill="none"/>
</svg>

<p>
  "Flower" SVG animation - Animated with CSS transforms and a JavaScript generated color set using the HSL cylindrical-coordinate system (via the hsl())
  
  <br/><br/>
  <strong>SVG reconstruction of <a href="https://twitter.com/Mamboleoo/status/1239959113422917634" target="_blank">@Mamboleoo</a> generative "flower" animation</strong>
<p>

@mixin circleTransform($numberOfCircles, $radius) {
  @for $i from 1 through $numberOfCircles {
    $x: if($i==$numberOfCircles/2,0,($radius * sin($i * (360deg / $numberOfCircles))) * 1%);
    $y: ($radius * cos($i * (360deg / $numberOfCircles))) * 1%;
    
    &:nth-child(#{$i}) {
      transform: translate($x, $y);
    }
  }  
}

svg {
  max-width: 80vh;
}

circle {
  @include circleTransform(48, 24);
  animation: transform 4s ease-in-out infinite alternate;
  mix-blend-mode: lighten;
}

@keyframes transform {
  from {
    transform: translate(0%, 0%);
  }
} 

// Base
html {
  font-family: sans-serif;
}

body {
  color: white;
  background-color: black;
  text-align: center;
}

p {
  font-size: .8rem;
}

a {
  color: yellow;
}

const circles = document.querySelectorAll('circle');
for (const [i, circle] of circles.entries()) {
  circle.setAttribute('stroke', `hsl(${ i * (360 / circles.length) }, 100%, 50%)`);
  circle.setAttribute('stroke-width', 0.5);
}