Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Sep 22, 2021

Created on Sep 22, 2021

A React-rendered SVG face shows a yellow circle with black stroke, two dark eye circles, and an arc-based mouth created with d3.arc. The code uses React 17 and D3 v7, with the mouth path generated via arc start and end angles. Eye positions and radii are fixed constants, and the background circle’s radius derives from the viewport height minus stroke width. The visualization demonstrates basic SVG shape composition within a React component, using D3 only for the arc path generator.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

A simple SVG face built with React and D3 renders a yellow circle with two eyes and a mouth. The background circle uses the `BackgroundCircle` component, while the mouth is generated using `d3.arc` with specified inner and outer radii and angle ranges. Eye positions are set via SVG circle coordinates, and the entire group is centered using a translate transform. All shapes are drawn directly as SVG elements within a fixed 960×500 viewport.

AAdrian Belen

95% match

Loading thumbnail…

Fork of Hello HTML

A React and D3 page renders a yellow smily face centered on a black-stroked circle, with two eyes and an arc-shaped mouth. The face is drawn using SVG shapes, including a circle for the background, two smaller circles for eyes, and a path generated by the D3 arc generator. React components, `BackgroundCircle` and `Eyes`, assemble the features, while D3’s `arc()` API defines the mouth’s inner and outer radii and angular span. The code runs in D3 v5 and React 16.9, producing a static SVG visualization.

Rriizevans

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple, hand-coded SVG face composed of a yellow circle, two eyes, and an arc-shaped mouth. The face is rendered inside a React component using JSX, with the mouth path generated by the `arc()` generator from d3-shape. The page loads React 17 and D3 v7 via CDN, then mounts the component into a root div, producing a static, frameless visualization at 960 by 500 pixels.

IIan Neidel

94% match

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline represents a face, featuring two small black eyes and a black arc for a mouth. The SVG graphic is built using React, with the shape’s geometry and the mouth’s arc path calculated using the D3.js `arc` function. The code defines the canvas dimensions and positions elements like the eyes and mouth relative to a central point within an SVG viewport of 960 by 500 pixels.

BBharadwaja

94% match

Loading thumbnail…

Fork of Hello HTML

This example shows a smiling face rendered as an SVG using React components. It draws a yellow circle for the head, two black circles for the eyes, and a curved path for the mouth. The code uses React for the user interface, ReactDOM to mount the component, and the `arc` function from D3 to generate the mouth’s path. The face is centered with fixed dimensions for stroke, eye offset, and radius, demonstrating a simple composition of SVG elements built with React and D3.

Eea525

94% match

Loading thumbnail…

Fork of Hello HTML

A simple smiling face rendered as an SVG using React components, with D3's `arc` generator drawing the mouth. The face consists of yellow circles for the head and eyes, with black strokes, all positioned via SVG transform. React 17 manages the DOM, while D3 v7 provides the arc path calculation. The example demonstrates basic SVG shape composition and React integration without interactive behavior.

CCarl Centola

94% match

Loading thumbnail…

Fork of Hello HTML

A React-based SVG drawing shows a yellow circle with a black outline, two black eye circles, and a partial ring for a mouth, all centered in a 960×500 viewport. The code imports the `arc` function from D3 v7 and uses it to generate the mouth path, while React 18 creates the SVG elements declaratively. The example demonstrates a basic "Hello HTML" page that combines static shapes with D3’s geometry helpers, though no interactive or data-driven behavior appears in the bundle.

IIphenTephen

94% match

Loading thumbnail…

Fork of Hello HTML

A stylized face rendered with React and D3 components draws a yellow circle for the head, red eyes, and a curved mouth using D3's arc generator. The FaceContainer builds an SVG with a centered group, while BackgroundCircle and Eyes define the individual shapes as React components. The visualization demonstrates a modular, component-based approach to SVG rendering within the React framework, using D3 v7 for the mouth path calculation.

Ssixsoxsix

94% match