Skip to main content
SimilarExport ZIP
100%

Creating a face with SVG

✓ Published0🌍 Public
Rremyapk
Last edited Mar 11, 2020
Created on Mar 11, 2020
Forked from HTML Starter

This example draws a simple smiling face using SVG shapes. It creates a yellow circle for the head, two black circles for eyes, and an arc for the mouth, all rendered on a red background. The code uses D3 v4’s `select` and `arc` APIs to append and style the SVG elements, with fixed pixel dimensions for the viewport and explicit coordinates for each feature. The mouth is generated via the `d3.arc()` path generator with an inner and outer radius.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Create a smiling face

This example shows a smiling face rendered as a yellow circle with two black eyes and a curved mouth, centered in an SVG canvas. It demonstrates how to build a custom shape using React components and D3’s `arc` generator, which defines the mouth as a path with inner and outer radii and specific start and end angles. The face is drawn with basic SVG elements like `circle` and `path`, positioned using a `<g>` transform, and styled with stroke and fill attributes. The code relies on React for rendering and d3.arc for the mouth geometry, with fixed dimensions and coordinates.

Ssmile2git
90% match
Loading thumbnail…

Creating a Smile with D3

This example shows a smiling face built from SVG shapes using D3 version 5 with React. It draws a yellow circle with black strokes for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The code demonstrates D3 selections, attribute manipulation, and the `arc` generator, with positions computed from the SVG dimensions and helpers like `eyeRadius` and `eyeSpacing`.

GGustavo Maciel
90% match
Loading thumbnail…

Make a Face

This example shows a simple smiling face built with SVG shapes: a yellow circle for the head, two black circles for eyes, and a curved path for the mouth. The face is centered in a 960 by 500 canvas, with the mouth drawn using an arc from the D3 library, specifically using the `arc()` generator to define an arc with an inner and outer radius. The code uses React to render the SVG elements, and D3 is used for the arc path generation. The rendering approach is purely declarative, with fixed coordinates for all facial features.

Ttrantv0908
90% match
Loading thumbnail…

make a face

This example shows a smiley face built from SVG circles and an arc-shaped mouth, centered in a 960-by-500 viewport. The face uses yellow fill with a black stroke for the head, fixed eye positions, and a mouth drawn with D3’s `arc()` function. React renders the SVG elements, with geometry parameters like `eyeOffsetX` and `mouthRadius` computed from the canvas dimensions. The code mixes inline SVG markup in `index.html` with a separate React component that uses D3’s arc API for the mouth path.

CCD020102
89% match
Loading thumbnail…

Let's make face with D3!

This example shows how to build a simple cartoon face using SVG primitives in D3. It draws a yellow circle for the head, two black circles for eyes, and an arc-based path for a mouth, all positioned relative to the SVG’s width and height. The code uses `d3.select` to access the SVG element, `append` to create shapes, and the `d3.arc` generator to compute the mouth’s path with inner and outer radii and specified angles. The face is centered horizontally and vertically, with fixed offsets for the eyes and mouth placement.

Kkhuton
89% match
Loading thumbnail…

Smiley face

This example creates a simple smiley face using D3.js and SVG. It draws a yellow circle for the face, two black circles for the eyes, and a mouth using an arc generator with specified inner and outer radii. The code uses D3 selections from the `d3` module, including `select` and `arc`, to create the shapes. The visualization is rendered in a React starter template with a fixed SVG size of 860 by 400 pixels.

Kkaviya-ds
89% match
Loading thumbnail…

make a face

This example draws a simple cartoon face using D3.js v5 and SVG. A yellow circle forms the head, two black-outlined circles serve as eyes, and an arc path creates a smiling mouth. The code uses d3.arc to generate the mouth’s path with specified inner and outer radii and angles, while d3.select appends circles and a group element to the SVG. The face is positioned using fixed coordinates and the viewBox dimensions are read from the SVG attributes.

Jjiayuansun
89% match