Exercise 1: SVG Fundamentals

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.

Fork of Exercise 1: SVG Fundamentals

Using only SVG, this visualization depicts a stylized sunrise and sunset over a layered, rolling landscape. Animated radial and linear gradients shift the sky through aliceblue, steelblue, indigo, and midnightblue tones over a 15-second cycle, while a `<circle>` sun moves vertically via SMIL `<animate>` tags. Two cubic Bézier `<path>` elements form the terrain, each filled with animated linear gradients that synchronize with the sky. The code directly embeds all timing and color keyframes in the SVG markup, relying on native SMIL animation rather than JavaScript libraries.

TTian1398

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

Fork of Exercise 1: SVG Fundamentals

A minimalist sunrise-and-sunset scene animates continuously in pure SVG. A radial sky gradient shifts from aliceblue to indigo, while two layered landscape paths alternate their linear gradient stops over a 15-second cycle. The sun, a circle, moves vertically via an `<animate>` element on its `cy` attribute. No JavaScript libraries are used; the visualization relies entirely on native SVG SMIL animations and gradient definitions, with styling handled by a linked stylesheet.

EEevikettu

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

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a stylized sunrise and sunset over a layered landscape. It uses an HTML `<svg>` element with CSS gradients and SVG `<animate>` tags to cycle the sky from aliceblue to indigo, move the sun downward, and shift the horizon colors over a 15-second loop. The two overlapping landscape paths use quadratic and cubic Bézier curves, filled with `radialGradient` and `linearGradient` definitions. All rendering is done directly through the SVG API, with no external JavaScript libraries.

Mmfgok

Fork of Exercise 1: SVG Fundamentals

This visualization animates a sunrise and sunset over a layered mountain landscape using only SVG elements and SMIL animations. A sky gradient transitions from aliceblue to indigo as a sun circle moves downward and back, while two terrain paths with linear gradients shift color to simulate changing light. The scene uses inline `<animate>` tags within SVG `radialGradient` and `linearGradient` definitions to cycle colors and the sun’s `cy` position over 15-second loops. No JavaScript or D3 is involved; rendering relies entirely on native SVG markup.

BbeauMarko

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