SVG Filters - Skeleton

How It Works

This feature is enabled by the native SVG filters browser API, paired with feColorMatrix transformations.

Minimal Example

In this example, we’ll create an SVG with a unique ID of Emerald. Then apply this to the image using filter: url(#Emerald).

---
const imgSrc = 'https://picsum.photos/seed/skeleton/512';
const imgClasses = 'w-full max-w-[512px] 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>

Skeleton Filters

Coming soon!

Create a Filter

We recommend SVG Color Matrix Mixer by Rik Schennink to aid in creating your own filters.

Tips

Store your SVGs locally within your project for quick and reusable imports.
Imports support both .svg and framework component formats (ex: .svelte, .tsx)
SVGs have a precense in the DOM, and will be affected by space-x|y utility classes.