This week we're taking Canvas to the max by animating 100,000 points, morphing SVG shapes on scroll, and learning about video backgrounds. In other news I'll be starting work on module 4 of my course! So much to read, so much to do :)

♥️

Donovan at CSSAnimation.rocks

Articles

Beautifully Animate Points with WebGL and regl - Peter Beshai — peterbeshai.com

Animating 10,000 points in Canvas? How about making that 100,000!? Learn how to make use of WebGL to animate incredible numbers of points.

On-Scroll Morphing Background Shapes — tympanus.net

Learn how to morph SVG shapes on scroll using anime.js and scrollMonitor.js.

Full Page Background Video Styles — mediatemple.net

A great write-up of how to add background video to your hero header, by everyone's hero Chris Coyier.

Inspiration

CSS wormhole — codepen.io

Considering this just uses CSS, it's pretty amazing. Might challenge your browser somewhat though! 💥

Calculator — surewash.com

See how much money can be saved by the simple act of washing hands! Lovely animation work here from Peter Barr

Pure CSS Torus — codepen.io

Incredible CSS animated torus 🍩

Pure CSS Telescope ( Dribbble shot ) — codepen.io

Lovely sparkly effect on this pure CSS animated telescope ✨

Animation in the real world

Rick Waalders - Graphic Designer & Developer — rickwaalders.com

It's great to see what can happen when a Computer Science graduate combines design and code. Gorgeous portfolio site from Rick here.