Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals

✓ Published0🌍 Public
RRambo Talabong
Last edited Jul 22, 2024
Created on Jul 22, 2024

An animated sunset landscape renders a sun descending over layered terrain. The scene uses SVG gradients that transition through a color cycle, simulating the sky’s shift from day to night. The sun’s downward motion and the gradient’s color changes are driven by SMIL animations, with `animate` elements altering the circle’s `cy` attribute and the gradients’ `stop-color` values. All visuals are constructed with basic SVG shapes and paths, requiring no external libraries.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

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
95% 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
94% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a sunrise and sunset over a stylized landscape. The visualization uses a radial gradient for the sky and linear gradients for two layered terrain paths, which are defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and its vertical position translates via an `<animate>` tag. The code relies on core SVG and SMIL animation APIs, specifically `radialGradient`, `linearGradient`, and `attributeName` for the periodic color and position changes.

Yyfping
94% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG scene depicts a stylized sunset over layered, rolling hills. The sky—a large `<rect>` with a gradient—transitions from aliceblue to indigo over 15 seconds, while a single `<circle>` representing the sun moves downward and back upward along its `cy` attribute. Two landscape `<path>` elements, filled with corresponding `linearGradient`s, also shift their colors in sync. The animation is driven by SMIL `<animate>` elements, not JavaScript or external libraries.

MMunisbek-design
94% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A scenic SVG sunset landscape with layered mountain silhouettes and a slowly descending sun. The visualization uses SVG gradients and SMIL animations, with `<radialGradient>` for the sky and `<linearGradient>`s for the terrain. The sun’s position animates via `<animate>` on its `cy` attribute, while gradient stops cycle through colors over 15 seconds to simulate dusk.

Sshaun
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a stylized sunrise and sunset cycle over rolling hills. The visualization uses a radial gradient for the sky and linear gradients for two landscape layers, all defined within SVG `defs` tags. The sun, a simple circle, moves vertically via an SVG `<animate>` element, while the gradient colors transition to simulate the shifting light. This example demonstrates fundamental SVG animation and gradient techniques without any external libraries.

LLuiz Domingues
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

A scenic sunrise and sunset animation is rendered entirely as an SVG. It depicts a circular sun moving vertically against a dynamically changing sky and layered landscape, with colors transitioning to suggest a day-night cycle. The code uses native SVG elements like `radialGradient`, `linearGradient`, and `path`, along with the SVG `<animate>` API to continuously shift gradient stops and the sun’s `cy` attribute. No external JavaScript libraries are employed; rendering is purely through static SVG markup.

Iinnocent thomas
93% match