https://github.com/andreasbm/blob

A blob web component. Nothing more. Nothing less.
https://github.com/andreasbm/blob

Last synced: 4 months ago
JSON representation

A blob web component. Nothing more. Nothing less.

• Host: GitHub
• URL: https://github.com/andreasbm/blob
• Owner: andreasbm
• Created: 2019-02-26T20:13:48.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-28T13:35:10.000Z (about 7 years ago)
• Last Synced: 2024-12-30T00:28:29.507Z (over 1 year ago)
• Language: HTML
• Homepage: https://appnest-demo.firebaseapp.com/blob
• Size: 3.9 MB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
@appnest/blob




	


	  

	




[The blob is waiting for you here](https://appnest-demo.firebaseapp.com/blob/).

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)

## ➤ Usage

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

```html

```

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`.

```html

```

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!

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#inspiration)

## ➤ Inspiration

During the [February 2019 week 3 #CodePenChallenge](https://codepen.io/challenges/2019/february/3) the theme was blob shapes. I found [this](https://codepen.io/LekovicMilos/full/omVzYv) awesome blob generator and decided to turn it into a reusable web component.

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)

## ➤ License

	

Licensed under [MIT](https://opensource.org/licenses/MIT).