Skip to main content
SimilarExport ZIP
100%

Lets make a Smiley part 2: React

✓ Published1🌍 Public
Jjanmakar1
Last edited Aug 26, 2020
Created on Aug 26, 2020

A React-based smiley face rendered as scalable vector graphics, drawn with three circles: a large head and two eyes. The example demonstrates React component structure and JSX syntax for declarative SVG creation, with dimensions and positions stored as JavaScript constants. It uses React 16.9 and ReactDOM to mount the component into the DOM, with CSS styling for the lightblue background.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Lets Make Smiley Face Part II

This example shows a smiley face drawn as a scalable SVG graphic using React. The face consists of a yellow circle for the head, two black circles for eyes, and a placeholder for a mouth, all positioned dynamically relative to the window size. The code uses React's `ReactDOM.render` to mount the component, and computes geometric values like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius` to place elements. Rendering relies on SVG primitives within a `<g>` transform, with the head radius set to `centerY - strokeWidth / 2` to fit the viewport.

CClemarjon Laguardia
92% match
Loading thumbnail…

Smiley Face Part II - With React

This example shows a smiley face rendered as two offset eyes and a yellow circle head with a thick black outline. The SVG is built declaratively using React components and JSX, with dimensions and positions defined as JavaScript constants. It uses React 17 and ReactDOM’s `render` method to mount the component into the DOM. All shapes are drawn with SVG `circle` elements, using attributes like `cx`, `cy`, `r`, `fill`, and `strokeWidth`, computed from the center coordinates and predefined offsets.

Ddev-ignacio-h
90% match
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face rendered as a scalable vector graphic, with two black eyes and a circular head, all drawn using React and ReactDOM to create SVG elements. The code calculates the head radius, eye positions, and offsets based on the current browser window dimensions, centering the face dynamically. It uses React’s declarative JSX syntax to instantiate the SVG circles, relying on the react and react-dom production libraries to mount the visualization into the page’s root div. The face is static, presenting a simple geometric composition without animation or interaction.

SSam
90% match
Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face rendered as a simple SVG graphic. The face consists of three circles: a large yellow circle for the head and two smaller black circles for the eyes, all drawn directly in the HTML markup. The code uses React 16.9.0 and ReactDOM to mount a separate “Hello JSX” component, though the smiley face itself is plain SVG without React involvement. The rendering approach relies on explicit SVG attributes for positioning and styling, with a viewport of 960 by 500 pixels.

Bbartlomiejkoszek
90% match
Loading thumbnail…

Let's Make a Face Part II

A simple SVG smiley face is drawn with three circles: a large yellow face with a black stroke, and two smaller black eyes. The example demonstrates basic React rendering through a production React build, while the SVG markup is placed directly in the HTML file. The static face is centered at 960 by 500 pixels, with eyes positioned symmetrically around the midline, and the code relies on ReactDOM for rendering the component bundle.

PPik Yin
90% match
Loading thumbnail…

Smiley Face Part 2

Three circles on a yellow face render a classic smiley face without a mouth, using React with ReactDOM to create SVG elements. The code defines fixed dimensions for the canvas, positions the face at the center, and places two black eyes symmetrically using offset constants. It directly specifies circle properties like radius, fill color, and stroke width, demonstrating a declarative approach to static SVG rendering with React’s JSX syntax.

Nnicklaus-roy
90% match
Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as SVG circles uses React components to position a large circle for the face, two smaller circles for the eyes, and relies on ReactDOM to mount the visualization into the DOM. The code defines geometric constants for the face radius, eye radius, and offsets, then applies a black stroke to the outer circle with a fill color. This example demonstrates declarative SVG rendering through React's component model, where all shapes are computed from proportional relationships derived from the smiley radius.

YYohR
90% match
Loading thumbnail…

Smiley Face Part One

This example renders a static smiley face using React 17 and SVG. It draws three circles on an SVG canvas: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically around the center. The code defines the SVG markup directly in the HTML file, while the React app simply renders a placeholder “Hello JSX” heading. The visual output does not yet include a mouth, reflecting the “half way” status noted in the README.

Nnj889
89% match