Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Fundamentals - Orbiting Planet

Public visualization

SVG Fundamentals - Orbiting Planet

0 stars0🌍 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.

Comments

Sign in to join the discussion.

MIT Licensed