Skip to main content
SimilarExport ZIP
100%

Face with SVG

✓ Published0🌍 Public
HHanh Hoang
Last edited Apr 27, 2021
Created on Apr 24, 2021
Forked from Hello HTML

A cartoon face rendered in SVG with React and D3. Blue ellipse eyes with white highlights sit on a beige circular background, while a smile is drawn using D3's `arc` path generator. The face is centered using a transformed `<g>` group, with all shapes positioned as reusable React components. The code demonstrates declarative SVG composition and the `arc` API from d3-shape for path generation.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face

A stylized cartoon face rendered as an SVG in React. The code draws a large yellow circle for the head, two black-bordered eyes, and a smile using D3’s `arc` path generator with specified start and end angles. D3 v7 supplies the `arc` function, while React elements structure the SVG markup. The face is centered dynamically using computed coordinates, with fixed stroke widths and offsets for features.

MMahesh Guptha
89% match
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
89% match
Loading thumbnail…

Face 3

A smiling face rendered as an SVG using React and D3, with a yellow circular background, two black eyes, and a curved mouth. The D3 arc generator defines the mouth's shape by setting inner and outer radii and start and end angles. React components structure the drawing, with a BackgroundCircle component and an Eyes component placed inside a translated group element, while D3 v6 provides the arc path calculation.

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

Face Using HTML + CSS + SVG

A smiling cartoon face rendered in yellow with black outlines, built from SVG primitives inside a React component. The face uses three circles for the head and eyes, plus an arc path for the mouth, all positioned relative to a central transform. The code imports React and the `arc` function from `d3` (v6) to generate the mouth’s path data, while React (v17) handles the SVG rendering.

Yyjhouma
89% match
Loading thumbnail…

Face

This gallery example displays a stylized, cartoon-like face composed of SVG shapes, built with React and D3.js v7. The face features a large grey circular head with a blue stroke, red and purple eyes with green irises, a yellow elliptical nose, and black line-based eyebrows, eyelashes, and mouth. The D3 `arc` API constructs the mouth as a semi-circular path, while the rendering primarily relies on React to define and position the SVG elements, with the d3.js library used specifically for that mouth arc.

SShivaKarpe
89% match
Loading thumbnail…

Let's make a face

This example shows a cartoon face built from layered SVG shapes, with a blue circular background, two black eyes, and a curved mouth. The face is composed modularly, with separate React components for the background, eyes, mouth, and a container that translates the center point. The mouth uses the d3.arc() API to generate its path from radius and angle parameters. All elements render as SVG inside a React component tree, positioning the face at the center of a 960-by-500 viewport.

EEd Hutchinson
89% match
Loading thumbnail…

Face

A simple yellow smiley face rendered as an SVG in React, with two black eyes, a curved mouth, and a circular outline. The component uses D3’s `arc` generator to create the mouth path, while positioning elements with fixed pixel offsets from the center. The face is drawn using basic React elements inside an SVG container, with D3 v7 handling the arc’s inner and outer radii and angle range.

RRajumar Pagey
88% match