Skip to main content
SimilarExport ZIP
100%

02-react

✓ Published1🌍 Public
Mmygynt679
Last edited Apr 8, 2023
Created on Apr 7, 2023

This example shows a smiley face rendered as a static SVG composed of three circles: a yellow head with a black outline and two black eyes. It demonstrates fundamental React DOM manipulation by embedding SVG elements directly in JSX, using React 18 and ReactDOM to mount the component. The code defines variables for dimensions and offsets, then renders the circles with fixed positions and radii.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as a yellow circle with two black eyes, created using React and SVG elements. The code defines circle components with explicit attributes for positioning, radius, fill, and stroke, a minimal approach before adding the mouth in later parts. It uses React’s `ReactDOM.render` to mount the SVG into the page, with the face centered on a fixed 960×500 canvas. The visualization demonstrates basic SVG composition within a React component structure.

CCryton Sibanda
90% match
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…

2

This example shows a simple static smiley face rendered as SVG. The main face is a yellow circle with a black stroke, and two smaller black circles serve as eyes, positioned symmetrically on either side of the center. The drawing uses React 18 and inline SVG elements, with hard-coded coordinates for the circles. No interactive behavior or data is present; the visualization is purely a fixed geometric composition.

ZZhangirkhan1
90% match
Loading thumbnail…

Smiley Face Part II

This example shows a static yellow smiley face made of three SVG circles with a black outline and two dark eye circles. It demonstrates basic React setup alongside raw SVG markup, where the circles are drawn directly in the HTML. The code includes React and ReactDOM from CDN, but the visible visualization does not rely on React rendering; instead, it uses plain SVG circle elements with fixed coordinates and stroke properties. The index.js merely renders a simple "Hello JSX" heading, leaving the smiley face as the primary visual output.

Mmatthamm@yahoo.com
90% match
Loading thumbnail…

Smiley Face with React

This example shows a simple smiley face made from three SVG circles: one large yellow circle for the head and two smaller black circles for the eyes. The React component defines the layout using constants for dimensions, center coordinates, eye offsets, and radius, then renders the SVG elements declaratively. The code uses React 17 and ReactDOM to mount the component into the DOM, leveraging JSX within the `App` function to structure the SVG. The rendering relies on standard SVG circle elements with stroke and fill properties.

AAbi360
90% match
Loading thumbnail…

Smiley Face

This example uses React and SVG to render a static smiley face. The face is drawn with three SVG circle elements on a 960x500 canvas: a yellow outer circle for the head and two black circles for the eyes, all with visible black strokes. The React component renders only a heading, while the SVG markup is placed directly in the HTML body, so the visualization is not generated through React itself. The code relies on the React and ReactDOM production libraries and a bundled JavaScript file, though no interactive behavior is implemented.

RRidhuparan
90% match
Loading thumbnail…

smiley face part I

A static smiley face rendered in SVG is composed of three circles: a large yellow head with a black stroke, and two small black eyes. The example demonstrates how React, through the `ReactDOM.render` method, mounts a simple header element into the DOM, while the face itself is drawn directly in the HTML using SVG circle elements with fixed coordinates. No interactive behavior or animations are present.

Nnexus1058
90% match
Loading thumbnail…

Smiley Face Part 1

This example displays a static smiley face rendered as three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The visualization uses React 18 and ReactDOM to mount a simple “Hello JSX” app, while the face itself is drawn directly in the HTML markup with SVG circle elements, each specifying explicit cx, cy, and r attributes. The page includes CSS for centered text and hidden overflow, and loads the React libraries from CDN.

DDineth-Mudalige
90% match