Sunset on Fundy

100%

Sunset on Fundy

✓ Published1🌍 Public

Last edited Feb 1, 2025

Created on Jan 22, 2025

An animated sunset scene shows the sun descending toward the sea, with the sky cycling through warm and dark color phases. The SVG uses `radialGradient` defs for both sky and sea, while `<animate>` tags on the sun's `cy` and `fill` attributes, along with similar animations on mountain, sand, and sea paths, create the looping 15-second transition. The landscape layers render as vector paths with fill colors that morph between light and dark states.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

85% match

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

84% match

Loading thumbnail…

SVG Fundamentals sunset fork

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.

Cchippyrich

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

82% match

Loading thumbnail…

1_SVG_Fundamentals_Sunrise_Sunset

This animation demonstrates a stylized sunrise and sunset cycle over a two-layer mountain landscape. An SVG `circle` for the sun moves vertically while a `radialGradient` sky background and `linearGradient` landmasses, defined using `stop` elements, synchronize their color shifts through SVG’s `<animate>` tag. The landscape is constructed with cubic and quadratic Bézier curves using the `path` element’s `d` attribute, and the code relies entirely on native SVG and SMIL animation.

DddG12g

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

82% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunset landscape with a gradient sky, a glowing sun, and two layers of rolling hills. The scene conveys a rhythmic day-to-night transition through the sky’s shifting colors and the sun’s vertical movement. It is built using raw SVG elements—including `rect`, `circle`, and `path`—with fill gradients defined in `<defs>`. The animation relies on inline SVG `<animate>` elements, which change the sun’s `cy` coordinate and alter gradient stop colors over time, producing a pulsating, cyclical visual effect without any JavaScript libraries.

Ssirenajbpearl@gmail.com

82% match

Loading thumbnail…

Fork of SVG Fundamentals Sunset/Sunrise

This example depicts an animated sunset and sunrise scene using a full-width SVG canvas. The visualization shows a glowing yellow sun that moves vertically against a backdrop of layered, undulating landscapes, creating a cyclical day-to-night transition. The animation is driven by SVG native `<animate>` elements, which modulate the sun’s vertical position and adjust the gradient colors of the sky and terrain over a 15-second loop. The scene is constructed with `<radialGradient>` and `<linearGradient>` definitions, with complex landscape shapes formed by SVG `<path>` elements.

AAkash Santosh Kuskar

81% match