Sketchy filter (hand-drawn aesthetic)

The garden’s icons don’t look crisp and geometric. They wobble slightly, as if drawn with a pen. This is achieved with a single SVG filter.

The filter

<svg style="display: none">
  <filter id="sketchy">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.015"
      numOctaves="3"
      seed="5"
    />
    <feDisplacementMap
      in="SourceGraphic"
      in2="turbulence"
      scale="0.4"
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

Applied to an icon: filter="url(#sketchy)" on the SVG element.

How it works

feTurbulence generates a noise field — a procedurally generated pattern of smooth random values. feDisplacementMap uses that noise field to displace (shift) the pixels of the source graphic. Each pixel moves a small amount based on its position in the noise field.

The result: straight lines get a subtle wave, corners become slightly soft. It reads as hand-drawn without being cartoonish.

Key parameters

• baseFrequency: 0.015 — very low frequency = large, slow waves. Higher values produce a jagged effect; lower values produce gentle drift. At 0.015, a 100px icon shifts by only a few pixels at its edges.
• scale: 0.4 — displacement strength. The default would be 1, which would be extreme. At 0.4, the distortion is barely perceptible but still present.
• numOctaves: 3 — layers of noise stacked for organic complexity. More octaves = more texture but higher compute cost.
• seed: 5 — the random seed. Changing this changes the exact shape of the distortion while keeping the same character.

Where the filter is defined

src/components/SketchyFilter.astro — a tiny component that outputs just the SVG definition. It’s included in PageLayout.astro so it’s available on every page without repeating the markup.

Applied on

Collection icons in CollectionIcon.astro — the icons in the header mega menu, collection index page headings, and post detail headers.

Trade-off

SVG filters run on the GPU and are generally fast. At scale: 0.4, there’s no visible performance cost. Avoid applying the filter to large raster images or animated elements.