Skip to main content
100%

SVG Fundamentals - Orbiting Planet

✓ Published0🌍 Public
AAngela Kochoska
Last edited Oct 25, 2022
Created on Oct 25, 2022
Forked from HTML Starter

This example demonstrates a simple animated solar system using SVG primitives. A gradient-filled circle represents the sun, while a smaller gradient-filled planet moves along an elliptical orbit path represented by a dashed grey ellipse. The animation is driven by SVG’s built-in `<animate>` elements, which update the planet’s `cx` and `cy` attributes over a five-second loop. Radial and linear gradients define the celestial bodies’ coloring, and the code directly uses React in the parent application, though this bare HTML file relies purely on native SVG and CSS.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes