simplex landscape

100%

simplex landscape

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Apr 27, 2016

A dynamic SVG landscape morphs continuously, generated by simplex noise and rendered as an animated terrain of grey land and light blue water. The visualization uses the `simplex-noise.js` library to compute two noise layers—a main landscape and additional details—whose amplitudes and densities are adjustable via a dat.GUI control panel. D3.js (v3.5.5) draws the paths, while a timer updates the horizon each frame, and an optional water level can be displayed or used to filter the terrain.

AI-generated description

Experimenting <a href='https://github.com/jwagner/simplex-noise.js'>simplex-noise.js</a>.

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v3.5.5)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/4289018'>Unknown Pleasures</a>
<a href='https://github.com/jwagner/simplex-noise.js'>simplex-noise.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a sunrise-to-sunset color scheme using animated gradients and moving elements. The visualization embeds `radialGradient` and `linearGradient` definitions with SMIL `<animate>` elements to transition the sky and terrain colors over 15-second intervals, while a circle representing the sun shifts vertically. Three layered mountain paths, constructed from raw coordinate data, use these gradients to create depth as they fill with shifting hues, all rendered directly in SVG without external libraries.

LLouis Astorg

77% match

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

75% match

Loading thumbnail…

SVG Fundamentals Dynamic landscape

An SVG scene depicts a dynamic landscape with a pulsing sky gradient, an animated sun, and layered irregular terrain paths. Color transitions cycle through aliceblue, indigo, red, and steelblue via SVG `<animate>` elements within `radialGradient` and `linearGradient` definitions. The sun’s vertical position oscillates using an animated `cy` attribute. Three closed `<path>` elements, each filled with these moving gradients, form overlapping mountain-like silhouettes against the rectangular backdrop, all rendered in a fixed 960×500 viewport.

Sscxingji

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

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

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

71% match

Loading thumbnail…

Simplex Flurry

Twelve tentacle-like paths radiate from a central point, moving and curling across a canvas with a smooth, fluid motion. The visualization uses a canvas element and the simplex-noise.js library to generate organic, evolving paths. Each tentacle is influenced by the mouse position, which acts as an attractor. The code uses D3.js v4 for interval updates and mouse event handling, while the paths are drawn with semi-transparent strokes that create a fading trail effect. The key technique involves using a tentacle's rank as a third parameter in the noise function to ensure each path diverges from the shared origin.

KKcnarf

71% match

Loading thumbnail…

Simplex Radiations

Animated radial lines bloom outward from a moving center point on a canvas, each shape growing continuously via SimplexNoise. The visualization uses simplex-noise.js to generate smooth, evolving vertex positions in polar coordinates, addressing the challenge of creating seamless noise around the 0 and 2π boundary by blending two noise functions. Rendered with the Canvas 2D API and d3.interval for animation, the radiations follow the mouse cursor while damping their movement, showing how polar-coordinate noise can produce organic, ever-changing geometric forms.

KKcnarf

70% match