Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published3🌍 Public
NNita
Last edited Mar 17, 2025
Created on Mar 17, 2025

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.

AI-generated description

Ancient Solar System Map

This visualization presents the solar system as an ancient astronomical map, featuring:

  • Classical astronomical symbols (☉, ☿, ♀, ⊕, ♂, ♃, ♄, ♅, ♆)
  • Ancient Roman names for the celestial bodies
  • Papyrus/stone tablet styling
  • Traditional numerals (I through VIII)

The visualization includes:

  • The Sun (Helios)
  • Mercury (Mercurius)
  • Venus
  • Earth (Terra)
  • Mars
  • Jupiter (Iupiter)
  • Saturn (Saturnus)
  • Uranus (Caelus)
  • Neptune (Neptunus)

Features:

  • Papyrus texture background
  • Ancient scroll unroll animation
  • Hover effects with symbolic glows
  • Classical astronomical symbols
  • Responsive design
  • Antique styling with Cinzel Decorative font

The visualization uses HTML, CSS, and JavaScript to create an immersive ancient astronomical experience.

MIT Licensed

Similar vizzes

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
93% 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
93% match
Loading thumbnail…

Fork of Fork of HTML Starter

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.

NNita
83% match
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
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
79% match
Loading thumbnail…

Ancient Map of the Celestial Spheres

This visualization presents the solar system as an ancient astronomical map, displaying celestial bodies with classical symbols and Roman names on a papyrus-textured background. The HTML, CSS, and JavaScript render each planet as a stylized circle with hover effects and a scroll unroll animation. It uses the Cinzel Decorative font and CSS gradients with SVG turbulence filters for the papyrus texture, with JavaScript event listeners driving the interactive glow effects.

CCurran Kelleher
78% 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
78% match
Loading thumbnail…

Fork of Solar System

This animated visualization presents the solar system with planets positioned across the screen, scaled proportionally to their actual radii while distances are compressed for clarity. Each celestial body and its label fades in sequentially from the sun outward, using D3’s `transition` and `easeLinear` for smooth motion. The code leverages D3’s data join to bind planetary data from Wikipedia, rendering circles and text elements with `selectAll` and custom transition delays. A black SVG background and distinct fill colors for each planet emphasize the size hierarchy, from Mercury to the sun.

Wwkj0713@gmail.com
77% match