Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
KKrzysiek1985
Last edited Feb 12, 2022
Created on Feb 12, 2022

This example shows a simple smiley face drawn with scalable vector graphics (SVG) circles in a React application. The code uses React’s declarative JSX syntax to define SVG elements, with D3 loaded but not actively used. It renders a yellow face with black outline, two eyes, and a smile on a fixed 960x500 canvas, demonstrating basic component structure and inline styling within a React component.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple smiley face drawn with SVG shapes: a yellow circle for the head and two smaller black circles for eyes. The code uses React to define the SVG elements declaratively, with D3 v7 loaded via CDN for potential data manipulation. The face is centered in a fixed 900 by 500 viewport, and the layout is computed using JavaScript constants for positions and radii, demonstrating how to compose SVG graphics within a React component.

Rrohinikotha
96% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. The face is composed of SVG circles and a line element positioned within a 960x500 viewport. React code defined in `index.js` uses JSX with inline expressions in curly braces to set coordinates and radii, while plain SVG attributes handle stroke and fill styling. The visualization demonstrates fundamental React rendering with SVG primitives, including a yellow circle for the face, black eyes, and a white smile. The page loads React, ReactDOM, and D3 via CDN scripts, embedding the visualization in a `#root` div.

AAnjan Shrestha
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. It draws a yellow circle with a black stroke as the head, plus a single black eye circle positioned with fixed offsets from the center. The code uses React’s `ReactDOM.render` to mount the component and defines the SVG shapes inline with JSX, while D3 is loaded but only used to create a sample arc path that is not displayed. The page resets the body margin via CSS for full-window rendering.

DDeekshithVemula
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG, drawing a yellow circle with two smaller black circles for eyes. The code uses React 17 and D3 v7 via UMD scripts from unpkg, with ReactDOM rendering the SVG elements into the DOM. The visualization demonstrates basic SVG shape attributes like `cx`, `cy`, `r`, and `stroke`, while CSS removes the body margin to display the graphic edge-to-edge. The static composition is defined entirely through JSX coordinates and radii.

KK V VINITHA
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow smiley face rendered as an SVG, with two black eyes positioned on a larger yellow circle. The visualization uses React to define and render the SVG elements, while D3 v7 is loaded but not actively used in the drawing logic. The code demonstrates basic React component structure, JSX syntax with inline JavaScript expressions for coordinates and dimensions, and styling through CSS to remove body margins. The rendering approach relies on static SVG circles with fixed properties, illustrating fundamental React and SVG integration within a minimal setup.

RRayed12
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow smiley face rendered as an SVG, with two black eyes positioned on a larger yellow circle. The visualization uses React to define and render the SVG elements, while D3 v7 is loaded but not actively used in the drawing logic. The code demonstrates basic React component structure, JSX syntax with inline JavaScript expressions for coordinates and dimensions, and styling through CSS to remove body margins. The rendering approach relies on static SVG circles with fixed properties, illustrating fundamental React and SVG integration within a minimal setup.

RRayed12
95% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face rendered as a static SVG graphic using React. The drawing consists of three circles: a large yellow circle for the face and two smaller black circles for the eyes, all placed within a 960 by 500 pixel SVG canvas. The code uses React and ReactDOM to render the SVG elements, with styles defined in CSS. The visualization demonstrates basic React component structure and declarative SVG circle creation without any interactive or data-driven behavior.

FFlorian Maas
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

A yellow smiley face rendered as SVG, with two black eyes on a yellow circular face outlined in black. The example demonstrates using React to compose SVG elements, calculating circle positions with JavaScript variables for center coordinates and offsets. It imports React, ReactDOM, and D3 from CDN, and uses JSX curly braces to embed dynamic values for circle properties. The code highlights basic SVG drawing with React and D3 v7.

Zzrouga
94% match