Skip to main content
SimilarExport ZIP
100%

Smiley Head

✓ Published0🌍 Public
Ffebryanhikmat
Last edited Jun 19, 2021
Created on Jun 19, 2021
Forked from HTML Starter

A classic smiley face rendered as a static SVG graphic, centered within a 960×500 viewport. The face consists of three simple shapes: a large yellow circle for the head with a black outline, two smaller black circles for eyes, and a mouth drawn as a thick arc. Built with React and D3, the code uses D3’s `arc()` generator to create the mouth path, while the eyes and head are plain SVG circle elements. The composition is assembled inside a single `<g>` group that translates to the canvas center, with all dimensions and offsets defined as named constants.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley face I

A simple smiley face is drawn as a static SVG graphic, centered on a 960 by 500 canvas. The face consists of a large yellow circle with a black outline for the head, two smaller black circles for eyes, and a half-circle arc for the mouth. The visualization is built with React 18 and D3 v7, using the `arc` API to generate the mouth’s path. All shapes are positioned relative to the center using D3’s arc generator and React’s JSX for the SVG markup.

Vviskky
94% match
Loading thumbnail…

Smiley face part 1

A static smiley face is drawn in SVG, centered on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two black-outlined eyes, and a mouth formed by a cropped annular sector. The mouth is created using the `d3.arc` API from D3 v7, with inner and outer radii that produce a thick arc, while the eyes and face are simple SVG circles. The components are rendered through React 18, assembled inside a single `<svg>` element with a group transform for positioning.

GGreg Munro
94% 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…

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
Loading thumbnail…

Smiley Face Part I

A yellow smiley face is rendered as a static SVG graphic, centered on a 960-by-500 canvas with a black-outlined face, two eyes, and an arc-shaped mouth. Built with React and d3.v5, it uses the `arc()` generator from the `d3` module to compute the mouth’s path, while JSX circles define the head and eyes. Dimension values like center coordinates, eye offsets, and radii are stored as constants, and the entire group is translated to the canvas center. No interaction or animation is present.

Ppkrupp
93% match
Loading thumbnail…

Smiley 1

A smiley face rendered as a static SVG graphic, composed of a cyan circle face with black outline, two black eyes, and a curved mouth that forms a half-circle arc. The React app builds the SVG using D3's `arc` generator to create the mouth path, while plain SVG circle elements handle the face and eyes. The component positions all elements relative to the center of a 960×500 viewport using a `g` transform, with dimensions computed from constant variables for radius, stroke width, and offsets. The visualization demonstrates basic SVG styling and D3 path generation within a React component structure.

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

Smiley Face 1

A classic smiley face rendered as a static SVG using React components and D3’s `arc` generator to form the mouth. The face consists of a yellow circle with a black stroke, two black eye circles positioned symmetrically, and a mouth path created from an arc with specified inner and outer radii. Coordinates and dimensions are computed from fixed constants, with the entire face group translated to the canvas center. React handles the SVG element structure, while D3 provides the arc path data.

IIvan
93% match