Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
DDINESH SAI BOPPANA
Last edited Jun 20, 2022
Created on Jun 20, 2022

This example animates a cartoon face built from basic SVG shapes, with eyebrows that move up and down over time to create a playful expression. The face consists of a yellow circle for the head, two black-outlined eyes, and a mouth drawn as a curved arc. The code uses D3.js v5 to construct and manipulate the SVG elements, and leverages D3's `transition()` method to animate the vertical position of the eyebrows. The static parts of the face (head, eyes, mouth) are defined with D3's `select` and `append` APIs, while the mouth is generated with `d3.arc`. The animation runs in a continuous loop, making the face appear to raise and lower its brows indefinitely.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example renders a smiling cartoon face as a static SVG scene, but adds a looping animation that moves the eyebrows up and down over time. The face is constructed using D3.js primitives: a yellow circle for the head, smaller circles for the eyes, rectangles for the brows, and a path generated with `d3.arc` to form the mouth. The code uses D3 v5’s selection and transition API to animate the eyebrow group’s transform attribute, creating a simple, expressive effect.

SSaiSree0122
96% 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
95% 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
95% 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
95% match
Loading thumbnail…

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

A yellow circle face with black-outlined eyes, animated eyebrows, and a curved mouth is rendered in an SVG. The eyebrows transition up and down repeatedly using D3 `.transition().duration()`. The code constructs the face with d3-selection and d3-arc, positioning elements via SVG transforms. The mouth path is generated using `arc()` with inner and outer radii, while eye and brow shapes are drawn as SVG circles and rectangles on a 960x500 canvas.

DDINESHSAIBOPPANA7
95% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
94% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
94% match
Loading thumbnail…

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

This example renders a stylized face using D3.js v5 within a React framework, displayed as scalable vector graphics with animated eyebrows. A yellow circle forms the head, with two smaller circles for eyes and a path-based arc for the mouth. The code uses D3’s `select` and `append` to build the SVG structure, `arc()` to generate the mouth path, and chained `.transition().duration()` calls to animate the eyebrow rectangles vertically over two seconds each, creating a subtle bobbing motion. The animation runs in an HTML page that loads D3 from a CDN.

DDINESH SAI BOPPANA
94% match