May 13, 2024 - David Oyinbo
Canvas Infinity & Circle Mouse
Pet project to try out HTML Canvas and JavaScript—rendering an infinity (∞) animation and a circle that follows the mouse.
JavaScriptHTML CanvasAnimationPet Project
Overview
This small experiment uses Canvas APIs to draw and animate an infinity curve while tracking mouse movement to render a trailing circle. The focus is on animation loops, basic vector math, and interaction.
Highlights
Canvas Rendering
- 2D context drawing (paths, arcs, strokes)
- Clear + redraw per frame
- Responsive canvas sizing
Mouse Interaction
- Tracks mouse position
- Smooth trailing circle
- Simple easing for feel
Animation Loop
- requestAnimationFrame
- Time-based updates
- Lightweight state
Code Footprint
- Minimal JS
- No dependencies
- Easy to tweak
Gallery
Other Projects
Canvas Gravity Balls
Pet project simulating bouncing balls with gravity, collisions, and elasticity on HTML Canvas.
JavaScriptHTML CanvasPhysics
Country flags and currency package
Lightweight TypeScript library for country flags, capitals, dial codes, currencies, and simple location distance utilities.
TypeScriptLibraryNPM
Canvas Random Floating Circle
Pet project animating randomly floating circles on HTML Canvas with simple drift and easing.
JavaScriptHTML CanvasAnimation