100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 17, 2025

Created on Mar 17, 2025

The visualization displays the Sun and all eight planets of our solar system in orbital order, with each celestial body shown as a colored circle labeled with its name and position. A radial gradient and glow effect distinguish the Sun, while Saturn includes a ring element. The code uses plain HTML, CSS, and JavaScript, with `querySelectorAll` and `addEventListener` to apply a white box-shadow highlight on mouse hover. Planet sizes and colors are hardcoded in CSS to approximate relative proportions rather than accurate scale.

AI-generated description

Solar System Visualization

This visualization shows the Sun and the eight planets of our solar system in order:

The Sun (our star)
Mercury (1)
Venus (2)
Earth (3)
Mars (4)
Jupiter (5)
Saturn (6)
Uranus (7)
Neptune (8)

The celestial bodies are sized roughly proportional to their relative sizes (not to scale).

Each object is represented by:

A colored circle representing the body's appearance
The body's name
Its order from the Sun (except for the Sun itself)

The visualization uses HTML, CSS, and JavaScript. Hover over each celestial body to see a highlight effect. The Sun has a special radial gradient and glow effect to represent its fiery nature.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows the Sun and the eight planets of our solar system arranged in order, with each celestial body represented by a colored circle that is roughly sized proportionally to its actual size. The sizes use absolute pixel values via CSS, ranging from Mercury at 40px to the Sun at 180px, and the Sun features a radial gradient and glow effect. Saturn includes an elliptical ring element layered behind its circle. The page uses plain HTML and CSS with a flexbox layout for the horizontal arrangement, and JavaScript adds a hover effect that applies a white box-shadow to highlight each selected planet.

NNita

95% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This visualization displays the solar system as an ancient astronomical map, presenting the Sun and eight planets with their Roman names, classical astronomical symbols, and traditional numerals on a papyrus-textured background. Each celestial body appears as a circular symbol with hover effects that trigger glowing highlights and scale transformations. The page loads with a scroll unroll animation that transitions the papyrus container from transparent and scaled down to full opacity using CSS transitions, while JavaScript event listeners manage the interactive hover states and the Cinzel Decorative font provides antique styling.

NNita

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

An ancient solar system map renders the Sun and eight planets as classical astronomical symbols on a papyrus-textured background, styled with the Cinzel Decorative font and Roman names like Helios and Terra. The layout uses flexbox for responsive planet placement and CSS gradients for the aged paper effect, while JavaScript adds a scroll-unroll entrance animation and hover glows that shift planet circle backgrounds and box shadows.

NNita

85% match

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization reimagines the solar system as an ancient astronomical map, displaying each planet with its classical symbol (☉, ☿, ♀, ⊕), Roman name, and numeral order on a papyrus-textured background. The page uses CSS gradients and SVG filters to create the aged paper effect, while JavaScript adds a scroll-unroll entrance animation and hover effects that trigger symbolic glows. Google Fonts supplies the Cinzel Decorative typeface to reinforce the antique aesthetic.

NNita

83% match

Loading thumbnail…

Fork of Solar System - Vignesh

A fork of a solar-system visualization renders the Sun and nine planets as gradient-filled circles in black space, with relative sizes to scale but distances compressed. Planet names and distances in astronomical units appear beneath each body. The D3.js code uses `select`, `transition`, and `easeLinear` for animated radius growth, plus `radialGradient` for shading. Randomly placed star circles twinkle, and a zoom transform enables panning. Data comes from Wikipedia’s list of gravitationally rounded solar-system objects.

Vvigneshs1006@gmail.com

83% match

Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets scaled by relative size, while orbital distances are not to scale. Each celestial body appears as a colored circle, with a label beneath it, revealing its name. The animation sequentially grows the Sun and planets into view. The code uses D3’s `select` and `transition` APIs for rendering and animation, with data sourced from Wikipedia’s list of gravitationally rounded objects. The view is built using SVG circles and text elements, styled over a black background.

MMing Li

81% match

Loading thumbnail…

Fork of HTML Starter

This example presents an animated solar system within an SVG canvas, featuring planets as colored circles that orbit along predefined elliptical paths. The visualization uses HTML, CSS, and JavaScript, with SVG’s `animateMotion` and `mpath` elements to drive the orbital motion, referencing named paths for each planet. An image of a solar flare is displayed above the diagram, and the animation loops indefinitely, with varying durations for different celestial bodies.

HHieuVu179

81% match

Loading thumbnail…

Fork of Solar System

This animated visualization displays the planets of the Solar System, with relative sizes scaled proportionally (though distances are not). The Sun and planets appear as solid circles with labels, using data from Wikipedia’s list of gravitationally rounded objects. The code leverages D3’s `select`, `transition`, and `easeLinear` to animate the circles growing and fading in sequence. Each planet’s radius and position derive from the imported data array, with SVG circles and text elements styled in black space with white labels.

22005ckv@gmail.com

81% match