Skip to main content
SimilarExport ZIP
100%

Lets make a face

✓ Published0🌍 Public
AAgitechavids Technologies Private Limited
Last edited May 19, 2020
Created on May 19, 2020
Forked from Lets make a face

This example builds a cartoon face from basic SVG shapes—a yellow circle for the head, two black eyes, rectangular eyebrows, and an arc-based mouth. The code uses D3 v5 selections and the `arc()` generator to construct the mouth, while `transition().duration()` animates the eyebrows upward and back down over four seconds. All elements are grouped and centered using SVG transforms, with fixed pixel values controlling feature placement.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets Make a Face

This example shows a cartoon face built from basic SVG shapes, including a yellow circular head, two eyes, animated eyebrows, and a mouth created with an arc path. The face is centered and assembled using D3 selections, with the eyebrows repeatedly moving up and down via chained `transition()` calls. SVG attributes like `cx`, `r`, and `transform` position each element, while D3’s `arc()` helper generates the mouth’s curved path. The animation runs automatically on page load using D3 v5.

SSamuel Elbaz
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face from basic SVG shapes—a yellow circle, two eyes, rectangular eyebrows, and an arc-based mouth—all positioned relative to the center of the viewport. The code uses D3.js v5's `select` and `arc` APIs to construct the geometry, and SVG `transition().duration()` to animate the eyebrows downward by 50 pixels and back over two seconds. The rendering approach is fully declarative, with the face components grouped and transformed together, and all coordinates computed from the SVG element's width and height attributes.

Iidwann-eng
94% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face out of SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate upward and back down over two seconds via chained `transition()` calls. All elements are centered using an SVG `<g>` group with a translation transform, and the code imports `select` and `arc` from D3 to manipulate the DOM and generate the mouth path. The face is static except for the looping eyebrow movement.

IIan Perry
94% match
Loading thumbnail…

Let's make a face!

This example animates a simple cartoon face built from SVG shapes, with eyes, eyebrows, and a mouth arranged symmetrically. The face is constructed using D3 selections to append a circle for the head, circles for eyes, rectangles for eyebrows, and a path generated by the `arc` function for the mouth. The eyebrows independently animate upward and back down over two seconds using chained `transition` calls with `duration(2000)`. All elements are positioned relative to the viewport’s center via a transform on a group element.

Eevapavlinek
94% match
Loading thumbnail…

Let's make a face

A yellow circle face with black eyes and rectangular eyebrows appears on an SVG canvas. The code uses D3 v5 selections, the `arc()` generator for the mouth, and chained `transition().duration()` calls to animate the eyebrows downward and back. All shapes are positioned relative to a centered group using explicit pixel offsets for eye spacing and eyebrow placement.

Lloicvdk
94% match
Loading thumbnail…

Lets make a face with d3

This example shows a simple cartoon face built with SVG shapes—a yellow circle for the head, two eyes, and an arc-based mouth—that animates its eyebrows up and down over time. The face is centered using a translated group, and each facial feature is positioned relative to that center. The code uses D3 v5 selection methods like `select` and `append`, along with `transition().duration()` to animate the eyebrow group’s `transform` attribute. The mouth is drawn using the `d3.arc()` generator with specified inner and outer radii and angular ranges.

SSchmittYannic
94% match
Loading thumbnail…

Lets make a face!

This example builds a smiling cartoon face on a yellow circle, animating its expressive eyebrows. Using React and SVG, the face is constructed with D3 selection methods to append a face circle, eyes, eyebrows, and an arc-based mouth. The code applies a chained `transition().duration(2000)` to the eyebrows group, moving it up and then back down to create a winking-like motion. All facial features are centered within an SVG canvas using a translated group, with D3’s `arc()` function generating the mouth’s curved path.

BBhavyatulasi
94% match