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
iPay (Nuxt 3 Pet Project)
A simple Nuxt 3 site built to explore the Nuxt 3 ecosystem, routing, layouts, and component patterns.
Nuxt 3VuePet Project
Canvas Gravity Balls
Pet project simulating bouncing balls with gravity, collisions, and elasticity on HTML Canvas.
JavaScriptHTML CanvasPhysics
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