Fork of Rising-Setting Sun

100%

Fork of Rising-Setting Sun

✓ Published0🌍 Public

Last edited Aug 10, 2023

Created on Aug 10, 2023

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.

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

87% match

Loading thumbnail…

Fork of Adil-sunRise-svg

A looping animated sunrise and sunset scene rendered entirely as a static SVG with embedded SMIL animations. The sky gradient cycles between aliceblue and indigo, while the sun’s vertical position oscillates via an `animate` element on its `cy` attribute. Two overlapping landscape paths use `linearGradient` fills that shift color in sync with the 15-second cycle. The visualization relies on native SVG `<radialGradient>`, `<linearGradient>`, and `<animate>` features without external JavaScript libraries, and the landscape shapes are hand-coded path data.

IIndranil Biswas

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

86% match

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a day-night transition, animating a sun descending and rising over layered mountain silhouettes. The scene uses radial and linear gradients whose colors oscillate between aliceblue and indigo or steelblue, driven by SMIL `<animate>` elements on the gradient stops and the sun’s vertical position. The three mountain paths are drawn with static `d` attributes and filled with the animated gradients, producing a minimalist sunrise-to-sunset effect entirely through declarative SVG animations.

MMarcus Vinicius da Silveira Richa

86% match

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape practice

This animated SVG landscape depicts a stylized sunrise and sunset cycle over layered mountain silhouettes. The sky backdrop and terrain use radial and linear gradients, while a circle representing the sun animates its vertical position. SVG `<animate>` elements continuously shift gradient stop colors between aliceblue and steelblue, and the sun’s `cy` attribute moves from 250px to 350px and back, simulating a day-night loop. The scene combines three distinct path shapes filled with gradient definitions to create depth.

NNyashaBradleymhepo

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

86% match

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape

A dynamic SVG landscape depicts a stylized sun and layered mountains that transition through a day-night cycle. The code uses SVG gradients (`radialGradient`, `linearGradient`), animated `stop-color` values, and an animated `circle` element's `cy` attribute via the `<animate>` tag. The scene comprises three overlapping path-based terrain layers, with colors shifting between aliceblue, steelblue, and indigo over a 15-second loop. The rendering approach is pure SVG with declarative SMIL animations for both the sun’s movement and the gradient color changes.

Aastrologyhesitant

85% match

Loading thumbnail…

Fork of Rising-Setting Sun

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.

Ppraveennayak1702@gmail.com

85% match