Skip to main content
SimilarExport ZIP
100%

Fork of Meduri Sai Krishna | Creating a Scene

✓ Published0🌍 Public
Mmedurisk7@gmail.com
Last edited Feb 27, 2024
Created on Feb 27, 2024

This example shows a static natural landscape with a sky, sun, mountains, grass, a lake, a tree, and two stick figures, all drawn with SVG shapes. It also layers an animated smiling face on top using D3.js, where the eyebrows move up and down via chained transitions. The visualization pairs declarative SVG markup with D3’s selection and transition API to animate the face, while the surrounding scene remains static. The code uses `d3.select`, `transition.duration`, and `arc()` to construct and animate the facial features. The scene serves as a playful demonstration of combining hand-coded SVG with D3's data-joining and animation capabilities.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Meduri Sai Krishna | Creating a Scene

This example uses D3.js to construct an animated SVG scene of a face. The visualization first renders the static elements—a sky, sun, mountains, grass, lake, and trees—directly in the HTML. It then layers a separate, animated face built with D3 selections, using the `arc` generator for the mouth and chained transitions to raise and lower the eyebrows. The scene draws entirely from hardcoded SVG shapes rather than external data.

Mmedurisk7@gmail.com
91% match
Loading thumbnail…

fork creata face

A cartoon landscape scene is drawn using a mix of static SVG elements and D3.js API calls. The visualization shows a yellow smiley face, complete with eyes, a brown house with a roof, door, and windows, plus palm trees, clouds, a sun, and a fence. The code uses D3 selections to append and style each shape, leveraging SVG primitives like circles, rectangles, polygons, lines, and a path generated with `d3.line()` and `curveBasisClosed` for the clouds. The scene is rendered in React and using vanilla SVG markup.

Mmogantirudhrani@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example animates a sunrise scene with a rising sun, sun spikes, and mountains, rendered as SVG shapes. It shows how D3.js can build and animate graphical elements, with the sky color interpolating from light blue to orange as the sun moves. The code uses D3 v7 selections and the `interpolate` API to transition colors, while `requestAnimationFrame` drives the animation loop. The scene includes static mountain polygons and dynamically updated sun and line elements, all defined in D3 code.

Ppeddubalaji@gmail.com
79% match
Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example animates a sunrise scene built with D3 v7, showing a sun rising over mountains while the sky transitions from light blue to orange. The visualization renders SVG shapes—a sky rectangle, a sun with radiating spikes, and three triangular mountains—using D3 selections and attribute setters. Animation is driven by `requestAnimationFrame`, updating the sun’s position and interpolating the sky color via `d3.interpolate`. The code imports D3 from UNPKG and demonstrates local ES6 module usage, though the script is loaded directly. The scene focuses on simple geometric composition and smooth color blending rather than data-driven elements.

Ppeddubalaji@gmail.com
78% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example shows an animated sunrise scene built with D3.js, transitioning the sky from light blue to orange while a sun rises over mountains. It demonstrates D3’s ability to manipulate SVG elements, using `d3.select` to append and update shapes like rectangles, circles, lines, and polygons. The animation uses `requestAnimationFrame` to move the sun and interpolate colors via `d3.interpolate`, creating a smooth gradient effect. The rendering approach is purely SVG-based, with no external data source.

Ppeddubalaji@gmail.com
78% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example renders a smiling cartoon face as a static SVG scene, but adds a looping animation that moves the eyebrows up and down over time. The face is constructed using D3.js primitives: a yellow circle for the head, smaller circles for the eyes, rectangles for the brows, and a path generated with `d3.arc` to form the mouth. The code uses D3 v5’s selection and transition API to animate the eyebrow group’s transform attribute, creating a simple, expressive effect.

SSaiSree0122
77% match
Loading thumbnail…

Fork of jayasaireddy santimalla

This example shows a landscape scene with a sky, sun, mountain, river, trees, and birds, all rendered as SVG shapes. The D3.js library v6 is loaded via UNPKG, and the code uses D3 methods like `select` to target the SVG element and `append` with `.attr` to add and style the shapes. It draws the sun as a circle, the mountain as a polygon, and the river as a path with a quadratic Bezier curve, while trees and birds are generated by custom functions.

JJayaSaiReddySantimalla@my.unt.edu
77% match
Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals Sunset/Sunrise

A simple animated SVG scene depicts a sunset-sunrise cycle over a stylized landscape. The visualization uses native SVG elements, including `<rect>`, `<circle>`, and `<path>` shapes, to render the sky, sun, and three layers of terrain. Animation is driven by SVG `<animate>` tags, which continuously cycle the sun's vertical position and the gradient colors of the sky and land, creating a looping day-to-night transition. The scene relies on radial and linear gradient definitions within `<defs>` to shade the elements.

Rraturi22@gmail.com
77% match