Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
FFernando Sosa
Last edited Mar 1, 2023
Created on Mar 1, 2023
Forked from HTML Starter

This example demonstrates a minimal static composition rendered as SVG, consisting of two overlapping rectangles—a larger yellow rectangle beneath a smaller red one. The page uses plain HTML with embedded CSS and JavaScript, with no external libraries or data sources. The SVG element is sized at 500 by 500 pixels with a viewBox of 0 0 100 100, allowing the shapes to be defined in a normalized coordinate space. The code directly specifies each rectangle's position and fill color, showing a basic approach to creating vector graphics without additional tooling.

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 static composition of basic SVG shapes, including two circles and a large rectangle, positioned directly on the page. The circles are drawn without a fill (defaulting to black) and in yellow, while the red rectangle spans the lower portion of the viewport. It uses plain SVG markup within an HTML document, with no external libraries or dynamic data. The rendering approach relies on hardcoded coordinates for each shape, demonstrating how simple geometric elements can be combined without any JavaScript interaction or framework logic.

Ssabelliadriano
92% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG composition: a large yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically inside it. The visualization demonstrates basic SVG shape rendering within an HTML page. The code uses an SVG element with explicit width and height attributes, styling circle elements with fill, stroke, and stroke-width properties. It imports React and ReactDom from the provided JavaScript file, though the rendering itself relies purely on raw SVG markup in the index.html file, not on React's component system.

MMd Alif
90% match
Loading thumbnail…

Fork of HTML Starter

This example is a fork of the HTML starter, presenting a static SVG composition of overlapping rectangles, circles, lines, and text. It demonstrates the raw use of SVG elements alongside inline CSS and JavaScript within a single HTML file. The visualization is rendered entirely through SVG, with shapes defined by fixed coordinates and attributes, and the text element displays a message about the author's affinity for the format. It serves as a minimal, hand-coded illustration of SVG’s vector graphics capabilities without any external libraries or data.

Aamp1enator@gmail.com
90% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter 1

This example shows a static SVG composition of a yellow rectangle containing two black squares, rendered inside an HTML page. The visualization relies on hardcoded SVG shapes defined directly in the markup, with React and ReactDOM loaded via CDN but only used to log the ReactDOM object to the console. The page imports React 16.14.0 and ReactDOM from unpkg, while the SVG elements use basic geometric attributes like x, y, width, and fill to create the simple layout.

NNita
90% match
Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG composition of two circles, one yellow with a black outline and one unstyled, rendered on a 960 by 500 canvas. The page uses plain HTML with embedded CSS to remove body margins and overflow, and inline SVG elements for rendering. No external JavaScript libraries or data sources are involved; the visualization is a static demonstration of basic SVG shape styling and positioning.

AAriyo Joseph Olamide
89% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—a rectangle, circle, line, and text—arranged within a 300 by 150-pixel viewport. It shows how basic geometric primitives combine with styling attributes like fill, stroke, and stroke-width to create a simple composition. The code uses inline SVG elements directly in an HTML page, styled with CSS for font and layout, and loads the Share Tech font from Google Fonts. The rendering is static SVG, illustrating core vector graphics concepts without external JavaScript libraries.

JJing Li
89% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates the minimum structure needed to display static SVG shapes in a web page. It shows three red rectangles rendered on a large blue SVG canvas, each positioned at a different vertical coordinate with varying widths. The code uses plain HTML markup with inline SVG elements, including `<svg>` and `<rect>`, styled through the `fill` attribute. No JavaScript libraries or frameworks are employed; the visualization relies entirely on the browser’s native SVG rendering capabilities.

Rrautprashant849@gmail.com
89% match
Loading thumbnail…

Fork of HTML Starter

This example displays a simple static composition of SVG shapes, including two outlined circles and two filled rectangles, arranged on a 500 by 500 canvas. The geometric figures are defined directly in the HTML markup, with styling applied through a CSS rule for a message class, though no text is rendered. The visualization uses inline SVG elements within an HTML page, and the circles are styled with a black stroke and no fill, while the rectangles appear with default black fills. No JavaScript libraries or interactive features are present; the code relies purely on native SVG and CSS.

FFaridah Namutebi
89% match