organic shape css
Sometimes the most practical option is not importing an `.svg` file, it is pasting a ready CSS declaration straight into the stylesheet. This page opens the generator in blob mode with the "CSS" export format already selected.
No extra `.svg` file in the project, no extra network request, works the same in a CSS Module or a global stylesheet.
Lowering numeric precision before exporting to CSS shortens the URI, useful when the `background-image` ends up inline in the HTML.
Because a random blob without a seed is impossible to get back: if you liked the shape and reloaded the page, it is gone. With a seed, the same string always reconstructs the exact same blob, so you can write down the seed, paste it into a link, or commit it in code, and the visual result never changes.
No, the color is baked into the SVG encoded in the data URI, changing a theme CSS variable will not affect that background. For a shape that responds to `currentColor` or CSS variables, use the SVG or JSX export instead, which inserts a real, editable `<path fill="...">` in the DOM.
No, the generator already applies the necessary URL-encoding (including quotes, parentheses and the `#` character that shows up in gradient references), the copied snippet is pasted straight into the selector with no manual tweaking.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400" role="img" aria-label="Blob shape"><path d="M 352.17,200 C 355.46,225.37 328.99,318.97 308.58,336.16 C 288.18,353.35 188.12,367.37 163.79,358.67 C 139.46,349.97 96.78,281.1 84,255.86 C 71.21,230.63 36.55,146.48 45.76,125.72 C 54.98,104.97 143.85,66.87 169.03,64.29 C 194.21,61.72 258.36,87.24 278.2,101.94 C 298.04,116.65 348.87,174.63 352.17,200 Z" fill="#3DDC97"/></svg>The SVG is generated entirely in your browser, from the seed. Nothing you draw here leaves your device.