HTML Starter

100%

✓ Published0🌍 Public

Last edited Apr 11, 2020

Created on Apr 11, 2020

This example shows a minimal HTML page with an embedded SVG containing a red circle and a rectangle. It demonstrates the simplest possible setup for a visualization gallery, using only native HTML elements and inline SVG styling. The page renders static shapes without any JavaScript libraries, serving as a bare-bones starter template. The SVG canvas is sized at 960 by 500 pixels, with shapes positioned using explicit x, y, and r attributes.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates the minimal setup for an HTML page containing an SVG visualization. It renders a single red circle positioned within a 960 by 500 pixel SVG canvas, styled with a large text-align center body. The code uses a plain HTML structure with an inline `<style>` block to set the font size, and an inline `<svg>` element with a hardcoded `<circle>` shape defining its center coordinates, radius, and fill color. There is an empty `<script>` tag included, but no JavaScript libraries or data are used beyond the static SVG markup.

Jjava-jedi

93% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript for visualization. It renders two SVG graphics: a standalone circle and a larger SVG containing a red rectangle, green circle, and white text label. The code uses plain HTML elements with inline SVG attributes, including width, height, and fill properties, to construct the shapes without any external libraries. The page serves as a bare-bones template for getting started with web-based graphics.

AAshtone Onyango

92% match

Loading thumbnail…

HTML Starter

This example displays a simple HTML page with a green circle and a red rectangle rendered inside an SVG element. The page uses plain HTML and inline CSS to center the content and set a large font size. The SVG shapes are drawn directly in the markup with `circle` and `rect` elements, demonstrating basic static vector graphics without any JavaScript libraries or data sources. The code serves as a minimal starting point for HTML and SVG visualization projects.

Ggoshashi

91% match

Loading thumbnail…

HTML Starter

A minimal example demonstrates how to render vector graphics in a web page using inline SVG. The page displays a red circle with a black rectangle positioned within a 960 by 960 coordinate space, styled with CSS and HTML. The example uses raw SVG elements, including the `circle` and `rect` tags, without any JavaScript libraries or frameworks. It serves as a foundation for building more complex data visualizations, highlighting the basic structure and styling capabilities of HTML, CSS, and SVG.

RRitwiz Sinha

91% match

Loading thumbnail…

HTML Starter

A bare minimum HTML page renders a single SVG circle with a radius of 400 pixels inside a 600-by-400 viewport. The example demonstrates the foundational structure of an HTML document with embedded SVG markup, showing how the circle’s size exceeds the canvas dimensions. The code uses no external libraries or JavaScript, relying solely on native SVG elements and the `circle` tag’s `r` attribute. It serves as a minimal starting point for creating static visualizations, contrasting with the linked React-based starter.

Qquantum

90% match

Loading thumbnail…

HTML Starter

This example shows a minimal SVG scene with a circle and a rectangle rendered on an 800-by-800 canvas. The HTML page contains no external libraries, relying solely on native SVG elements like `<circle>` and `<rect>` for drawing. It demonstrates the simplest possible setup for a visualization, serving as a starting point for building more complex graphics with D3 or React.

RRamvishvas Kumar

90% match

Loading thumbnail…

HTML Starter

This example showcases a minimal HTML page that displays basic SVG shapes—circles, rectangles, a line, and grouped elements—on a 960x500 canvas. It uses plain JavaScript and CSS to style the body and draw the vector graphics, with shapes colored explicitly via SVG fill and stroke attributes. A console log message demonstrates JavaScript execution, while the code references the React Starter for comparison, highlighting the simplicity of a vanilla HTML approach.

Mmirogod1

90% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that renders SVG shapes directly in the browser, including a circle, a navy line, and a blue circle. The code uses plain CSS for styling and JavaScript is not invoked; instead, SVG elements are defined inline within the HTML markup. It serves as a bare-bones starting point for understanding how SVG coordinates and attributes like `cx`, `cy`, `radius`, `x1`, and `stroke` work without any external libraries or frameworks. The page is entirely static, with no data source or interactive behavior.

Oolesimple

90% match