Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published2🌍 Public

Last edited Jul 14, 2021

Created on Jul 13, 2021

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

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.

AAdamRyanUK

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

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

Loading thumbnail…

Fork of Hello HTML

This example shows a smiley face rendered as a single SVG graphic, constructed with React and D3. The face is built from basic geometric shapes: a yellow circle for the head with a black stroke, two filled circles for eyes, and a D3-generated arc path for the mouth. React composes the SVG elements, while the `arc()` API from d3 defines the mouth’s curved path, specifying its inner and outer radii and start and end angles. The SVG canvas is fixed at 660 by 500 pixels, with the face centered through an SVG transform.

Ssd2beatles

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

93% match

Loading thumbnail…

Fork of HTML Starter

A stylized smiley face is drawn using React and D3, with a yellow circle for the head, two black eyes, and a curved mouth. The face is rendered as SVG elements, positioned relative to a central coordinate system. The code defines constants for dimensions and uses the `arc` function from D3 to generate the mouth path with specified inner and outer radii and angles. React renders the SVG tree into the DOM, while D3 provides the geometric path calculation.

VVictor Abrokwah

93% match

Loading thumbnail…

Fork of Hello HTML

This example renders a classic smiley face using React and D3, displayed as SVG shapes. The code uses D3’s `arc()` generator to draw the mouth as a thick partial circle, while the face, eyes, and stroke are plain SVG circles. React 17 composes the component tree, and D3 v7 provides the arc path calculation, with all geometry positioned relative to the center of a 960×500 viewport. The result is a minimal, static illustration built from primitive shapes.

SSpon4ik

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a stylized smiley face using React and D3.js v7, with SVG circles forming the head, eyes, and mouth. The face is centered and rotated slightly, while the pupils animate by computing their positions using `Date.now()` within the JSX, shifting along circular paths. The mouth is drawn using a D3 arc generator (`d3.arc`) with inner and outer radii, transformed and scaled vertically. The code demonstrates integrating React state-free rendering with D3 shape helpers for a simple, animated SVG composition.

Bbjfmbeck

92% match