Three visual languages
Rings pulse, radar adds a directional sweep, and topographic contours move through dashed paths.
Graphics & signal
Ripple Surface
Place an impact point and send controlled vector rings, radar sweeps, or contour signals across the frame.
A signal field in native SVG
Impact, range, and direction with only eight paths.
Build sonar graphics, event feedback surfaces, ambient maps, and topographic systems from clipped responsive vectors.
Bounded vectors
The complete output contains between three and eight rings.
Safe edges
The SVG is clipped to its responsive viewBox at every origin and spacing extreme.
Three-step workflow
How to use the Ripple Surface studio
- Choose the signal
Start with rings, radar, or a contour composition.
- Place the origin
Move the impact horizontally and vertically, then set range and line weight.
- Tune and export
Set the speed and save dependency-free SVG, HTML, and CSS.
Questions, answered.
Can rings overflow the preview?
The SVG viewport clips the geometry cleanly at every origin.
How many SVG elements are created?
At most eight rings, one core, and an optional radar line.
Does it use JavaScript?
No. SVG supplies geometry and CSS supplies motion.
Is reduced motion supported?
Yes. All ring, core, and radar animations stop.