Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Dec 22, 2021

Created on Dec 20, 2021

This example renders a smiley face as an SVG composition built with React and D3.js. A radial gradient, defined in the SVG `<defs>` element, colors the main circle yellow with an orange rim, while smaller white circles with black pupils form the eyes. The orange mouth is drawn using a path with a computed `d` attribute from the `mouthArc()` function. All shapes are grouped and translated to the canvas center, and the React app is mounted into the `#root` div within a minimal HTML page.

AI-generated description

A bare minimum HTML page.

half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

CCarlos A. Peralta

95% 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

94% match

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

94% match

Loading thumbnail…

Fork of HTML Starter

This example renders a cheerful smiley face using SVG, composed of a radial-gradient-filled face, two white eyes with black pupils, and an orange mouth drawn as an arc. It is built with React and D3 v7, specifically using the `arc` generator from the `d3` package to create the mouth’s path. The entire graphic is centered within a 960×500 viewport, with all shapes positioned via explicit coordinates and transforms. The code demonstrates how to mix React’s declarative JSX with D3’s geometric helpers, all inside a minimal HTML page.

Kkalmdown

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

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

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

93% match

Loading thumbnail…

Fork of Hello HTML

This example renders a smiley face as an SVG composed of D3-generated shapes, drawn with React and D3 v6. The face uses three circles for the head and eyes, plus an arc path created via `d3.arc()` for the mouth, all centered on a 960×500 viewport. The `arc()` function defines the mouth’s inner and outer radii and its start and end angles, while React’s `ReactDOM.render()` mounts the component tree. The yellow head and black stroke mimic a classic emoji, with positioning handled by JSX attributes and a transform group.

HHALisDave

93% match