smiley face

100%

✓ Published0🌍 Public

Last edited Oct 22, 2021

Created on Oct 22, 2021

Forked from basic

A smiley face rendered as a yellow circle with black stroke, two solid black eyes, and an arc-shaped mouth. The SVG is built with React components, using D3’s `arc()` generator to construct the mouth path. Dimensions and positions are derived from constants, with the face centered in a 960 by 500 viewport. D3 v7 and React 17 are loaded via UMD scripts, and the visualization uses declarative JSX to define circles and the path element.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

smiley

A yellow smiley face rendered in SVG, with black outlined eyes and a curved mouth, is centered against a blank background. The visualization is built with React and D3’s `arc` generator to construct the mouth path, while circles are used for the face and eyes. The component sets explicit pixel dimensions and positions all elements relative to a central group, demonstrating a straightforward mapping of geometric primitives to a familiar icon.

BBVNPK001

95% match

Loading thumbnail…

smile

A smiley face rendered in SVG and controlled by React. The visualization draws a yellow circle for the face, two black circles for the eyes, and a curved mouth path computed with the `d3.arc` generator. React manages the SVG element structure, while D3 v5 provides the arc path math, with all coordinates derived from fixed width and height constants. The final output uses static, hard-coded values rather than data-driven binding.

JJulesBaerwald

94% match

Loading thumbnail…

smile face I

A yellow smiley face rendered as SVG in a React component. The face consists of a large yellow circle with a black stroke, created by the `BackgroundCircle` component, and two small black circles for eyes. A mouth is drawn as a full circular arc using the D3 `arc()` API with an inner radius, resulting in a ring shape. The visualization positions all elements relative to the center of the SVG canvas using translation, with dimensions fixed at 960 by 500 pixels.

Yynwc2006

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

94% match

Loading thumbnail…

Smiley

A yellow circle with a black outline forms a smiley face, flanked by two dark eye circles and a half-circle mouth arc drawn with a thick stroke. Built with React and the D3 arc generator, the SVG composition centers the face at the viewport’s midpoint, using D3’s `arc()` to define the mouth’s radius and angles. The example demonstrates translating D3 geometry into a React-rendered SVG via JSX, with fixed numeric dimensions.

Aape-ape-ape

94% match

Loading thumbnail…

smiley

A smiley face composed of a yellow circle with black stroke, two eyes, and a half-arc mouth is drawn in an SVG. The face is centered at 500x250 within a 1000x500 viewport. The code uses React for component rendering and d3.arc to generate the mouth path, with a start angle of π/2 and end angle of 3π/2. All shapes are positioned via SVG transform and fixed radius/offset constants.

JjordyBernard406

94% match

Loading thumbnail…

smiley face

A yellow smiley face rendered as SVG via React components shows geometric shapes: a circle background, two eyes, and an arc-based mouth. Each facial feature is a separate React component—BackgroundCircle, Eyes, and Mouth—composed within a FaceContainer that applies a centered translate transform. The Mouth uses d3.arc with specified inner and outer radii and start/end angles to draw the smile. Hardcoded dimensions for the face, eyes, and stroke width define the static visualization.

Jjonrynn

94% match

Loading thumbnail…

smiley_1

A yellow smiley face rendered as an SVG using React and D3. The face includes two black eyes and a mouth drawn as a D3 arc path with a thick stroke, all positioned via SVG circles and transforms. The central circle uses a thick black outline, and the mouth is created with `d3.arc()` using defined start and end angles. The code renders the face inside a `<g>` element translated to the center of a 960x500 viewport, with all shapes sized relative to fixed pixel offsets.

JjordyBernard406

94% match