SVG Filters - Skeleton

How It Works

This feature is enabled by SVG filters paired with feColorMatrix transformations.

Minimal Example

The SVG controls the filter settings. The filter is applied using filter: url(#Emerald) and linking the SVG’s unique ID.

---
const imgSrc = 'https://picsum.photos/seed/skeleton/1024/768';
const imgClasses = 'w-full max-w-[1024px] aspect-video rounded-container';
---

<!-- Implement a style tag with the filter property -->
<img src={imgSrc} class={imgClasses} style="filter: url(#Emerald)" />

<!-- SVG Filter -->
<!-- Consider importing this as an .svg or component -->
<svg class="hidden absolute -left-full w-0 h-0">
	<!-- Set the unique filter name via the `id` -->
	<filter id="Emerald" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
		<feColorMatrix
			type="matrix"
			in="SourceGraphic"
			result="colormatrix"
			values="
            .16 .185 .129 0 0
            .16 .185 .129 0 0
            .16 .185 .129 0 0
            0 0 0 0.33 0"
		></feColorMatrix>
		<feComponentTransfer in="colormatrix" result="componentTransfer">
			<feFuncR type="table" tableValues="0.03 0.9"></feFuncR>
			<feFuncG type="table" tableValues="0.57 1"></feFuncG>
			<feFuncB type="table" tableValues="0.49 0.53"></feFuncB>
			<feFuncA type="table" tableValues="0 1"></feFuncA>
		</feComponentTransfer>
		<feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"></feBlend>
	</filter>
</svg>

Create a Filter

We recommend SVG Color Matrix Mixer by Rik Schennink to create your own filters.

From Skeleton

Skeleton provides a collection of open source SVG filters. Pull requests welcome!

Tips

The SVG must be in the same scope as the elements being filtering.
Consder storing your SVGs witin your local project for quick and reusable imports.
All Vite-based frameworks support .svg imports.
Optionally you can embed the SVG within a component (ex: .svelte, .tsx), then import that.
Filter SVGs are affected by the flow DOM, including class styles such as space-{x|y}.