Skip to main content
SimilarExport ZIP
100%

Face

✓ Published1🌍 Public
RRodolfo Dutra
Last edited Jan 8, 2020
Created on Jan 8, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face!!

A yellow circle with black eyes, animated rectangular eyebrows, and an arc-shaped mouth forms a simple face on a gray background. The eyebrows slide upward and then return to their original position using chained D3 transitions with a two-second duration. The visualization is built with D3 v6, using `select`, `attr`, and `transition` methods to manipulate SVG elements, while the mouth is drawn with the `arc` generator.

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

D3 Face

A stylized face is drawn using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for a mouth. The face is centered and built with D3’s `select` and `append` methods. Eyebrows animate via chained `transition().duration(2000)` calls, shifting their position twice. The mouth is created with `d3.arc()` using specified inner and outer radii and angles, demonstrating a simple, declarative approach to constructing and animating geometric compositions in a React context.

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

Face with D3.js

This example shows a simple, stylized face built from SVG shapes. A yellow circle forms the head, with red circles for eyes, black rectangles for eyebrows, and a black arc path for the mouth. The code uses the D3.js v5 `select` and `arc` APIs within a React framework, and animates the eyebrows using chained `transition()` calls with a two-second duration to shift them upward and then back down.

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

My Face

A simple cartoon face rendered with D3 v5 SVG shapes, featuring a yellow circle head, eyes, eyebrows, pupils, and a mouth with teeth. The eyebrows animate vertically using chained `transition().duration()` calls, moving up and then returning. The code uses D3's `select`, `arc`, and `attr` helpers to construct the geometric elements, with fixed pixel coordinates for facial features. React starter code accompanies the visualization, though the rendering itself relies solely on plain SVG and D3 transitions.

Sslipperyd
90% match
Loading thumbnail…

Lets make a face!

This visualization uses D3.js to draw a cheerful, cartoon-like face on an SVG canvas. The face is constructed from basic geometric shapes, including yellow circles for the head and eyes, and rectangular eyebrows that animate by shifting their vertical position through a staggered transition sequence. The mouth is rendered as an arc using D3's `arc` function with specified inner and outer radii and angle parameters. The code organizes elements in a central group and uses SVG attributes to position facial features precisely.

BBhavyatulasi
90% match