CSS Houdini Blobs

This content originally appeared on Bram.us and was authored by Bramus!

Tim Broddin — ubernerd and also my tech colleague at VRT Creative Lab — released a very nice Houdini Paint Worklet that draws some smooth blobs.

.css-houdini-blobs {
    --num-blobs: 40;

    --seed: 4749;
    --colors: #71a7ee, #7940c1, #f0e891;
    --min-opacity: 0.1;
    --max-opacity: 0.5;
    background: paint(blobs);
}

Glad to see Tim used css-houdini-circles as a starting point to work from. The blobs themselves are drawn using the blobs NPM package.

CSS Houdini Blob Source (GitHub) →
CSS Houdini Blobs Demo →
blobs NPM Package →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-12-02T22:30:58+00:00) CSS Houdini Blobs. Retrieved from https://www.scien.cx/2021/12/02/css-houdini-blobs/

MLA

" » CSS Houdini Blobs." Bramus! | Sciencx - Thursday December 2, 2021, https://www.scien.cx/2021/12/02/css-houdini-blobs/

HARVARD

Bramus! | Sciencx Thursday December 2, 2021 » CSS Houdini Blobs., viewed ,<https://www.scien.cx/2021/12/02/css-houdini-blobs/>

VANCOUVER

Bramus! | Sciencx - » CSS Houdini Blobs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/02/css-houdini-blobs/

CHICAGO

" » CSS Houdini Blobs." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/12/02/css-houdini-blobs/

IEEE

" » CSS Houdini Blobs." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/12/02/css-houdini-blobs/. [Accessed: ]

rf:citation

» CSS Houdini Blobs | Bramus! | Sciencx | https://www.scien.cx/2021/12/02/css-houdini-blobs/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.