Blob Shape Generator

Generate random organic SVG blob shapes for your designs. Customize complexity, contrast, and colors. Download SVG or copy CSS.

SVG Preview

Controls

8 points
50%
300px

SVG Code

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <path d="M 842.3 150.0 C 827.0 705.4, 1257.8 807.4, 1050.1 1050.1 C 842.4 1292.8, 664.9 984.1, 150.0 958.9 C -364.9 933.8, -332.7 1208.9, -666.2 966.2 C -999.6 723.5, -943.7 657.5, -961.5 150.0 C -979.3 -357.5, -1058.9 -446.7, -725.5 -725.5 C -392.0 -1004.3, -398.0 -756.5, 150.0 -779.2 C 698.0 -802.0, 893.6 -1080.1, 1101.3 -801.3 C 1309.0 -522.5, 857.7 -405.4, 842.3 150.0 Z" fill="#3b82f6" />
</svg>

CSS Background clip-path

clip-path: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3CclipPath%20id%3D'c'%20clipPathUnits%3D'objectBoundingBox'%20transform%3D'scale(0.003333)'%3E%3Cpath%20d%3D'M%20842.3%20150.0%20C%20827.0%20705.4%2C%201257.8%20807.4%2C%201050.1%201050.1%20C%20842.4%201292.8%2C%20664.9%20984.1%2C%20150.0%20958.9%20C%20-364.9%20933.8%2C%20-332.7%201208.9%2C%20-666.2%20966.2%20C%20-999.6%20723.5%2C%20-943.7%20657.5%2C%20-961.5%20150.0%20C%20-979.3%20-357.5%2C%20-1058.9%20-446.7%2C%20-725.5%20-725.5%20C%20-392.0%20-1004.3%2C%20-398.0%20-756.5%2C%20150.0%20-779.2%20C%20698.0%20-802.0%2C%20893.6%20-1080.1%2C%201101.3%20-801.3%20C%201309.0%20-522.5%2C%20857.7%20-405.4%2C%20842.3%20150.0%20Z'%2F%3E%3C%2FclipPath%3E%3C%2Fsvg%3E#c");

Related Tools