DEV Community

Cover image for Exploring the CSS Paint API: Blob Animation

Exploring the CSS Paint API: Blob Animation

Temani Afif on September 29, 2021

After the fragmentation effect, I am going to tackle another interesting animation: The Blob! We all agree that such effect is hard to achieve with...
Collapse
 
madza profile image
Madza

Detailed and well explained article 😉
Also, didnt know you write for CSS tricks 👀

Collapse
 
afif profile image
Temani Afif

I have to. CSS Tricks is one of the best CSS-related website to showcase your work. I cannot ignore such opportunity 😁

Collapse
 
madza profile image
Madza

Agree on this 💯😉
Also, Smashingmagazine is awesome, quality content there 😉

Thread Thread
 
afif profile image
Temani Afif

Yes, smashing magazine is the next on my list. I have to first get closer to the top of the authors page: css-tricks.com/authors/ 😜

Thread Thread
 
madza profile image
Madza

Best of luck with that 😉
With your CSS knowledge it should be no problem ✨💯

Collapse
 
grahamthedev profile image
GrahamTheDev

This looks so interesting to play with.

I can imagine combining this with the SVG trick of Gaussian blur + high contrast (but now in CSS) we could make some super interesting gooey effects as this seems way more manageable than SVG.

As always a really well explained article! ❤️

Collapse
 
link2twenty profile image
Andrew Bone

This is pretty cool, I've recently done an app with some animations using clip path and blobs.app/ but this looks way cooler!

Collapse
 
shreykr profile image
Shreyas K R • Edited

Great article and had a good read! I have been following and going through you work for some time now. How do you suggest on where to start learning css the right way, as in knowing what we are doing clearly and create some amazing work out of it?

Also is Josh W. Comeau's course worth taking up spending that much money or is there is different approach ?

Collapse
 
afif profile image
Temani Afif

What I always suggest to correctly learn CSS is to practice and practice. I suggest you to set goals and try to achieve them. Like for example re-building some templates you find online, trying to draw some illustration using CSS-only, creating some fancy animation, etc. If you do this regularly you will improve you CSS level. If each day you spend one hour trying and learning a new thing then it should be enough. In addition to this, pick up some good CSS Website where you can read new articles (like DEV, CSS tricks, Smashing Magazine) and try to follow a few folks on twitter that share some of their CSS works.

I have no idea about Josh Course or any other courses but I don't think you need to spend money to learn. Maybe such courses will give human support that can help you if you struggle but if you have time you can learn by yourself.

Collapse
 
anikcreative profile image
Anik

Excellent article, and fantastic examples!

Collapse
 
afif profile image
Temani Afif

yes why not, good idea 😉