Skip to main content
SimilarExport ZIP
100%

Fork of Making a face with Curran's help

✓ Published0🌍 Public
AAamir Hameed mir
Last edited Apr 2, 2024
Created on Apr 2, 2024

This example illustrates how to construct a simple cartoon face from basic SVG shapes. A yellow circle forms the head, with two eyes and animated eyebrows that move up and down over time, and an arc path for a mouth. The code uses the D3.js library, specifically the `select`, `append`, `attr`, and `transition` APIs, to build and manipulate the SVG elements. It employs a transition duration of 2000 milliseconds to create the brow animation, and an arc function to define the mouth’s path.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a simple cartoon face using D3.js, rendering a yellow circle with eyes, eyebrows, and a mouth in SVG. The face is drawn with basic shapes like circles, rectangles, and an arc path, all positioned relative to the center of the SVG. The eyebrows animate up and down using chained `transition()` calls with `duration(2000)`, moving the eyebrow group via its `transform` attribute. The code imports `select` and `arc` from D3 v7 and loads the library via UNPKG.

LLavinaThorat
91% 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
91% match
Loading thumbnail…

Fork of Making a face

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`.

Nnishanthh19
90% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example demonstrates how to build a cartoon face using D3.js version 7, rendered as SVG shapes with animation. It shows a yellow circle for the face, two eyes, animated eyebrows that move up and down, and a mouth created with an arc path. The code uses D3’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, with the eyebrows undergoing a two-second transition cycle. The face is centered within an SVG canvas, and the animation runs automatically on load.

Ppavankrishna441@gmail.com
90% match
Loading thumbnail…

Fork of Create a face with d3.js!

This example demonstrates how to build a cartoon face using D3.js version 7, rendered as SVG shapes with animation. It shows a yellow circle for the face, two eyes, animated eyebrows that move up and down, and a mouth created with an arc path. The code uses D3’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, with the eyebrows undergoing a two-second transition cycle. The face is centered within an SVG canvas, and the animation runs automatically on load.

Ppavankrishna441@gmail.com
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 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…

Fork of Create a face with d3.js!

This example draws a cartoon face in an SVG canvas using D3 v7, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code imports `select` and `arc` from D3 and constructs the face programmatically, centering it in a 960×500 viewport. The eyebrows are animated with chained `transition().duration(2000)` calls that move them downward and then back to their original position. The face is static apart from this repeating eyebrow movement, which demonstrates D3’s SVG rendering and transition API.

PPKISHON
90% match