Skip to content

Instantly share code, notes, and snippets.

@Bradshaw
Created May 1, 2021 16:44
Show Gist options
  • Save Bradshaw/30173890c8b41834e06c192bc272cd92 to your computer and use it in GitHub Desktop.
Save Bradshaw/30173890c8b41834e06c192bc272cd92 to your computer and use it in GitHub Desktop.
A little glitchy effect in Sass
@function randcol($steps: 2, $offset: 0)
@return hsl(random($steps)*(360/$steps)+$offset,100,50)
@function randoff($spread: 4)
@return #{-$spread+random()*2*$spread}px
@keyframes distort-julius
@for $i from 0 to 10
@if random()>0.3
@for $p from $i*10 through $i*10+9
#{$p}%
@if random()>0.5
text-shadow: randoff(6) randoff(1) randcol(3, 180)
@else
text-shadow: none
@else
#{$i*10}%
text-shadow: none
#{$i*10+9}%
text-shadow: none
@keyframes distort-julius {
0% {
text-shadow: none; }
9% {
text-shadow: none; }
10% {
text-shadow: none; }
19% {
text-shadow: none; }
20% {
text-shadow: 5.5421px -0.26519px cyan; }
21% {
text-shadow: 1.41675px -0.78292px magenta; }
22% {
text-shadow: -1.79514px 0.93172px yellow; }
23% {
text-shadow: none; }
24% {
text-shadow: none; }
25% {
text-shadow: -5.64658px -0.75299px cyan; }
26% {
text-shadow: 1.2886px 0.9991px cyan; }
27% {
text-shadow: -4.87616px -0.73264px yellow; }
28% {
text-shadow: 4.67051px 0.95924px magenta; }
29% {
text-shadow: none; }
30% {
text-shadow: none; }
39% {
text-shadow: none; }
40% {
text-shadow: none; }
41% {
text-shadow: none; }
42% {
text-shadow: -2.01082px 0.8765px cyan; }
43% {
text-shadow: none; }
44% {
text-shadow: -3.99326px -0.49575px cyan; }
45% {
text-shadow: none; }
46% {
text-shadow: -0.66777px 0.48208px magenta; }
47% {
text-shadow: none; }
48% {
text-shadow: 2.15156px -0.73779px cyan; }
49% {
text-shadow: none; }
50% {
text-shadow: none; }
59% {
text-shadow: none; }
60% {
text-shadow: -3.83321px 0.59796px cyan; }
61% {
text-shadow: -5.92978px 0.16196px yellow; }
62% {
text-shadow: -1.63114px -0.37084px yellow; }
63% {
text-shadow: 2.733px -0.88524px cyan; }
64% {
text-shadow: 3.4312px -0.14427px cyan; }
65% {
text-shadow: none; }
66% {
text-shadow: 1.92854px 0.30075px magenta; }
67% {
text-shadow: none; }
68% {
text-shadow: none; }
69% {
text-shadow: 0.41494px 0.97568px magenta; }
70% {
text-shadow: none; }
79% {
text-shadow: none; }
80% {
text-shadow: none; }
89% {
text-shadow: none; }
90% {
text-shadow: none; }
91% {
text-shadow: none; }
92% {
text-shadow: none; }
93% {
text-shadow: -4.13846px 0.93345px yellow; }
94% {
text-shadow: none; }
95% {
text-shadow: -4.04855px -0.02242px cyan; }
96% {
text-shadow: 2.07304px 0.47815px yellow; }
97% {
text-shadow: -0.12745px 0.2297px magenta; }
98% {
text-shadow: 5.60709px -0.80918px magenta; }
99% {
text-shadow: none; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment