Hey, let's try to type your text here! (HTML, Stylus)
HTML
<div class="test" contenteditable>
Hey, let's try
<p class="small">– to – <p/>
Type your text here!
<p class="small">~</p>
<p class="smaller">(tested on Chrome)</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
</defs>
</svg>
STYLUS
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700');
body
font-family 'Amatic SC', sans-serif
font-size 100px
@keyframes squiggly-anim
0%
filter url('#squiggly-0')
25%
filter url('#squiggly-1')
50%
filter url('#squiggly-2')
75%
filter url('#squiggly-3')
100%
filter url('#squiggly-4')
$squiggly
animation squiggly-anim 0.34s linear infinite
body
line-height 100vh
background #111
color white
.test
@extend $squiggly
display inline-block
vertical-align middle
width 100%
outline none
text-align center
line-height 1
.small
font-size 0.5em
.smaller
font-size 0.4em
p
margin 0
