DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 42% the Size of HTML SCSS with ZIM...
Dr Abstract
Dr Abstract

Posted on

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();
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.