Skip to main content
SimilarExport ZIP
100%

Smiley Face MK1

✓ Published0🌍 Public
Hhyeongseok9
Last edited Feb 5, 2023
Created on Feb 5, 2023
Forked from HTML Starter

A smiling face composed of simple geometric shapes is drawn in a 960x500 SVG. A yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes, and a curved path creates the mouth. Built with React for component rendering, the visualization uses the D3 `arc` generator to define the mouth's inner and outer radii and angular range, with all elements positioned relative to a center point using SVG transforms.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face - 1

This visualization displays a simple, cartoon-like smiley face composed of a yellow circular head with a black outline, two black eyes, and a curved mouth. Built with React and D3 v7, the face is rendered as SVG elements, with the mouth generated using the `d3.arc()` path generator. The code defines reusable components for the background circle and eyes, and positions all elements relative to the center of a 960×500 viewport.

Ggmishra4
92% match
Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms the face, containing two white eyes with black pupils, a simple nose made of two connected lines, and a curved smile drawn with a D3 arc path. The SVG is built with React components, using d3.arc to compute the mouth’s path with specified inner and outer radii and angles. All shapes are positioned relative to a centered transform, with fixed dimensions and stroke widths defining the minimalist cartoon style.

Dddelorimier
92% match
Loading thumbnail…

Smiley Face Part 1

A yellow smiley face is rendered as an SVG graphic, composed of a large yellow circle with a black stroke, two black eye circles, and an arc-shaped mouth. The visualization uses React to manage the component structure and D3’s `arc` generator to define the mouth path’s inner and outer radii and angular range. All coordinates are calculated relative to the center of the 960x500 viewport, with the face positioned using a translate transform.

ZZareb11
92% match
Loading thumbnail…

Smiley Face Part I

A yellow smiley face drawn with SVG sits centered on a white background, featuring two black circular eyes and a curved mouth arc. The face is constructed using React components that render three `circle` elements and one `path` element, with the mouth path generated by the D3 `arc()` generator using specified inner and outer radii and angular start and end points. The face outline uses a thick black stroke on the yellow circle, while the eyes are positioned at fixed offsets from the center.

Nnj889
92% match
Loading thumbnail…

Smiley Face Part 1

A yellow smiley face is drawn as a large circle with two smaller eye circles and a semi-circular mouth path, all rendered in SVG. The face is positioned at the center of a 960 by 500 canvas, with the head filled in yellow and outlined with a black stroke. Built with React and D3, the visualization uses D3’s `arc` API to generate the mouth’s path geometry, while React handles the SVG element composition.

Aadamacass
92% match
Loading thumbnail…

Smiley Face

A smiling face rendered as a yellow circle with black eyes and a curved mouth, built using React and D3.js. The face is drawn entirely with SVG shapes: two `<circle>` elements for the eyes, a large `<circle>` for the head, and a `<path>` created by the `d3.arc()` generator with a constant inner and outer radius to form the mouth. The `arc()` API sets start and end angles to create a full ring, while stroke widths and coordinates position each element relative to the center of a 960×500 viewport. No external data is loaded; all geometry is hard-coded.

DDraconis1992
91% match
Loading thumbnail…

Smiley

A smiley face built with React and SVG, composed of a yellow background circle, two eyes, and an arc-based mouth. The components are modular, with separate files for each facial feature. The mouth uses d3.arc with inner and outer radii and fixed start and end angles to create a downward curve. All elements are centered using a transformed group within an SVG, demonstrating a component-based approach to data visualization.

MMaurice Huang
91% match
Loading thumbnail…

Smiley Face Part 1

A smiling face rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth. Built with React components for the background circle, eyes, and mouth, the SVG is centered via a `<g>` transform. The mouth uses `d3.arc` with inner and outer radii and start/end angles, while eye positions and radii derive from constants. The visualization demonstrates composable React-D3 integration, with all geometry defined as reusable props-driven components.

SSiddhesh Singh
91% match