Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
MMaryam0187
Last edited Jan 27, 2020
Created on Jan 27, 2020
Forked from HTML Starter

This example shows a minimal SVG scene with two circles and two rectangles arranged in a grid on a 960×500 canvas. The first circle and rectangle use default black fills, while the second pair uses red and green fills specified via inline SVG attributes. It demonstrates a bare-bones HTML page that renders static vector shapes without any JavaScript libraries or interactive behavior. The code uses raw SVG elements directly in the HTML markup, with a simple stylesheet that removes default body margins and hides overflow.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example displays basic SVG shapes—two circles and two rectangles—on a blank canvas. It demonstrates how to create a minimal HTML page with inline SVG markup, using the `<svg>`, `<circle>`, and `<rect>` elements. The first pair of shapes uses default black fills, while the second pair specifies explicit colors via the `fill` attribute. The page relies on plain HTML and CSS, with no JavaScript libraries or external data sources. The `index.css` file sets the body to hide overflow, ensuring the 960×500 SVG renders edge-to-edge.

RRamaswamy Narayanan OB
93% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal SVG scene composed of basic geometric shapes—circles, rectangles, lines, and a path—rendered within an HTML page. The SVG elements use attributes and CSS classes to control fill color, stroke, and stroke width, including a nested `<g>` element that applies a translation transform. Styling is handled via an external stylesheet, which also sets page-level layout and font properties. The code relies on native SVG APIs and standard HTML/CSS, with no external libraries or data sources.

Aannoab
91% 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
91% 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…

Fork of HTML Starter

This example shows a minimal SVG scene with two circles and a line, demonstrating basic vector graphics rendering in a static HTML page. It uses plain SVG elements—including a default black circle, a red circle, and a blue line—positioned within a 960-by-500 coordinate space. The rendering relies on the browser’s built-in SVG support, with no JavaScript or external libraries involved. It serves as a simple baseline for understanding SVG markup structure and style attributes before adding interactivity or data-driven visuals.

MMichelleLin5
90% match
Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shapes rendered directly in an HTML page. It shows four primitive shapes—two circles and two rectangles—positioned on an empty 960×500 canvas, with one shape in each pair colored via the `fill` attribute. The code uses plain HTML elements within an `<svg>` tag, styled by an external CSS stylesheet. This minimal starter serves as a foundation for exploring SVG rendering without JavaScript libraries, highlighting how intrinsic SVG colors and CSS work together.

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