SVG Filter Warp Generator
A free online SVG filter generator for distorting and warping SVGs.
Upload your own SVG, add feTurbulence and feDisplacementMap,
animate it, click individual shapes to target them, then download the SVG or PNG.
Everything runs in your browser — your file is never uploaded anywhere.
Presets
Apply to
Click shapes in the preview to toggle the warp on them.
selected
Displacement
Blur
How to warp and distort an SVG
This free SVG filter generator chains two SVG filter primitives.
feTurbulence generates procedural noise; feDisplacementMap
reads that noise as a displacement field and pushes every pixel of your SVG around by
it. The Strength slider is the displacement scale — the
single biggest lever on how warped the result looks. Frequency controls
how large or tight the ripples are, Octaves adds detail, and the
Animate toggle turns the distortion into a moving heat-haze shimmer.
What is feTurbulence?
feTurbulence is an SVG filter primitive that synthesizes Perlin (fractal)
noise from a seed and a base frequency — no source image required. On its own it looks
like colored static; paired with a displacement map it becomes the noise field that
warps your graphic.
What is feDisplacementMap?
feDisplacementMap takes your SVG and a second image (here, the turbulence
noise) and uses that image's pixel values to offset where each source pixel is sampled
from. Point it at the turbulence output and every pixel gets nudged, producing ripples,
warps, and organic distortion.
Can I distort just part of an SVG?
Yes. Switch Apply to from “Whole SVG” to “Pick parts”, then click any shape in the preview to toggle the warp on just that element. Everything happens client-side, so nothing is ever uploaded to a server.
Want the full breakdown, including why this doesn't work inside an
<img> tag?
Read the writeup →