Skip to main content
SimilarExport ZIP
100%

Smiley

✓ Published0🌍 Public
KKofi Adu-Gyan
Last edited Mar 17, 2021
Created on Mar 16, 2021
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley

A yellow smiley face is rendered as an SVG using React and D3. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path using the `d3.arc` API with specified inner and outer radii and angles. React manages the SVG elements, while D3’s `arc()` generator computes the mouth’s path data. The layout uses fixed pixel dimensions and positions centered on a 960 by 500 canvas.

JJosh Zalcman
96% match
Loading thumbnail…

Smiley

A yellow smiley face is drawn centered on a 960 by 500 SVG canvas, with a thick black outline, two black circular eyes, and a smile arc. The face is rendered using React components that construct SVG elements, while D3's `arc` generator creates the mouth path. Circle positions and the arc’s inner and outer radii are defined through configuration objects, and the smile spans from π to 3π/2 radians.

SSamuel Ferrer
95% 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
95% match
Loading thumbnail…

Smiley 1

A yellow smiley face rendered with SVG in React, featuring two black eyes and a mouth drawn as a thick arc. The code uses D3’s `arc()` generator to shape the mouth, while the face, eyes, and stroke are plain SVG circles positioned via React components. All elements are grouped and centered using a `translate` transform, with dimensions and offsets defined as constants. The visualization demonstrates combining React’s declarative JSX with D3’s geometric helpers to build a simple, static graphic.

ZZoha9
95% 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
95% match
Loading thumbnail…

Smiley Face

A yellow smiley face is rendered in an SVG using React components. The face consists of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth drawn as an arc. The mouth uses `d3.arc()` with specified inner and outer radii and start/end angles to create a smile shape. Coordinates for the eyes and dimensions for the mouth are defined as constants, and the entire face is centered within the SVG viewport.

MMarcos
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow smiley face rendered as a single SVG graphic, with black-stroked eyes, a circular head, and a curved mouth arc. The example uses React to declaratively define the SVG elements and D3’s `arc` generator to compute the mouth path from inner and outer radii and angular start/end values. All coordinates are derived from hardcoded width, height, offsets, and radii, producing a static composition centered in a 960x500 viewport. The code imports only the `arc` function from D3 v6.

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