SVG Shape Generator
Note: A section divider must stretch horizontally without growing vertically. That is what preserveAspectRatio="none" plus a fixed CSS height does, and why a wave copied from elsewhere often turns into a giant diagonal on a wide monitor.
Waves are built differently, as a run of alternating curves along a baseline, and they exist for one specific job: the transition between two full-width sections of different colours. The important detail there is the viewBox and preserveAspectRatio. A divider must stretch horizontally without scaling vertically, or it becomes a huge diagonal on a wide monitor. The generated markup uses preserveAspectRatio="none" and a fixed height precisely so that does not happen.
Every shape is exported three ways. The inline SVG is what you want when the fill needs to respond to a CSS variable or a theme. The data URI is smaller to deploy for a static decoration and can go straight into a background-image. The bare path data is for when you already have an SVG and just need the d attribute.
One practical note on file size: a blob with 12 points is around 500 bytes of path data, and rounding coordinates to one decimal place — which this generator does — removes about a third of that with no visible difference.
Frequently Asked Questions
Why does my blob look spiky rather than smooth?
Either the randomness is set too high for the number of points, or the point count is low. Smoothness comes from the control points following the circle's tangent, and a large radius jump between two neighbouring points overwhelms that. Raise the point count or lower the randomness.
Should I use inline SVG or a background image?
Inline when the shape needs to change colour with your theme, respond to hover, or be animated, since CSS can reach into it. A data URI background when it is pure decoration — it keeps the DOM clean and the browser caches it as part of the stylesheet.
Why is my section divider distorted on wide screens?
Because the SVG is scaling proportionally. A divider needs preserveAspectRatio set to none and an explicit height in CSS, so it stretches horizontally while keeping the height you designed. The exported markup includes this already.
How do I make the same shape appear every time?
Set a seed. Without one, the random offsets are drawn fresh on each generation, so reloading a page that generates shapes at runtime would reshuffle them. With a seed, the sequence is reproducible, which matters if the shape is part of a design someone else has to rebuild.
