Fork of Smiley face part 1

100%

Fork of Smiley face part 1

✓ Published0🌍 Public

Last edited Jul 14, 2021

Created on Jul 14, 2021

Forked from xd

A large yellow circle with a black outline forms the face of a smiley, positioned at the center of an SVG canvas. Two smaller black circles serve as eyes, placed symmetrically on either side of the face's vertical midpoint. The graphic is rendered directly in SVG markup within an HTML page, using React solely to log the library to the console. The file’s README notes it is halfway towards a complete smiley, indicating the mouth has not yet been added.

AI-generated description

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part 2

A yellow smiley face rendered with React and SVG occupies the center of a 960 by 500 canvas. Three circles are drawn: a large yellow face with a black stroke, and two smaller black eyes positioned symmetrically on either side of the center. The face’s radius is calculated from the canvas height and stroke width, while eye offsets are fixed constants. ReactDOM renders the SVG elements, with styling applied via inline SVG attributes.

Oosaidhashmi31

94% match

Loading thumbnail…

Fork of Smiley face part1

This example shows a yellow smiley face drawn with SVG circles on a React-based canvas. The face consists of a large outer circle for the head and two smaller black circles for eyes, all positioned relative to the canvas center. The code uses React and ReactDOM to render the SVG elements, with hardcoded dimensions and offsets defining the face’s geometry. The rendering approach is purely declarative SVG, with no external data source.

FFrictionlessman

94% match

Loading thumbnail…

Fork of Smiley face part 1

A yellow smiley face is drawn on an SVG canvas, centered within a 960 by 500 viewport. The face includes two black eyes and a curved mouth, all rendered with simple shapes and arcs. The visualization uses React for component structure and D3’s `arc` API to generate the mouth path, while circles define the face outline and eyes. Strokes and fills are set directly in the SVG attributes.

AALI Akbar SABZI

94% match

Loading thumbnail…

Fork of Smiley Face Part 1

This visualization shows a single yellow circle with a black outline, intended as the head of a smiley face. It is rendered as an SVG element using the React framework, with the circle’s center, radius, and stroke properties set directly in the component’s attributes. The code uses ReactDOM to mount the component into the page’s root element, while the index.html file contains commented-out instructions for adding the eyes, indicating the work is incomplete. The source data is hardcoded as geometric values within the React component.

Hhukbk

94% match

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle with black outline and two filled black eyes forms a partial smiley face on an SVG canvas. The code uses React to render the SVG elements, while D3's `arc` API generates the mouth path with a specified inner radius and angle range. The face is centered within a 960 by 500 viewport, with the eyes positioned symmetrically from the center. All shapes are drawn using SVG primitives like `circle` and `path`, relying on D3 for the mouth's arc geometry.

CClara Hu

94% match

Loading thumbnail…

Fork of Smiley face part 1

A yellow circular face with black outline, two black eyes, and a half-mouth arc represents a partial smiley face centered on an SVG canvas. The visualization uses React to render the SVG elements and d3.arc to construct the mouth path with specified inner and outer radii and angular ranges. The face is drawn with hardcoded dimensions, including eye offsets and radius values, with no animation or interaction.

Jjlspangl

93% match

Loading thumbnail…

Fork of Smiley Face Part 2

A yellow smiley face is drawn on a black-and-white SVG canvas, with two black eye circles positioned symmetrically on a yellow circular face. The face and eyes are rendered as SVG circles using React 18 and ReactDOM, with coordinates derived from computed center, offset, and radius variables. The stroke width and eye placement are calculated relative to the canvas dimensions, ensuring proportional scaling. The code uses React’s `render` method to inject the SVG into the HTML DOM, with the face centered at 480,250 and eyes offset by 90 pixels horizontally and 50 pixels vertically.

Ssukram3000

93% match

Loading thumbnail…

Fork of Smiley Face Part 2

A smiley face rendered as a yellow SVG circle with two black eyes, drawn programmatically using React. The face is centered on a 960x500 canvas, with the face radius derived from the canvas height and eye positions offset symmetrically from the center. ReactDOM renders the App component, which uses JSX to create the SVG elements. The code defines constants for the face radius, stroke width, eye offsets, and eye radius, and applies a black stroke to the face circle. React 16.9.0 and ReactDOM are loaded from an external CDN.

Ccaineosborne

93% match