Cacher is the code snippet organizer for pro developers

$n: 30 !default
$x: 100% / $n !default
$width: 256 !default
$height: 256 !default
$R: sqrt($width * $height) / 5 !default
$r: $R * 0.6 !default
$halfWidth: $width / 2 !default
$halfHeight: $height / 2 !default

@mixin path($i)
  @keyframes path#{$i}
    @for $s from 0 to $n + 1
      $current-frame: ($s * $x)
      $θ: 2 * pi() / $n * $s
      #{$current-frame} 
        $θ0: 2 * pi() / 3 * $i
        cx: $halfHeight - $r * sin($θ0) - $r * sin($θ0 + $θ)
        cy: $halfWidth - $r * cos($θ0) - $r * cos($θ0 + $θ)
  
@include path(1)
@include path(2)
@include path(3)

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

circle
  r: $R
  stroke-opacity: 0
  mix-blend-mode: screen

#c1 
  fill: rgba(255, 0, 0, 255)
  animation: 1s path1 0s infinite

#c2 
  fill: rgba(0, 255, 0, 255)
  animation: 1s path2 0s infinite

#c3 
  fill: rgba(0, 0, 255, 255)
  animation: 1s path3 0s infinite
  

svg#system
  circle#c1
  circle#c2
  circle#c3