Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals

✓ Published0🌍 Public
Ssriramvsharma
Last edited Nov 4, 2021
Created on Mar 14, 2021

This example shows an animated sunrise and sunset scene with a gradient sky, a moving sun, and two layered landscapes. The SVG rendering uses native SMIL animations within the markup, including `<animate>` elements that cycle the sun’s vertical position and animate color stops of radial and linear gradients. The code defines three gradients (`sky-gradient`, `land1-gradient`, `land2-gradient`) and applies them to a rectangle and two path shapes. No external libraries are used; the visualization relies purely on SVG fundamentals and CSS styling for layout.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

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

Fork of Exercise 1: SVG Fundamentals

This example renders an animated sunrise and sunset scene using SVG. A radial gradient sky backdrop shifts from aliceblue to indigo, while a circle representing the sun moves vertically via SVG `<animate>` elements. Two layered landscape paths use linear gradients that also transition colors, creating a day-to-night cycle. The visualization relies solely on native SVG animation and gradient APIs, with no JavaScript libraries or data sources involved.

FFouzia A.
93% 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
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--gradient

This example animates a stylized sunrise and sunset using only SVG and embedded SMIL animations. It uses a `radialGradient` for the sky and two `linearGradient` fills for layered landscape paths, with the sun’s vertical position and gradient stop colors cycling over 15 seconds. The scene relies on `defs`, `animate` elements, and Bézier path curves, with no external JavaScript libraries.

WWeeeLi
93% 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
93% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise and sunset scene. The animation has a sun circle moving vertically across the canvas, and a multi-layered landscape formed by quadratic and cubic Bézier paths. The sky and land use SVG gradients whose colors continuously cycle from light to dark. The implementation relies on SVG's native `<animate>` elements and radial and linear gradients, with no external JavaScript libraries.

YYi Ning
92% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example presents an animated landscape with a sun and layered terrain, all rendered as a single SVG graphic. The scene depicts a day-night cycle through a sky gradient and land gradients that transition colors, while the sun moves down and up again. The visualization is built entirely with SVG fundamentals, using `<svg>` elements, `<radialGradient>` and `<linearGradient>` definitions, and `<path>` shapes for the landscape. Animations are driven by SVG's native `<animate>` element, which modifies the sun's vertical position and the gradient stop colors over a 15-second loop. The data source is the embedded SVG code itself, with no external data files.

Kkoslin
92% match