How an organic blob shape is constructed
A blob is a closed loop drawn through points scattered around a circle. The generator places one point for each step of the complexity setting at evenly spaced angles, then pushes each point in or out by a random amount governed by the randomness setting. With complexity 6 and randomness 50 the six points sit at 0, 60, 120, 180, 240 and 300 degrees, each at a radius somewhere within a band of roughly thirty percent of the base radius.
If those points were joined with straight lines the result would be a lumpy polygon. Instead they are joined with cubic Bezier curves using a Catmull-Rom construction: for each pair of neighbouring points, the two control handles are derived from the points on either side, each offset by one sixth of the vector between the neighbours. That specific one-sixth factor is what makes the curve pass exactly through every point while keeping the tangent continuous where segments meet, so the outline has no visible corners.
Because the point list wraps around, the final segment joins the last point back to the first with the same continuity rule, and the path ends in a Z command to close it. The output is a single path element with no gradients or filters, so it stays small and renders identically everywhere.
Reading the generated SVG
The tool emits a complete standalone document, not a fragment. A typical result looks like <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><path fill="#7c5cfc" d="M 312.44 168.22 C 305.11 ... Z" /></svg>. The xmlns attribute matters: it is required when the file is saved as a .svg and loaded on its own or used in a CSS url(), and it is harmless when the markup is pasted inline into HTML.
The viewBox establishes the coordinate system the path numbers are expressed in, while width and height set the default rendered size. If you delete the width and height attributes and add style="width:100%;height:auto", the same path scales to any container while keeping its proportions, because the viewBox alone defines the aspect ratio.
Coordinates are rounded to two decimals, which is enough precision for smooth curves at any realistic size and keeps the markup readable. A six-point blob is around 500 bytes of path data, so it is practical to inline it directly in a component rather than loading a separate file.
What the complexity and randomness sliders change
Complexity is the number of anchor points, from 3 to 12. Low values give broad, slow curves that read as a single soft shape; the classic decorative background blob is usually four to six points. Higher values give more undulations around the same circle, which starts to look like a splash or an amoeba rather than a blob. Note that complexity does not change how far the shape deviates from a circle, only how often it deviates.
Randomness controls the amplitude of that deviation as a percentage of the base radius, scaled to at most sixty percent of it. At 0 the radii are identical and you get a smooth circle regardless of point count. At 100 the difference between the nearest and furthest point can be large enough to produce deep concave bays, which can look unbalanced with only three or four points.
The generator is seeded, so the same seed with the same settings always produces the same path. The randomise button picks a new seed, which is how you explore variations without changing complexity or randomness. That determinism is useful in practice: once you have a shape you like, note the settings and you can reproduce it exactly.
Using a blob in a real layout
The most common use is a decorative background behind a hero section or a feature card. Inline the SVG, give it position: absolute with a negative z-index, and set aria-hidden="true" so assistive technology skips it, since it carries no information. A purely decorative SVG with no title element is already largely ignored, but the explicit attribute removes any doubt.
A blob also works well as an image frame. Convert the path into a CSS clip-path with the path() function, or reference the SVG path from an SVG clipPath element and apply clip-path: url(#blob) to an img. The SVG route is preferable when the frame has to resize, because a clipPath with clipPathUnits="objectBoundingBox" scales with the element while a raw CSS path() does not.
For a moving blob, generate two shapes with the same complexity value so the two paths have the same number of segments, then animate the d attribute between them with SMIL or a CSS transition on an element that supports path interpolation. Paths with different segment counts will not interpolate and the animation will snap.