May 10, 2024 - David Oyinbo
Canvas Random Floating Circle
Lightweight Canvas animation where circles float randomly across the screen with gentle drift and easing.
JavaScriptHTML CanvasAnimationPet Project
Overview
This experiment uses Canvas 2D APIs to draw circles that drift around the viewport with simple easing and random direction changes. It focuses on animation loops, randomness, and smooth motion.
Highlights
Canvas Rendering
- 2D context drawing (arcs, fills)
- Clear + redraw per frame
- Responsive canvas sizing
Randomized Motion
- Random velocities and drift
- Occasional direction changes
- Gentle easing for a calm effect
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
Canvas Infinity & Circle Mouse
Pet project exploring HTML Canvas and JavaScript animations—drawing an infinity curve and a circle following the mouse.
JavaScriptHTML CanvasAnimation
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