The blob is waiting for you here.

Add the blob-element to your html and you're ready to go.

<blob-element></blob-element>

If you want to change the sharpness of the blob you can change the sharpness attribute to a number between 0 and 100. A sharpness of 0 will turn the blob into a circle. The default sharpness is 25.

<blob-element sharpness="30"></blob-element>

Remember to give your blob a width, a height and a background of some sort. If you want transitions on your blob you can set the --blob-transition css variable. Have fun!

During the February 2019 week 3 #CodePenChallenge the theme was blob shapes. I found this awesome blob generator and decided to turn it into a reusable web component.

Licensed under MIT.