This week we delve into some maths in Canvas and Three.js - then take a break from the heavy lifting with some amazing inspirational demos!

♥️ Donovan at CSSAnimation.rocks

Articles

Trigonometry in CSS and JavaScript: Beyond Triangles — tympanus.net

Create interesting shapes with trigonometry, and draw them with the Canvas API

Visually Explained: MVP Transformations

A useful guide to MVP transformations in Three.js

Inspiration

animate outline offset on focus

A handy use of animation to draw attention to the currently focused element when tabbing through a page

The Discord

Nice little Discord-style loader using CSS

Toggle

Subtle animations make these toggles look great

Popular Productions Section

Nice hover effects on this product demo page

CSS responsive loader using SVG

A simple pure-HTML and CSS set of loading bars

Swipe through Recipe Cards

An interesting interaction, the faster you swipe the more likely the card is to fly away

attractor

Some lovely organic-looking paths in this Canvas demo

Apple Photos - Logo animation

A pure-CSS implementation of the Apple Photos app logo