Skip to main content
SimilarExport ZIP
100%

Customized Face

✓ Published0🌍 Public
Ssakhabutdinov
Last edited Jan 23, 2020
Created on Jan 21, 2020
Forked from Smiley Face Part1

A large smiling face drawn with SVG occupies the center of the canvas. The face features white circles for the head and eyes, dark outlines, a curved mouth, and a pair of glasses superimposed over the eyes, alongside an orange, angular decorative line piece. The visualization is built with React and D3 v5, using D3’s `arc` to construct the glasses and mouth paths, and D3’s `line` function to define the custom shape. The entire face is rendered within a single SVG group, transformed to center the composition.

AI-generated description

Halfway through smiley face (datavis 2020)

MIT Licensed

Similar vizzes

Loading thumbnail…

Face

A stylized face composed of SVG shapes is centered on a canvas, with a sky-blue circular head outlined in black. The face features two dark eyes with white highlights, eyebrows drawn as arcs, and a curved mouth, all constructed using D3's `arc()` generator. Built with React and D3 v6, the code uses `ReactDOM.render` to render the SVG elements, employing `ellipse`, `circle`, and `path` components with explicit coordinates and stroke widths.

RRajeevMukhesh
86% match
Loading thumbnail…

Let's make a face

A smiling face is drawn on a yellow circular head using basic SVG shapes. The visualization constructs the face from a large yellow circle for the head, two smaller black circles for the eyes, black lines for eyebrows, and a curved arc for the mouth, all centered on an 960x500 canvas. The code uses D3.js v5 selection and attribute methods to create and position the shapes, and leverages the `d3.arc` API to generate the path for the mouth. The rendering is done entirely through SVG elements appended to the root `<svg>` element.

Aaashirshk20
85% match
Loading thumbnail…

smile face

A smiling face is drawn using React and D3, composed of a yellow circle with a black border, two small circles for eyes, and a curved path for the mouth. The SVG canvas is 960 by 500 pixels, and the face is centered using a transform. The mouth is generated with the D3 `arc` function, which creates an annular sector with specified inner and outer radii and angles. All shapes are rendered as SVG elements, with the background circle and eye positions defined by fixed offsets.

Wwqtb
85% match
Loading thumbnail…

Cool Face

This example renders a smiling face using React and SVG, with the D3 shape API’s `arc()` function generating the mouth path. The face consists of a yellow circle with a black stroke for the head, two white eye circles positioned symmetrically, and a curved mouth created from an arc with inner and outer radii. All elements are centered via a translated group, and the layout uses hardcoded dimensions (960×500) without any data binding or interactive behavior.

EEddie Musabula
85% match
Loading thumbnail…

Smiling Face

A smiling face is rendered as a simple SVG composition, featuring an orange circle for the head, two black eyes, and a curved mouth. The code uses D3 v5’s selection and arc methods, with `d3.arc()` generating the mouth path from specified inner and outer radii and angles. Eye positions are calculated relative to the SVG’s center using fixed pixel offsets, and all elements are placed within a 960x500 viewport. The visualization demonstrates basic D3 shape generation and coordinate placement without interactive features.

Aaruba-haroon
85% match
Loading thumbnail…

Smiling face

A smiling face rendered as a yellow SVG circle with two black eyes and a curved mouth, centered on a 960 by 500 canvas. Built with React and D3 v7, it uses D3's `arc` generator to create the mouth path, while the face and eyes are simple SVG `circle` elements positioned with hardcoded offsets relative to the center. The black stroke on the outer circle and the fill colors are set directly in the SVG markup.

Mmoataznasr36
85% match
Loading thumbnail…

Face with D3 js

This example shows a simple smiling face constructed from SVG shapes using D3.js version 5. The visualization draws a large yellow circle for the head, two smaller black circles for eyes, and an arc for the mouth, all positioned relative to the SVG canvas dimensions. The code uses D3’s selection API to append circles and a path, with the mouth created via the `arc()` function specifying inner and outer radii and a half-circle angular range. The smiley is rendered directly into an SVG element defined in the HTML, with all styling applied through D3 attribute methods.

Aadmk840
85% match
Loading thumbnail…

My Happy Face

A yellow SVG face with a black outline, closed black eyes, and a smiling mouth is drawn in the center of a 960 by 500 pixel canvas. The face is composed of React-rendered SVG elements, with the mouth path generated using the D3 `arc` generator to create a thick, curved stroke. Dimensions such as eye radius, smile width, and mouth thickness are defined as constants, and the entire face group is translated to the canvas’s center. The visualization uses React 18 and D3 v7, with all geometry computed programmatically rather than from a data file.

AAlejandro Muñoz
84% match