SVG Blob Generator: Create Organic SVG Shapes Online
This SVG Blob Generator creates an organic shape from a seed by connecting N noisy points arranged around a circle with a closed Catmull-Rom spline. Set the seed, point count, randomness, and fill, then generate a blob. Copy the SVG, an equivalent CSS clip-path polygon, or a border-radius approximation; you can also toggle an animated morph between two seeds.
The SVG Blob Generator creates organic SVG shapes from a seed, giving developers a quick way to generate and copy blob values. It builds each shape as a closed Catmull-Rom spline through N noisy points arranged on a circle. You can set the seed, number of points, randomness, and fill, then generate a shape without inventing its values by hand.
The generated blob is available in three forms: SVG, an equivalent CSS clip-path polygon, and a border-radius approximation. The SVG uses the spline-based shape, while the other results provide CSS-friendly representations of the generated blob. You can also toggle an animated morph between two seeds to see the shape change. The available formats let you choose a result that fits your intended use.
SVG and CSS offer different ways to represent shapes in web projects. SVG provides vector markup, while CSS clip-path and border-radius values can be copied for styling. Converting the generated blob into the format you need can make it easier to use the shape in code, test fixtures, or seed data. The tool also supports generating a batch at once, which is useful when you need multiple values.
The generator runs entirely in your browser. The input is processed on your device and nothing is uploaded, stored, or sent to a server; after the page has loaded, it also works offline. This makes it useful when you want to generate and copy blob values without sending your data elsewhere.
The tool is designed for developers and DevOps engineers at any experience level who need organic shapes for web projects, tests, or sample data. Designers and other builders can also use it to create varied blob values and copy the representation that suits their work.
Step 1: Set the available options, including the seed, number of points, randomness, and fill. These settings shape the generated blob.
Step 2: Generate the blob to create an organic shape from the seed and configured points.
Step 3: Review the available result formats: SVG, a CSS clip-path polygon, and a border-radius approximation.
Step 4: Copy the value you need for your project, or toggle the animated morph between two seeds to preview a changing shape.
Use case: Create ready-to-use SVG blob values for tests, fixtures, or seed data instead of writing shape data by hand.
Use case: Generate a batch of blob values at once when you need several shapes for a project or test set.
Use case: Use randomness to produce varied blob shapes rather than guessing values by typing them manually.
Use case: Copy an SVG blob when you need a scalable vector shape for a design or web page.
Use case: Use the CSS clip-path polygon output when you want a CSS-based version of the generated shape.
Use case: Copy a border-radius approximation when that format better suits the shape styling you need.