Frog Riding a Bicycle

A 2D HTML Canvas animation of a frog cycling through the countryside, built with code.

Description

A collection of 2D animated scenes featuring a green frog riding a red bicycle through a scrolling countryside, implemented entirely with HTML Canvas and vanilla JavaScript. The project demonstrates the coding capabilities of four different AI models (MiMo, DeepSeek, GLM, and LongCat) using a single, detailed prompt to synchronize pedaling, blinking, and environment rendering without external assets.

Descriptions, tags, and model credits may be AI-generated or inferred from public sources and can be incomplete or wrong. Learn more.

Details

Why this is interesting: Demonstrates impressive cross-model consistency for complex, multi-element code generation tasks like synchronized…
Attributed to: Fazley Rabbi@itsfazley
Built with: Redwood AI V4.1 Flash GLM-5.3 Mercury 2.5
Tags: #canvas #javascript #animation #generative-art

Discovered: X
First posted: X · Oct 19, 2026
Listed: Added 3d ago
Build: Strong
Models: Strong

Prompt

Build a cute 2D animated scene of a green frog riding a red bicycle through a charming countryside using HTML Canvas and vanilla JavaScript.

Draw the frog and bicycle entirely with code, without external images or assets. Animate the bicycle wheels and pedals rotating continuously, with the frog’s legs synchronized to the pedal cycle. The frog should hold the handlebars, bounce gently while riding, and blink occasionally.

Create a smoothly scrolling countryside background with rolling hills, trees, flowers, and clouds. Add controls to pause the animation and adjust cycling speed.

Use clean, colorful cartoon graphics, smooth animation, and responsive canvas rendering. Ensure the frog’s feet remain aligned with the pedals throughout the animation.

Deliver a complete, working implementation in a single HTML file.

Source

Explore

Toys & Experiments