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
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
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
Auth module for Nuxt server apps
Auth module for Nuxt 3 server apps with local and social providers, tokens, middlewares, and typed composables.
TypeScriptNuxt 3Auth