linw1995/animation-of-rgb-circles-svg-css.markdown

## animation-of-rgb-circles-svg-css.markdown

      
    Raw
  

              animation-of-rgb-circles-svg-css.markdown
            
          
    Animation of RGB Circles (SVG&CSS)

A Pen by linw1995 on CodePen.
License.

  
## index.pug
svg#system
  circle#c1
  circle#c2
  circle#c3

## 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