linw1995 · February 14, 2018 12:48 · linw1995 · Feb 14, 2018
diff --git a/animation-of-rgb-circles-svg-css.markdown b/animation-of-rgb-circles-svg-css.markdown
diff --git a/index.pug b/index.pug
 svg#system
  circle#c1
  circle#c2
  circle#c3
diff --git a/style.sass b/style.sass
 $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
	$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