Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Jan 3, 2023

Created on Jan 2, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals

This SVG example demonstrates a simplified animated solar system, showing nine planets orbiting a glowing central sun on a black background. Each planet moves along its own elliptical path defined by an SVG `<path>` element, with its motion driven by the `animateMotion` and `mpath` APIs. The sun uses a `radialGradient` fill and a `filter` with `feGaussianBlur` to create a pulsing glow effect. The rendering is achieved entirely through raw SVG elements and CSS styling.

AARQz1947

82% 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

81% 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

80% match

Loading thumbnail…

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.

CCurran Kelleher

80% match

Loading thumbnail…

Fork of HTML Starter

A wave-like pattern of 15 circles oscillates across the screen, moving vertically in a sine wave that shifts over time. The visualization uses D3's `select` and `range` functions to generate the data, and the `join` method to bind it to SVG circle elements. Each frame updates the `cx` and `cy` attributes based on the current time value `t`, which increments by 0.01. The animation runs continuously via `setInterval` at 60 frames per second, rendering in an SVG canvas sized to the browser window.

Ffdrigui

80% match

Loading thumbnail…

Solar System Orbits (Fork of Fork of HTML Starter)

This interactive HTML visualization presents the solar system with animated planet orbits around a central sun. Users click a planet to reveal two additional data views: a line chart showing distance from the sun versus average temperature, and a pie chart displaying atmospheric composition percentages for that planet. The orbit diagram uses SVG paths with animated motion along circular trajectories, while the charts are generated programmatically. The line charts employ D3's scaleLinear for axes and a monotone curve line, while the pie charts use the d3.pie layout algorithm with d3.arc for rendering sectors.

JJonas

80% 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

79% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG scene with a large green circle and two smaller unfilled circles positioned symmetrically inside it. The rendering uses raw SVG elements defined directly in the HTML file, with CSS styling for the body and a font-size rule that is not applied to any visible text. JavaScript is not used; the visualization relies solely on static markup and inline SVG attributes for positioning and appearance.

AAdam Idone

79% match