css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Just for fun. Playing with svg filters and masks, CSS for animation. https://unsplash.com/photos/RnCPiXixooY


  1. Awesome! It looks like water in space that was food colored to be a blob of beauty. xD I noticed looking through the blobs it shows another background. Wormhole foodcolored water blobs? I think so!

  2. Wow, that is truly mesmerising. Amazing effect with a surprisingly small amount of code. I noticed that it doesn't animate in Firefox, though I couldn't find anything specific that might be not supported. Can you shed some light on that Cassie?

  3. @mbesser Ooft. Firefox really hates it doesn't it. No movement at all with css. With GSAP there's some movement, but it slows down to a crawl pretty quickly and feels like my laptop might explode. https://codepen.io/cassie-codes/pen/PePzQw I think this may be the issue. https://bugzilla.mozilla.org/show_bug.cgi?id=1118710

  4. @cassie-codes It's a shame that I missed your reply. Thanks for sharing what you know about the issue. It's been around for quite some time now. Let's hope it will be solved in a not so distant future ;-)

  5. Love how the blobs are purely CSS, really slick and inspiring, forking it!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.