42% the Size of HTML SCSS with ZIM...

Once again, we saw some HTML and CSS and thought... yikes! That could be done in less lines of code! Here is the original CodePen pen (thanks to the original poster and their clever HTML SCSS):

https://codepen.io/enbee81/pen/LBMKqV

and here is the ZIM CodePen pen:

https://codepen.io/zimjs/pen/xxORooW

The ZIM code looks like this:

// usually users can interact with a Blob
const mask = new Blob({interactive:false})
    .sca(2.5)
    .alp(1)
    .center();
asset("headshot_800.jpg").center().setMask(mask);
// a Blob has a set of control points we will wiggle
loop(mask.pointControls, point=>{
    point
        // prop, start, min, max, timeMin, timeMax
        .wiggle("x",point.x,10,40,4,8)
        .wiggle("y",point.y,10,40,4,8)
        .wiggle("scale",1,.1,.5,4,8);
});
// a manually changed Blob needs updating
Ticker.add(()=>{mask.update();});    
new Circle(355, null, grey, 1, true).center();
new Rectangle(500, 500, null, grey, 1, null, true).center();

---

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.