SVG face

100%

✓ Published3🌍 Public

Last edited Feb 17, 2021

Created on Feb 13, 2021

Forked from Shapes and Colors with SVG and CSS

A cheerful SVG face is rendered using React, with a yellow circular head, two eyes, and a smile outline drawn via D3’s `arc()` generator. The eyebrows are separate rectangles that animate vertically using D3 transitions, moving up and down over two-second intervals. The visualization uses React and ReactDOM for the component structure, while D3 v6 handles the arc path, selection, and transition logic within an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

react face

A cheerful yellow smiley face rendered as an SVG using React and D3. The face is composed of a circle for the head, two smaller circles for eyes, and a mouth drawn with D3’s `arc` generator, which creates a path from angular ranges. React components define the SVG elements, while D3’s `arc` API computes the mouth’s path geometry. The code imports `arc` from `d3` and uses ReactDOM to mount the component into the DOM.

MMaxim

91% match

Loading thumbnail…

SVG

This example renders a smiley face using React and D3, composed of SVG circles and an arc path. The face includes a yellow background circle with a black stroke, two eyes positioned symmetrically, and a mouth created with d3.arc(). The code uses React components for the background and eyes, while a D3 arc generator computes the mouth’s path with specified inner and outer radii and angles. The visualization is static, with all elements centered within an 960×500 SVG canvas.

AAsif Nawaz

91% match

Loading thumbnail…

Lets make a face

A cheerful cartoon face is drawn in SVG, with a yellow circular head, black-outlined eyes and eyebrows, and a curved mouth made from an arc path. The eyes and eyebrows perform a repeating blink animation using chained `transition().duration(500)` calls, shrinking the eye radius and shifting the eyebrow group vertically before returning to their original states. The visualization uses React with D3 v5, specifically the `select` and `arc` utilities, to build and animate the face in a fixed 960×500 SVG canvas.

Llukastieber

90% match

Loading thumbnail…

Let's make face!

A smiling face rendered in SVG, constructed from basic geometric shapes using React and D3 v5. The visualization features a yellow circle head, black-outlined eyes, a curved mouth path drawn with `d3.arc()`, and rectangular eyebrows that animate in a repeating vertical bounce via chained `transition().duration(2000)` calls. The face is centered using SVG transforms, with all components positioned relative to the viewport, showcasing D3's declarative selection and animation APIs alongside React’s component framework.

DDarpan313

90% 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

90% match

Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

PPraneeth Varma

90% 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

90% match

Loading thumbnail…

SVG face

This example shows a cartoon face built from SVG primitives, with a yellow circular head, two black eyes, and a curved mouth rendered using D3’s `arc` generator. Eyebrows are added as rectangles positioned via SVG transforms. The code uses D3 selections to create and style elements, relying on hardcoded dimensions from the SVG attributes rather than external data.

Uuttam-vish

90% match