Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Jun 30, 2024

Created on Jun 27, 2024

This visualization displays a simple yellow face composed of three circles: a large head with two smaller eyes, all rendered as SVG shapes. Painted using React and ReactDOM, the sketch calculates positions from the window dimensions, centering the face and scaling the radius and eye offset proportionally. The circles use explicit `fill` and `stroke` attributes, with the head outlined in black, while the eyes have no fill color specified.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows a simple, static face composed of two circles on a yellow background. A large yellow circle with a thick black stroke forms the head, while a smaller black circle positioned to the upper left represents an eye. The visualization is built using raw SVG elements within an HTML page, styled with CSS that removes page margins and hides overflow. It uses the React framework and relies on the browser's native SVG rendering, with the `cx`, `cy`, and `r` attributes defining the shapes.

Hhukbk

93% match

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow face with two black eyes rendered as SVG circles on a white background. The face is drawn directly in the HTML markup using the `circle` element, with fixed positions and radii for the head and eyes. The page imports React 16.9.0 from a CDN and logs the React object to the console in `index.js`, though the visualization itself does not rely on React for rendering. The SVG canvas is set to 960 by 500 pixels, and the body margin is zeroed for a clean display.

LLuisEFerreira1998@gmail.com

93% match

Loading thumbnail…

Fork of Hello HTML

A yellow face with black outline and two black eyes is drawn as static SVG shapes in a React-powered page. The code uses raw `<circle>` elements for the face and eyes, with React loaded from a CDN via `unpkg`. The SVG canvas is 960 by 500 pixels, and the example serves as a minimal starter for building interactive faces.

LLiam ODonnell

92% match

Loading thumbnail…

Fork of Hello HTML

The visualization renders a yellow, smiling face composed of SVG circles and a d3.arc path, repeated one hundred times across the viewport via a React component map. Each face uses props like `centerX`, `eyeOffsetX`, and `mouthRadius` to position its features, with the background circle, eyes, and mouth assembled from separate React components. The code imports React, ReactDOM, and d3's `range` and `arc` functions, and draws using SVG elements within a FaceContainer that applies a translation transform.

MMalcolm Mead

92% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows a simple yellow circle with a black outline and two smaller black circles positioned as eyes, rendered as an SVG face. The visualization is built with a React component that uses React and ReactDOM to manage the page, while the SVG markup itself defines the shapes with explicit coordinates for the center, radius, and stroke properties. The code also sets up the HTML page with CSS styling that removes margins and hides overflow, and it loads the React libraries from a CDN before rendering the fixed 960 by 500 pixel SVG canvas.

AAynura Huseynova

92% match

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple, static SVG face built from two yellow circles and one black circle. The visualization shows a minimalist smiley face centered within a 960 by 500 pixel canvas, with the main face circle and a single eye rendered. The code uses React 18 and ReactDOM to render the SVG elements, with the drawing logic defined in a React component that specifies circle positions, radii, and stroke properties directly. The face is constructed using basic SVG shapes without any animation or interactivity.

Ttestingwithaws

92% match

Loading thumbnail…

Fork of Hello HTML

This example shows a cheerful, geometric face built from three SVG circles rendered inside an HTML page. The yellow circle serves as the head, with two smaller black circles as eyes, all drawn on a 950 by 450 canvas. The code uses plain React 18 via a UMD production build and directly manipulates SVG elements, such as `<circle>`, without any additional visualization libraries. It relies on static attributes like `r`, `cx`, and `cy` to position the shapes.

SSagar Saxena

92% match

Loading thumbnail…

Fork of Hello HTML

A smiling face drawn in React and SVG, rendered as a static visualization of yellow and black circles on a 960x500 canvas. The face consists of a large filled circle for the head and two smaller circles for the eyes, demonstrating basic SVG shape composition. The code loads React 18 via UMD, uses inline JSX-free SVG elements within the HTML, and logs a message to the console. The example serves as a minimal starting point for combining React with SVG for data-driven graphics.

VVageesh Hegde

92% match