Hello

100%

✓ Published0🌍 Public

Last edited Sep 27, 2020

Created on Sep 27, 2020

Forked from Shapes and Colors with SVG and CSS

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Let's make a face with D3 new

This example draws a stylized face using basic SVG shapes and D3’s arc generator. It shows a yellow circle for the head, two black circles for eyes, and a mouth formed by a path created with D3’s `arc()` function, which specifies inner and outer radii along with start and end angles. The code uses D3 v5 to select and append elements to the SVG, applying translations for centering. The rendering approach is entirely SVG-based, with no external data source.

Mmirna981

90% match

Loading thumbnail…

Make a face with D3.js

This example draws a stylized face using D3.js version 7, rendering a yellow circle as the head and a single arc-shaped path for the mouth on an SVG canvas. The code uses `d3.select` to target the SVG element, `.append` to add shapes, and `d3.arc()` to generate the mouth’s path with specified inner and outer radii plus start and end angles. All geometry is positioned relative to the SVG’s width and height, which are read directly from the element attributes. The result is a simple, static face composition built entirely with D3’s SVG helpers.

HHLgorithm

90% match

Loading thumbnail…

Let's Make a Face

A yellow circle with two black eye circles and an arc-based mouth forms a simple face on an SVG canvas. The example uses d3.select to target the SVG element and d3.arc to generate the mouth path with specified inner and outer radii. The rendering is done through D3 v5's SVG manipulation, positioning each shape with absolute coordinates in a 960-by-500 viewport.

Ssalvar2134

89% match

Loading thumbnail…

Let's make a face

A yellow circle with black outlined eyes forms a simple face, with a curved mouth drawn as an arc. The visualization uses D3 v6 selections to append SVG circles for the face and eyes, and an SVG path for the mouth. The `arc` generator from D3 creates the mouth’s semicircular shape, positioned using explicit pixel coordinates for the eyes and a translation for the mouth group. All elements are rendered directly onto an SVG canvas with fixed dimensions.

Mmaximus2581

89% match

Loading thumbnail…

D3 Face

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.

BBorisIdeler

89% match

Loading thumbnail…

Let's make a face witb D3.js!

This example uses D3.js v5 to draw a simple, stylized face within an SVG canvas. It positions a yellow circle as the head, two black circles as eyes, and a curved path as the mouth, all centered via a translated group. The code constructs the mouth using D3’s `arc` generator with specified inner and outer radii and angular range, while other shapes are created with basic SVG primitives (`circle` and `path`). The layout relies on hardcoded pixel offsets for features, and the SVG is sized at 960 by 500 pixels.

Ssslee8778960

89% match

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes and an arc-shaped smile forms a simple cartoon face. The example uses D3.js v5 to append SVG circles for the head and eyes, and an `arc` generator to draw the mouth as a path. The face is centered within a 960×500 SVG canvas, with the mouth positioned using a translated group. The code relies on D3's `select` and `arc` imports, reading the SVG dimensions directly from its attributes.

LLex

89% match