Flipping out with symmetry
Filling a 2D plane flipping and unfolding using the third dimension. The first example is pure CSS. Well the animation is. Click to fold open, click again to close.
Taking a kaleidoscope demo from some time ago a little further, today's kaleidoscope features choosing the base image used (pictured here a botanical drawing by Dianne Sutherland), just to name one obvious improvement. Another one: you can't share your design on Facebook anymore, since I gave up on Facebook.
You see those dashed circles above, with their two-headed arrows? Those are rotators. Wouldn't you like to give them a swing?
Explore image details with a draggable magnifying glass. Adjust magnification factor and size of loupe as you like. All of this is in our power with the loupe tool.
Code of the basics can be found at CodeSandbox. The programmer thinks out loud in this post.
Bishops and Rooks Swap Game
Looks simple, but the puzzle is quite difficult to solve.
Accept the challenge.
Load an image and create an adjustable raster based on it. Uses Vue for reactivity and modularity, and webpack for bundling and transpiling.
I started out with SVG to draw all the dots, but that turned out to be way too slow. Canvas is much faster for this kind of thing.
Interactive tool to control the transition of a musical note to another using Bezier easing.Wear ear protection, then explore
This combines SVG and Canvas techniques: Two arrow shapes chase each other along a path in SVG, while the pursuing arrow leaves a trace on Canvas.Explore
Make your device relax, drawing spirographs. Watching your device draw may help you unwind as well, since it draws in a pleasant Andante tempo. The animation appears to have a touch of Saul Bass (Hitchcock) or Maurice Binder (James Bond) title sequences.
Spirograph drawings are also known as hypotrochoids among mathematicians.
Roll your own
If you want to take over control, enter Studio Hypotrochoid.