Skip to content

Instantly share code, notes, and snippets.

@linw1995
Last active February 14, 2018 12:48
Show Gist options
  • Save linw1995/efeb0db5ac0615b18d719e27c187047b to your computer and use it in GitHub Desktop.
Save linw1995/efeb0db5ac0615b18d719e27c187047b to your computer and use it in GitHub Desktop.
Animation of RGB Circles (SVG&CSS)
svg#system
circle#c1
circle#c2
circle#c3
$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
@linw1995
Copy link
Author

<svg width="255" height="255" xmlns="http://www.w3.org/2000/svg" >
<style type="text/css">
    <![CDATA[
    @keyframes path1{0%{cx:74.7914;cy:158.72}3.33333%{cx:78.56629;cy:163.91569}6.66667%{cx:83.33894;cy:168.213}10%{cx:88.90075;cy:171.42412}13.33333%{cx:95.00865;cy:173.40869}16.66667%{cx:101.3957;cy:174.08}20%{cx:107.78275;cy:173.40869}23.33333%{cx:113.89065;cy:171.42412}26.66667%{cx:119.45246;cy:168.213}30%{cx:124.22511;cy:163.91569}33.33333%{cx:128;cy:158.72}36.66667%{cx:130.61216;cy:152.853}40%{cx:131.94741;cy:146.57111}43.33333%{cx:131.94741;cy:140.14889}46.66667%{cx:130.61216;cy:133.867}50%{cx:128;cy:128}53.33333%{cx:124.22511;cy:122.80431}56.66667%{cx:119.45246;cy:118.507}60%{cx:113.89065;cy:115.29588}63.33333%{cx:107.78275;cy:113.31131}66.66667%{cx:101.3957;cy:112.64}70%{cx:95.00865;cy:113.31131}73.33333%{cx:88.90075;cy:115.29588}76.66667%{cx:83.33894;cy:118.507}80%{cx:78.56629;cy:122.80431}83.33333%{cx:74.7914;cy:128}86.66667%{cx:72.17924;cy:133.867}90%{cx:70.84399;cy:140.14889}93.33333%{cx:70.84399;cy:146.57111}96.66667%{cx:72.17924;cy:152.853}100%{cx:74.7914;cy:158.72}}@keyframes path2{0%{cx:181.2086;cy:158.72}3.33333%{cx:183.82076;cy:152.853}6.66667%{cx:185.15601;cy:146.57111}10%{cx:185.15601;cy:140.14889}13.33333%{cx:183.82076;cy:133.867}16.66667%{cx:181.2086;cy:128}20%{cx:177.43371;cy:122.80431}23.33333%{cx:172.66106;cy:118.507}26.66667%{cx:167.09925;cy:115.29588}30%{cx:160.99135;cy:113.31131}33.33333%{cx:154.6043;cy:112.64}36.66667%{cx:148.21725;cy:113.31131}40%{cx:142.10935;cy:115.29588}43.33333%{cx:136.54754;cy:118.507}46.66667%{cx:131.77489;cy:122.80431}50%{cx:128;cy:128}53.33333%{cx:125.38784;cy:133.867}56.66667%{cx:124.05259;cy:140.14889}60%{cx:124.05259;cy:146.57111}63.33333%{cx:125.38784;cy:152.853}66.66667%{cx:128;cy:158.72}70%{cx:131.77489;cy:163.91569}73.33333%{cx:136.54754;cy:168.213}76.66667%{cx:142.10935;cy:171.42412}80%{cx:148.21725;cy:173.40869}83.33333%{cx:154.6043;cy:174.08}86.66667%{cx:160.99135;cy:173.40869}90%{cx:167.09925;cy:171.42412}93.33333%{cx:172.66106;cy:168.213}96.66667%{cx:177.43371;cy:163.91569}100%{cx:181.2086;cy:158.72}}@keyframes path3{0%{cx:128;cy:66.56}3.33333%{cx:121.61295;cy:67.23131}6.66667%{cx:115.50505;cy:69.21588}10%{cx:109.94324;cy:72.427}13.33333%{cx:105.17059;cy:76.72431}16.66667%{cx:101.3957;cy:81.92}20%{cx:98.78354;cy:87.787}23.33333%{cx:97.44829;cy:94.06889}26.66667%{cx:97.44829;cy:100.49111}30%{cx:98.78354;cy:106.773}33.33333%{cx:101.3957;cy:112.64}36.66667%{cx:105.17059;cy:117.83569}40%{cx:109.94324;cy:122.133}43.33333%{cx:115.50505;cy:125.34412}46.66667%{cx:121.61295;cy:127.32869}50%{cx:128;cy:128}53.33333%{cx:134.38705;cy:127.32869}56.66667%{cx:140.49495;cy:125.34412}60%{cx:146.05676;cy:122.133}63.33333%{cx:150.82941;cy:117.83569}66.66667%{cx:154.6043;cy:112.64}70%{cx:157.21646;cy:106.773}73.33333%{cx:158.55171;cy:100.49111}76.66667%{cx:158.55171;cy:94.06889}80%{cx:157.21646;cy:87.787}83.33333%{cx:154.6043;cy:81.92}86.66667%{cx:150.82941;cy:76.72431}90%{cx:146.05676;cy:72.427}93.33333%{cx:140.49495;cy:69.21588}96.66667%{cx:134.38705;cy:67.23131}100%{cx:128;cy:66.56}}circle{r:51.2;stroke-opacity:0;mix-blend-mode:screen}#c1{fill:red;animation:1s path1 0s infinite}#c2{fill:#0f0;animation:1s path2 0s infinite}#c3{fill:#00f;animation:1s path3 0s infinite}
    ]]>
</style>
  <circle id="c1"></circle>
  <circle id="c2"></circle>
  <circle id="c3"></circle>
</svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment