Blur and Turbulence

<feGaussianBlur stdDeviation="x y"> blurs each axis separately, so "3 0" is a horizontal motion blur; <feOffset dx dy> shifts. <feTurbulence> generates Perlin noise: baseFrequency sets the grain, numOctaves the detail, type soft fractalNoise or ridged turbulence. <feDisplacementMap> moves each pixel of in by the color of in2 times scale, and <feMorphology> fattens (dilate) or thins (erode) a shape.

Motion blur, text displaced by noise, and a dilated outlineHTMLLive

<svg width="600" height="64" font-family="Georgia" font-weight="bold" font-size="30">
  <filter id="motion"><feGaussianBlur stdDeviation="3 0"/></filter>
  <filter id="wavy">
    <feTurbulence type="fractalNoise" baseFrequency=".03 .09" numOctaves="2" result="noise"/>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="10"
      xChannelSelector="R" yChannelSelector="G"/>
  </filter>
  <filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2" result="fat"/>
    <feFlood flood-color="#b5452f"/><feComposite in2="fat" operator="in"/>
    <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <text x="10" y="44" fill="#5b3f99" filter="url(#motion)">Deep Web</text>
  <text x="210" y="44" fill="#1f5f8b" filter="url(#wavy)">Harbor</text>
  <text x="380" y="44" fill="#fff3e0" filter="url(#outline)">Paradox</text>
</svg>

Browser output of Listing 1.22 — Browser output of 22

The outline dilates the silhouette, floods it rust-red and draws the text on top, wholly outside the glyphs (unlike the edge-centered -webkit-text-stroke). Turbulence is computed per pixel: keep noisy areas small.

MENU