Skip to main content
SimilarExport ZIP
100%

Hello dumb

✓ Published1🌍 Public
Mmarrue15
Last edited Feb 24, 2021
Created on Feb 24, 2021
Forked from Hello HTML

A simple SVG smiley face built with React and D3 v6 renders a yellow circle with a red stroke, two black and grey eyes, and a curved mouth created using the d3.arc path generator. The face is centered on a 960x480 canvas, with fixed positions for facial features. The example demonstrates embedding D3 shape utilities within a React component, using the arc’s inner and outer radii and start/end angles to define the mouth’s path.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

A React-rendered SVG smiley face demonstrates basic D3 shape generation. The component uses `d3.arc` to create a mouth path with inner and outer radii and fixed start/end angles, while plain SVG `<circle>` elements position two eyes via negative and positive x-offsets from the center. The face is drawn inside a `<g>` transform that centers the artwork in a 960×500 viewport. The yellow circle has a black stroke, and the mouth is rendered as a half-circle arc, with all geometry computed from constant dimensions rather than data.

Aabhijeeta21
92% match
Loading thumbnail…

Hello HTML

A yellow smiley face rendered in SVG shows how React and D3 can be combined to draw simple shapes. The face uses two circles for eyes and a D3 `arc()` generator for the mouth, with all elements positioned relative to a central transform. React manages the SVG markup, while D3 provides the path calculation for the mouth arc. The example demonstrates a minimal setup using React 17, ReactDOM, and D3 v7, with static data encoded directly in the component.

Eeranta
92% match
Loading thumbnail…

Hello HTML

This example renders a simple smiley face in SVG using React and D3. The face is composed of a yellow background circle, two black eye circles, and a mouth path generated with the `arc()` function from D3. The code uses React to create the SVG elements and computes coordinates with static variables, such as `eyeOffsetX` and `eyeOffsetY`. The mouth arc is drawn with an inner and outer radius, starting and ending angles defining a half-circle shape. The visualization shows basic composition and DOM manipulation with React 17 and D3 v7.

Cchun0330
92% match
Loading thumbnail…

Hello HTML

This example renders a smiley face using React and D3’s `arc` function. The SVG contains a yellow circle for the face, two black eyes positioned via offset constants, and a mouth drawn as an arc path with `d3.arc()`. The code defines a React component that returns SVG elements, with sizes and coordinates computed from fixed width and height values. It demonstrates combining React’s declarative JSX with D3’s geometry utilities inside an SVG rendering, using d3.v6 and React 17.

KKLU-MJR
92% match
Loading thumbnail…

The React & d3 Smiley Face

A minimal smiley face rendered as an SVG using React components, with d3’s `arc` generator drawing the mouth. The face consists of a yellow circle, two black eye circles, and a curved mouth path, all centered and scaled relative to a fixed viewport. React 17 manages the DOM, while D3 v6 provides the arc shape’s path data. The example demonstrates combining React’s declarative JSX with D3’s geometry utilities for simple, static SVG composition.

BBagaski
92% match
Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React and D3.js, drawing SVG shapes on a yellow circular background with black stroke. The face features two eyes and a mouth created with the `arc()` generator from D3, positioned via a group transform. React manages the component structure and rendering into the DOM, while D3’s arc API defines the mouth’s inner and outer radii and angles. The result is a minimal, interactive-free visualization demonstrating how to combine React’s declarative UI with D3’s geometric utilities for static SVG output.

BBrendaQu
92% match
Loading thumbnail…

Hello HTML

This example renders a simple smiley face using React components for SVG shapes, with a yellow circle as the face, black eyes, and a mouth drawn with a D3 arc generator. The application uses ReactDOM to mount the SVG into an HTML page, and imports the `arc` function from D3 v6 to compute the mouth’s path. All positions and sizes are defined as constants, and the face is centered using an SVG transform. No data source is involved; the visualization is purely illustrative.

GGordon Yang
92% match
Loading thumbnail…

Hello React

A yellow SVG smiley face is centered in a 960-by-500 viewport. The code uses React to render and update the DOM, while D3’s `arc()` generator creates the mouth path. Circles draw the face, eyes, and outline, with the face’s radius and stroke positioned relative to the center. Static properties define all coordinates and radii.

Aanalyticalkiticat
91% match