Procedural running red fox animation in a 1080p woodland scene

Prompt

The author shared the full prompt.

Create a single, self-contained HTML file using vanilla JavaScript and HTML5 Canvas 2D to procedurally animate a running wild red fox in crisp 1080p (Full HD). No external assets or libraries.

Specifications:

Canvas & Resolution:Native resolution: 1920 × 1080 pixels.
Style: Smooth 2D vector-style rendering (anti-aliased Bezier paths, linear/radial gradients, dynamic shading).

Fox Rigging & Locomotion:Spine Dynamics: Smooth multi-joint spline showing agile spinal flexion and extension, with a slightly arched back at the gathered phase of the gallop.
Leg Kinematics: 4 slender, articulated limbs driven by Inverse Kinematics (IK) for a full rotary gallop, with light, springy foot placement.
Secondary Motion: A long, bushy tail streaming behind with inertial, wave-like counterbalancing (spring-damped segments), shoulder-blade sliding, subtle ear flicks, and a stabilized, forward-locked head gaze.
Styling: Rich russet-orange coat with layered fur-tuft edges and soft gradient shading. Cream-white chest, muzzle, and belly. Black "stocking" lower legs, black-backed ears, and a white-tipped tail. Amber eyes with a narrow pupil, a pointed snout, and fine whisker strokes.

High-Res Parallax Environment:
Multi-layer 1080p wild woodland-meadow backdrop:Gradient dawn sky and a distant misty horizon with soft atmospheric haze.
Mid-ground with procedural pine and birch tree silhouettes and rolling hills, each layer scrolling at a different speed.
Foreground terrain of tall grass, ferns, and fallen leaves, with a high-speed particle system generating kicked-up leaves, dirt, and dust plumes behind the paws.

Performance:Optimized for stable 60 FPS execution via requestAnimationFrame.

No UI elements

Category

Art

Stack

Canvas, Physics

From the author

Same prompt tested across four models.

On X

235 likes · 44K views · 42 saves