SVG Blob Using Tailwind UI

SVG blobs, generated using tools like https://10015.io/tools/svg-blob-generator, provide unique and customizable shapes that can be seamlessly integrated into Tailwind CSS designs, adding a touch of creativity and individuality to your web projects

svg

Loading component...

index.html

26 lines

<section class="flex items-center justify-center min-h-screen">
  <svg id="10015.io" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-96 h-96"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill="#474bff"
      d="M374.5,334Q349,428,255,402.5Q161,377,118,308.5Q75,240,111,159.5Q147,79,250,61.5Q353,44,376.5,142Q400,240,374.5,334Z" />
  </svg>

  <svg id="10015.io" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-96 h-96"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path fill="#ff4747"
      d="M439.5,284.5Q440,329,381,330Q322,331,299,340Q276,349,251,359Q226,369,177,401.5Q128,434,131,375.5Q134,317,140,288.5Q146,260,97.5,229.5Q49,199,53.5,153.5Q58,108,126.5,135Q195,162,208,112Q221,62,251.5,86.5Q282,111,332,96.5Q382,82,419.5,112.5Q457,143,448,191.5Q439,240,439.5,284.5Z" />
  </svg>

  <svg id="10015.io" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-96 h-96"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <clipPath id="blob">
        <path fill="#474bff"
          d="M433.5,313.5Q387,387,313.5,403.5Q240,420,158.5,411.5Q77,403,56.5,321.5Q36,240,77.5,179.5Q119,119,179.5,61.5Q240,4,307,55Q374,106,427,173Q480,240,433.5,313.5Z" />
      </clipPath>
    </defs>
    <image x="0" y="0" width="100%" height="100%" clip-path="url(#blob)"
      xlink:href="https://images.unsplash.com/photo-1694476053120-d729a3f6a7ed?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyM3x8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60"
      preserveAspectRatio="xMidYMid slice"></image>
  </svg>
</section>

SVG Blob Using Tailwind UI

Preview - SVG Blob Using Tailwind UI