Skip to main content
SimilarExport ZIP
100%

Smiley Face

✓ Published0🌍 Public
Dddelorimier
Last edited Aug 6, 2022
Created on Jul 30, 2022
Forked from HTML Starter

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.

AI-generated description

Smiley Face project. Learning HTML, CSS, SVG, React, D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, set against a red background. Two smaller circles create the eyes, while a thick arc-shaped path forms the mouth. The drawing is centered using an SVG `g` element and a `translate` transform. The code uses d3’s `select` and `append` to build the SVG structure, and the `arc` generator to define the mouth’s path, with all coordinates calculated relative to the canvas center.

Kkaddindr
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline forms the face, centered with two solid black eyes and a thick, open arc for a mouth. The SVG is rendered with React, using D3’s `arc()` generator to create the mouth path with specified inner and outer radii. The code draws shapes with D3 selection-free primitives, setting the smile’s start and end angles to create a half-circle opening. All elements are positioned via SVG `<g>` transforms, with static pixel dimensions for the 960×500 viewport.

DDre Feeney
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

A yellow smiling face is rendered as an SVG graphic, composed of a circular head, two eyes, and a curved mouth alongside a small nose. The drawing is generated using React, with the D3.js arc generator creating the mouth and nose paths. The component positions each shape relative to a central coordinate system, using integer values for offsets and radii to define the features. The final output is a static, centered illustration on a full-window canvas.

DDeegutla123
95% match
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline serves as the face, featuring two solid black eyes positioned symmetrically above the center and a thick, dark mouth arc drawn along the lower half. The example uses React to render the SVG elements and D3’s `arc` generator to construct the mouth path, with coordinates computed from fixed offsets and radii. The face is centered within a 960 by 500 viewport, and all shapes are defined declaratively as JSX components.

LLưu Thế Vinh
95% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a yellow circle with black eyes and a curved mouth, built using React and D3.js. The face is drawn entirely with SVG shapes: two `<circle>` elements for the eyes, a large `<circle>` for the head, and a `<path>` created by the `d3.arc()` generator with a constant inner and outer radius to form the mouth. The `arc()` API sets start and end angles to create a full ring, while stroke widths and coordinates position each element relative to the center of a 960×500 viewport. No external data is loaded; all geometry is hard-coded.

DDraconis1992
95% 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
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