SVG filter experiments

These texts have default fonts and are in standard HTML <p> elements. The scanned/eroded/grungy effects is achieved with SVG filters, and they work in most browsers!

Instructions

Click the text to show its SVG filter code. Copy paste it anywhere in the body of your HTML and then add filter:url(#'filterX'); [where X is the filter id] to any element in your CSS.

To adjust the effects, fiddle with the numbers in ""-quotes and see how it affects the result.

Make your own SVG filters with Yoksel's SVG filter playground

Show code

Default serif (probably Times New Roman):

Jänis jolkottaa ja kettu kipittää, myyrä möyrii maassa ja orava oksalla. Zebra ziljoonaa raitaa näyttää, xylitol-purkka suussa se hymyilee.

Rabbit trots and fox scampers, mole burrows in the ground and squirrel on the branch. Zebra shows a zillion stripes, xylitol gum in its mouth it smiles. 

<svg>
  <filter id="filter1">
    <feMorphology operator="dilate" radius="6 1" in="SourceGraphic" result="morphology1" />
    <feGaussianBlur stdDeviation="0.5" in="SourceGraphic" edgeMode="none" result="blur1" />
    <feComposite in="blur1" in2="morphology1" operator="lighter" result="composite" />
    <feComponentTransfer in="composite" result="componentTransfer">
			<feFuncA type="gamma" amplitude="100" exponent="10" offset="0" />
    </feComponentTransfer>
  </filter>
</svg>
Show code

Arial Black:

Jänis jolkottaa ja kettu kipittää, myyrä möyrii maassa ja orava oksalla. Zebra ziljoonaa raitaa näyttää, xylitol-purkka suussa se hymyilee.

Rabbit trots and fox scampers, mole burrows in the ground and squirrel on the branch. Zebra shows a zillion stripes, xylitol gum in its mouth it smiles. 

<svg>
  <filter id="filter2">
    <feMorphology operator="dilate" radius="6" in="SourceGraphic" result="morphology1" />
    <feGaussianBlur stdDeviation="0.9" in="SourceGraphic" edgeMode="none" result="blur1" />
    <feComponentTransfer in="blur1" result="componentTransfer">
      <feFuncA type="gamma" amplitude="100" exponent="40" offset="0" />
    </feComponentTransfer>
  </filter>
</svg>
Show code

Optima (Mac) or Candara (Win):

Jänis jolkottaa ja kettu kipittää, myyrä möyrii maassa ja orava oksalla. Zebra ziljoonaa raitaa näyttää, xylitol-purkka suussa se hymyilee.

Rabbit trots and fox scampers, mole burrows in the ground and squirrel on the branch. Zebra shows a zillion stripes, xylitol gum in its mouth it smiles. 

<svg>
  <filter id="filter3">
    <feMorphology operator="dilate" radius="1.3" in="SourceGraphic" result="morphology1" />
    <feGaussianBlur stdDeviation="1" in="morphology1" edgeMode="none" result="blur1" />
    <feComponentTransfer in="blur1" result="componentTransfer">
      <feFuncA type="gamma" amplitude="50" exponent="30" offset="0" />
    </feComponentTransfer>
  </filter>
</svg>
Show code

Palatino:

Jänis jolkottaa ja kettu kipittää, myyrä möyrii maassa ja orava oksalla. Zebra ziljoonaa raitaa näyttää, xylitol-purkka suussa se hymyilee.

Rabbit trots and fox scampers, mole burrows in the ground and squirrel on the branch. Zebra shows a zillion stripes, xylitol gum in its mouth it smiles. 

<svg>
  <filter id="filter4">
    <feMorphology operator="dilate" radius="0.5" in="SourceGraphic" result="morphology"/>
    <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" seed="2" stitchTiles="stitch" result="turbulence1"/>
    <feDisplacementMap in="morphology" in2="turbulence1" scale="1.5" xChannelSelector="R" yChannelSelector="G" result="displacementMap"/>
    <feGaussianBlur stdDeviation="0.1" in="displacementMap" result="blur"/>
    <feComponentTransfer in="blur" result="componentTransfer">
      <feFuncA type="gamma" amplitude="10" exponent="15" offset="0"/>
    </feComponentTransfer>
  </filter>
</svg>