Skip to main content
SimilarExport ZIP
100%

Smiley face I

✓ Published0🌍 Public
Vviskky
Last edited Jul 28, 2023
Created on Jul 25, 2023
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

Smiley Face Part I

A yellow circle with two black eyes and an open mouth forms a static smiley face centered in an SVG canvas. The face is drawn using React components that render SVG primitives, including circles for the head and eyes and a d3.arc path for the mouth. The d3 arc generates the mouth shape with specified inner and outer radii and angular extents, while the head and eyes are plain SVG elements. The visualization uses a fixed 960 by 500 pixel viewport with the face grouped and translated to the center.

JJon
94% match
Loading thumbnail…

Smiley Face Part I

A static smiley face rendered in SVG shows a yellow circle with black stroke, two eyes, and a mouth arc centered on a 960 by 500 canvas. This React component draws the face using D3’s `arc` generator with specified inner and outer radii and angles for the mouth, while circles are positioned via eye offsets and radius constants. Built with D3 v6 and React 17, the example hardcodes all geometry values rather than loading external data, demonstrating precise coordinate-based composition in a reusable component.

Eendomo
94% match
Loading thumbnail…

Smiley Head

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.

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

A yellow smiley face is drawn as a static SVG composition. The code uses D3's `arc` API to generate the mouth as a half-ring path, with the `startAngle` and `endAngle` set to create a semicircle. React 18 components render the head and eyes as simple circles, and the entire drawing is centered via a transform. The visualization demonstrates a procedural, code-defined approach to creating a familiar icon, with the background circle and facial features defined as primitive shapes.

KKonstantinos Kotsiaridis
93% match