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
Payaza Web SDK
A JavaScript Web SDK that simplifies integrating Payaza checkout on web applications. Built as part of my role at Payaza Africa.
SDKJavaScriptPayments
Country flags and currency package
Lightweight TypeScript library for country flags, capitals, dial codes, currencies, and simple location distance utilities.
TypeScriptLibraryNPM
Laye
Framework-agnostic RBAC library for Rust with composable AccessPolicy rules and plug-and-play middleware for actix-web and tower/axum.
RustRBACAccess Control