Skip to main content
SimilarExport ZIP
100%

Solar System

✓ Published1🌍 Public
CCurran Kelleher
Last edited Oct 7, 2020
Created on Oct 7, 2020
Forked from Solar System

This example animates a stylized, not-to-scale model of the solar system, including the planets and Pluto, orbiting a central sun against a background image of space. Each planet moves along a circular path defined by SVG path elements, with its speed and orbital radius hardcoded. The visualization uses React for component structure and D3.js for generating the circular arc paths, while SVG’s `animateMotion` drives the continuous orbital animation.

AI-generated description

This is a sample model of the solar system Not to scale. Image taken from here

The 5th ring represents the asteroid belt. There are This image depicts the solar system(including Pluto).

MIT Licensed

Similar vizzes

Loading thumbnail…

Solar System

A stylized, not-to-scale model of the solar system displays the sun and nine planets, including Pluto, on dark background with faint orbital rings. Planet sizes and orbital radii are fixed, but their revolution speeds vary by distance from the sun, with the closest planets moving fastest. The visualization is rendered as an SVG using React and D3 v6, where each planet is a circle with an SVG `<animateMotion>` element that follows a precomputed circular path. A static background image sourced from Khan Academy is included for context, while all orbital motion is driven purely through SVG animation rather than D3's simulation APIs.

AArjun Rao
92% match
Loading thumbnail…

Fork of Solar System

This animated solar system model displays the orbital paths of the planets, including Pluto, orbiting a central sun against a background image of the solar system. Each planet moves along its own circular orbit at varying speeds, with the 5th ring representing the asteroid belt. The visualization uses React components with SVG elements, and D3.js version 6 for motion animation via `animateMotion` paths, creating a simplified, not-to-scale representation of planetary movement.

MMartin Masevski
87% match
Loading thumbnail…

Solar System

The animation displays the solar system with the Sun and planets to scale, mapping orbital distances and radii onto spatial positions for circles and labels. Built with D3.js, it uses selections and transitions with easeLinear to animate planet appearance and label opacity over staged delays. The code defines celestial body data (including Pluto) and renders it via SVG circles and text, with the Sun and each planet uniquely colored.

SSubhendu Karmakar
85% match
Loading thumbnail…

Solar System

This animated visualization depicts the planets of the Solar System with accurately scaled relative sizes, though distances are compressed for display. Entering circles and labels animate outward from a central sun using D3 transitions with staggered delays. The code employs d3.select, transition, and easeLinear to orchestrate the choreography, with each planet’s radius proportional to its real-world value. Data on planetary radii comes from Wikipedia’s list of gravitationally rounded objects. The visualization runs in a black-background SVG canvas, highlighting the scale differences between bodies like Jupiter and Pluto.

CCurran Kelleher
85% match
Loading thumbnail…

Solar System

This animated visualization depicts the solar system’s planets orbiting the sun, with each celestial body shown as a circle scaled by its relative radius and positioned by its distance in astronomical units. Planet names appear as labels below their circles. The animation uses D3 transitions to sequentially grow each circle and fade in its label, then smoothly updates positions and sizes. The code leverages D3 v7’s `select`, `transition`, and `easeLinear` APIs, with a custom data array containing each planet’s distance, radius, and color.

Pperez.h89@gmail.com
84% match
Loading thumbnail…

SVG Fundamentals - Orbiting Planet

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.

AAngela Kochoska
83% match
Loading thumbnail…

Fork of Solar System

A solar system visualization animates the planets orbiting outward from a fixed Sun, with each planet's distance and radius scaled from astronomical units. Circles and text labels fade in sequentially from the Sun outward, then snap to new positions on any update, while exits shrink and disappear. The D3 code uses data joins with `transition()` and `easeLinear`, mapping planetary data to SVG `circle` and `text` elements with hardcoded color fills and label offsets.

Hhunsingeruk@gmail.com
82% match
Loading thumbnail…

Solar System

This animated visualization displays the planets of the solar system with their relative sizes to scale, though distances are not proportional. Circles and labels for each celestial body appear sequentially and transition smoothly across the black canvas. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate circle radii, positions, and label opacity. Planet data, including names, distances, and radii, comes from Wikipedia’s list of gravitationally rounded objects. The Sun is depicted largest in yellow, followed by the eight planets and Pluto, each with a distinct fill color.

Mmelissastrong89@gmail.com
81% match