01_03 face part 2 from scratch

100%

01_03 face part 2 from scratch

✓ Published0🌍 Public

Last edited Sep 23, 2020

Created on Sep 1, 2020

A static smiley face rendered with SVG primitives. The face consists of a large green circle for the head, white and black circles for the eyes, and red and yellow circles for the nose and mouth, all positioned via absolute coordinates. The code includes both plain SVG markup in the HTML file and a React component in `index.js` that renders the same circle elements using `React.createElement` via JSX, with `ReactDOM.render` mounting it to the root div.

AI-generated description

start from scratch towards a smiley face. this is an amazing start to data Visualisation

MIT Licensed

Similar vizzes

Loading thumbnail…

smileyface part1

A static yellow smiley face rendered as SVG elements in React, showing a circular head with two empty eye circles. The example demonstrates basic React component structure and SVG coordinate positioning, with hardcoded values for center, radius, and stroke properties. It uses ReactDOM to render a functional component into the DOM, building the face from primitives like the `circle` element without any interactive or animated behavior. The code includes commented-out alternative markup in the HTML file, while the active React version renders the same three circles at fixed positions.

HHansengineer

90% match

Loading thumbnail…

Smiley Face Part I

This example renders a static smiley face using SVG primitives within a React application. The face is constructed from three circles: a large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The page is built with React 17, loaded via the UMD distribution, and ReactDOM, though the JavaScript file only logs the React objects. The SVG is hardcoded directly in the HTML file, with dimensions set to 960 by 500 pixels. No external data sources or interaction logic are present.

Gguohao77

90% match

Loading thumbnail…

Smiley Face Part 1

A static smiley face rendered as an SVG using React and ReactDOM. The example defines a yellow circle with a black outline as the face, then positions two smaller black circles as eyes using computed coordinates and offsets. The code calculates the face radius and center based on the SVG width and height, and uses React's JSX syntax to render the shapes declaratively.

Nnavshahi

90% match

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow face, and two smaller black eyes. The face is rendered using React 17 and SVG elements defined directly in the HTML, with the React library loaded via CDN. It demonstrates basic SVG circle positioning and styling within a fixed 960 by 500 coordinate system. The code includes minimal React setup, though the rendered output does not depend on React’s rendering logic for the visible drawing.

Qqueens-lab

89% match

Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered with three circles: a large yellow head with a black stroke, and two smaller black eyes. The code uses raw SVG elements defined directly in the HTML, with CSS setting the page margin to zero and hiding overflow. React is part of the project metadata, but the example itself relies solely on SVG markup in the index file, with no JavaScript logic or data binding.

Cchshanmuk

89% match

Loading thumbnail…

Smiley face Part 1

This example displays a static smiley face constructed from three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes, rendered on a 960 by 500 canvas. The drawing is implemented directly in the index.html markup using basic SVG elements, including circle tags with explicit coordinates and stroke attributes. Although the page loads React and ReactDOM libraries, the code does not utilize them for the visualization itself; the bundled JavaScript is minimal. The face is centered horizontally and vertically, with the eyes positioned symmetrically around the center point.

FFlore

89% match

Loading thumbnail…

Smiled face PART I

This example displays a static smiley face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all placed on a 960 by 500 canvas. The graphic is rendered using raw SVG elements defined directly in the HTML body, while a separate JavaScript file imports React and ReactDOM to render a simple “Hello JSX” heading into a root div. Although the React framework is loaded, the face itself does not rely on React components or data.

Bbbarchu

89% match

Loading thumbnail…

Smiling face PartI

This example renders a static smiling face using React and SVG. It shows a yellow circle with black stroke as the head, and two smaller black circles for eyes, positioned symmetrically on the face. The rendering approach uses plain SVG elements—`<circle>` tags—directly embedded in the HTML, with styling applied via standard SVG attributes like `fill`, `stroke`, and `stroke-width`. The code includes both a React component (`ReactDOM.render`) and minimal CSS, though the visible visualization relies entirely on the static SVG markup rather than dynamic data or interactions.

00128momo

89% match