Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
NNita
Last edited Jan 2, 2024
Created on Jan 1, 2024
Forked from HTML Starter

This example demonstrates a simple animated rectangle that expands and contracts within an SVG canvas. The chart uses basic SVG shapes, with the rectangle's width transitioning from 100 to 200 pixels through the SVG `<animate>` element. It relies on native SVG animation capabilities rather than external libraries, with the visual state defined directly in the `index.html` file. The example serves as a minimal starter template showcasing how to combine HTML structure with SVG and JavaScript for dynamic graphics.

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 renders a full-screen SVG canvas using raw JavaScript and the SVG DOM API, drawing a series of 100 vertical rectangles. Each rectangle is placed at increasing x-coordinates, with a fixed width and a height set to the window’s inner width, creating a striped pattern across the viewport. The code programmatically creates SVG elements via `document.createElementNS` and appends them to the document, demonstrating a minimal HTML/CSS/JavaScript setup without external libraries.

CChirag
86% match
Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon
85% 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
85% match
Loading thumbnail…

Fork of HTML Starter

This example is a minimal React-based SVG visualization showing two labeled rectangles positioned on an 800x500 canvas. The top-left rectangle spans from x=43 to x=233 and y=34 to y=458, while the second rectangle sits to the right at x=270 to x=460, y=161 to y=458. Static text elements label the chart area with “Hello mom” and the page heading “Hello word.” The code uses inline CSS to set the SVG text font size to 10px. No interaction, animation, or external data sources are present; it is purely a static HTML/SVG layout.

MMOUSSA TOURE
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page structure for creating visualizations, using an SVG element as the drawing canvas within an HTML document. The code relies on standard web technologies, including CSS for styling and JavaScript for interactivity, though no specific logic is implemented in this bare-bones version. It serves as a foundational template that can be extended with libraries like React, as referenced in the accompanying README. The SVG container is empty, awaiting the addition of graphical elements.

RRickRobinson17
85% match
Loading thumbnail…

Fork of HTML Starter

This example uses an SVG container with fixed width and height, serving as a bare minimum HTML page that demonstrates CSS and JavaScript integration. The code defines an empty SVG element with dimensions of 960 by 500 pixels, and includes placeholder empty style and script tags. While the page currently renders a blank canvas, it provides a foundation for adding visualizations using JavaScript libraries like D3.js or React. The example highlights a minimalist approach to setting up an SVG-based rendering environment.

NnitishGangadhari
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG scene composed of fundamental geometric shapes, including two circles, a rectangle, and a line, each styled with distinct fill, stroke, and stroke-width attributes. The visualization uses plain SVG markup within an HTML page, rendered via the browser’s native SVG support. It includes minimal CSS for a large message style, though the primary content is the fixed, non-interactive SVG canvas. The code relies on no external libraries, serving as a bare-bones starter template for understanding basic SVG elements and styling.

Ttnlramakrishna
85% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a set of basic SVG shapes—two circles, a rectangle, a line, and a path—arranged on a 960 by 500 canvas. It runs as a static HTML page in the browser, using inline CSS to style text and JavaScript-free markup. The rendering relies entirely on raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, each with explicit coordinates and styling attributes such as fill, stroke, and stroke-width. It serves as a minimal starter for exploring vector graphics without additional libraries.

RRaghuram Bachu
85% match