Interactive Web Animations in the Browser

Thermodynamics of a Four-Stroke Engine
Thermodynamics of a Four-Stroke Engine
Crank mechanism
Crank mechanism
Rotor forces
Rotor forces
PID controller
PID controller
Structure of a coal mine
Structure of a coal mine
Dutch windmill
Dutch windmill
Heat pump
Heat pump
Lift on the wing profile
Lift on the wing profile
Four-Joint Transmission
Four-Joint Transmission
Forces on the wedge
Forces on the wedge
Functional principle of a voltage divider
Functional principle of a voltage divider
Mechanical Work
Mechanical Work
RLC circuits
RLC circuits
Introduction to the Law of Induction
Introduction to the Law of Induction
Transistor characteristic field
Transistor characteristic field
Newcomen's steam engine
Newcomen's steam engine
Charge carrier movement in solar cells
Charge carrier movement in solar cells
Watt's steam engine
Watt's steam engine
Ideal Gas
Ideal Gas
Control of a Four-Stroke Gasoline Engine
Control of a Four-Stroke Gasoline Engine

These animations run directly in your web browser (Chrome, Firefox, Edge or Safari). No download is required. Topics include electrical engineering, mechanics, optics and thermodynamics.

For HD animations optimized for large screens and projectors, see HD Animations. For tips on classroom use, see Information for teachers.

What Are Web Animations?

Web animations are interactive simulations that run entirely inside your browser. They use standard web technologies, so there is nothing to install or update. Simply open the page and start experimenting. Each animation lets you change physical parameters through sliders, buttons or drag-and-drop controls and observe the effects in real time.

Technology Behind the Scenes

The animations are built with SVG.js and PixiJS, two JavaScript libraries that specialize in 2D graphics. SVG.js handles scalable vector graphics, ensuring sharp rendering at any zoom level. PixiJS provides hardware-accelerated rendering for animations that require higher frame rates. Both libraries are open source.