Skip to main content
SimilarExport ZIP
100%

Lets make a face :)

✓ Published2🌍 Public
SSimonPlanje
Last edited Nov 2, 2020
Created on Nov 2, 2020
Forked from HTML Starter

A stylized face built from SVG shapes animates with coordinated, repeated transitions. An orange background holds a lime-green circle, with black-stroked eyes and rectangles for eyebrows. The left eye and both eyebrows perform a looping "wink" or shrug via chained `transition().duration()` calls, shifting their positions and radius. A mouth is drawn using the `d3.arc()` path generator. The code uses D3 v6 and React, reading SVG dimensions with `parseFloat` and the unary `+` operator.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets make a face

A cheerful cartoon face is drawn in SVG, with a yellow circular head, black-outlined eyes and eyebrows, and a curved mouth made from an arc path. The eyes and eyebrows perform a repeating blink animation using chained `transition().duration(500)` calls, shrinking the eye radius and shifting the eyebrow group vertically before returning to their original states. The visualization uses React with D3 v5, specifically the `select` and `arc` utilities, to build and animate the face in a fixed 960×500 SVG canvas.

Llukastieber
91% match
Loading thumbnail…

Lets make a face

A friendly yellow face (rendered with SVG) blinks and raises its eyebrows: its eyes and brows animate through a pair of D3 transitions, while its mouth is drawn using the `d3.arc` shape generator. Created with React and D3 v5, the example uses a simple `transition` chain to shrink and restore the eye circles and shift the eyebrow rectangles. The underlying data is static, with all geometry defined by hardcoded dimensions and positions within a single centered SVG group.

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

Let's make a face

A stylized face is drawn using D3.js and React, where a yellow circle face and features such as eyes, brows, and a mouth are composed of SVG shapes. The example animates these components with chained `transition().duration()` calls, causing the face to blink by moving the brows, change its fill color, and alter the mouth’s arc path using D3’s `arc()` generator. The rendering is based on SVG elements created with `d3.select` and appended to a canvas, demonstrating basic animation and shape composition.

AAlex Arobelidze
90% match
Loading thumbnail…

Let's make a face

A yellow face with black outline appears on an SVG canvas, featuring two black eyes, rectangular eyebrows, and an arc-shaped mouth. The face’s parts are drawn using d3.js v5 primitives like circles, rects, and an arc path. An animation sequence moves the eyebrows down and back up via chained `transition().duration(2000)` calls, creating a surprised or expressive blink effect within the React framework.

JJames
90% match
Loading thumbnail…

Let's Make a Face

A cartoon face composed of SVG shapes animates its eyebrows up and down. The yellow face, red-outlined circle, and black eyes and mouth are built with D3 selections and the `arc()` generator for the smile. Eyebrow motion uses chained `transition().duration(1000)` calls on a group, moving it vertically. The React starter code wraps a static D3 v5 setup, rendering into a centered SVG group on a 960 by 500 canvas.

Aaurelio-89
90% match
Loading thumbnail…

Lets make a face

A smiling face is drawn with D3.js in an SVG, featuring a yellow circle head, two eyes, and a mouth arc. The code uses basic SVG shapes like `circle` and `rect`, and the `d3.arc()` function to generate the mouth path. The eyebrows are animated with chained `transition()` calls, moving up and down over 500ms intervals. This example is built with React and D3 v5, with the face centered and scaled based on the SVG’s dimensions.

Llukastieber
90% match