Skip to main content
SimilarExport ZIP
100%

Fork of Fork of d3js

✓ Published0🌍 Public
HHeisenberg
Last edited Sep 20, 2022
Created on Sep 20, 2022
Forked from Fork of d3js

A cheerful yellow face with black-outlined features is rendered as an SVG in D3 v5. The animation lifts the rectangular eyebrows upward and then returns them to their original position over a four-second cycle, using chained `transition()` calls on a grouped element. The face is composed of circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth, all centered within a fixed 960x500 SVG viewport.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of d3js

A yellow circle face with eyes, eyebrows, and a mouth rendered in SVG animates as the eyebrows move upward and then back down. Built with d3.js v5, the example uses `select` and `arc` to construct the facial features, while `transition().duration()` drives the eyebrow motion. The SVG canvas is 960 by 500 pixels, with elements positioned via transform attributes and styled through a linked CSS file.

FFarhodXoliyarov
93% match
Loading thumbnail…

Fork of Fork of Fork of d3js

A smiling yellow face with blue eyes and eyebrows sits centered in an SVG canvas, built using D3 v5 selections and the `arc` helper. The eyebrows animate upward and back down over two seconds via chained `transition` calls, while the mouth is drawn as a half-circle arc. The example demonstrates basic SVG shape composition, coordinate transforms, and timed animations using D3’s selection framework.

Mmuslimaaliyeva
92% match
Loading thumbnail…

Fork of d3js

This example shows a stylized yellow face with eyes, eyebrows, and a mouth rendered as SVG shapes inside a 960-by-500 viewport. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, while the mouth is drawn with `d3.arc()` using specified inner and outer radii and angle spans. The code imports `select` and `arc` from D3 v5, positions elements via `attr('transform')` with translations, and applies CSS styles from an external stylesheet. The face centers on a circle with black stroke, and all elements are grouped under a translated `<g>` container.

HHeisenberg
92% match
Loading thumbnail…

Fork of d3js

This example shows a stylized yellow face with eyes, eyebrows, and a mouth rendered as SVG shapes inside a 960-by-500 viewport. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, while the mouth is drawn with `d3.arc()` using specified inner and outer radii and angle spans. The code imports `select` and `arc` from D3 v5, positions elements via `attr('transform')` with translations, and applies CSS styles from an external stylesheet. The face centers on a circle with black stroke, and all elements are grouped under a translated `<g>` container.

HHeisenberg
92% match
Loading thumbnail…

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

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

SSANEEM MOHAMMAD
92% match
Loading thumbnail…

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

A friendly yellow face with black-outlined features appears in the center of an SVG canvas. Built directly with D3 v7, the visualization constructs the face from basic geometric primitives: a circle for the head, two circles for eyes, rectangular eyebrows, and a path for the mouth. The code demonstrates D3's select, append, and arc APIs, alongside a D3 transition that animates the eyebrows downward and back over four seconds, creating a subtle blinking or eyebrow-raising effect. The example showcases importing local modules and loading D3 via UNPKG.

SSilverOwl1112
91% match
Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509
91% match
Loading thumbnail…

Fork of Create a face with d3.js!

A yellow SVG face with black-outlined eyes, eyebrows, and a smile is centered in a 960×500 viewport. D3 v7 draws the circular head and features using `selection.attr` and the `arc` generator for the mouth. The eyebrows animate vertically through chained `transition` calls with `duration(2000)`, moving down 50 pixels and back, demonstrating two-way motion sequencing.

SSilverOwl1112
91% match