Skip to main content
SimilarExport ZIP
100%

Sunrise

✓ Published0🌍 Public
MMaxLiebsch
Last edited Nov 29, 2023
Created on Nov 29, 2023
Forked from HTML Starter

This example uses React to render a stylized sunrise scene in SVG, depicting a glowing sun above layered hills and a dark sea. The sky and sun use linear gradients and blur filters for a soft, luminous effect, while JavaScript generates hundreds of small, randomly positioned circles to suggest sparkling water reflections. A dynamic color palette for the water is defined in code, and the interaction is limited to static, generated elements—no user input or animation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
88% match
Loading thumbnail…

Sunrise

This visualization depicts an animated sunrise scene with a gradient sky transitioning through colors, a moving sun, and layered landscape silhouettes. The SVG markup uses CSS and JavaScript-defined gradients, including radial and linear gradients, to create the sky and terrain. Animation is driven by SVG `<animate>` elements that cycle attribute values over 15-second intervals. The sun’s vertical position, represented by a circle’s `cy` attribute, rises and falls, while sky and land gradient colors shift between light and dark tones.

Sshabdullah05
88% match
Loading thumbnail…

svg with animations

An SVG landscape with animated sky gradients and a drifting sun demonstrates declarative animation within SVG markup. The scene layers two mountain-style paths filled with linear gradients over a radial gradient sky backdrop. CSS and native SVG `<animate>` elements cycle stop-color values over 30 seconds, shifting between aliceblue and steelblue for the landmasses and transitioning the sky to indigo, while the sun’s `cy` attribute oscillates vertically. The React framework hosts the raw SVG, though no JavaScript libraries drive the motion, relying entirely on built-in SVG animation APIs.

IIgorGorin00
78% match
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
77% 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
77% match
Loading thumbnail…

sunrise sunset

An animated SVG landscape depicts a continuous sunrise-sunset cycle over layered hills. A white sun rises and falls between 75% and 50% vertical positions while the sky and land gradients shift between indigo, aliceblue, and steelblue tones over 15 seconds. The scene uses SMIL animations for the sun’s `cy` attribute and gradient stops, with no external JavaScript libraries.

AAlexei Kozhushkov
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shapes—two circles representing a sunrise and sunset—positioned at opposite vertical coordinates within a 200x200 viewport. The yellow sun sits near the bottom while the orange sun appears near the top, using basic `circle` elements with `cx`, `cy`, and `fill` attributes. A large "SVGGGG!" message styled with CSS in a `div` provides visual context. The page uses plain HTML with embedded CSS and JavaScript, rendering everything through static SVG markup without any external libraries or data sources.

Ssreejith-ds
77% match
Loading thumbnail…

Assignment 1(Sunrise)

A stylized SVG sunrise scene depicts a large orange sun with triangular rays above a layered sea of curved blue waves. The illustration uses basic SVG shapes, including circles and paths with quadratic Bézier curves, to create a geometric landscape. The sun is centered at the top, while five rows of overlapping wave forms in varying shades of blue recede toward the bottom of the 800x500 canvas. The code defines each element using SVG `<circle>` and `<path>` elements with explicit fill and stroke attributes.

LlzlazmSylas
77% match