Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published1🌍 Public
MMilind Nirgun
Last edited Feb 28, 2021
Created on Feb 27, 2021

A smiling face is drawn with a yellow circle, black-outlined eyes, and a curved mouth, all composed from SVG primitives. The example is built with React and D3, where variables like `eyeOffsetX`, `eyeRadius`, and `mouthRadius` control facial feature placement and size. D3’s `arc` function generates the mouth’s path, while React fragments group eye circles. The SVG output is assembled via a custom `Face` component that layers a background circle, eyes, and mouth inside a transformed group.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley d3

A smiling face is drawn as a yellow circle with a black outline, two eyes, and a curved mouth, all centered in an SVG. The visualization uses React to render the SVG elements, while D3’s `arc` function generates the mouth path based on inner and outer radii and start/end angles. Hard-coded dimensions and offsets position the facial features, with the face radius derived from the viewport height and stroke width. The example demonstrates combining React components with D3’s geometric utilities for declarative, static chart-like graphics.

Oo-n-e
94% match
Loading thumbnail…

Smiley

A smiling face composed of a yellow circular head, two black eyes, and a curved mouth is rendered as an SVG graphic. The React component hierarchy, including `FaceContainer`, `Head`, `Eyes`, and `Mouth`, assembles the visual from configurable props like eye offset, radius, and mouth dimensions. D3’s `arc` API generates the mouth path, while the component-based structure allows the face’s geometry to be easily parameterized and reused.

Aaredmond-re
94% match
Loading thumbnail…

Smiley

A smiling face is drawn as a yellow circle with black outlines, using two smaller circles for eyes and an arc-shaped path for the mouth. The visualization is built with React, where the SVG elements are declared in JSX. It uses D3’s `arc` function to generate the mouth’s path data, with explicit angles and radii controlling the smile’s curvature. The complete graphic is rendered to the page via `ReactDOM.render`.

BBlake Fitzpatrick
94% match
Loading thumbnail…

Smiley

A smiley face built with React and SVG, composed of a yellow background circle, two eyes, and an arc-based mouth. The components are modular, with separate files for each facial feature. The mouth uses d3.arc with inner and outer radii and fixed start and end angles to create a downward curve. All elements are centered using a transformed group within an SVG, demonstrating a component-based approach to data visualization.

MMaurice Huang
94% match
Loading thumbnail…

Smiley 1

A stylized smiley face is drawn with React and rendered as SVG, featuring a green circular background, red semi-transparent eye shapes, gradient-filled irises, a yellow diamond nose, and a curved mouth generated using d3.arc. The face is centered using a FaceContainer that applies a translation transform, while individual components like Eyes, BackgroundFace, and Mouth manage their own SVG elements. React 17 and D3 v6 are used, with the mouth path computed via d3.arc’s inner and outer radii and angle intervals.

Aavcwisesa
94% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier
93% 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
93% match
Loading thumbnail…

A Smiley Face

A Smiley Face is a simple SVG rendering of a classic smiley face, with a yellow circle, two black eyes, and a curved mouth. Built with React and D3 v7, the example uses D3’s `arc()` generator to compute the mouth path, while positions and radii for the face and features are defined via constants. The SVG is centered within a 960×500 viewport, and all shapes are drawn using React JSX elements within a `<g>` transform group.

Bbela
93% match