Skip to main content
SimilarExport ZIP
100%

Let's make a face

✓ Published0🌍 Public
AApurva
Last edited Feb 20, 2021
Created on Feb 19, 2021

This example uses SVG shapes to draw a simple smiley face. The code constructs a yellow circle for the head, two black circles for the eyes, and a mouth created with an arc path, all positioned relative to the SVG’s width and height. It demonstrates basic SVG attributes and the `d3.arc` generator from D3 v6 to define the mouth’s curved shape, with static styling applied via CSS.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3

This example renders a simple smiley face as an SVG graphic. It draws a yellow circle for the head, two black circles for the eyes, and a half-arc path for the mouth, all positioned using the SVG `width` and `height` attributes. The code uses D3 v6’s `select`, `arc`, and `append` APIs to create and transform the shapes, with the mouth arc defined by inner and outer radii and start/end angles.

Tthebeef5
95% match
Loading thumbnail…

Lets make a face

This example draws a simple smiling face using SVG shapes. A yellow circle forms the head, with two black circles for eyes and a curved arc path for the mouth, all positioned relative to the SVG’s width and height. The visualization uses D3 v5’s `select` and `arc` APIs to create and place the elements, with the arc generator defining the mouth’s inner and outer radii and start and end angles. The code demonstrates basic SVG attribute manipulation through D3’s chaining methods.

YYineng Zhang
94% match
Loading thumbnail…

Let's make a face

This example builds a smiling face from basic SVG shapes using D3.js v6. A yellow circle forms the head, with two eyes and a mouth drawn as a path using the `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down via chained `transition().duration(500)` calls. The code imports `select` and `arc` from D3, positions elements relative to a centered group, and uses SVG attributes like `cx`, `cy`, and `d` for layout.

Ffigment-tree
93% match
Loading thumbnail…

Let's make a face!

A bright yellow smiley face is drawn in SVG using D3 v5. The code selects an SVG element and builds the face by appending a circle for the head, two black circles for the eyes, and a path for the mouth. The mouth path is generated with the D3 `arc` generator, using an outer radius and angles to create a half-circle shape. The face is centered via a group transform, with eye spacing and vertical offsets applied to position the features.

UUGarCil
93% match
Loading thumbnail…

Let's Make a Face Part I

This example shows the construction of a simple smiley face using basic SVG shapes. D3.js version 5 draws a yellow circle for the head, two black circles for eyes, and an arc-generated mouth path, all positioned relative to the SVG’s width and height. The code uses `d3.select`, `svg.append`, and the `d3.arc()` API to define the mouth’s inner and outer radii and angular range, with all elements centered on a 960×500 canvas.

RRambo-chan
93% match
Loading thumbnail…

lets make a face

A simple yellow smiley face is drawn in an SVG canvas using D3 v5. The code selects the SVG element and appends circles for the head and eyes, styled with fill and stroke attributes. A mouth is created using the `d3.arc` generator with a specified inner and outer radius and angle range. This example demonstrates basic D3 shape generation and SVG attribute manipulation without any underlying data.

Aakankshaahirwal
93% match
Loading thumbnail…

Let's make a face

A simple SVG face is drawn with D3 v7, composed of a yellow circular head, two black eyes, and a mouth. The code uses D3 selections and the `arc` generator to create the mouth path, while circles are positioned relative to the SVG's width and height. The example demonstrates common SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`, rendered directly to the SVG canvas in a fixed 960x500 viewport.

AAndrew Babilonia
93% match
Loading thumbnail…

Let's make a face!

A smiling face is drawn in an SVG, using simple geometric shapes for the eyes and mouth. The code imports `select` and `arc` from D3 v6 to append a yellow circle for the head, black circles for the eyes, and a path for the mouth. The mouth is created with the `arc` function, using inner and outer radii and specified angles to form a curve. The rendering is done through SVG elements, with the entire face centered via a translation based on the viewport size.

Jjlsabo
92% match