Skip to main content
SimilarExport ZIP
100%

DV- Hello HTML

✓ Published0🌍 Public
RRaghavendra Sondur
Last edited Mar 4, 2021
Created on Mar 1, 2021
Forked from Hello HTML

A smiling face made of SVG circles and a path renders at the center of a 960×500 viewport, with a yellow background circle outlined in black, two offset black eyes, and an arc-shaped mouth. The example combines React 17 with D3 v6, using a custom `arc` generator from D3 for the mouth path while passing layout constants like `eyeOffsetX` and `mouthRadius` as React props. The face is grouped and translated to the canvas midpoint, and the background circle derives its radius from the vertical center minus half the stroke width.

AI-generated description

Halfway towards a smily face!

MIT Licensed

Similar vizzes

Loading thumbnail…

DV1

A face composed of basic SVG shapes—a yellow circle for the head, black circles for eyes, and a d3-generated arc for the mouth—is rendered in React using D3 v6. The code constructs the face from reusable components (BackgroundCircle, Eyes, Mouth) that accept numeric props for positioning and sizing, with the overall layout centered via a translated group. The mouth path is created using `d3.arc` with specified start and end angles, while the SVG is produced declaratively through React elements.

OOscar-gif
91% match
Loading thumbnail…

Hello HTML

A smiling face rendered as a yellow circle with black stroke, two eyes, and a halfway smile (an arc from 180° to 270°). The face is drawn with React components using SVG, with each facial feature (background, eyes, mouth) as a separate reusable component. It uses d3.arc to generate the mouth’s path, and d3 is loaded alongside React 17 and D3 v7. The face’s dimensions and proportions are passed as props from index.js.

SsqallFF
90% match
Loading thumbnail…

Hello HTML

A smiling face rendered as a yellow SVG circle with black stroke, two eyes, and an arc-shaped mouth, built with React components and D3's `arc` generator. The code defines the face's dimensions and positions using constants, then draws the mouth path via `mouthArc()` with specified inner and outer radii and start/end angles. The SVG output is created through React's `ReactDOM.render` into a root element, while D3 is loaded via a script tag alongside React production builds.

Ccoedolay
90% match
Loading thumbnail…

Hello HTML

This example renders a smiling face composed of SVG shapes, including a yellow background circle, two eyes, and a mouth created with a D3 arc path. The face is built from reusable React components—BackgroundCircle, Eyes, Mouth, and FaceContainer—that accept props for positioning and sizing. The FaceContainer establishes an SVG coordinate system centered at a specified point, while D3’s `arc` generator defines the mouth’s curved shape. The visualization demonstrates how React and D3 can be combined to create declarative, parameterized graphics.

Ttatpiras
89% match
Loading thumbnail…

Hello HTML

A yellow circle with black outline forms a face, with two black eyes and a black mouth created as an arc path, all rendered inside an SVG. The example demonstrates a minimal React application using `d3.arc` to generate the mouth’s path data. The `ReactDOM.render` method mounts the SVG component, which uses D3’s arc generator to define the path geometry. The face is centered on a 960 by 500 canvas, with positions computed relative to the center.

SSteven Reginald Barkley
89% match
Loading thumbnail…

Hello HTML

This example shows a smiling face built from a yellow circle, two eyes, and an arc-based mouth, centered in an SVG canvas. It demonstrates how to combine React components with D3 shape generators, using `d3.arc` to create the mouth path and passing props like `eyeOffsetX` and `eyeR` to reusable components. The rendering relies on React’s declarative JSX structure, with D3 v5 and React 16 loaded via CDN, and the face is positioned using an SVG `<g>` transform.

Ppiecesofuk
89% match
Loading thumbnail…

Hello Html

A smiling face rendered as a yellow SVG circle with black stroke, eyes, and an arc-shaped mouth. The example demonstrates React rendering with D3's `arc` generator to create the mouth path, while circles are positioned using transform translations. D3 v6 is loaded via UNPKG, and components use ReactDOM to mount into the DOM.

AArunSalamander
89% match
Loading thumbnail…

Hello HTML

A smiling face rendered as SVG circles and arcs, assembled from reusable React components. The face uses a yellow background circle, black-outlined eyes with white and dark highlights, and a curved mouth drawn with a D3 arc generator. Components like `FaceContainer` and `Face` compose the SVG structure, while props control dimensions and positions. The example demonstrates combining React for UI composition with D3's `arc` API for path generation.

AAngelinaGeru
88% match