Smiley Face Part 2 - JAT

100%

Smiley Face Part 2 - JAT

✓ Published2🌍 Public

Last edited Feb 25, 2021

Created on Feb 24, 2021

A yellow circle with two black eyes forms a simplified smiley face on an off-white background. The face is drawn as a large filled circle with a thick stroke, while the eyes are smaller solid circles positioned symmetrically on either side of the vertical center. Built with React and rendered as SVG, the example uses ReactDOM to mount the component and defines all geometry through constants such as centerX, centerY, eyeOffsetX, and eyeRadius. The code does not yet include a mouth, hence the title’s reference to being halfway complete.

AI-generated description

Half-way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 3 - JAT

A smiley face is drawn as a yellow circle with black stroke, two fixed-position eyes, and an arc-based mouth, centered on an SVG canvas. The visualization uses React to render the SVG elements, with D3’s `arc` API generating the mouth path based on inner and outer radii and angular extents. All coordinates are calculated relative to the canvas center, and the face is grouped using an SVG `<g>` transform. The code relies on static, hardcoded dimensions and does not include interactive or animated behavior.

JJason Tiller

91% match

Loading thumbnail…

Smiley Face Part II

A smiley face rendered in yellow with black outlines shows a large circle for the head and two smaller circles for the eyes, though it lacks a mouth and is only halfway to a complete face. Built with React and embedded in an HTML page, the SVG graphic is defined declaratively using circle elements with explicit coordinates, sizes, and fill and stroke attributes. The code relies on react and react-dom libraries to render the static vector graphic into the document’s root element, with a commented-out SVG alternative indicating the minimal shape composition.

MMagdalena Motyl

90% match

Loading thumbnail…

Smiley Face Part 3B - JAT

A yellow smiley face with blue eye patches, one blue eye, and a black outlined mouth is rendered as an SVG. Built with React and D3, the face is drawn using SVG primitives like circles, rectangles, lines, and paths. D3’s `arc` generator creates the mouth shape, while React manages the component structure and rendering. The layout is centered with fixed dimensions and stroke widths.

JJason Tiller

90% match

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as SVG appears centered on a white background, with two black eyes positioned symmetrically around the vertical center. Built with React and ReactDOM, the face is constructed from three circle elements: a large yellow outer circle with a black stroke for the head, and two smaller black circles for the eyes. The SVG viewport measures 960 by 500 pixels, with all positions and radii calculated from fixed constants. The code uses JSX within a functional component to declaratively define the visualization.

WWolfgang

90% match

Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face drawn as a set of SVG circles, with a large circular face and two eye circles positioned symmetrically around the center. The face is rendered using React and ReactDOM, with all shape properties—such as the face radius, eye offset, and stroke width—defined as JavaScript constants. The code builds an SVG element with a group transform to center the face at the midpoint of a 960 by 500 canvas, and it includes a commented-out static SVG version as an alternative starting point.

JJjavellana

90% match

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the head of a smiley face, while two smaller black circles serve as eyes. The face is not yet complete, as the mouth is missing. Built with React and rendered as SVG, the component uses fixed pixel coordinates for positioning, with constants defining the face radius, eye offset, and eye size. The code imports React and ReactDOM and renders the SVG directly to the page.

LLiangyu Chen

90% match

Loading thumbnail…

Smiley Face Part II

A smiling face rendered as a yellow SVG circle with black outline and two black eyes, positioned symmetrically around the center of a 960×500 canvas. The example uses React to define and render the SVG elements, with ReactDOM mounting the component into the page. Hard-coded constants specify the circle radii, eye offsets, and stroke width, with no interactive or animated behavior. The smile itself is absent, showing only the face and eyes at this stage.

Rrsulli4

90% match

Loading thumbnail…

Smiley Face Part I

A yellow circle with two black-rimmed eyes floats on a blank canvas, forming the first half of a smiley face. The SVG is rendered with React, using hard-coded coordinates for the face, eyes, and stroke widths. The code imports React and ReactDOM to mount the component, and the eyes are drawn as separate circle elements with a fixed offset from the canvas center.

GGeorge2916

90% match