STARTER 1

100%

✓ Published1🌍 Public

Last edited Sep 23, 2021

Created on Sep 23, 2021

This example shows a static SVG scene with two circles: a large yellow circle with a black outline and a smaller unfilled circle positioned inside it. The visualization is rendered through an HTML page using inline CSS and JavaScript. The code demonstrates basic SVG shapes within a React framework, with the SVG element defined directly in the markup. The JavaScript logs "Hello JavaScript!" to the console, confirming the script execution. The page sets the body margin to zero and hides overflow, using embedded style tags for layout control.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of STARTER 1

This example displays a simple static SVG scene of a yellow circle with two smaller black circles representing eyes, positioned symmetrically on a 960×500 canvas. The code manually defines each circle’s center coordinates and radius directly in the markup, using HTML elements styled with attributes like `fill`, `stroke`, and `stroke-width`. It loads React 17 via a CDN and logs the React object to the browser console. The visualization requires no interaction or data binding, serving purely as a minimal starter demonstrating SVG primitives alongside React.

NNeven Dragojlovic

89% match

Loading thumbnail…

Starter

This example shows a static SVG composition of three circles: a large yellow circle outlined in black, with two smaller unfilled circles positioned symmetrically on either side. The page uses HTML, CSS, and JavaScript, with the SVG canvas set to 960 by 500 pixels. The code directly defines the shapes and their properties, such as coordinates, radii, fill, and stroke, without any dynamic behavior or data loading. The rendering is plain SVG.

Ssd2beatles

89% match

Loading thumbnail…

Svg starter

This example shows a simple static SVG drawing of a yellow circle with a black outline, flanked by two smaller hollow circles. The page uses raw SVG elements directly in the HTML, styled via CSS for dimensions and overflow. The `circle` tags define radius, center coordinates, fill color, and stroke properties. It demonstrates a minimal React-less setup where SVG rendering is handled by the browser’s native SVG API, with no external JavaScript libraries or data manipulation involved.

Ssouvik

87% match

Loading thumbnail…

Hello html

This example renders a simple, static SVG scene of a yellow circle with a black outline and two smaller unfilled circles representing eyes. The React-based application uses JavaScript to define dimensions and stroke properties, passing them into the SVG element. The code loads React and ReactDOM from CDN and renders the graphic into a root div, demonstrating a minimal setup for SVG visualization with React.

Ssukhmani0117

86% match

Loading thumbnail…

HTML Starter

This example renders a simple, static SVG composition of three circles on a 960x500 canvas. It demonstrates a bare-bones HTML page that uses inline CSS to remove page margins and JavaScript-free SVG markup for drawing. The code directly employs the SVG `<circle>` element with attributes like `cx`, `cy`, `r`, `fill`, and `stroke` to create a yellow face-like form with two black-outlined eyes. This starter template highlights the foundational structure for embedding vector graphics in a web page without any external libraries.

DDhilip H

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimalist HTML page that renders a simple SVG face composed of three circles—a yellow head with black outlines and two smaller circles for eyes—on a 960 by 500 canvas. The page uses plain HTML and CSS for layout and styling, while the JavaScript file, which imports React and ReactDOM, initializes a React StrictMode component, though the SVG itself is defined directly in the markup rather than through React. The visualization does not reference external data sources, instead showcasing static, hand-coded shapes.

JJunypyr

86% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG scene of two overlapping circles on a 900x500 canvas, with a large yellow ring and a smaller unfilled circle at its center. The page loads React from a CDN, though the React library is not utilized in the rendering logic. The visualization relies on raw SVG elements defined directly in the HTML, with basic styling applied via CSS to remove margins and hide overflow. A JavaScript console log statement executes when the page loads, but no interactive or animated behavior is present.

Ssuhaschitade

86% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple SVG scene of three circles arranged as a face-like figure, with a large yellow circle outlined in black and two smaller black circles positioned above it. The rendering approach uses plain SVG elements embedded directly in HTML, with CSS setting the body margin to zero and hiding overflow. The JavaScript-free page relies solely on static SVG markup, defining the circles with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. It serves as a minimal demonstration of basic SVG shapes within a React-based VizHub starter template.

WWendy Li

85% match