Skip to main content
SimilarExport ZIP
100%

Face

✓ Published1🌍 Public
TTsing
Last edited Nov 11, 2019
Created on Nov 11, 2019

This example shows a simple yellow face built from SVG shapes, with a mouth and eyes, whose pink cheeks animate by briefly moving downward and then returning to their original position. The visualization is rendered as a static SVG canvas, with the face centered and scaled to the viewport. The code generates the geometry using D3 v5, constructing circles for the face, eyes, and cheeks, and a path for the mouth via the `d3.arc` function. The cheek animation is driven by chaining D3 transitions, which adjust the `cy` attribute over a set duration.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face

This example shows a simple smiling face built from basic SVG shapes: a yellow circle for the head, black circles for eyes, rectangles for eyebrows, and an arc for the mouth. The animation moves the eyebrows upward and back down over two two-second transitions. The code uses D3 v7’s `select`, `arc`, and `transition` APIs within a plain HTML page, rendering everything in SVG with `d3.min.js` loaded from a CDN.

CConnor Trump
90% match
Loading thumbnail…

Let's make an Face

A yellow face with black outlines and animated eyebrows is rendered in SVG. D3.js v7 builds the facial features by appending a circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. The eyebrows animate upward and back down using chained `transition().duration(2000)` calls on a group element. Static geometry is positioned via SVG attributes and transforms, with the visualization centered in a 960×500 viewport.

KKelseyXu5
89% match
Loading thumbnail…

Face

A smiling face drawn with SVG shapes animates its eyes and eyebrows. The yellow circle head contains two black eye circles and rectangular brows that rise and fall via chained transitions, while a mouth arc uses the `d3.arc` helper. The code selects the SVG element, centers a group, and applies `transition.attr` with specified durations to move facial features vertically, demonstrating coordinate transforms and timed animations with D3 v5.

MManoharURK20AI1057
89% match
Loading thumbnail…

Face

This visualization displays a stylized, cartoon-like face composed of basic geometric shapes: a yellow circle for the head, circles for the eyes, rectangles for the eyebrows, and an arc for the mouth. The face is centered within an SVG canvas. The code uses D3.js v5’s selection and arc functions, and leverages the library’s built-in transition system to animate the eyebrows and mouth, creating a subtle, looping facial expression change.

RRodolfo Dutra
89% match
Loading thumbnail…

Face!

A yellow circle with black facial features forms a simple, animated face. The eyebrows repeatedly rise and lower over the eyes via chained `transition()` calls with a two-second duration. Built with D3 v5, the visualization uses `select`, `arc`, and `attr` on SVG elements, positioning the face’s parts relative to the center of a 500-by-500 viewport.

SSadi Hassan
89% match
Loading thumbnail…

Face

This example uses D3.js (v5) to draw a simple yellow face as an SVG graphic. It constructs the face from basic shapes: a circle for the head, two circles for eyes, two rectangles for eyebrows, and an arc path for the mouth. The code uses D3 selections, the `arc()` generator with `innerRadius`, `outerRadius`, and angle values, and applies SVG attributes like `cx`, `cy`, and `transform` to position elements. The visualization demonstrates how D3 can create static, non-data-driven graphics through geometric primitives.

HHassan Abdullah
89% match
Loading thumbnail…

Making Face

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and a mouth shaped as a semicircular arc. The eyebrows animate by moving upward and back down over two seconds, using D3 transitions. The visualization uses D3 version 6’s `select`, `arc`, and `transition` methods, rendering shapes as SVG elements within a 960x500 viewport. The code constructs the facial features via appended circles, rects, and a path, with the mouth defined by an inner radius of 150 and outer radius of 170.

Jjakenachlas
89% match
Loading thumbnail…

face

A smiling face drawn with SVG shapes—a yellow circle, black outlines, pink ellipses for cheeks and ears, and an arc for the mouth—has animated eyebrows that continuously move up and down. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `attr` to build the face from primitive elements. A `transition` with a two-second duration moves the eyebrow group, while `arc` generates the mouth path. No external data is loaded; all geometry is hardcoded in `index.js`.

MM Hema
88% match