Untitled

100%

✓ Published0🌍 Public

Last edited Sep 26, 2019

Created on Sep 26, 2019

This example renders a single stylized face using an SVG arc for the mouth, with rounded tips created via `d3.cornerRadius()`. The mouth is drawn as a curved path that starts from the left, dips downward, and rises to the right, with the corner radius smoothing the ends into a soft smile. The rest of the face remains simple and abstract, focusing attention on the arc’s shape. It builds on a prior face design by Xinting Yao, demonstrating how a small d3 shape API can transform a basic arc into a characterful visual element.

AI-generated description

This example shows how to make an arc with rounded tips, the mouth, using d3.cornerRadius().

The original work was done in this face by Xinting Yao

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example renders a face using D3.js version 5 within a React framework, drawing a single mouth shape as an SVG path on a 3000×3000 canvas. The code uses the `d3.arc` API to generate the path geometry with an inner radius of 0, outer radius of 100, and angles from 0 to π, creating a semicircular arc. The SVG is selected via `d3.select`, and the path is appended and attributed with the computed arc data. The page also includes simple CSS for layout and a highlighted text style, though no additional visual elements are present.

Aarths-glitch

84% match

Loading thumbnail…

Untitled

This example shows a simple smiley face rendered as an SVG graphic, built with React components and D3’s `arc` generator. The face is drawn with a yellow circle for the head, black stroke outlines, two small circles for eyes, and a mouth created using the D3 arc path. The code uses React’s `ReactDOM.render` to mount the component, and D3’s `arc()` API to compute the mouth’s curved path. The visualization demonstrates basic geometric composition, with fixed coordinates for eye placement and radii for the head and mouth.

TTimothyJRides

83% match

Loading thumbnail…

Untitled

This example shows a simple, stylized face built entirely from SVG primitives, with yellow circular head, black-outlined features, and a red background. A group element centers the face on the canvas, while nested groups position eyes and eyebrows relative to each other. The eyebrows animate vertically using two chained `transition` calls with a duration of 1000 milliseconds each, creating a continuous up-and-down motion. The code uses D3 v6’s `select`, `append`, and `attr` methods, and the mouth is generated using the `arc` shape generator with specified inner and outer radii and angle parameters.

Bbicyclecode

83% match

Loading thumbnail…

Untitled

A smiling face rendered as an SVG data visualization, built with React and D3. The face consists of a red circle with a blue stroke as the background, two black eyes, and a D3 `arc`-generated mouth path. React components manage the SVG elements, while D3's `arc` function calculates the mouth's curved shape using specified inner and outer radii and start and end angles. The layout positions elements around a central coordinate, with fixed offsets for the eyes and mouth radius.

BbetoAR506

82% match

Loading thumbnail…

Path with Arcs

This example shows a stylized smiley face rendered as a path with a circular arc for the mouth, centered within an SVG canvas. The face is drawn using React components, with the mouth generated by D3’s `arc` API to create an annular sector, while a vertical line serves as a subtle background element. The code leverages React’s ES6 modules and the D3 library, with random parameters for stroke width and mouth radius, and uses a `FaceContainer` to translate the coordinate system to the canvas center.

Ssofia-martinovich

82% match

Loading thumbnail…

Untitled

A stylized smiley face rendered as a collection of overlapping SVG petal and leaf paths, generated with React and D3 v4. The example defines several petal path shapes and a leaf shape, then uses D3’s `arc` API and React to compose them into a decorative face pattern. The code imports `arc` from `d3` and uses JSX to output the SVG elements, with paths transformed and positioned to create the smiley appearance.

FFonda Irena Santoso

82% match

Loading thumbnail…

Hello

This example displays a simple, stylized face: a yellow circle for the head, two black circles for eyes, and a quarter-circle arc for the mouth. The SVG is built using D3 v6 selection and append operations, with positioning handled via SVG attributes. The mouth is generated using d3.arc, which creates a path based on inner and outer radius and angle parameters. The code uses D3’s selectors and the arc function on an empty 960x500 SVG canvas.

LLara Issa

82% match

Loading thumbnail…

Untitled

A red SVG face with a green outline, yellow eyes, and a cyan arc-shaped mouth is drawn on a red background. The code uses d3.select to access the SVG element, sets numeric attributes from its width and height, and applies d3.arc to generate the mouth path with specified inner and outer radii and angle ranges. Circles are positioned using cx and cy attributes relative to a centered group.

Ttechie448

81% match