DEV Community

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

Posted on

1

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more