Skip to main content
SimilarExport ZIP
100%

Hola

✓ Published0🌍 Public
DDavid Alarcón
Last edited Jun 9, 2022
Created on Jun 9, 2022
Forked from HTML Starter

This example displays a static SVG composition featuring a blue-outlined rectangle, a black circle, and a red diagonal line on a 1200 by 900 canvas. The single HTML file uses inline CSS and JavaScript-free markup to position each shape. The SVG is drawn directly in the document, with the rectangle’s stroke-width set to 20 and the line defined from the origin to the point (100,100). It demonstrates basic vector graphics rendering in a bare-bones web page.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Heyo SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines—positioned directly within an HTML page. The graphic shows a simple composition of colored circles, a bordered rectangle, and a diagonal line against a blank canvas. The code uses raw SVG markup embedded in `index.html`, with inline presentation attributes like `fill`, `stroke`, and `stroke-width` controlling style. It serves as a minimal starter for rendering vector graphics in a browser, without additional JavaScript libraries or data sources. The page relies solely on the browser’s SVG renderer.

KKathleen Johnston
85% match
Loading thumbnail…

SVG Demo

This example displays static geometric shapes composed of a red circle, a navy line, and a red rectangle with a thick navy border, all positioned on an 800-by-500 SVG canvas. The SVG markup defines each shape using standard `circle`, `line`, and `rect` elements, with explicit coordinates and styling attributes such as `fill` and `stroke`. It demonstrates the fundamental approach of creating vector graphics directly within an HTML document using inline SVG, without relying on JavaScript libraries or external data.

Mmikefmc2005
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and lines, arranged on a 960 by 500 canvas. It shows how basic attributes like position, radius, fill color, stroke, and stroke-width control the appearance of each element, with a blue outer rectangle framing the composition. The code uses plain SVG markup within an HTML page, relying on CSS and JavaScript as listed in the accompanying README. A red diagonal line and a yellow rectangle with a thick navy border illustrate varying styling options.

Aaasiasattar
82% match
Loading thumbnail…

Hello HTML

This example demonstrates a simple static SVG composition, rendering a yellow circle with a black outline alongside two smaller unfilled circles, arranged to resemble a face. The HTML page contains a single SVG element with hard-coded coordinates and styling, using raw SVG circle elements rather than a charting library. The visualization relies on standard web technologies, with inline CSS in the document head to remove page margins and hide overflow. The code is a minimal, hand-authored illustration of SVG’s basic shape capabilities within an HTML document.

TThirendra Shah(CLCT)
82% match
Loading thumbnail…

Hello HTML

This example shows a simple static SVG face made of three yellow-and-black circles rendered inside a 960×500 viewport. It demonstrates the bare minimum structure of an HTML page that combines CSS for resetting the body margin and hiding overflow, with inline SVG shapes for drawing. The code uses plain HTML, CSS, and JavaScript, with no external libraries beyond the implicit browser APIs. Data is hardcoded as SVG circle coordinates and radii, serving as a minimal template for more complex visualization projects.

WWaterWal
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling within an HTML page, showcasing interactive hover effects that animate color changes over time. It includes a blue rectangle, a red circle, and a white vertical line, all defined directly in the markup. CSS transitions handle the smooth color shifts, such as the rectangle turning purple and the circle turning white on hover. The SVG canvas scales to full width with a fixed height, and the page uses embedded JavaScript and CSS within a minimal HTML structure, highlighting a straightforward approach to creating responsive, animated vector graphics.

Hhelloelectro
82% match
Loading thumbnail…

Fundamentos SVG

This example shows basic SVG shapes rendered inside a 960-by-500 viewport, introducing fundamental geometric elements such as circles, rectangles, and lines. Two circles appear at fixed positions, one unfilled and one with a red fill, while a yellow rectangle with a blue stroke and a navy diagonal line demonstrate styling and coordinate placement. Using plain Scalable Vector Graphics markup, the code relies on native SVG attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`—no additional JavaScript libraries or frameworks are invoked. The visualization illustrates how CSS-like presentation properties apply directly to SVG elements, serving as a technical primer for vector drawing without external data.

FFabrício A. S. Passos
82% match
Loading thumbnail…

Hello HTML

This example demonstrates the minimal structure of a web page rendered with HTML, CSS, and JavaScript, showing how a single SVG circle is placed on a canvas. It uses an inline `<style>` block to remove page margins and hide overflow, and an inline `<svg>` element with a fixed width and height to define the circle’s position. No external libraries or frameworks are imported, so the example relies solely on native browser APIs for markup and styling, providing a starting point for more complex visualization projects.

XXAlomia
81% match