Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
CCarlos A. Peralta
Last edited Sep 28, 2021
Created on Sep 21, 2021
Forked from HTML Starter

This example renders a smiley face in SVG using React components and D3 shape generators. It shows a yellow circle with black stroke, two eye circles, and a mouth path drawn with `d3.arc()`. The code uses React for component composition, with `BackgroundCircle` as a reusable component, and renders through ReactDOM into the DOM. The SVG is 960 by 500 pixels, with position calculations for eyes and mouth based on center coordinates and offset values.

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 HTML Starter

This example renders a smiley face using React and D3. It shows a yellow circle with two black eyes, drawn as SVG shapes within a fixed 960x500 viewport. The face is constructed with React components that output SVG circle elements, while a D3 arc generator defines the mouth path, though the mouth is not currently rendered. The code imports React, ReactDOM, and D3, and uses JSX to declaratively describe the SVG output.

RRonanCurbe10
96% match
Loading thumbnail…

Fork of HTML Starter

This example renders a stylized smiley face using SVG, built with React and D3. The code defines a yellow circle with a black stroke as the head, positions two small circles for eyes, and uses `d3.arc()` to create a mouth arc with specified inner and outer radii and angle parameters. It employs ReactDOM to render the SVG into a `#root` div, with all geometry computed from width, height, and offset constants. The drawing is entirely programmatic, generated from numeric values rather than external data.

Ssumit kumar bighaniya
96% match
Loading thumbnail…

Fork of HTML Starter

A yellow smiley face rendered as an SVG using React and D3. The code builds a circle for the head, two eyes, and an arc-based mouth using D3's `arc` generator. Positioning is handled with absolute coordinates and SVG groups, while React manages the component structure and rendering into the DOM. The example demonstrates combining D3's shape generators with React's declarative UI model.

RRayzNike
96% match
Loading thumbnail…

Fork of HTML Starter

This example renders a stylized smiley face using React and D3.js, drawing a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The visualization is created with SVG elements, where the mouth is generated using the D3 `arc` function with specified inner and outer radii and start/end angles. The React component positions all shapes relative to the center of the 960x500 canvas using SVG transforms.

Mmjglsn
96% match
Loading thumbnail…

Fork of HTML Starter

This example renders a static smiley face using React and D3.js. It shows a yellow circle with black outline, two eyes, and a mouth arc, all positioned relative to a central origin point. The code constructs the SVG via React DOM elements and uses the D3 arc generator to create the mouth path with specified inner and outer radii and angular range. The drawing is centered on a 960 by 500 canvas, with eye placement defined by offset values and the face radius derived from the canvas height and stroke width.

Ttestingwithaws
96% 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 HTML Starter

A simple smiley face rendered with React and D3, using SVG shapes such as circles and a path. The face shows two black eyes and a curved mouth, defined with the D3 `arc` generator. The yellow face and blue stroke are drawn via React's JSX, while D3's `arc()` computes the mouth path. The example demonstrates a minimal React component structure with fixed dimensions and no interactivity, relying on static SVG elements positioned relative to the center of the canvas.

GGraydon88
95% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a smiley face composed of a yellow circle with black outline, red elliptical eyes, and a curved mouth shape rendered as an SVG. The code uses React to define the SVG structure and D3's arc generator to calculate the mouth path. It builds on a starter template, importing React, ReactDOM, and D3 from CDN, and demonstrates inline JavaScript expressions within JSX curly braces to compute positions and values.

SSanchay
95% match