Skip to main content
SimilarExport ZIP
100%

Fork of SVG Fundamentals

✓ Published0🌍 Public
AARQz1947
Last edited Jul 2, 2023
Created on Jun 25, 2023
Forked from 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.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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

Fork of Exercise 1: SVG Fundamentals forked

An animated sunrise and sunset scene rendered entirely with SVG. A radial gradient fills the sky with color that shifts from aliceblue to indigo, while a sun circle moves vertically through the frame using the SVG `<animate>` element. Two curved landscape paths use linear gradients that also animate their color stops, transitioning from aliceblue to midnightblue. The example demonstrates SVG fundamentals, including gradients, paths, and declarative animation, with all motion driven by the `attributeName` and `values` attributes.

RRifat Shadman
79% match
Loading thumbnail…

Fork: SVG Fundamentals

This example presents a minimalist animated landscape of rolling hills beneath a glowing sun. It demonstrates the use of raw SVG elements—including `<rect>`, `<circle>`, and `<path>`—to construct the scene. Gradients defined within `<defs>` create the sky and terrain coloring. The animation relies on SMIL `<animate>` tags to cycle the sun's position and smoothly shift gradient stop colors between palettes, suggesting a slow transition from day to night.

BBaffling Science
79% 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
78% match
Loading thumbnail…

Fork of Fork of SVG Fundamentals

A dynamic SVG landscape demonstrates fundamental shapes, gradients, and animation using native SMIL animations and CSS transitions. The main scene features an animated radial gradient sky, a pulsing sun moving via the `animate` element, and layered landscape paths filled with linear gradients. A second view shows interactive SVG primitives—including circles, rectangles, lines, and curved paths—with hover effects that scale elements and change fill colors. The work relies solely on standard SVG features without external libraries, rendering entirely through the browser's SVG engine.

Ccssergio
78% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and their interactive behavior. Static geometry appears first, including circles, rectangles, lines, and paths with varied fills and strokes, while CSS transitions animate rectangle properties on hover. The visualization then explores advanced SVG features using embedded animations and gradients. A radial gradient defines a sun-like circle with an animated vertical position, while linear gradients fill layered landscape paths. The code also includes a path with an arc and quadratic curve, plus an incomplete gradient definition referencing a missing `sky-gradient` ID. SVG styling uses CSS selectors for shape customization and hover effects.

Ccssergio
77% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG fundamentals using a series of concentric circles in grey, gold, and silver, accompanied by two curved paths animated with changing opacity. The static circles establish the visual structure, while the paths use SVG `<animate>` elements with `keyTimes` and `values` to create a pulsing effect over a 10-second loop. The code relies on native SVG rendering, with the animation controlled declaratively through SMIL. An inline JavaScript `console.log` shows the integration of basic scripting into the HTML page.

CCurran Kelleher
77% match