Let´s make a facewith SVG and CSS

100%

Let´s make a facewith SVG and CSS

✓ Published0🌍 Public

Last edited Mar 14, 2019

Created on Mar 13, 2019

Forked from Let´s make a facewith SVG and CSS

A face built with SVG shapes uses D3 v5 selections and transitions to animate its eyebrows. The code constructs circles for the eyes and an arc path for the mouth, then applies a timed `transition` to move the left eyebrow over two seconds. Styling comes from CSS, while the layout centers elements using SVG attributes. The example demonstrates basic SVG rendering and D3’s animation capabilities without external data.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js, with animated eyebrows that move up and down in a looping transition. The code selects an SVG element, centers a group, and appends a circle for the head, circles for eyes, rects for eyebrows, and a path for the mouth generated with the `d3.arc()` helper. Using `d3.transition()` and `.duration(2000)`, the eyebrows shift vertically twice, creating a repetitive motion. The demonstration focuses on fundamental DOM manipulation—such as `.append()`, `.attr()`, and chained transitions—while rendering entirely in SVG with no external data.

Vveagy

91% match

Loading thumbnail…

Let´s make a facewith SVG and CSS

A stylized face is drawn using SVG shapes within an 960x500 canvas, centered via a transformed group. The face consists of a large teal circle, two small eyes, and a dark arc-shaped mouth. Animated eyebrows, implemented as rectangles, move vertically using chained D3 transitions, creating a simple expressive motion. The example uses D3 v5’s `select` and `arc` APIs to construct the scene, with CSS applied in `styles.css` for page layout.

Llisacaligagan

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG animates its eyebrows through a repeating two-second cycle. The code uses D3 v5 selections and transitions to manipulate SVG elements, building the face from circles, rectangles, and an arc-generated path for the mouth. The `transition().duration()` calls sequentially shift the eyebrow group up and down, demonstrating fundamental DOM manipulation with D3's data-binding and animation APIs.

Hhsrashmi

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face built from SVG shapes animates its eyebrows up and down in a looping transition. The example constructs the face from basic geometric elements—a yellow circle for the head, two small circles for eyes, rectangles for brows, and an arc path for the mouth—centered via a translated group. Using D3 v5, the code applies chained `transition()` and `.attr()` calls to move the eyebrow group repeatedly, while the `d3.arc()` helper generates the mouth’s curved outline. The rendering relies on SVG appended directly to the page’s `<svg>` element.

Mmaber77

91% match

Loading thumbnail…

Let's Make a Face with D3.js

This example animates a simple cartoon face built entirely with SVG shapes in D3.js. Shown head-on, the face consists of a circular head, two eyes, rectangular eyebrows, and an arc-based mouth, all centered within an SVG canvas. The eyebrows repeatedly bounce upward and downward using chained `transition` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs, constructing the face by appending circles, rectangles, and paths to a translated group element.

Tthespiraltree

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes in D3.js animates its eyebrows upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3’s `select` and `append` methods to build circles for eyes, rectangles for eyebrows, and an arc-based path for the mouth. A chained `transition` with a two-second duration moves the eyebrow group’s `transform` attribute, showing how to animate SVG elements with D3’s transition system.

Mmarci640

91% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a stylized face built from SVG shapes in D3.js, with animated eyebrows and a mouth that subtly changes expression over time. The face is constructed using an ellipse, circles for the eyes and pupils, polylines for the eyebrows, and an arc-generated path for the mouth. The animation uses D3 transitions with a duration of 2000 milliseconds to move the eyebrow group vertically and adjust the mouth’s arc angles, demonstrating fundamental DOM manipulation with selection and append methods from D3 v5.

NNikkor

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG elements animates as its eyebrows repeatedly move up and down. Built with D3.js v5, the example uses selection methods like `append` and `attr` to construct circles, rectangles, and an arc-based path for the mouth. A chained `transition` with a two-second duration shifts the eyebrow group's transform, creating the looping motion.

Hhsrashmi

90% match