100%

Smiley face 2

✓ Published1🌍 Public

Last edited Oct 14, 2021

Created on Oct 11, 2021

A stylized smiley face rendered as an SVG, built with React and D3 v7. The face uses a yellow-to-orange linear gradient for its circular head, black ellipses for eyes, and a thick arc for the mouth. Two smaller arcs form dimples, positioned symmetrically on either side of the mouth. The code defines reusable arc generators using `d3.arc()`, applies rounded corners via the `cornerRadius` option, and composes the face from separate React components, including a dedicated `Eyes` component.

AI-generated description

Smiley face modifications

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face 3

This example shows a stylized smiley face rendered in SVG, with a yellow-to-orange gradient fill, elliptical eyes, and a rounded smile formed from three arcs. It builds on the previous “Smiley face” versions by adding a d3.arc-generated mouth and small smile arcs positioned with rotations and translations. The code uses React components and the D3 v7 `arc` API from the `d3` module to draw the mouth and smile shapes, while `use` references a gradient-defined circle from the SVG `<defs>`.

AAndrewLamWARC

93% match

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as an SVG in React, with circular eyes and a curved mouth drawn using an arc path. The code imports the `arc` function from d3 and defines the face geometry with fixed dimensions, including a stroked outer circle and offset eye circles. The React component returns the SVG, and the rendering is handled by d3.v7 within a React 16.7 application.

FForrest Hosten

93% match

Loading thumbnail…

Smiley

A yellow smiley face rendered as an SVG with a black stroke, two circular eyes, and a curved mouth drawn using D3’s `arc` generator with start and end angles of π/2 and 3π/2. The face, eyes, and mouth are positioned relative to a central transform, with radius and offsets computed from fixed width and height values. The code uses React 17 and D3 v6, rendering the shape declaratively via React components and D3’s `arc` API.

KKofi Adu-Gyan

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

93% match

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as an SVG in React, with black-outlined circular eyes, a mouth arc, and a red tongue. It uses d3.arc to generate the mouth path inside a React component, with circle and ellipse elements for the eyes and tongue. The face is centered and scaled within a 960x500 viewport, with no external data source.

Rrohame

93% match

Loading thumbnail…

Smiley Face

A smiling face rendered in SVG using React and D3. The face consists of a yellow circle with a black stroke, two eyes, and a mouth created with the `d3.arc()` path generator. The composition is centered using an SVG `<g>` transform, with hard-coded dimensions for the head, eye offsets, and stroke width. React manages the component structure, while D3 v7 generates the mouth path geometry.

GGeorge Williams

93% match

Loading thumbnail…

Smiley Face I

A yellow smiley face rendered with SVG sits centered in the viewport, built from a filled circle for the head, two smaller circles for eyes, and a curved path for the mouth. The code uses React for the component structure and D3’s `arc` generator to create the mouth shape with specified inner and outer radii and angular extents. All elements are positioned relative to a central transform, with fixed pixel dimensions for the head, eye offsets, and stroke width. The rendering occurs entirely in SVG, with no external data source.

BBlake Bentley

93% match

Loading thumbnail…

Smiley Face III

A smiley face rendered as an SVG graphic, composed of a yellow circle, two dark eye circles, and a curved mouth arc. The face is centered on a 960-by-500 canvas using React components, with D3’s `arc` generator creating the mouth path. Rendering relies on React 16.12 and d3 v5, with all shapes drawn in SVG and positioned via a `translate` transform. Styling includes a black stroke on the head and fixed offsets for the eyes.

IIchi Rarámuri

93% match