Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals sunset fork

✓ Published1🌍 Public
Cchippyrich
Last edited May 19, 2022
Created on May 19, 2022

A sunset scene rendered entirely in SVG uses gradient-filled shapes for the sky and layered landscapes. A circle representing the sun animates its vertical position, while `<animate>` elements cycle gradient stop colors between aliceblue and indigo over fifteen seconds to simulate dusk. The code defines radial and linear gradients in `<defs>` and applies them to `<rect>` and `<path>` elements, with no external JavaScript libraries.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals Sunset/Sunrise

An animated SVG scene depicts a sunset-to-sunrise cycle through a gradient sky and a moving sun. A radial gradient animates the sky’s color from aliceblue to indigo and back, while the sun’s vertical position oscillates via the `animate` element. Overlapping landscape paths use linear gradients and animated stop colors to shift their appearance, creating a rhythmic transition between day and night. The code relies solely on native SVG and SMIL animations, with no external JavaScript libraries.

DDeepL -B2
92% match
Loading thumbnail…

Fork of SVG Fundamentals sunset fork

This example shows an animated sunset landscape with two layered mountain silhouettes and a large sun descending against a gradient sky. The scene uses SVG elements, including circles, paths, and rectangle shapes, all rendered with radial and linear gradients. Animation comes from SVG’s `<animate>` element, which cycles the sun’s vertical position and smoothly transitions gradient stop colors from aliceblue through indigo and steelblue over a 15-second loop, shifting the mood from daylight to dusk and back.

Rrohanxavier33@gmail.com
91% 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
89% 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
89% match
Loading thumbnail…

Fork of Fork of SVG Fundamentals Sunset/Sunrise

A looping SVG animation depicts a sunset and sunrise over a stylized landscape. The sun moves vertically against a sky that transitions from aliceblue to indigo, while layered green and orange landmasses shift in color. Built with raw SVG elements—including `<radialGradient>`, `<linearGradient>`, `<circle>`, and `<path>`—the scene uses `<animate>` tags to cycle attribute values over 15 seconds, creating a continuous day-night effect.

TTobi Olabode
89% match
Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals Sunset/Sunrise

A simple animated SVG scene depicts a sunset-sunrise cycle over a stylized landscape. The visualization uses native SVG elements, including `<rect>`, `<circle>`, and `<path>` shapes, to render the sky, sun, and three layers of terrain. Animation is driven by SVG `<animate>` tags, which continuously cycle the sun's vertical position and the gradient colors of the sky and land, creating a looping day-to-night transition. The scene relies on radial and linear gradient definitions within `<defs>` to shade the elements.

Rraturi22@gmail.com
89% 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
89% 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
88% match