Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Mmukhopj
Last edited May 31, 2022
Created on May 31, 2022
Forked from HTML Starter

A smiling face rendered as an SVG inside an HTML page, built with React and D3. The visualization draws a large grey circle for the face, two blue circles for eyes, and a mouth using D3's `arc` function to create a path with specified inner and outer radii and angular range. The code uses D3 v7 selection and attribute methods to position shapes relative to the SVG's width and height, with a fixed 960 by 500 pixel canvas.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

A smiling face built from reusable React components, with repeated instances rendered in a grid. The visualization demonstrates modular SVG construction through `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, using `d3.arc` to generate the curved mouth path. React renders five identical faces from an array generated by `d3.range`, each sized at 160 by 166 pixels with fixed positioning and styling. The code uses React 18.3.1 and D3 v7, rendering static SVG output without interaction or animation.

Ssaismitha28.bachu@gmail.com
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

A smiling face built from simple SVG shapes, rendered in React. The code imports React and ReactDOM, alongside the `arc` function from d3, which constructs the mouth path. A background circle, two eyes, and the mouth are composed within a translated `<g>` element. The eyes are separate React components, while the mouth uses d3's `arc` generator with specified inner and outer radii and angles. All shapes have fixed stroke widths and are centered on an SVG canvas.

Ppianojoel
94% match
Loading thumbnail…

Fork of HTML Starter

A stylized face rendered with React and D3, centered on a yellow SVG circle with a black stroke. Outer white eyes, inner green-stroked pupils, and a D3 arc-generated mouth are composed as reusable React components, each accepting custom geometry props. The face is built from nested SVG groups translated to the viewport center, using d3.arc to define the mouth path. Data is passed declaratively through props, and the visualization is mounted into the DOM via ReactDOM.

MMartenServices
93% match
Loading thumbnail…

Fork of HTML Starter

This example renders a smiling face using React and D3.js. A yellow circle with a black outline forms the head, with two smaller circles for eyes and a D3 arc path creating the mouth. The visualization uses React’s declarative component model to define SVG elements, while the D3 `arc` function computes the path data for the mouth. The drawing is generated entirely in code without external datasets, demonstrating how D3 geometry APIs can be embedded within a React-based SVG rendering pipeline.

SStakerino
93% match
Loading thumbnail…

Fork of Hello HTML

A smiling face rendered as an SVG uses React components built on D3.js for geometric primitives. The face consists of a yellow circle, three sets of eyes, and an arc-shaped mouth. D3's `arc` API constructs the mouth path, while React’s component structure manages the circle and eye elements. The visualization appears centered within a fixed 960x500 canvas.

Rrandom number
93% match
Loading thumbnail…

Fork of HTML Starter

This is a simple face built entirely from SVG primitives, rendered with React and D3. A large yellow circle forms the head, with two black-and-white eyeballs and a smiling mouth composed of an arc path. The mouth's shape is generated using D3's `arc()` function to create an annular sector, while React components structure the SVG elements. The layout uses fixed pixel coordinates derived from the viewport dimensions.

AAnkit Sanghvi
93% match
Loading thumbnail…

Fork of HTML Starter

A React component renders a smiling face built from SVG primitives: a yellow circle with a black stroke for the head, two offset circles for the eyes, and a curved path for the mouth using d3.arc. The visualization demonstrates component composition and D3 integration within React, using d3.v7 and react-dom to construct reusable, parameterized visual elements.

LLewis Ward
93% match