Bizarro Devs

Share this post

Issue 55

www.bizzarodevs.com

Issue 55

Dissection Omar Aqil renders Picasso's work as 3D visuals with Adobe Suite. Amazing.

BizzaroDevs
Feb 5, 2019
Share
Share this post

Issue 55

www.bizzarodevs.com

GUEST EDITOR 💫 BLOBS 🅾️ PICASSO IN 3D 👨‍🎨

Heya,

It's an exciting week for this humble newsletter because we've got Chris Coyier jumping in the captain's chair.

As you may know, Chris is one of the founders of CodePen (from whence I pinch many a link). He is also the founder of CSS Tricks (from whence I get many guest post rejections).

Did you know that one antonym for 'blob' is 'suspicion'? The algorithm nailed that one.

Enjoy,

Chrises.


🕸️ The Cool Side of the Web

Dissection

I was admiring the design of this podcast site the other day. So nice.

Chris Coyier

jkdesign.com  


Omar Aqil renders Picasso's work as 3D visuals with Adobe Suite. Amazing.

Chris Fitz

behance.net  


⭐ Chris Coyier's Corner

Make your own blobs.

Blobs! Blobs are in! Blobs are, ahem, a bit bizarre. I’ll bask in a design like this annual report cover by Matt Pamer all day. I enjoy watching a design trend like this manifest itself in design tooling and implantation in lots of different ways.

You could start with <svg>. You could draw your own. The Pen Tool in pretty much every vector design tool is highly capable of it.

I’m a cheater though, I’d probably check The Noun Project for some example blogs and steal the SVG from there quick. But sadly there isn’t much there, thank god for THE BLOBMAKER.

blobmaker.app  


Give the blobs, Life!

After you have a blob, it’s just begging to be moved around.
Monica Dinculescu shows how you can do just that with CSS alone and liberal use of various CSS transforms in a keyframe animation.

codepen.io  


Or, you can use a JavaScript library to get all morphy on you.

Just like Heartbeat has done with KUTE.js.

codepen.io  


This Pen uses Greensock, but adds in some native SVG filters so that the blobs squish into each other satisfyingly.

We could call it the gooey effect.

A library like Greensock could help you with moving and morphing them around. Greensock even has a plugin that is probably the most powerful morphing tool out there.

codepen.io  


We’ve only looked at SVG so far, but don’t rule out <canvas>! Liam Egan has made this canvas-based blob downright jiggly.

codepen.io  


Why not add a little physics to the party, like gravity, and let them blobs get squishy that way!

Hakim El Hattab got it done here.

codepen.io  


And blobs don’t have to be alone! Blobs that are squished together are like fluid.

You might get a kick out of Peeke Kueper's article "Simulating Blobs of Fluid."

peeke.nl


🥇 World of WordPress

This is my year of JavaScript: here's 13 of the most interesting Vue UI component libraries.

Chris Fitz

codeinwp.com  


All the big WordPress news in one article with links to the most interesting articles on the web.

Chris Fitz

codeinwp.com  


🙃 Backwards talking dreams - Fun stuff

The rise of the swear nerds.

The poetics of constructing a perfectly fun, non-gendered, incredibly filthy, insult.

Chris Fitz

theoutline.com  


Play rock, paper, scissors with a recurrent neural network.

I lost a lot of games but managed to put my fist through the monitor, so I guess I won the war.

Chris Fitz

codepen.io  


Outro

Blobs are the best web trend of the year, and it's only February.

If you'd like to see Chris Coyier's Corner again, then shout it out on Twitter. Alternatively, you can hit me up on Twitter with fresh links, editing requests, and so on.

Forwarding emails is the best exercise for your fingers. That's not me speaking, that's science.

If you received this via a forward, then join the ship here.

I'll be back next week,

Chris Fitz

Share
Share this post

Issue 55

www.bizzarodevs.com
Previous
Next
Comments
Top
New
Community

No posts

Ready for more?

© 2023 Vertigo Studio SA
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing