Skip to main content
SimilarExport ZIP
100%

Sunset and Sunrise Mountains

✓ Published0🌍 Public
JJohn A. Dodge
Last edited Nov 1, 2025
Created on Nov 1, 2025

This example shows an animated day/night cycle over a mountain landscape, with a sun and moon that alternate positions and colors while the sky and terrain shift between daylight and nighttime palettes. The scene uses SVG gradients and paths to render the terrain, with JavaScript controlling state-based color transitions and toggling animated birds during the day and wolves at night. Static night mode introduces randomized lightning strikes and a flashing white overlay. The code uses DOM manipulation with `getElementById`, `querySelectorAll`, and the Web Animations API pattern of `setTimeout` for timed effects, while sound elements are triggered via HTML5 audio.

AI-generated description

Enhanced Day/Night SVG Animation

This project enhances the original SVG sunset/sunrise animation with additional wildlife elements:

  • Realistic Day/Night Cycle: Extended 30-second animation with proper color transitions
  • Birds: Animated birds flying during daytime with chirping sounds
  • Wolves: Animated wolves traveling at night with howling sounds

Features

  • Sun animation with size and color changes
  • Moon that appears during night
  • Dynamic sky and landscape color transitions
  • Wildlife animations synchronized with day/night cycle
  • Sound effects that change based on time of day

Usage

Open index.html in a browser to view the animation. The birds will be visible during "daytime" portions of the cycle, and wolves during "nighttime".

Audio elements use free sounds from SoundJay.com:

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Dynamic landscape

This SVG scene shows an abstract mountain landscape, where a sun moves vertically behind layered terrain, and animated gradients shift the sky and hills through a day-night cycle. The rendering is built entirely with native SVG elements and animations, using `radialGradient` and `linearGradient` definitions to color the sky and landmasses. A `circle` element animates its `cy` attribute to simulate the sun rising and setting, while `<animate>` tags cycle the stop colors of the sky and foreground gradients over a 15-second loop, creating a dynamic, ambient visual without external libraries.

Ssz2036
82% 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
81% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized mountain landscape, using purely declarative SVG markup. The sky and two layered terrain paths transition through a daily color cycle via `<animate>` elements on radial and linear gradients, while the sun circles vertically between the mountains and horizon. The piece demonstrates core SVG fundamentals—shapes, paths, gradients, and declarative animation—without relying on JavaScript or external libraries, and explicitly defines its geometry and timing in the document itself.

SSimran
80% match
Loading thumbnail…

1_SVG_Fundamentals_Sunrise_Sunset

This animation demonstrates a stylized sunrise and sunset cycle over a two-layer mountain landscape. An SVG `circle` for the sun moves vertically while a `radialGradient` sky background and `linearGradient` landmasses, defined using `stop` elements, synchronize their color shifts through SVG’s `<animate>` tag. The landscape is constructed with cubic and quadratic Bézier curves using the `path` element’s `d` attribute, and the code relies entirely on native SVG and SMIL animation.

DddG12g
80% 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
79% 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
79% match
Loading thumbnail…

SVG Fundamentals Sunset/Sunrise

An animated SVG scene depicts a sunset-to-sunrise cycle through a gradient sky and a moving sun. A radial gradient animates the sky’s color from aliceblue to indigo and back, while the sun’s vertical position oscillates via the `animate` element. Overlapping landscape paths use linear gradients and animated stop colors to shift their appearance, creating a rhythmic transition between day and night. The code relies solely on native SVG and SMIL animations, with no external JavaScript libraries.

DDeepL -B2
79% 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
78% match