test bench

Paper textures in SVG

Every swatch below is generated at runtime from <feTurbulence> noise plus lighting and compositing primitives — no raster images. The playground applies those filters to HTML elements via filter: url(#…) — headings, paragraphs, images, buttons, anything with a painted surface.

Iltimas Doha

est. 1994 — creative engineer

portfolio

HTML usage

import PaperInkFilters from '$lib/components/PaperInkFilters.svelte';

<PaperInkFilters prefix="pg" mode="emboss" seed={7} displaceScale={1}>
  <div class="paper-ink-surface" style="background:#efe7d6"></div>
  <h2 class="paper-ink-text" style="color:#1a1a1a">Any HTML</h2>
  <img class="paper-ink-text" src="…" alt="" />
</PaperInkFilters>

.paper-ink-surface needs a solid background-color. .paper-ink-text works on any replaced or text content. Filters use objectBoundingBox so they scale per element — drop PaperInkFilters anywhere in your layout and tag children with the two utility classes.

Preset recipes

Bond fine high-frequency fiber grain

Newsprint coarse grey grain, low brightness

Recycled grain plus sparse brown flecks

Kraft embossed directional fibers

Cold-press rough watercolour tooth

Crumpled low-freq folds with specular creases

Parchment aged base, stains and edge vignette

Linen crosshatched woven threads