Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of d3js

✓ Published1🌍 Public
Mmuslimaaliyeva
Last edited Oct 13, 2022
Created on Oct 13, 2022

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of d3js

This example renders an animated face built from SVG primitives, including a yellow circular head with eyes, eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle blinking or surprised expression. The code imports `select` and `arc` from D3 v5, uses `d3.arc()` to define the mouth’s path, and positions all elements relative to a centered `<g>` group. The SVG canvas is 960 by 500 pixels, with a blue stroke on the head and no external data source.

Mmuslimaaliyeva
95% match
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 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.

HHeisenberg
92% match
Loading thumbnail…

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
92% match
Loading thumbnail…

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

This animated SVG face shows a yellow circle with two eyes, eyebrows, and a mouth, and the eyebrows move up and down over time. The code uses D3 v5 to manipulate the DOM, appending SVG shapes and applying a chained `transition().duration(2000).attr('transform', ...)` to animate the eyebrow group’s vertical position. It imports `select` and `arc` from D3 to select the SVG element and generate the mouth’s path with an annular arc geometry.

Nnsatyaprakash22
92% 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
92% match
Loading thumbnail…

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

A cheerful animated face built entirely from D3.js SVG primitives, with eyebrows that raise and lower repeatedly via chained `transition` calls. The code constructs a yellow circle, two eyes, rectangular brows, and a mouth drawn with the `d3.arc` generator, then animates the eyebrow group’s transform over two-second intervals. The example demonstrates basic SVG shape composition and sequential transitions using d3-selection and d3-shape functions.

DDebangshini Bhattacharjee
92% match
Loading thumbnail…

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

A yellow smiley face built with SVG and D3.js v5 demonstrates basic DOM manipulation and animation. The face consists of circles for eyes, rectangles for eyebrows, and a path for the mouth, all positioned using D3's selection and attribute methods. The eyebrows animate upward and back down over two seconds using chained `transition` calls with `duration(2000)`. The code imports `select` and `arc` from D3, uses an SVG canvas of 960x500 pixels, and centers the face with a translated group element.

FFarhaan Qazi
91% match