Процедурная анимация бегущей рыжей лисы в 1080p на HTML5 Canvas без библиотек: один файл с кодом, написанный

Промпт

Создайте единый, самодостаточный HTML-файл, используя ванильный JavaScript и HTML5 Canvas 2D, для процедурной анимации бегущего дикого рыжего лиса в четком разрешении 1080p (Full HD). Никаких внешних ресурсов или библиотек.

Спецификации:

Холст и разрешение: Нативное разрешение: 1920 × 1080 пикселей.
Стиль: Плавное 2D-рендеринг в векторном стиле (сглаженные пути Безье, линейные/радиальные градиенты, динамическое затенение).

Риггинг и локомоция лиса: Динамика позвоночника: Плавный многосуставной сплайн, демонстрирующий гибкое сгибание и разгибание позвоночника, с слегка выгнутой спиной в фазе сбора галопа.
Кинематика ног: 4 тонкие, шарнирные конечности, управляемые обратной кинематикой (IK) для полного вращательного галопа, с легкой, пружинистой постановкой лап.
Вторичное движение: Длинный, пушистый хвост, развевающийся позади, с инерционным волнообразным противовесом (сегменты с пружинным демпфированием), скользящие лопатки, едва заметные подергивания ушей и стабилизированный, направленный вперед взгляд головы.
Стилизация: Богатая рыже-оранжевая шерсть с многослойными краями пучков шерсти и мягким градиентным затенением. Кремово-белая грудь, морда и живот. Черные "чулки" на нижних лапах, черные уши сзади и хвост с белым кончиком. Янтарные глаза с узким зрачком, заостренная морда и тонкие штрихи усов.

Высокодетализированное параллакс-окружение:
Многослойный фон дикой лесолуговой местности в разрешении 1080p: Градиентное небо на рассвете и далекий туманный горизонт с мягкой атмосферной дымкой.
Средний план с процедурными силуэтами сосен и берез и холмами, каждый слой прокручивается с разной скоростью.
Передний план с высокой травой, папоротниками и опавшими листьями, с высокоскоростной системой частиц, генерирующей поднимающиеся листья, грязь и пылевые шлейфы за лапами.

Производительность: Оптимизировано для стабильной работы с частотой 60 кадров в секунду с помощью requestAnimationFrame.

Элементы пользовательского интерфейса отсутствуют.

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