Skip to main content
SimilarExport ZIP
100%

Sample_starter

✓ Published1🌍 Public
FFrancesco Di Filippo
Last edited Mar 8, 2024
Created on Mar 8, 2024
Forked from HTML Starter

A minimal HTML starter page displays a static blue square on a white SVG canvas. The page uses plain HTML, CSS, and JavaScript without any external libraries or data fetching. It renders a single `<svg>` element with a fixed 960×500 viewBox, containing a `<rect>` positioned via hardcoded coordinates. No interactivity or animation is present; the example serves only as a baseline template for creating simple SVG-based visualizations.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Starter page

This starter page demonstrates a minimal HTML page combining CSS and JavaScript with inline SVG rendering for basic shapes. The page displays a red circle, a blue-outlined yellow rectangle, and a square path with red corner points, all positioned within a 500x500 SVG viewport. The code uses plain HTML elements such as `<circle>`, `<rect>`, and `<path>`, styled with simple CSS for text formatting, and requires no external libraries. It serves as a bare-bones template for beginners exploring SVG graphics and web page structure.

SShivam Abrol
84% match
Loading thumbnail…

HTML Starter

This example displays a blank SVG canvas sized at 960 by 500 pixels, ready for custom vector graphics. The page is defined in a minimal HTML document that links to a separate stylesheet for layout. It uses the SVG rendering approach, with the drawing surface embedded directly in the markup, and has no external JavaScript libraries or data sources. The CSS sets the body margin to zero and hides overflow, providing a clean, borderless viewport for future visualization work.

Eevilwong
82% match
Loading thumbnail…

HTML Starter

A bare minimum HTML page serves as a blank canvas for a single empty SVG element. The code declares an unstyled HTML document with an empty `<svg>` tag, offering no visual output or interaction. This starter template provides the simplest possible structure for users to begin experimenting with data visualization from scratch. The example uses no external libraries or data sources, focusing solely on the raw HTML and SVG foundation.

SSalmanHamdouchi
82% 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
82% 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
81% match
Loading thumbnail…

HTML Starter

This example shows an empty SVG canvas with a width of 960 pixels and a height of 50 pixels, ready for drawing. The page uses a minimal HTML structure that links to an external stylesheet, providing the foundation for a simple visualization. The index.html file contains the SVG element and empty script tags, while the styles.css file is linked but not yet populated with rules. The example serves as a bare-bones starting point for building custom visualizations with React and SVG, demonstrating the minimal setup required before adding any data or interactive components.

NNoah Weinberg
81% 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
81% match
Loading thumbnail…

HTML Starter(Min)

A minimal HTML page demonstrates how to render static SVG shapes without any external libraries. The page draws a yellow circle with a black border, alongside two smaller black circles to form a simple face, all within an SVG viewport sized 960 by 500 pixels. The code uses plain HTML, CSS, and JavaScript, with CSS resetting the page margin and hiding overflow. The visualization highlights a bare-bones approach to embedding SVG directly in the document, serving as a starting point for more complex projects.

MMinwook Kang (Min)
81% match