Skip to main content
SimilarExport ZIP
100%

Fork of My HTML Starter

✓ Published0🌍 Public
Mmeghshah612
Last edited Feb 18, 2022
Created on Feb 13, 2022
Forked from HTML Starter

This example renders a stylized, smiling face composed of basic SVG shapes using React and D3. The visualization shows a light blue circular background with enclosing black stroke, two white eyes with inner pupils and eyebrow arcs, a triangular nose, a red ellipse mouth, and pink blush circles. The code uses React components like `BackGround`, `Eye`, and `InnerEye` to structure elements, while D3’s `arc` generator creates the eyebrow and mouth paths with specified angles and radii. SVG lines, circles, ellipses, and paths are positioned via coordinate transforms, with all styling applied directly as SVG attributes.

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 My HTML Starter

This example renders a stylized face using React and D3 v7, composed of SVG shapes such as circles, lines, ellipses, and arcs. It demonstrates the D3 `arc` API to generate paths for the mouth, eyebrows, and additional curved elements, while leveraging React’s `ReactDom.render` to mount the component. The visualization uses a fixed 960×500 canvas with absolute positioning, drawing a yellow circular head with eyes, a red mouth, pink cheeks, and black facial features, all constructed declaratively in JSX.

Mmeghshah612
94% match
Loading thumbnail…

Fork of 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.

Mmukhopj
92% match
Loading thumbnail…

Fork of HTML Starter

This example shows a smiling face drawn entirely with SVG primitives inside a React component, rendered by ReactDOM into a single div. The code demonstrates how to combine React's JSX syntax with D3's arc generator to create the mouth path, while circles and an ellipse form the eyes and nose. All shapes are centered and scaled within a 960 by 500 viewport, with styling applied directly through SVG attributes like fill and stroke. The example uses React 16.7 and D3 v7, loaded from CDN, with the visual output driven purely by static geometric calculations rather than data.

Aadam.hsaine@gmail.com
92% match
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
91% match
Loading thumbnail…

Fork of HTML Starter

This example shows a stylized cartoon face constructed from SVG shapes, rendered in a React component. The face consists of a yellow circular background with a black stroke, two eyes, and a mouth created using the d3 `arc` function to draw a semicircular path. The React component system is used to assemble the face from smaller reusable parts like `BackgroundCircle`, `Eyes`, and `Mouth`, with coordinates and dimensions passed as props to position each element.

SSayyam Aneja
91% match
Loading thumbnail…

Fork of HTML Starter

This example renders a stylized face using React components and D3’s `arc` generator for the mouth. The face is composed of separate SVG elements—a yellow background circle, two eyes, and an arc-shaped mouth—arranged within an SVG container via a transform. The `Face` component receives props for geometry such as eye offset, radius, and stroke width, and the code uses React 16.9 and D3 v7 to build the SVG output dynamically.

Ssophiasharif
91% 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
91% 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
90% match