Skip to main content
SimilarExport ZIP
100%

D3 Face

✓ Published1🌍 Public
BBorisIdeler
Last edited Dec 25, 2020
Created on Dec 25, 2020
Forked from SVG Playground

This example shows a simple, stylized face constructed entirely from SVG shapes using D3 v6. It displays a yellow circle for the head, two black circles for eyes, and a red arc-based path for the mouth. The code uses the `select` API to initialize the visualization and `svg.append` to add elements. Geometry is precisely positioned using the `attr` method with transform and coordinate values, while the mouth is defined through a custom arc with specified inner and outer radii and angular parameters.

AI-generated description

An icon.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Face

This example draws a cartoon face from SVG shapes. A yellow circle forms the head, two black circles serve as eyes, and a mouth is rendered as a dark arc using the `d3.arc()` helper. The coordinate positions and radii for the face, eyes, and mouth are calculated from the SVG’s width and height attributes. The code imports `select` and `arc` from D3 v7 and appends all elements to an SVG with an orange background.

YYoung Song
92% match
Loading thumbnail…

D3 Face

This example shows a stylized, animated face built as an SVG graphic. A yellow circle forms the head, with black circles for eyes, rectangular eyebrows, a nose, and an arc-based mouth. The right eyebrow repeatedly moves up and down using chained `transition.attr` calls. The visualization is constructed with D3 v6 selection methods and the `arc` generator, drawing all shapes in a coordinate system centered via an SVG group transform.

NNicolas MacFlanigan
91% match
Loading thumbnail…

d3

This example uses D3.js (v7) to draw a simple yellow face on an SVG canvas. The visualization shows a circle for the face, two smaller black circles for eyes, and an arc-shaped path for a mouth. The code uses D3's `select` and `append` functions to build the SVG elements, and the `arc` function to generate the mouth path with specified inner and outer radii and angular range. The entire composition is centered on the canvas using a group element with a translate transform.

HHeet Bhatt
91% match
Loading thumbnail…

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Bbilalaamer
91% match
Loading thumbnail…

D3 Face

A stylized face is drawn using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for a mouth. The face is centered and built with D3’s `select` and `append` methods. Eyebrows animate via chained `transition().duration(2000)` calls, shifting their position twice. The mouth is created with `d3.arc()` using specified inner and outer radii and angles, demonstrating a simple, declarative approach to constructing and animating geometric compositions in a React context.

Ssheafallick
91% match
Loading thumbnail…

Face

This example shows a simple, stylized face rendered in SVG. A yellow circle forms the head, two black circles serve as eyes, and a black arc creates a smiling mouth. The code uses D3’s `select` and `arc` functions to construct the shapes, setting coordinates and radii relative to the SVG’s width and height. The rendering uses D3 v5 and outputs to SVG, with the mouth path created using the `arc` function’s parameters for inner and outer radius and start and end angles.

Ddvyachkil
91% match
Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
91% match
Loading thumbnail…

D3 Face

This example uses D3 v5 to draw a stylized yellow face, including a circular head, two eyes, and eyebrows, within an SVG. The eyebrows are animated using a chained `transition` to move down and back up. The mouth is created using D3's `arc` generator, and all elements are positioned relative to the SVG's center using a `g` element and transformations. The code applies shapes like `circle` and `rect`.

Kkkwyoung
91% match