Skip to main content
SimilarExport ZIP
100%

Ancient Map of the Celestial Spheres

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 17, 2025
Created on Mar 17, 2025

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.

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
81% 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
78% 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
78% 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
72% 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
72% match
Loading thumbnail…

[huxulm] Solar System

This animated visualization displays the planets of the solar system as colored circles, with relative sizes to scale but distances compressed to fit a single row. Each celestial body appears sequentially with a two-second transition, while its name label fades in beneath it. Built with D3.js, the code uses `selectAll`, `join`, and chained `transition` calls with `easeLinear` to animate circle radii and positions. Data on each object’s radius and distance comes from Wikipedia’s list of gravitationally rounded solar system objects, with Pluto included as a smaller distant body.

HHuxulm
71% 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
70% match
Loading thumbnail…

Solar System

This animated visualization displays the planets of the solar system with relative sizes to scale, positioned along dashed orbit paths with a glowing gradient background. The data comes from Wikipedia’s list of gravitationally rounded objects, and the animation uses D3’s `transition` and `easeLinear` to sequentially grow each circle and fade in its label. The code also applies SVG filters, such as `feGaussianBlur` for the glow effect, and custom styling for text shadows.

Nnishanththouta16@gmail.com
70% match