Skip to main content
SimilarExport ZIP
100%

Face 2

✓ Published0🌍 Public
SS767
Last edited Jun 2, 2021
Created on Jun 2, 2021
Forked from +

A simple SVG face with two black eyes and a yellow circular head appears on a red-bordered canvas. Using D3.js v6, the code draws an arc below the face to represent a mouth, whose curvature continuously widens and narrows via `d3.timer`. The arc’s start and end angles are recalculated each frame based on elapsed time, and the path’s `d` attribute is updated through the `d3.arc` generator. Static elements are defined directly in HTML, while the animated mouth is appended programmatically.

AI-generated description

First face using D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face D3.js

A yellow circle with black eyes and a curved mouth forms a simple animated face in an SVG canvas. The right eye moves vertically in a looping transition, shifting down and back up over a two-second duration. The code builds the face using D3 selections and the `arc` generator for the mouth, setting attributes like `cx`, `cy`, and `fill` directly on SVG circles. All rendering occurs in-browser with D3 v5, animating through chained `transition().duration()` calls.

Iimoutidi
90% match
Loading thumbnail…

Face with D3.js

A smiling face is drawn as a yellow SVG circle with white outlines, featuring two black eyes that animate by moving down and up via chained `transition().duration()` calls. Built with D3.js v5, the example demonstrates basic SVG shape creation using `d3.select` and attribute assignment for circles, with a commented-out arc-based mouth showing an alternative path approach. The eyes use transform translations over three-second intervals, creating a simple blinking effect without external data.

Aarontha
89% match
Loading thumbnail…

FACE with D3

A face rendered as a yellow circle with black eyes and a mouth appears on an SVG canvas. The example demonstrates basic D3 shape generation and SVG attribute manipulation. Using D3 v5, the code appends circles for the face and eyes, and a path created with the `d3.arc` helper to form the mouth, with the arc's innerRadius, outerRadius, startAngle, and endAngle defining its shape. The SVG width and height are read directly from the DOM attributes to position elements.

SSushant Kunkekar
88% match
Loading thumbnail…

Let's make a Face with D3.js

A yellow SVG face is drawn with D3.js, centered in a 960×500 viewport and constructed from circles, rectangles, and an arc for the mouth. D3 transitions (`.transition().duration(2000)`) repeatedly raise and lower the eye-brow rectangles over four seconds, creating a simple animated expression. The code imports `select` and `arc` from D3 v5, uses d3.arc to build the mouth path, and sets all positions via SVG attributes.

Jjerz-0788
88% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
88% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
88% match
Loading thumbnail…

Face with D3.js!

A cheerful, animated face rendered entirely with D3.js SVG shapes. The code draws a yellow circular head, two red eyes, blue rectangular eyebrows, and a purple arc-shaped mouth, all positioned within a responsive coordinate system. The eyebrows use the `transition` API to animate horizontally back and forth over six seconds. The face is built by composing basic SVG primitives—`circle`, `rect`, and `path` elements—using D3's `select` and `attr` methods, while the mouth is generated with the `arc` generator.

Ssslee8778960
88% match
Loading thumbnail…

Face

A smiling face drawn with orange SVG circles and arcs animates its eyebrows and mouth. The code uses D3 v5’s `select`, `arc`, and chained `transition` calls to raise and lower rectangular eyebrows and to expand and contract the mouth’s outer radius over two-second intervals. Static features include circular eyes and a fixed head outline, all centered within a 960 by 500 SVG canvas.

Aabcz1234
88% match