Blurred Vision

HTML
<div class="hold-it"> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> <div class="dizzy"></div> </div>
SCSS
$size: 100vmin; $speed: 0.6s; $time-func: ease-in; * { box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #fff; } .hold-it { height: $size; width: $size; position: relative; } .dizzy { mix-blend-mode: difference; position: absolute; top: 0; width: $size; height: $size; border-radius: 50%; border: 24vmin solid; } $amount: 51; @for $i from 1 through $amount { $subtractor: (($amount - 1)/2) +1; $position-mult: $i - $subtractor; $position: $position-mult * 0.9vmin; .dizzy:nth-child(#{$i}) { left: $position; border-color: hsl($i*4, 90, 1.8); animation: move $speed $time-func infinite alternate; } } @keyframes move { 0% {} 100% { left: 0 } }
JAVASCRIPT
Expand for more options Login