Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals forked

✓ Published0🌍 Public
RRifat Shadman
Last edited Nov 2, 2022
Created on Nov 2, 2022

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.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example renders an animated sunrise and sunset scene using SVG. A radial gradient sky backdrop shifts from aliceblue to indigo, while a circle representing the sun moves vertically via SVG `<animate>` elements. Two layered landscape paths use linear gradients that also transition colors, creating a day-to-night cycle. The visualization relies solely on native SVG animation and gradient APIs, with no JavaScript libraries or data sources involved.

FFouzia A.
95% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a stylized sunrise and sunset over a layered landscape. It uses an HTML `<svg>` element with CSS gradients and SVG `<animate>` tags to cycle the sky from aliceblue to indigo, move the sun downward, and shift the horizon colors over a 15-second loop. The two overlapping landscape paths use quadratic and cubic Bézier curves, filled with `radialGradient` and `linearGradient` definitions. All rendering is done directly through the SVG API, with no external JavaScript libraries.

Mmfgok
94% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise/sunset cycle over layered mountain landscapes, rendered as a full-screen SVG scene. The sky shifts through aliceblue, indigo, and steelblue while the sun rises and falls along a vertical path, animating continuously. The scene uses the SVG `<radialGradient>` and `<linearGradient>` definitions with `<animate>` elements to transition gradient stops and the sun’s `cy` attribute. Two `<path>` shapes fill with distinct gradients to create depth, all drawn directly in the markup without additional JavaScript libraries.

Mmontanoj96
94% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A self-contained SVG scene depicts a stylized sunrise and sunset over layered terrain, using only HTML, CSS, and native SVG elements without JavaScript libraries. The code applies animated radial and linear gradients to color the sky and two overlapping landscape paths, while a circle animates its vertical position to simulate the sun descending and rising. The animation repeats indefinitely over 15 seconds, cycling the sky and land gradient stops between aliceblue and steelblue. This example demonstrates fundamental SVG animation techniques through the `<animate>` element and gradient definitions, with no external data or rendering frameworks.

AAshtone Onyango
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals - Sunrise

An animated sunrise and sunset scene in pure SVG. The sky’s radial gradient and the two layered landscape paths shift from aliceblue to indigo and steelblue, while a yellow sun circle moves vertically between 250px and 350px using `<animate>`. The gradients use `<stop>` elements with `attributeName` animations, and the land paths are drawn with cubic and quadratic Bézier curves. The composition cycles indefinitely over 15 seconds, simulating a day-night transition.

MMartin
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for a gradually shifting sky and linear gradients for undulating terrain. The sunset is depicted with a static circle representing the sun, which animates its vertical position, moving downward and then back upward. The code defines these gradients within SVG `<defs>` elements and uses `<animate>` tags for color transitions and sun movement, with paths forming two landscape layers.

Aape-ape-ape
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A self-contained SVG scene depicts a sunrise and sunset cycle over a stylized landscape. A radial gradient animates the sky from aliceblue to indigo, while a circle representing the sun moves downward and back using an `<animate>` element. Two layered landscapes use linear gradients and `<path>` elements with quadratic and cubic Bézier curves, with gradient stops that shift color over time. The visualization relies entirely on native SVG and SMIL animations, with no JavaScript libraries or data sources involved.

RRakesh Mahendran
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG sunrise and sunset scene uses a radial gradient for the sky and linear gradients for two layered mountain ranges. The sun, a circle, moves vertically via an SVG `<animate>` element, while gradient stops also change color over a 15-second cycle. This example demonstrates fundamental SVG shapes, paths, and declarative animation without any JavaScript libraries.

JJoe
93% match