Skip to main content
100%

Fork of HTML Starter

✓ Published0🌍 Public
HHimanshu Yadav
Last edited Aug 29, 2023
Created on Aug 29, 2023
Forked from HTML Starter

This example demonstrates a minimal SVG scene containing a circle and a rectangle, rendered directly within an HTML document. The circle is positioned at coordinates (50, 50) with a radius of 50 and an empty fill attribute, while the rectangle spans from x=150 to y=10 with dimensions of 100 by 100 pixels. The rendering relies on the browser's native SVG support, with no external JavaScript or CSS libraries employed. The code illustrates the fundamental structure of an SVG canvas, using basic shapes without additional styling, interaction, or data-driven logic.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene with a circle centered at (50, 50) and an empty rectangle element, styled with a large CSS message. The page uses plain HTML and CSS to render the shapes, with no JavaScript logic or data binding. The SVG elements are drawn directly in the markup, making the code a basic starter template for experimenting with vector graphics in a browser. It demonstrates how static shapes can be positioned using coordinate attributes.

IIgniske
94% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene with a single circle centered horizontally on a 960×500 canvas. The circle is rendered using raw SVG markup within an HTML document, with CSS setting the body margin to zero and hiding overflow for a clean, edge-to-edge display. It demonstrates a bare-bones setup for embedding SVG graphics directly in HTML, without any additional libraries or JavaScript logic. The styling is intentionally minimal, serving as a starting point for more complex data visualizations.

Ttcmak217
93% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG circle rendered on a blank HTML page, demonstrating the basic structure of a web-based visualization. The code uses plain HTML and CSS, with a single `<circle>` element inside an `<svg>` container, positioned at the default origin with a radius of 100 pixels. JavaScript is not utilized, so the circle remains static. The example serves as a starting point for understanding how to set up an SVG scene without any external libraries, highlighting the fundamental markup required for browser-rendered graphics.

TTawhid Abdullah
93% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene with a single circle centered in the viewport, rendered via an HTML page. The code uses inline CSS for styling and JavaScript (though none is defined) as the basis for the visualization. The SVG element contains a `<circle>` with a radius of 100 units, demonstrating the fundamental structure of an SVG-based graphic. This serves as a bare-bones starter template for building interactive visualizations, with React as the framework context and SVG as the rendering approach.

Mme-ninja
92% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene with a single circle rendered on a 960-by-500 canvas. The circle has no explicit position or fill, so it defaults to the top-left corner of the SVG with a black fill. The page uses plain HTML, CSS, and JavaScript, with the SVG element created directly in the markup. The CSS sets the body margin to zero and hides overflow, while the SVG uses inline width and height attributes. No external libraries or JavaScript APIs are invoked beyond standard DOM and SVG elements.

KKushal001
92% match
Loading thumbnail…

Fork of HTML Starter SE

This example shows a minimal React-free SVG rendering of a single circle, using plain HTML, CSS, and JavaScript. The SVG element holds a circle positioned at coordinates (60, 60) with a radius of 60. The code relies on the browser’s native SVG API, with no external libraries beyond the standard HTML document structure. The rendering approach is static, as no data binding or dynamic updates are present.

SSemih
92% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG scene with a single circle centered at coordinates (50, 50) with a radius of 50. The circle is rendered using React’s SVG support, with JSX converting the `<Circle>` tag into an SVG element. The page relies on basic CSS for styling, including a large font-size for a message class, though no such message is currently displayed. The code demonstrates how to combine React with SVG for simple vector graphics.

YYIFEI WANG
92% match
Loading thumbnail…

Fork of HTML Starter

This is a minimal SVG example demonstrating fundamental shapes—a circle, rectangle, and path—drawn with raw SVG markup in an HTML page. The code uses no external libraries or frameworks; instead, it relies directly on SVG elements like `<circle>`, `<rect>`, and `<path>` to produce a static composition centered on a 960 by 500 canvas. With a maroon circle, a white rectangle, and a black horizontal line, the visualization highlights basic geometric construction and inline styling, offering a straightforward starting point for SVG coding.

Mmarvin.linardy@hotmail.com
92% match