Skip to main content
SimilarExport ZIP
100%

DV

✓ Published0🌍 Public
MM SRIKARA CHARYA
Last edited May 8, 2024
Created on May 8, 2024
Forked from HTML Starter

This example presents a static SVG visualization of a simple face, constructed with three circles: a large yellow circle for the head and two smaller black circles for the eyes. The drawing is rendered directly in an HTML page using inline SVG elements, with CSS applied to remove page margins and hide overflow. The code loads the React 18.3.1 UMD production build from a CDN, though the visualization itself does not utilize any React components or JavaScript logic, relying purely on static SVG markup.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

DV_1_Face

A hand-drawn style face is formed by two small circles for eyes and a large red circle for the head, with a blue outline, all rendered directly in SVG. The example demonstrates basic React integration by loading the React UMD library and logging it to the console, though the visualization itself is static HTML and SVG markup. Using react@16.9.0, the code shows a simple three-circle composition without any interactive or animated behavior.

Ccontact@friedaquaeckber.com
88% match
Loading thumbnail…

DV1

A cheerful yellow circle with a thick black outline dominates the center of the SVG canvas, accompanied by two smaller black outlined circles positioned symmetrically on either side. This simple composition uses React 17 to render static SVG markup directly in the HTML body. The page imports React and ReactDOM from unpkg, though the drawing itself resides entirely in static SVG tags within index.html, requiring no JavaScript interaction or data processing. The result is a minimalist, geometric visual resembling a stylized face or abstract target.

OOscar-gif
88% match
Loading thumbnail…

DVCA: Make a Face pt 1

This example shows a simple yellow face constructed from three SVG circles: a large head and two smaller eyes, all drawn on a 960 by 500 canvas. The rendering uses raw SVG elements defined directly in the HTML markup, with styling applied via CSS and no JavaScript libraries. The face is static, with the head and eyes positioned using explicit cx and cy coordinates, and outlined with a black stroke. The code relies entirely on native SVG circle elements and inline CSS for presentation.

MM.Sterling
87% match
Loading thumbnail…

D3-React-Viz-Learning-1

This example shows a static SVG face composed of three circles: a large yellow circle with a thick black stroke, and two smaller black circles positioned as eyes. It is implemented as a bare HTML page, using direct SVG markup without any JavaScript or D3 code, despite the title referencing React and D3. The source is simply an inline SVG element within the HTML body, and the rendering relies on the browser’s native SVG support.

SSowmya Naik
86% match
Loading thumbnail…

DV1

A face composed of basic SVG shapes—a yellow circle for the head, black circles for eyes, and a d3-generated arc for the mouth—is rendered in React using D3 v6. The code constructs the face from reusable components (BackgroundCircle, Eyes, Mouth) that accept numeric props for positioning and sizing, with the overall layout centered via a translated group. The mouth path is created using `d3.arc` with specified start and end angles, while the SVG is produced declaratively through React elements.

OOscar-gif
86% match
Loading thumbnail…

DV- Hello HTML

A smiling face made of SVG circles and a path renders at the center of a 960×500 viewport, with a yellow background circle outlined in black, two offset black eyes, and an arc-shaped mouth. The example combines React 17 with D3 v6, using a custom `arc` generator from D3 for the mouth path while passing layout constants like `eyeOffsetX` and `mouthRadius` as React props. The face is grouped and translated to the canvas midpoint, and the background circle derives its radius from the vertical center minus half the stroke width.

RRaghavendra Sondur
85% match
Loading thumbnail…

Hello HTML

This example shows a simple static SVG face made of three circles—two small eyes and a large yellow head—rendered on a 960-by-500 canvas. The code uses React 18 via a UMD script, though the bundle is not loaded, and relies on inline SVG elements for drawing without any data or interaction. The page intentionally mixes plain HTML, CSS for margin reset and overflow hiding, and a placeholder JavaScript file that logs to the console. It demonstrates minimal SVG structure within a React setup, with no dynamic behavior or external libraries beyond React’s basic import.

Zzaaaza
85% match
Loading thumbnail…

Hello HTML

This example displays a simple, static SVG face composed of three circles: a large red circle for the head and two smaller black circles for the eyes. The HTML page sets up the SVG canvas with fixed dimensions and defines the circles directly in the markup. The code loads React 17, ReactDOM, and D3 v7 from a CDN, but renders the visualization using plain SVG elements rather than JavaScript-driven data binding or animation.

KKenny Barns PIERRE
85% match