Fisheye Displacement
An SVG displacement filter creating a centered fisheye lens effect using backdrop-filter.
Centered Geometry
The displacement map uses neutral values to ensure zero offset at the center.
Barrel Distortion
Smooth curves control the distortion intensity.
Backdrop Filter
Using backdrop-filter keeps the DOM structure simple.
Distortion Test Shapes
Dynamic Map
The displacement map regenerates on resize, maintaining center alignment.
Responsive
Works across different viewport sizes and maintains the effect when scrolling.
GPU Accelerated
Backdrop-filter ensures smooth rendering using hardware acceleration.
Scroll Testing
Continue scrolling to see how the filter affects content at different positions.
Edge Handling
The distortion increases toward edges while keeping the center readable.
Performance
The filter only regenerates on resize, not during scroll, for optimal performance.
Some content can be ignored
The filter only affects elements behind it in the stacking context, so content placed after the filter in the DOM will not be distorted. This allows for UI elements or text that remain clear and unaffected by the fisheye effect. This filter could also be applied selectively to just one DOM layer when needed.