Skip to main content
SimilarExport ZIP
100%

face VI

✓ Published1🌍 Public
DDiego Isla López
Last edited Aug 18, 2021
Created on Aug 18, 2021
Forked from Hello VizHub

A smiling face built from basic SVG shapes, with a pink circular head, two black eyes, and a semi-circular mouth. The code splits the face into reusable React components (BackgroundCircle, Eyes, Mouth, and FaceContainer) and composes them with fixed, hard-coded size values passed as props. The mouth uses d3.arc to generate the path’s coordinate data. The final SVG renders at 960 by 500 pixels, centered with a 10-pixel stroke outline.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face Part V

A cheerful cartoon face renders as SVG from React components. The example splits the visualization into separate files for the background circle, eyes, and mouth, using ES6 modules and React fragments to organize the code. The mouth's arc shape is generated with the `d3.arc` API, while the background and eyes are simple SVG circles. The face is centered on a yellow circle with a black stroke, and the eyes and mouth are positioned relative to the center using SVG transforms.

Kkripton-it
90% match
Loading thumbnail…

face

A simple cartoon face is drawn using React and SVG, with a yellow circular background, two eyes, and a smiling mouth. The face is composed of separate React components, each responsible for a part (BackgroundCircle, Eyes, Mouth). The mouth is generated using the `arc` function from the d3 library to create a path with a specified inner radius, width, and angular range. The overall composition is centered and scaled through the `FaceContainer` component.

Ooeohomos
89% match
Loading thumbnail…

face

This example displays a stylized smiley face rendered as an SVG graphic, featuring a pink circular head, green eyes with pupils, and a black arc-shaped mouth. Built with React and D3 v7, it uses the `d3.arc()` API to generate the mouth path, while positioning all other facial elements—including circles, ellipses, and lines—through hard-coded coordinates. The face is centered within a fixed 900×500 viewport, with facial features arranged symmetrically to create a playful, static illustration.

Aachalasam
89% match
Loading thumbnail…

Smiley Face Part V

A smiling face rendered with React components, split across separate ES6 module files for the background circle, eyes, and mouth. The SVG output uses D3's `arc` generator to create the mouth path, while React Fragments group the two eye circles. Hardcoded dimensions position the face at the center of a 960 by 500 viewport, with no external data source or interactive behavior.

CCurran Kelleher
89% match
Loading thumbnail…

Faces

A modular smiley face is drawn in an SVG canvas using React components for its background circle, eyes, and mouth. The face is centered via a translated group, with positioned features defined by props. D3’s `arc` generator creates the curved mouth path, while the yellow circle and black strokes come from simple SVG elements. The example demonstrates composable React structure and static SVG rendering without interactivity.

LLove Wessman
89% match
Loading thumbnail…

I am making a Face

Five nearly identical faces are stacked and centered in a 960×500 SVG, each built from a yellow background circle with a black stroke, two offset eyes, and an arc-based mouth. The React components (Face, Eyes, Mouth, BackgroundCircle) wrap a centralized EmojiContainer that translates the coordinate system, while the mouth uses d3.arc with inner and outer radii. Repeated rendering with fixed props demonstrates modular, parameter-driven composition.

AAnmol Gupta
89% match
Loading thumbnail…

Let's Make a Face Part V

A cheerful yellow circle with a black border forms the backdrop for a simple, stylized face. The face includes two eyes, white pupils, pink blush ellipses, and a smiling mouth rendered as an arc. The SVG is created using React components that compose geometric primitives, with the mouth path generated by the D3 arc API. The entire face is centered within a 960 by 500 viewport using an SVG group transform.

Wweisbroda@rfa.org
89% match
Loading thumbnail…

Let's Make a Face Part V

This example renders a stylized cartoon face composed of SVG primitives, featuring a yellow circular background, two dark eyes, and a smiling mouth. The face is built using React components that wrap SVG elements: `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated with D3’s `arc` generator, applying inner and outer radii with start and end angles to create a semi-circular curve. All facial features are positioned relative to a central group transform, ensuring the composition stays centered in the viewport.

AAlexa Cristina
89% match