Fork of Fork of Shapes and Colors with SVG and CSS2

100%

Fork of Fork of Shapes and Colors with SVG and CSS2

✓ Published1🌍 Public

Last edited Sep 13, 2024

Created on Sep 13, 2024

Forked from Fork of Shapes and Colors with SVG and CSS

A yellow smiley face with black eyes and an arc-shaped mouth is centered in an SVG canvas. The eyebrows animate upward and back down over four seconds using chained D3 transitions. The code uses d3.select, d3.arc, and transition.attr to build the face from SVG shapes, with static geometry defined in index.js and basic styling in styles.css.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows a yellow smiley face drawn with SVG shapes—circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth—that animates through D3 transitions. The code uses d3 v5’s `select` and `append` methods to build the SVG hierarchy, with `transition()` and `attr` chaining to sequentially move the eyebrows and morph the mouth’s inner radius. The face is centered via a translation on a group element, and the mouth path relies on `d3.arc()` with changing `innerRadius` values. Styling is applied through CSS, while the animation logic is driven entirely by D3’s transition API.

Rrjohnson5016

93% match

Loading thumbnail…

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

A yellow smiley face is drawn in SVG, centered within a 960-by-450 canvas, with eyes, a mouth, and eyebrows that animate upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3.js v5, building the face with `d3.select`, `append`, and the `d3.arc` shape generator for the mouth. The eyebrows’ movement is driven by chained `transition().duration(2000)` calls that change the group’s `transform` attribute. All shapes are plain SVG elements, and the animation relies entirely on D3’s transition system.

SSANEEM MOHAMMAD

91% match

Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT

91% match

Loading thumbnail…

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

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

SSANEEM MOHAMMAD

91% match

Loading thumbnail…

Fork of Smiley face

A yellow smiley face is drawn on an SVG canvas, centered and sized to the viewport. The graphic shows a static face with two black eyes, eyebrows, and a curved mouth, while the eyes transition from their initial state to black over three seconds after a one-second delay. The code uses D3 v6 selections and transitions, including `transition.delay()` and `transition.duration()`, to animate the eye fill colors. The face is constructed with SVG circle, rect, and path elements, using `d3.arc()` for the mouth’s curved shape, all within a centered group.

AArun

91% match

Loading thumbnail…

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

A yellow smiley face drawn with SVG circles and an arc path uses d3.arc to render its mouth and d3.select for DOM manipulation. Two rectangular eyebrows animate upward and back down over four seconds using d3-transition chained calls. The eyes and eyebrows are positioned with fixed pixel offsets within a centered group. The animation loops continuously, demonstrating basic shape creation and transition sequencing in D3 v5.

SShoon-Y

91% match

Loading thumbnail…

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

A yellow smiley face is rendered in SVG using D3.js, with circular eyes and an arc-based mouth. A group containing rectangular eyebrows animates vertically via chained `transition()` calls, moving up and then back down over two two-second intervals. The code uses D3 selections and the `arc` generator from `d3-shape`, with dimensions driven by the SVG's width and height attributes. This example demonstrates fundamental DOM manipulation and animation with D3 v5.

Ssrinivasaraosankula

91% match

Loading thumbnail…

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

A yellow smiley face is drawn with SVG shapes created using D3.js, featuring a circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and animation through chained `transition().duration()` calls that move the eyebrows up and down in a repeating loop. Built with D3 v5, the example imports `select` and `arc` from the D3 module, positions elements using SVG attributes, and runs entirely in the browser with inline JavaScript.

Ssd2beatles

91% match