Fork of Fork of Exercise 2: SVG Fundamentals

100%

Fork of Fork of Exercise 2: SVG Fundamentals

✓ Published0🌍 Public

Last edited Jun 4, 2021

Created on Jun 4, 2021

Forked from Fork of Exercise 1: SVG Fundamentals

A sunrise and sunset scene depicts hills, trees, and a changing sky. The visualization uses raw SVG elements and paths, defined within a `<symbol>` for trees, and relies on CSS for layout. Gradients are set up in SVG `<defs>` to color the background, while a complex path creates a detailed landscape silhouette. The example demonstrates fundamental SVG construction techniques without additional libraries.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A forked exercise demonstrates sunrise and sunset using SVG. A complex, single-path tree symbol is defined in `<defs>` and rendered within a 960x500 white canvas. The visualization relies on SVG gradients and symbol reuse, with the tree drawn through extensive path data. Styling is controlled via an external stylesheet that hides page overflow. The example focuses on SVG fundamentals, showing how symbols and paths create detailed, scalable graphics without JavaScript libraries.

SS767

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

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

91% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

A fork of an SVG fundamentals exercise depicts an animated sunrise and sunset across a stylized landscape. The visualization uses a radial gradient for the sky and two linear gradients for layered terrain paths, all defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and SMIL `<animate>` tags oscillate its vertical position and the gradient stop colors over a 15-second loop, transitioning from aliceblue to indigo and steelblue to simulate the changing sky. No external JavaScript libraries are used; the rendering relies entirely on native SVG markup.

MMariko Iwata

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

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

90% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows a stylized sunrise/sunset cycle over layered mountain landscapes, rendered as a full-screen SVG scene. The sky shifts through aliceblue, indigo, and steelblue while the sun rises and falls along a vertical path, animating continuously. The scene uses the SVG `<radialGradient>` and `<linearGradient>` definitions with `<animate>` elements to transition gradient stops and the sun’s `cy` attribute. Two `<path>` shapes fill with distinct gradients to create depth, all drawn directly in the markup without additional JavaScript libraries.

Mmontanoj96

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

90% match