Skip to main content
SimilarExport ZIP
100%

ForkFaceReact

✓ Published0🌍 Public
WWilliam Gitta
Last edited Jun 16, 2021
Created on Jun 16, 2021

A cartoon face rendered in SVG animates its eyebrows in a looping sequence. The example builds the face from D3 shape primitives, including circles for the head and eyes, and an arc for the mouth, all positioned with a central translation. Using D3 v5's `select` and `arc`, it demonstrates chained `transition` calls to repeatedly move the eyebrow group up and down over two-second intervals. The code imports these D3 features via ES6 modules, with the library loaded from UNPKG and the visualization drawn to an SVG element.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

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

A simple SVG face built with D3.js v5 animates its eyebrows in a looping transition. The face comprises circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth, all centered via a translated group. D3's `select`, `arc`, and chained `transition` methods drive the rendering and the two-second eyebrow raise-and-lower cycle. The example demonstrates basic SVG shape construction and declarative animation without external data.

Kkshravyak.2001@gmail.com
91% match
Loading thumbnail…

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

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.

DDINESH SAI BOPPANA
91% 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
90% 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
90% match
Loading thumbnail…

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

A smiling face rendered in SVG animates its eyebrows upward and downward in a looping two-second cycle. The face is constructed entirely through D3.js v5 DOM manipulation, using `select` to target the root `svg` element, then appending and positioning circles for the eyes, rectangles for the eyebrows, and a path built from `arc` for the mouth. The eyebrow animation is driven by chained `transition().duration(2000)` calls that alternately shift the parent group’s `transform` attribute, demonstrating basic tweened state changes on SVG attributes. The composition is centered via a translated group, with hardcoded spacing values for facial features.

VVamshisoleti09
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…

Forking

A smiling face rendered in SVG continuously raises and lowers its rectangular eyebrows through chained D3 transitions. The example demonstrates fundamental DOM manipulation with D3 v5, using selection methods like `append` and `attr` to build the face from basic shapes—a circle for the head, arcs for the mouth, and rectangles for the brows. The code explicitly uses `d3.arc` and `d3.select` to construct the mouth path and animate the eyebrow group’s `transform` attribute over timed durations.

Nnagasai-gummadi
90% match
Loading thumbnail…

Fork of Create a face with d3.js!

A stylized face built from SVG shapes animates its eyebrows in a looping motion. Circles form the head and eyes, rectangles become the eyebrows, and a path defined with `d3.arc` creates the mouth. The eyebrows move via chained `transition` calls that toggle their vertical position. The example uses D3 v7, loaded from UNPKG, and demonstrates imports from the `d3` module alongside local ES6 modules in a VizHub environment.

Ook-ey
90% match