Fork of Making a face

100%

Fork of Making a face

✓ Published0🌍 Public

Last edited Sep 22, 2023

Created on Sep 22, 2023

This example animates a simple cartoon face built entirely from SVG shapes. A green circle serves as the head, with two black circles for eyes, a dark arc for the mouth, and two rectangles for eyebrows. The eyebrows move up and down repeatedly in a looping animation using chained `transition().duration()` calls. The visualization is constructed with D3 v7, using `select` to target the SVG, `arc()` to generate the mouth path, and SVG primitives like `circle` and `rect`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3-1: Making a face

This visualization assembles a cartoon face from basic SVG shapes, showing a yellow circle head, blue eyes, and an arc-based mouth against a white background. The eyebrows animate by moving upward over two seconds, then returning to their original position, cycling through this motion once. Built with D3 v7, the code uses `d3.select` to target the SVG element, `d3.arc` for the mouth path, and chained `transition().duration()` calls to animate the rectangles. Dimensions are extracted from the SVG attributes, and all shapes are positioned relative to the center of the 960×500 canvas.

DDineshanth123

90% match

Loading thumbnail…

Making a face

This example uses D3 v7 to construct a cartoon-like face from scratch. The visualization draws a green circle as the head, then adds black circles for eyes and a curved path, created with the `d3.arc` API, for the mouth. Two rectangles serve as eyebrows, which animate vertically using `transition` methods, moving up and then back down over two seconds each. The code demonstrates SVG shape creation and grouping, using D3's `select` to target the SVG element and `attr` to set positions and dimensions for each facial feature.

Nnishanthh19

90% match

Loading thumbnail…

Fork of Lets Make a Face

This example animates a simple cartoon face built from SVG shapes. It first draws a white rounded rectangle as the face’s body, and includes commented-out code for eyes, eyebrows, and a mouth that would use D3 transitions to move and resize features over time. The working code uses D3 v7’s `select` and `arc` functions, appending SVG elements via `g` and `rect`, with `title` elements for tooltips. The page loads D3 from a CDN and runs the visualization inside a fixed 960×500 SVG canvas.

Aantoniojl-kemaro

90% match

Loading thumbnail…

Fork of D3-1: Making a face

This example uses D3 v7 to construct a simple cartoon face from SVG primitives. A yellow circle forms the head, two blue circles become the eyes, a path drawn with the `d3.arc` function creates the mouth, and two rectangles serve as eyebrows. The eyebrows animate repeatedly via chained `transition().duration(2000).attr()` calls, moving them up and down over time. The code demonstrates core D3 operations like `select`, `append`, and `attr` to build and manipulate SVG elements directly.

HHari Prashath

90% match

Loading thumbnail…

Fork of D3-1: Making a face

A cartoon face is rendered in SVG using D3 v7, with a yellow circular head, blue eyes, and a black-outlined arc for the mouth. The code builds the face by appending SVG elements via `d3.select`, `append`, and `attr`, and defines the mouth’s path using the `arc` generator from D3’s shape module. Both rectangular eyebrows animate up and down over four seconds using chained `transition().duration()` calls, showing how D3 handles simple sequential motion. No external data is used; the visualization is purely code-driven geometry.

GGokulaKrishnanCoder

90% match

Loading thumbnail…

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

A D3.js animation builds a simple face from SVG primitives, with two green and orange concentric circles for the head, two circles for the eyes, and two rectangles as eyebrows. The eyebrows bounce vertically over four seconds via chained `transition().attr()` calls, while a path created with the `arc` generator forms a static mouth. The example demonstrates fundamental DOM manipulation through `select` and `append`, using D3 v5 to target an SVG element defined in the HTML.

NNavaneeth-Ragi

90% match

Loading thumbnail…

Fork of Lets make a face with D3 js!

This example animates a simple cartoon face made of SVG shapes, including a yellow circle head, eyes, eyebrows, and a mouth drawn with an arc. The eyebrows move up and down repeatedly using chained D3 transitions that modify their transform attribute over two-second intervals. The visualization uses D3 v6 selection methods like `select` and `append`, along with the `arc` generator for the mouth path, all rendered inside a React project on a 960×500 SVG canvas.

KK V VINITHA

90% match

Loading thumbnail…

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

This example draws a cartoon face in SVG using D3 version 5. It builds the head, eyes, eyebrows, and mouth from primitive shapes, positioning them with coordinate math and an SVG transform. The code uses D3’s `select` to target the element, `arc` to generate the mouth path, and a chained `transition()` call to animate the eyebrows up and down over two seconds. A yellow circle, black eye circles, and gray eyebrow rectangles are styled via attributes.

Jjlspangl

89% match