Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
KKiran3295
Last edited Feb 21, 2022
Created on Feb 21, 2022

This example shows a simple SVG smiley face composed of three circles: a large yellow circle for the head and two smaller circles for the eyes, rendered in a React component using the `svg` element. The code uses React’s JSX syntax to declaratively define the circles, with attributes like `cx`, `cy`, and `r` for positioning and sizing, and `fill` and `stroke` for styling. It leverages D3 v7 (loaded via a script tag) but only for its bundled distribution, not for any specific visualization functions, while the React rendering is done through `ReactDOM.render`. The design hardcodes the dimensions and coordinates, serving as a minimal template for combining React with SVG.

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
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 renders a simple smiley face composed of three SVG circles: a large yellow circle with a black stroke for the face and two smaller black circles for the eyes. The React component `App` returns the SVG markup directly, using JavaScript expressions within JSX curly braces to compute circle positions and dimensions relative to the viewport. The visualization demonstrates how React manages SVG rendering in the browser, with D3 loaded as a standalone library but not actively used in this static composition.

Jjwadhwa6
95% 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
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

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.

KKrzysiek1985
94% 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
94% 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
94% 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
94% match