Skip to main content
SimilarExport ZIP
100%

Let's Make A Face Path Animation

✓ Published0🌍 Public
Bboreilly26
Last edited Dec 29, 2021
Created on Dec 29, 2021

This example displays a cheerful yellow smiley face with black outlines, including two eyes and an arc-shaped mouth drawn using D3’s `arc()` generator. A small teal ellipse, animated via SVG `<animateMotion>` with an `<mpath>` referencing a custom curve path, travels continuously around the face. The visualization is rendered in React, using a static SVG canvas with D3 v7 to compute the mouth’s path coordinates, while the animation loops indefinitely via the `repeatCount` and `dur` attributes.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

Lets Make a Face

A yellow smiley face animates on an SVG canvas as its eyes and eyebrows move independently and its mouth is drawn with an arc path. The example demonstrates D3 v7 transitions, using `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to shift eye positions and raise eyebrows over different time intervals. SVG elements—circles for eyes, rectangles for eyebrows, and a path for the mouth—are appended to a centered group, showing how D3 manipulates attributes and transitions to create simple character animation.

Ggabrielribeirob
88% 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
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with black outlined eyes and a curved mouth, which animates by moving its eyebrows up and down over a two-second cycle. The face is drawn using D3.js v5, with an SVG circle for the head, rectangles for the eyebrows, and a path generated via `arc()` for the mouth. The eyebrow movement uses chained `transition().duration()` calls on an SVG group, illustrating fundamental DOM manipulation techniques with `select` and `append`.

VVidhuS
88% match
Loading thumbnail…

Let's Make a Face Part I

A simple animated smiley face is constructed using D3.js, with a yellow circular head, two eyes, eyebrows, and a partial arc mouth. The eyebrows animate upward and downward in a repeating cycle, adding a subtle expressive motion to the otherwise static face. The visualization is built entirely with SVG primitives—`circle`, `rect`, and `path` elements—and relies on D3's `transition` API to animate the eyebrow transform over two-second intervals. The arc for the mouth is generated using D3's `arc` function, which produces a path for the specified inner and outer radii and angle range.

JJustin Gieselbach
88% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn using SVG circles and a path, with D3's `arc` generator creating the mouth. The face's eyebrows, rectangular SVG elements, animate upward and back down over two seconds using chained `transition` calls with `attr` updates. The example demonstrates fundamental D3.js v5 DOM manipulation, including `select`, `append`, and `attr`, to build and transform SVG elements within a fixed 960×500 viewport.

MMd Hugo Lidero
87% match
Loading thumbnail…

Let's make a face

A smiley face, drawn with SVG circles and an arc path, animates its eyebrows in a looping sequence in a D3.js visualization. The code builds the face by manipulating SVG groups and shapes, using D3's `select` and `append`. A `transition` with a 2000-millisecond duration shifts the eyebrow group up and down, creating the expression change. The face's construction relies on explicit pixel coordinates and D3's `arc` generator for the mouth, with a yellow circle serving as the head.

Mmoha0902
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun
87% match