g-harel / blobs Goto Github PK

Hi, thank you for this library. I want to build a similiar blob effect like on the discord login page
When you go to the page, you will see the blob effect in the top left corner. After you entered your crendentials, the blob fills the whole window.

How can i build this blob with movement using your library?

I am still a beginner of blobs so could you provide an example so i can better understand of how can i use it?

When I import the animate blobs like this (or any other way) in typescript
import { canvasPath } from "blobs/v2/animate";
I keep getting the error TS2306: File 'blobs/v2/animate/index.js' is not a module. It works just fine. But it throws the error.
Any ideas?

Hi I've been tinkering to try to get the fill to apply an image but it's not working

This is my current approach from scavenging stack overflow. A lot of the answers are pretty old but I'm not sure why they wouldn't work.

const blobSvgString = blobs2.svg(
  {
    seed: plant.botanicalName,
    extraPoints: 5,
    randomness: 2,
    size: 1000
  },
  {
    fill: 'url(#blob-image)'
  }
);
const blobContainer = document.getElementById('blob');
blobContainer.innerHTML = blobSvgString;
const defsMarkup = `
  <defs>
    <pattern id="blob-image" patternUnits="userSpaceOnUse" width="1000" height="1000">
      <image href="url(/images/iridescent-gradient.png)" x="0" y="0" width="1000" height="1000" />
    </pattern>
  </defs>
`;
const range = document.createRange();
const fragment = range.createContextualFragment(defsMarkup);
const svgEl = document.querySelector('#blob svg');
svgEl.insertBefore(fragment, svgEl.firstChild);

Wondering if you can provide any insight or if I'm not using it right. Thanks :) !!