Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw
Created March 26, 2024 18:13
Show Gist options
  • Save rileyjshaw/70f695d328e8ecb5a7795f2bd15ee659 to your computer and use it in GitHub Desktop.
Save rileyjshaw/70f695d328e8ecb5a7795f2bd15ee659 to your computer and use it in GitHub Desktop.
shift
.container
- for i in 1..3
.shaker
ul.group
- for j in 1..14
li.line
$size: 360px
$ratio: 0.8660254038 // sqrt(3)/2
$spacing: $size / 10 / $ratio
$offset: $ratio * 10px / 2
$period: 2s
$jitter: 4px
body
background: #000
ul
margin: 0
padding: 0
list-style: none
.container
position: absolute
top: 50%
left: 50%
height: $size
width: $size
transform: translate3d(-50%, -50%, 0)
border-radius: $size * 10 / 57
overflow: hidden
background: #fff
animation: glow $period alternate infinite linear
.shaker
height: 100%
width: 100%
position: absolute
animation: jitter $period alternate infinite
&:nth-child(2)
.group
transform: rotate(60deg) translate3d(.5 /* cos(60deg) */ * $spacing * -1, 0.8660254038 /* sin(60deg) */ * $spacing * -2, 0)
.line
animation-delay: -$period / 3
&:nth-child(3)
.group
transform: rotate(120deg) translate3d(-0.5 /*cos(120deg)*/ * $spacing * 0.5, 0.86602540378 /* sin(120deg) */ * $spacing * -2.5, 0)
.line
animation-delay: -$period * 2 / 3
.group
height: 100%
width: 100%
.line
position: relative
right: $spacing * 2
height: $spacing * $ratio
width: 140%
background-image: radial-gradient(#000 10%, transparent 35%)
background-size: $spacing $spacing
background-position: $offset -1px -$spacing
animation: slide $period infinite ease-in-out
&:nth-child(even)
right: $spacing * 3 / 2
animation-name: slide-reverse
@keyframes slide
0%
opacity: 0
background-position: $offset - 1px -$spacing
1%
opacity: 1
16.67%
background-position: $offset - $spacing -$spacing
33.33%
opacity: 1
35.33%
opacity: 0
100%
opacity: 0
background-position: $offset - $spacing -$spacing
// Bummer. Since I wanted to make this fade-in-out, using
// animation-direction: reverse was a non-starter. Ah well.
@keyframes slide-reverse
0%
opacity: 0
background-position: $offset - $spacing -$spacing
1%
opacity: 1
16.67%
background-position: $offset -$spacing
33.33%
opacity: 1
35.33%
opacity: 0
100%
opacity: 0
background-position: $offset -$spacing
@keyframes jitter
@for $i from 0 through 10
$x: (2 - random(3)) * $jitter
$y: (2 - random(3)) * $jitter
#{$i * 10%}
transform: translate3d($x, $y, 0)
@keyframes glow
from
box-shadow: 0 0 50px rgba(255, 255, 255, 0.7)
to
box-shadow: 0 0 100px rgba(255, 255, 255, 0.2)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment