Squiggly Text

index.html

<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>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

squiggly-text.markdown

Squiggly Text

Squiggly text experiment with SVG Filters

A Pen by Lucas Bebber on CodePen.

License.

style.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