React SVG Shape

Installation

NPM

npm i react-svg-shape

Basic Blob

import { generatePath, SvgShape } from "react-svg-shape";

const svgPath = generatePath({ complexity: 16, contrast: 4 });
          
const SvgBlobComponent = () => {
    return (
      <SvgShape width={100} height={100}>
        <SvgShape.Path svgPath={svgPath} colors={["#f87537", "#fba81f"]} />
      </SvgShape>
    );
}

Animated Blob

Important

SVG animations are supported only in Chromium based browsers

import { useEffect, useState } from "react";
import { generatePath, SvgShape } from "react-svg-shape";

const INTERVAL_DURATION = 1_000;
const generateShapePath = () => generatePath({ complexity: 16, contrast: 4 });

const SvgBlobAnimatedComponent = () => { 
  const [svgPath, setSvgPath] = useState(generateShapePath());

  useEffect(() => {
    const interval = setInterval(() => {
      setSvgPath(generateShapePath());
    }, INTERVAL_DURATION);

    setSvgPath(generateShapePath());

    return () => clearInterval(interval);
  }, [setSvgPath]);

  return (
  <SvgShape width={100} height={100}>
    <SvgShape.Path 
      svgPath={svgPath}
      colors={["#f87537", "#fba81f"]}
      style={{
        transition: `all ${INTERVAL_DURATION / 1000}s linear`,
      }}
    />
  </SvgShape>
  );
}

Honorable Mention

https://www.softr.io/tools/svg-shape-generator