Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
Ssumitradevipolina
Last edited Feb 22, 2022
Created on Feb 22, 2022

This example shows a simple face rendered as an SVG using React, with a yellow circle for the head and two smaller circles for eyes centered on a 960×500 canvas. It combines React 17 and D3 v7, loaded via UMD builds from unpkg, with ReactDOM rendering the SVG elements directly. The code demonstrates basic JSX syntax, including curly braces to embed JavaScript expressions like `centerX` and `eyeOffsetY` for positioning. The stylesheet removes the body margin and hides overflow, allowing the visualization to fill the viewport cleanly.

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 renders a simple face using React and SVG, consisting of a yellow circle for the head and two smaller black circles for the eyes. The positioning is computed from the SVG dimensions and offsets defined in the JavaScript. The code is written as a React function component that returns JSX, which is then mounted into the DOM via `ReactDOM.render`. The HTML page loads React and D3 from a CDN, and CSS resets the body margin for a clean canvas.

SSanchay
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow face rendered as SVG circles, with black outlined cheeks, two eyes, and a red nose, centered on a 960 by 500 canvas. Using React 17 and D3 v7 loaded via UMD builds from unpkg, the code defines an `App` component that returns SVG elements with coordinates computed from constants. ReactDOM renders the component into a `div` with the id `root`, while CSS removes the body margin and hides overflow. The visualization demonstrates basic React JSX syntax, including curly braces for JavaScript expressions, and showcases how D3 and React can coexist in a single page.

Ttarungunda
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple face using React and SVG, drawing a yellow circle with two eyes on a black stroke outline. The React component constructs the SVG elements directly, using JavaScript expressions within JSX curly braces to compute the center coordinates, eye offsets, and radius values. The code imports React, ReactDOM, and D3 v7 from CDN via unpkg, demonstrating a minimal setup for interactive visualization development. The visualization is static, showing basic SVG shape composition without data or animation.

Pprajoth0405
95% match
Loading thumbnail…

Fork of HTML Starter

A simple SVG face rendered with React, featuring a yellow circle head with two black eyes, demonstrates basic SVG styling and React integration. The code uses React 17 via UMD, loads it through a script tag, and styles the SVG elements with CSS selectors like `#head` and `.eye-l`. The SVG is set to 960 by 500 pixels with a red background, and the shapes use standard SVG attributes for positioning and appearance. This example highlights static SVG visualization and React’s console logging capability.

DDain Park
94% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple face constructed from three SVG circles rendered inside a React application. It draws a large yellow circle as the head with two smaller black circles for eyes, all positioned using fixed coordinates derived from the container’s width and height. The code uses ReactDOM to render the SVG into the DOM, with D3 v7 loaded via a UMD script. The body margin is removed with CSS to create a full-bleed visualization.

Mmundembe
94% match
Loading thumbnail…

Fork of HTML Starter

This example presents a simple SVG face rendered with React and ReactDOM. The code defines a yellow circle with a black stroke to form the head, and two smaller circles for eyes, using fixed dimensions and coordinates within an SVG canvas. React elements are created using JSX and mounted to the DOM via `ReactDOM.render`, while the page loads React from unpkg CDN links. The visualization demonstrates basic SVG circle primitives and React component structure without interactive behavior or external data.

RRonanCurbe10
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a smiling face using SVG circles composed with React components. The code uses React 17 and D3 v7 loaded via CDN, drawing a yellow face with black stroke, positioned eyes, and a circular boundary. It demonstrates composing SVG elements with JSX, using inline style objects and ReactDOM to mount the visualization.

RRavi Teja Bonam
94% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow face composed of three SVG circles: a large head and two eyes. The code uses React to define the component structure and D3 v7 for utility functions, rendering the shapes through SVG. It demonstrates the use of JSX with inline style expressions to set coordinates and dimensions, and leverages ReactDOM to mount the visualization into the page.

MManideepChakilam
94% match