Liny Liny

D3

A yellow circle with eyes, eyebrows, and a mouth forms a smiling face, rendered as SVG elements. The right eyebrow animates upward and back down over four seconds using D3 transitions. The face is centered in a 960×500 viewport, with the mouth drawn via the `arc` generator and all shapes grouped and translated using D3's `select` and `append` methods. The animation runs in an infinite loop, triggered by chained `transition().duration()` calls on the eyebrow rectangle.

JJeffrey Miiller

Face with D3.js!

A yellow SVG face uses D3.js to animate its eyebrows downward and back, creating a subtle blinking or surprised effect. The face is composed of circles for the head and eyes, rectangles for the eyebrows, and a path for a smile, all drawn using vector graphics. The animation relies on `transition().duration(2000)` to move the eyebrow group's `transform` attribute between two vertical offsets, providing a simple looping motion within a React-styled D3 v5 environment.

Ssafdarnu

Face with D3.js!

Ssafdarnu

Face with D3.js!

Ssafdarnu

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

Let's make a face with D3.js!

This example uses D3.js v5 to build an animated face from basic SVG shapes within a React framework. The code draws a yellow circle as the face, adds two eyes with matching eyebrows, and constructs a mouth using the D3 `arc` path generator with specific inner and outer radii. Eyebrows animate via chained `transition()` calls, moving upward and back down over a two-second duration. The SVG canvas is 960×500 pixels, with all elements positioned relative to a centered group using translation transforms.

Llujinxuan-fang

Face making

An animated face made of yellow circle, two eyes, and eyebrows greets viewers. The face is rendered with SVG shapes, centered within the viewport. Using D3 v5, the eyebrows bob up and down via chained `transition().duration(2000)` calls that shift their vertical offset. The mouth is created as a D3 `arc()` path, while the entire composition is built declaratively in React.

Sszy1900

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