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


  1. great! could you add some description?

  2. I still don't get it. :P xD I mean.. I can't visualize the filter in my head (I've never played with SVG filters). It would be cool to show how the element initially is, how/what the effect does.

  3. @Hornebom Oh it wasn't supposed to be published yet! But thanks, and I will.

  4. @SaraSoueidan I am writing an article explaining how the effect works, it will be published soon!

  5. @lbebber Awesome!! Really love this effect. @SaraSoueidan This article explains it pretty well :) http://css-tricks.com/shape-blobbing-css/

  6. That is so cool

  7. You may check this JS version: http://codepen.io/Omelyan/pen/wMWbRV When using JS to generate metaballs it gives you some advantages (e.g. you can add strokes or get more precise shape).

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

You must be logged in to comment.