<section>
<h1 data-name="Scooby Doo">
<span>Scooby Doo</span>
</h1>
</section>
body
background-color: black
section
display: flex
width: 100vw
height: 100vh
h1
margin: auto
position: relative
z-index: 1
font-family: sans-serif
font-size: 10vmin
font-weight: 700
//
&:before, &:after
mix-blend-mode: screen
// Pseudo
&:before, &:after
content: attr(data-name)
position: absolute
z-index: 2
top: 0
width: 100%
height: 100%
&:before
left: -5%
color: #FF0000
clip: rect(0, 1350px, 140px, 0)
animation-name: glitchRed
animation-duration: 1s
animation-timing-function: linear
animation-iteration-count: infinite
&:after
left: 5%
color: #0000FF
clip: rect(0, 1350px, 50px, 0)
animation-name: glitchBlue
animation-duration: 1s
animation-timing-function: linear
animation-iteration-count: infinite
// Children
span
position: relative
z-index: 1
color: white
clip: rect(0, 900px, 722px, 56px)
animation-name: glitchGreen
animation-duration: 4s
animation-timing-function: linear
animation-iteration-count: infinite
@keyframes glitchRed
0%
left: 0
clip-path: inset(0% 0 0% 0)
9%
left: 0
clip-path: inset(0% 0 0% 0)
10%
left: 1%
clip-path: inset(21% 0 5% 0)
19%
left: 1%
clip-path: inset(21% 0 5% 0)
20%
left: 6%
clip-path: inset(72% 0 55% 0)
29%
left: 6%
clip-path: inset(72% 0 55% 0)
30%
left: 0
clip-path: inset(12% 0 -52% 0)
39%
left: 0
clip-path: inset(12% 0 -52% 0)
40%
left: -5%
clip-path: inset(-80% 0 12% 0)
49%
left: -5%
clip-path: inset(-80% 0 12% 0)
50%
left: 0
clip-path: inset(95% 0 32% 0)
59%
left: 0
clip-path: inset(95% 0 32% 0)
60%
left: 2%
clip-path: inset(4% 0 27% 0)
69%
left: 2%
clip-path: inset(4% 0 27% 0)
70%
left: 0
clip-path: inset(-64% 0 -77% 0)
79%
left: 0
clip-path: inset(-64% 0 -77% 0)
80%
left: -8%
clip-path: inset(75% 0 -4% 0)
89%
left: -8%
clip-path: inset(75% 0 -4% 0)
90%
left: 0
clip-path: inset(-33% 0 96% 0)
99%
left: 0
clip-path: inset(-33% 0 96% 0)
100%
left: 3%
clip-path: inset(48% 0 50% 0)
@keyframes glitchBlue
0%
left: 0
clip-path: inset(0% 0 0% 0)
9%
left: 0
clip-path: inset(0% 0 0% 0)
10%
left: -2%
clip-path: inset(41% 0 -15% 0)
19%
left: -2%
clip-path: inset(41% 0 -15% 0)
20%
left: -4%
clip-path: inset(-72% 0 75% 0)
29%
left: -4%
clip-path: inset(-72% 0 75% 0)
30%
left: 0
clip-path: inset(62% 0 4% 0)
39%
left: 0
clip-path: inset(62% 0 4% 0)
40%
left: 7%
clip-path: inset(80% 0 -12% 0)
49%
left: 7%
clip-path: inset(80% 0 -12% 0)
50%
left: 0
clip-path: inset(5% 0 55% 0)
59%
left: 0
clip-path: inset(5% 0 55% 0)
60%
left: -5%
clip-path: inset(-47% 0 36% 0)
69%
left: -5%
clip-path: inset(-47% 0 36% 0)
70%
left: 0
clip-path: inset(24% 0 -7% 0)
79%
left: 0
clip-path: inset(24% 0 -7% 0)
80%
left: 5%
clip-path: inset(-75% 0 4% 0)
89%
left: 5%
clip-path: inset(-75% 0 4% 0)
90%
left: 0
clip-path: inset(3% 0 -96% 0)
99%
left: 0
clip-path: inset(3% 0 -96% 0)
100%
left: -3%
clip-path: inset(98% 0 -50% 0)
@keyframes glitchGreen
0%
clip-path: inset(0% 0 0% 0)
9%
clip-path: inset(0% 0 0% 0)
10%
clip-path: inset(41% 0 -15% 0)
19%
clip-path: inset(41% 0 -15% 0)
20%
clip-path: inset(-72% 0 75% 0)
29%
clip-path: inset(-72% 0 75% 0)
30%
clip-path: inset(62% 0 4% 0)
39%
clip-path: inset(62% 0 4% 0)
40%
clip-path: inset(80% 0 -12% 0)
49%
clip-path: inset(80% 0 -12% 0)
50%
clip-path: inset(5% 0 55% 0)
59%
clip-path: inset(5% 0 55% 0)
60%
clip-path: inset(-47% 0 36% 0)
69%
clip-path: inset(-47% 0 36% 0)
70%
clip-path: inset(24% 0 -7% 0)
79%
clip-path: inset(24% 0 -7% 0)
80%
clip-path: inset(-75% 0 4% 0)
89%
clip-path: inset(-75% 0 4% 0)
90%
clip-path: inset(3% 0 -96% 0)
99%
clip-path: inset(3% 0 -96% 0)
100%
clip-path: inset(98% 0 -50% 0)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.