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
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
Actix Web Starter Template
Production-ready Rust/Actix Web REST API starter with RBAC auth, SeaORM/PostgreSQL, Kafka-based email, and Docker tooling.
RustActix WebSeaORM