Let's Make a Face!

100%

Let's Make a Face!

✓ Published0🌍 Public

Last edited Jan 27, 2020

Created on Jan 16, 2020

Forked from Untitled

A smiling face is drawn with orange and pink circles, built incrementally in SVG using D3 v5 API calls like `select`, `append`, and `attr`. The code creates each facial feature as a separate circle, then animates a path-based mouth using `d3.arc` to generate its shape, followed by chained `transition` calls that move it down and back over four seconds. The example runs in a React framework and uses only hardcoded geometry, with no external data source.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

91% match

Loading thumbnail…

Let's Make a Face

This example builds a smiling face from basic SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a semi-circular mouth drawn with `d3.arc`. The eyebrows animate upward and back down using chained `transition().duration()` calls on a `<g>` element. The code uses D3 v5 selection methods and `d3.arc`, with the face centered via a translation transform. The animation runs once on load, and no data source is involved.

PPabloReyesBetanzo

91% match

Loading thumbnail…

Let's make a smiling face!

This example draws a smiling face as a yellow circle with two eyes, animated eyebrows, and an arc-based mouth, all centered within an SVG canvas. It uses D3 v6 and React, importing `select` and `arc` to build the shapes and apply a `transition` that moves the eyebrows up and down over two seconds. The face elements are grouped and translated using SVG transforms, with fixed numeric properties for spacing, offsets, and dimensions. The mouth is generated from an arc generator with specified inner and outer radii and angular ranges.

DDannie2020

91% match

Loading thumbnail…

Let's Make a Face

A smiling face built from basic SVG shapes appears on a yellow circle, with eyebrows that bob up and down through a looping transition. The example uses d3-selection and d3-shape to construct the face, positioning eyes, eyebrows, and a mouth with coordinate offsets. An arc generator creates the mouth, while chained transition calls animate the eyebrow group’s vertical position over two-second intervals, producing a playful expression. The code renders entirely in SVG within a 960 by 500 viewport.

Rryandebattista

91% match

Loading thumbnail…

Let's make face!

A smiling face rendered in SVG, constructed from basic geometric shapes using React and D3 v5. The visualization features a yellow circle head, black-outlined eyes, a curved mouth path drawn with `d3.arc()`, and rectangular eyebrows that animate in a repeating vertical bounce via chained `transition().duration(2000)` calls. The face is centered using SVG transforms, with all components positioned relative to the viewport, showcasing D3's declarative selection and animation APIs alongside React’s component framework.

DDarpan313

91% match

Loading thumbnail…

Let's Make a Face

A smiling face drawn with SVG shapes animates its eyebrows upward in a repeating loop. The example uses D3 v5 selections to append a yellow circle for the head, two dark circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrow group transitions vertically via `transition.attr` with a duration of 1000 milliseconds, creating a subtle bouncing effect. All elements are centered using a translated SVG group, with hardcoded pixel values for spacing and geometry.

Aaurelio-david

91% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is rendered as a yellow circle with black eyes, animated eyebrows, and a curved mouth built from an arc path. The code uses D3 v5 selections to append SVG shapes, and chains `transition().duration()` calls to move the rectangular eyebrows up and down. The mouth is generated with the `d3.arc()` helper, specifying inner and outer radii and angular extents. Static circle elements define the face and eyes, while the animation runs once on load in a React framework.

Llittlenanopichu

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