Skip to main content
SimilarExport ZIP
100%

Face+_+Glass

✓ Published0🌍 Public
Nnataliaas
Last edited May 1, 2021
Created on May 1, 2021
Forked from HTML Starter

A cheerful yellow face fills the browser viewport, drawn as a full-screen SVG circle with a black outline. Two smaller black circles serve as eyes, positioned symmetrically above the center, while a thick black arc below forms a smiling mouth. The visualization uses React for component structure and D3’s `arc` generator to define the mouth’s curved path. Dimensions and positions are calculated from `window.innerWidth` and `window.innerHeight`, centering the face dynamically. This example demonstrates a minimal blend of React rendering and D3’s geometry API within a scalable vector graphic, adapting to any screen size automatically.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Face

A stylized face built from SVG shapes, rendered as a yellow circle with black outline, two eyes, and a mouth arc. The geometry is computed relative to the center of a 960×500 viewport using React for component structure and the D3 arc generator for the mouth path. Eye positions and radii are defined as constants, while the mouth uses inner and outer radii with a defined start and end angle. The visualization demonstrates combining React’s declarative JSX with D3’s functional shape APIs for a simple custom chart.

BBexnam
88% match
Loading thumbnail…

Face html

A smiling face rendered as a yellow circle with black outline, two eyes, and a curved mouth fills the browser window. The React component generates an SVG using D3’s `arc` generator to create the mouth path, with circle elements for the face and eyes. All dimensions are computed from the window’s width and height, and the SVG scales to the full viewport. The code relies on React 18 and D3 v7, with no external data source; the face is purely programmatic.

NNeeraj
88% match
Loading thumbnail…

Face - tweakage

A cheerful yellow smiley face rendered as a static SVG uses D3's `arc` generator to create a mouth and React to compose a set of positioned circles and rectangles for eyes and facial details. The face is centered within a 960 by 500 viewport, with the head drawn as a circle and annotated by two black eye circles, white highlights, and red rectangular accents. The code demonstrates a React functional component that outputs SVG markup directly, combining D3 shape utilities with React's declarative element creation.

Eequiilibriumdigital
87% match
Loading thumbnail…

Face

A simple yellow face with two black eyes and a circular mouth is drawn using React and SVG. D3’s `arc` generator creates the mouth’s path, while circles render the head and eyes, all positioned with absolute coordinates. The SVG uses a black stroke outline and is centered within a 960×500 viewport.

EEoin Carrick
87% match
Loading thumbnail…

Face2

A smiley face rendered with React and SVG, drawn as yellow circular background, two eyes, and an arc-shaped mouth. The visualization uses hardcoded geometry rather than external data, positioning elements relative to the window dimensions. React components (BackgroundCircle and Eyes) generate the SVG markup, while the mouth path is computed using the d3.arc API from d3.v4. The example demonstrates declarative component composition with D3’s arc generator for path generation.

NNapat
87% match
Loading thumbnail…

Hello HTML

This example shows a cheerful, cartoon-like face composed of a yellow circle with a black outline, two black eyes, and a curved mouth. Built with React, it renders the face as an SVG using the `d3.arc` API to generate the mouth’s path. The `Face` component combines a `BackgroundCircle`, `Eyes`, and `Mouth` inside a translated group, with all geometry defined by parameters like `offsetX` and `mouthRadius`. The visualization is a minimal, static composition, demonstrating how React components can encapsulate and arrange D3-generated shapes.

CCatalina Vajiac
86% 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
86% 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
86% match