HTML Starter

100%

✓ Published1🌍 Public

Last edited Mar 18, 2020

Created on Mar 18, 2020

This example shows a minimal HTML page displaying a simple SVG fruit bowl: a purple translucent circle containing an orange circle labeled “Orange,” plus yellow and green circles. The visualization uses inline SVG elements—`<circle>` and `<text>`—positioned and styled directly in the markup, with CSS controlling global text alignment and font size. It demonstrates a bare-bones setup without any JavaScript libraries, relying solely on static SVG rendering for its geometric composition.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates a basic interactive SVG fruit bowl in a web page. It uses D3.js to add a hover interaction: when the user mouses over the orange circle, D3 appends a text label saying “Orange” to the SVG; on mouse-out, the label is removed. The visualization is built with static SVG elements—a purple translucent background circle, an orange, a yellow, and a green circle—stylized via CSS and rendered using D3’s selection and event handling methods (`.on`, `.append`, `.remove`). The code uses HTML, CSS, and D3 v5 loaded from a CDN.

Ddanielstaal

90% 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

89% 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

89% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page for displaying SVG circles, with a purple circle featuring a black outline on a white background. The code uses inline SVG elements to render two circles, the first in the default black color and the second in purple, sized with a 10px radius. The page includes a React-styled SVG container with width 960 and height 500, though no JavaScript interactions are implemented beyond the empty D3 selection reference. The visualization serves as a bare-bones starter template for web-based graphics.

Cchezydan

88% match

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

88% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page with a single large circle rendered inside an SVG element. The page is styled with CSS to remove the default body margin and hide overflow. It demonstrates the fundamental structure of an HTML document, including the doctype, head, and body tags. The SVG uses the `width` and `height` attributes to define its viewport, and the circle is drawn using the `r` attribute for its radius. No JavaScript or external libraries are used, making it a bare-bones starting point for web visualization projects.

Mmauryanidhi

87% match

Loading thumbnail…

HTML Starter

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.

Jjufrank

87% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page with a single SVG circle centered on a blank canvas, demonstrating how CSS and JavaScript integrate with basic web standards. The page uses a large font-size style and an inline SVG element with a circle of radius 10, but does not include any interaction or dynamic behavior. It relies on the native HTML, CSS, and SVG APIs, with no external libraries. The rendering approach is static SVG, serving as a starting point for more complex visualizations.

Sspctml

87% match