Skip to main content
SimilarExport ZIP
100%

DV1

✓ Published0🌍 Public
OOscar-gif
Last edited Mar 6, 2021
Created on Mar 6, 2021
Forked from HTML Starter

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.

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

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.

MM SRIKARA CHARYA
88% 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
87% match
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
84% 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
84% match
Loading thumbnail…

DV1 made entirely by me

A smiling face is rendered as an SVG graphic, with its features composed of simple geometric components: a yellow circle for the head, two circles for eyes, an ellipse for a nose, and a D3 arc for the mouth. The React components organize these SVGs, with props controlling each feature’s position and size. D3’s `arc` API generates the mouth path, while React handles the composition and rendering of the face.

OOscar-gif
84% 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
84% match
Loading thumbnail…

Untitled

A yellow circle with a black outline dominates the SVG canvas, accompanied by two smaller black circles positioned as eyes. The visualization is built using React and rendered through SVG elements defined directly in the HTML. It uses React 16 and ReactDOM 17 from CDN, with the React component logic in index.js logging the React object. The static composition demonstrates basic shape creation and styling without interactive behavior or data-driven rendering.

SSumz-K
83% match
Loading thumbnail…

Untitled

A yellow circle rendered as an SVG face features two smaller black circles for eyes, with a thick black stroke outlining the entire shape. The visualization is built using React with JSX, directly embedding SVG elements within the `index.html` file. The `index.js` file imports React and ReactDOM to log the React object, though it does not mount any component. The static composition relies on explicit SVG circle attributes for position, sizing, and color rather than any data-driven or interactive behavior.

JJPMorand
82% match