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