Phyllotaxis Rainbow Star

HAML
.stars -10.times do .star -60.times do .circle
SCSS
/*variables*/ $starCount: 10; $circleCount: 60; $speed: 5; //second $bg: #140032; html,body{ width: 100%;height: 100%; } body{ background-color: $bg; overflow: hidden; margin:0; *{ position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius:50%; } } .stars{ width: 300px;height: 300px; animation: 5s starsAnimation linear infinite; .circle{ animation: #{$speed}s CircleAnimation linear infinite; $w: 0; @for $i from 1 through $circleCount{ $w: $w + 1; @if($i%11==1){$w: 1;} $index: ($i - 1)*360/$circleCount; &:nth-child(#{$i}){ width: #{$w}px;height: #{$w}px; background-color: hsl($index,100%,50%); box-shadow: hsl($index,100%,50%) 0px 0px #{$w}px 1px; animation-delay: -#{$speed/$circleCount*$i}s; } } } $scale: 0.2*$starCount; @for $i from 1 through $starCount{ .star:nth-child(#{$i}){ transform: scale($scale); } $scale: $scale - 0.2; } } $cords: ( (-150, 220), (0,135),(150,220),(120,67.5),(250,0),(120,-67.5),(150,-220),(0,-135),(-150, -220),(-120, -67.5),(-250,0),(-120,67.5),(-150, 220)); @keyframes CircleAnimation{ @for $i from 0 through 12{ $procent: $i*100/12; #{$procent}%{ left: #{nth(nth($cords,($i + 1)),1)}px; top: #{nth(nth($cords,($i + 1)),2)}px; } } } @keyframes starsAnimation{ 100%{ transform: rotate(-360deg); } }
JAVASCRIPT
Expand for more options Login