Fork of Rising-Setting Sun

100%

Fork of Rising-Setting Sun

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

This example, titled "Fork of Rising-Setting Sun," is a fully self-contained SVG animation that depicts a dynamic landscape with a sun, rolling hills, a river, trees, ducks, birds, and an airplane, all set against a sky that cycles through colors. The scene's gradients, including the sky and land, animate their color stops over a 15-second loop, while the sun, ducks, birds, and airplane follow predefined motion paths using SVG's `<animateMotion>` and `<mpath>` elements. The artwork is built entirely with basic SVG shapes and paths, with no external JavaScript libraries, and is rendered directly in the browser via inline SVG markup, as shown in the provided `index.html` file.

AI-generated description

Taken from Adil [https://vizhub.com/adilzeshan/879aef8e71cc4e448331cea1d6432752?edit=files&file=index.html]

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Adil-sunRise-svg

This example shows an animated sunrise over a stylized landscape, using layered SVG paths and gradients to create a dynamic sky and terrain. The code relies on SVG’s native `<radialGradient>` and `<linearGradient>` elements, along with `<animate>` tags to cycle colors and sun position over 10- and 15-second intervals. Two bezier curve paths render the foreground hills, while a circle represents the sun, moving vertically across the scene. The piece is a self-contained HTML document, using no external JavaScript libraries, and is rendered entirely through SVG markup.

Ppeter.sime@gmail.com

85% match

Loading thumbnail…

Fork of Rising-Setting Sun

A sunrise and sunset cycle plays out over two abstract, curved landscapes. A single circle represents the sun, moving up and down via SVG `<animate>` tags, while the sky and land gradients shift through a palette of aliceblue, indigo, and steelblue. The scene uses pure inline SVG with `<radialGradient>` and `<linearGradient>` definitions, alongside animated `stop-color` properties, to create the changing ambient light. The landscapes are drawn as filled `<path>` elements.

RRutger Jansen

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

85% match

Loading thumbnail…

Fork of Fork of Adil-sunRise-svg

This SVG animation depicts a stylized sunrise over layered landscapes. A gradient-filled sky transitions from aliceblue to indigo, while a sun circle moves down and back up using an `<animate>` element. Three overlapping paths create rolling hills, each filled with animated linear or radial gradients that shift colors over 15 seconds. The scene leverages declarative SMIL animations within raw SVG markup, with no JavaScript libraries, and cycles an infinite sunrise-to-night color loop.

Rraturi22@gmail.com

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

84% match

Loading thumbnail…

Fork of SVG Playing Around and Studying

This piece shows an idyllic, animated landscape with a gradient sky, a sun, layered land, trees, and three birds. It is constructed entirely with procedural SVG elements, including paths and groups, and uses CSS animations. The scene is generated dynamically through a custom JavaScript engine that creates SVG elements via `document.createElementNS`, with the sky’s color shifts driven by SVG `<animate>` elements. The birds and landforms are built from static path data, while the sun appears as a moving element with a radial gradient fill. The work explores SVG structure and animation.

SSimran

84% match

Loading thumbnail…

Rising-Setting Sun

An animated SVG scene depicts a sun rising and setting over layered landscapes. The circular sun moves vertically along the canvas, and the sky’s radial gradient shifts from light aliceblue to dark indigo, while the two landscape paths use linear gradients that transition from aliceblue to steelblue and midnightblue. These color changes are driven by SMIL `<animate>` elements on the gradient stops and the sun’s `cy` attribute, with repeating 15-second cycles. The artwork is built entirely with raw SVG shapes and gradients, without external JavaScript libraries.

Nnubhatia

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

84% match