Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Mar 27, 2019

Embed
What would you like to do?
Squiggly Text
<div class="test" contenteditable>
Squiggly Text
<p class="small">– with – <p/>
SVG Filters
<p class="small">(you can even edit this text)</p>
<p class="smaller">(only tested on Chrome so far)</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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.