Skip to main content
SimilarExport ZIP
100%

Happy faces

✓ Published0🌍 Public
CCristobal E.
Last edited Jul 26, 2021
Created on Jul 25, 2021
Forked from HTML Starter

A smiling face rendered as an SVG using React and D3. The face has a radial-gradient yellow-to-orange background circle, two eyes with white highlights and grey gradients, and a curved mouth drawn with a D3 arc path. The components are separate React exports (`BackgroundCircle`, `Eyes`, `Mouth`) combined in an app, with the face centered via a transform. All shapes are positioned using fixed numeric constants for offsets and radii, and the SVG is rendered into the DOM via `ReactDOM.render`.

AI-generated description

I am making a face and it is not this face -_-

MIT Licensed

Similar vizzes

Loading thumbnail…

Happy Face

Built with React and rendered as SVG, this example shows a cheerful cartoon face—a yellow circle with black outlines, white-and-black eyes, a nose arc, and a smiling mouth—centered on a 960-by-500 canvas. The face is composed of modular React components (BackgroundCircle, Eyes, Nose, Mouth) that accept properties like eyeOffset and mouthRadius, while a FaceContainer uses an SVG group transform to position everything. D3’s `arc()` generator creates the mouth and nose paths, and the graph also relies on D3 v7, React 16.9, and inline SVG attributes like `stroke-width` for styling.

JJenna Hamza
90% match
Loading thumbnail…

Happy Face HTML

This example uses React and SVG to render a classic happy face. The code draws a yellow circle using a custom `BackgroundCircle` component, positions two black eyes, and adds a smile with a `d3.arc` path. D3's `arc()` API defines the mouth’s inner and outer radii and its start and end angles. The SVG is generated imperatively with React’s JSX syntax, and the layout is centered on a 960 by 500 canvas. The example demonstrates combining declarative React components with D3’s geometry helpers for simple static graphics.

Rry-werth
90% match
Loading thumbnail…

Happy Face

A simple smiling face built with React and D3, composed of a yellow circle, two black eyes, and an arc-based mouth. The example shows how D3’s `arc` generator creates the mouth path within a React SVG component hierarchy. All shapes are rendered as SVG elements via reusable React components (`BackCircle`, `Eyes`, `Mouth`, `Face`), with the face centered using SVG transforms. The code relies on `d3.arc` for the mouth, while static props control geometry, and ReactDOM mounts the visualization to the page.

Dddavud
90% match
Loading thumbnail…

smiley face woohoo

A smiling face rendered as a yellow SVG circle with black outline, two eyes, and an arc-shaped mouth. The React components BackgroundCircle, Eyes, and Mouth compose the face, centered via a group transform. D3’s `d3.arc()` generates the mouth path, while fixed numeric constants define layout. The static example uses React 16.9 and D3 v7, with no interactive data.

Aayilya1
90% match
Loading thumbnail…

Smiling face

Fifty identical smiling faces are rendered in a grid, each a yellow circle with black stroke, two eyes, and an arc-shaped mouth. The faces are drawn as SVG elements within a React application, using a `Face` component composed of `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents. The mouth is created with the D3 `arc` API, while the `map` from D3 generates the array of faces. Each face is centered and parameterized with fixed dimensions, demonstrating component reuse and declarative SVG construction via React.

AAtanoly
90% match
Loading thumbnail…

Face - tweakage

A cheerful yellow smiley face rendered as a static SVG uses D3's `arc` generator to create a mouth and React to compose a set of positioned circles and rectangles for eyes and facial details. The face is centered within a 960 by 500 viewport, with the head drawn as a circle and annotated by two black eye circles, white highlights, and red rectangular accents. The code demonstrates a React functional component that outputs SVG markup directly, combining D3 shape utilities with React's declarative element creation.

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

Smiley Face Part 1

A smiling face rendered as a yellow circle with black outlines, featuring two eyes and a curved mouth, is drawn using SVG within a React application. The composite `Face` component assembles `BackgroundCircle`, `Eyes`, and `Mouth` elements inside a translated group. The mouth is generated with the D3 `arc` function, while the position and sizes of features are parameterized through props. The final SVG is mounted into the DOM using ReactDOM.

Ssinghjy
89% match