Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

A minimalist HTML page embeds two SVG shapes—a circle and a rectangle—directly in the document body, with no JavaScript or external styling. The static scene uses only raw SVG elements and attributes, such as `cx`, `cy`, `r`, `x`, `y`, `width`, and `height` to position the shapes on a 960×500 canvas. The rendering approach is purely declarative, showcasing hand-coded SVG structure without D3, data joins, or interaction. This example highlights how a basic visualization can begin as simple, hardcoded geometry before adding libraries or dynamic data.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example renders a simple, minimal SVG scene: a single circle with a radius of 200 pixels centered on a 960×500 canvas. The page uses no JavaScript libraries, relying instead on plain HTML and inline SVG markup. The body is styled with `margin: 0` and `overflow: hidden` to create a full-bleed viewing area, and the circle is drawn without an explicit fill or stroke, leaving its appearance to default browser styling. It demonstrates the fundamental structure of an SVG-based embedded visualization.

DDuncan Bain

93% match

Loading thumbnail…

Fork of Hello HTML

A bare SVG scene draws three circles—a large yellow one with a black stroke and two smaller unfilled ones—positioned on a 960×500 canvas. The markup directly embeds SVG elements within an HTML page, using no JavaScript libraries or data sources. The rendering relies solely on native SVG syntax, defining shapes with attributes like `r`, `cx`, `cy`, and `fill`. The example demonstrates a minimal static graphic achieved entirely through inline SVG, with no interactive behavior or external dependencies.

JJ Xander Crawford

92% match

Loading thumbnail…

Fork of Hello HTML

This example renders a minimalist HTML page as an SVG visualization, displaying a single circle positioned at the origin of a 960×500 coordinate system. The code sets the document body to fill the viewport with hidden overflow, then embeds an SVG element containing a radius-100 circle. No JavaScript libraries or additional assets are used; the visualization relies solely on static SVG markup within the HTML structure. The circle’s default fill and stroke appear as rendered by the browser.

Mmartfhill

91% match

Loading thumbnail…

Fork of Hello HTML

This example displays a static SVG scene: a yellow circle with a thick black outline, accompanied by two smaller unfilled circles positioned as eyes, all below a plain “Hello World!” heading. The page uses raw HTML and inline CSS to remove body margins and hide overflow. Rendering relies entirely on the SVG markup embedded directly in the document, with no JavaScript libraries or external data sources. The circles are drawn using basic `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, demonstrating a minimal hand-coded data-less visualization.

RRobert Nakano

91% match

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page displays two static SVG circles: a large yellow circle with a black outline and a smaller black circle inside it. The example uses plain SVG elements—`<svg>`, `<circle>`, and CSS styling for margins and hidden overflow—without any JavaScript libraries or data sources. It serves as a basic demonstration of raw SVG rendering within a 960×500 viewport, showing how simple shapes can be composed directly in HTML markup.

CCyrus Buhariwalla

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows a minimalist static scene: a large yellow circle with a black outline, accompanied by two smaller unfilled circles, arranged to suggest a face. The visualization is built entirely with inline SVG elements inside an HTML page, using no JavaScript or external libraries. The rendering approach relies on basic SVG shape tags (`circle`) with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, all set within a fixed 960×500 viewport. The code demonstrates how pure HTML and SVG can create a simple graphic without any data-binding or interaction.

Oolirek1

91% match

Loading thumbnail…

Fork of Hello HTML

This example shows a minimal SVG scene: a large yellow circle with a black outline and a small black dot, accompanied by the text “hello.” It is built directly in HTML using inline SVG elements, without any JavaScript libraries. The page sets its body margin to zero and hides overflow, allowing the 960 by 960 pixel SVG to fill the viewport. The circles are positioned with fixed `cx` and `cy` coordinates, with the small dot placed inside the larger circle. The code relies entirely on standard HTML and SVG markup, rendering statically as a simple visual composition.

PPineappleLazagna

91% match

Loading thumbnail…

Fork of Hello HTML

A bare HTML page demonstrates the minimal structure for embedding SVG graphics without any JavaScript. The page contains two empty `<circle>` elements inside an `<svg>` container, rendered directly in the DOM. Using inline SVG, the example shows the simplest possible vector drawing setup, with no styling, interaction, or data binding applied. It serves as a starting point for adding D3.js or other visualization libraries.

Jjoaquindelacorte

91% match