Skip to main content
SimilarExport ZIP
100%

Let´s make a facewith SVG and CSS

✓ Published1🌍 Public
Llisacaligagan
Last edited Mar 10, 2019
Created on Mar 10, 2019

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

NNikhil
91% match
Loading thumbnail…

Let's make a FACE with D3.js

An SVG face built from D3.js primitives—circles for the head and eyes, rectangles for brows, and an arc path for the mouth—appears on a teal background. The face is centered using SVG group transforms, with features positioned via computed coordinates. D3 transitions animate the eyes and mouth, moving them in a sequence of translate transformations over three-second durations. The styling comes from an external CSS file, while the D3 library (v5) handles both shape creation and the tweening of the SVG attributes.

TTMorgan99
90% match
Loading thumbnail…

Let's make a face

A stylized face built from SVG shapes appears centered on a yellow circular head, with eyes, animated eyebrows, and a mouth formed by a D3 arc path. The eyebrows repeatedly rise and fall using chained `transition()` calls with a two-second duration each. The implementation uses D3 v6 selections to append and position circles, rectangles, and an arc, with dimensions driven by the SVG height and width attributes. The face is constructed entirely through D3’s `select`, `arc`, and transition methods, rendering in a React environment without external data.

MModalMBS
89% 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
89% match
Loading thumbnail…

Lets Make a Face

This example shows an animated cartoon face built with SVG elements, centered on a 960 by 500 canvas. The face features a large orange circle for the head, two dark eyes, rectangular eyebrows, and a smile-shaped arc for the mouth. A single eyebrow animates by moving downward and back using D3’s `transition().duration()`, while the other elements remain static. The code uses D3 v5’s `select`, `arc`, and chained transitions within a React project, rendering purely through SVG attributes.

Eedpmay
89% match
Loading thumbnail…

Let's make a face

A cheerful, schematic face is built from SVG primitives in a 960×500 viewport, centered via a translated group. Its yellow head, black-outlined circle, two dark eyes, and a wide mouth arc are composed with D3’s `select`, `append`, and `arc` APIs. The eyebrows, drawn as rectangles, animate upward and back down over two seconds using chained `transition().duration(2000)` calls on the group’s `transform` attribute, while the rest remains static.

Sscarlet shao
89% 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
88% match
Loading thumbnail…

Let's make a face with D3.js!

A stylized face constructed from SVG primitives animates through a sequence of mood shifts. D3.js v5 selects the SVG canvas and uses chained `transition().duration()` calls to tween the circle's fill, reposition the eyes with translate transforms, drop and raise the eyebrows, and rotate the mouth path. The face is drawn with geometric shapes including circles, rectangles, and an arc path generated via `d3.arc()`.

Ssrrajendran
88% match