start vizhub

100%

✓ Published0🌍 Public

Last edited May 14, 2021

Created on May 13, 2021

This example renders a simple SVG rectangle positioned near the top-left of the browser window. The code uses the raw `document.createElementNS` API to generate SVG elements and sets their attributes directly, with dimensions based on the window’s inner width and height. Although the script references `window.innertWidth` (a misspelling of `innerWidth`), the drawing itself consists of a single rectangle with fixed x and width values. The page is a minimal demonstration of creating SVG graphics through vanilla JavaScript without any external libraries or frameworks.

AI-generated description

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

Similar vizzes

Loading thumbnail…

vizhub - HTML Starter

This example showcases a minimalist SVG circle rendered in an HTML page. The visualization consists of a single large circle element with a radius of 500 units, displayed without any styling or interaction. The page uses inline CSS for a zero-margin layout and embeds the SVG directly in the body. This starter demonstrates the fundamental structure of an HTML-based visualization, providing a clean canvas for future development with JavaScript and CSS.

Tthanhtrdang

79% match

Loading thumbnail…

vizhub_svg_basics

This example demonstrates the fundamental building blocks of SVG graphics, showing how basic shapes like circles, rectangles, and lines are rendered directly in an HTML page. The visualization uses inline SVG within an `index.html` file, illustrating both simple geometric elements and more complex paths constructed using SVG path commands. The code highlights CSS styling properties such as fill colors, stroke widths, and stroke colors, while the paths demonstrate both absolute coordinates (capital letters) and relative coordinates (lowercase letters) alongside various curve commands like cubic Bézier (C), elliptical arcs (A), and quadratic Bézier (Q). The example serves as a hands-on tutorial for creating vector graphics without external libraries.

Wwasti

78% match

Loading thumbnail…

Vizhub starter pack

This example displays a simple geometric line drawing of a house shape rendered as an SVG within a bare HTML page. It uses inline SVG elements with explicit x and y coordinates to draw six blue lines forming the roof and walls. The code demonstrates basic SVG markup directly in HTML, with styles and JavaScript unused in the file. It serves as a minimal starting point for visualization projects, relying on native browser rendering without external libraries or data sources.

BBerke Bozlak

77% match

Loading thumbnail…

Blank canvas

A blank, full-viewport SVG rectangle with rounded corners fills the browser window. The visualization demonstrates the minimal setup for a Vizhub project using D3 v5, with the page dimensions retrieved from `document.body.clientWidth` and `document.body.clientHeight`. The code selects the SVG element via `d3.select`, sets its width and height attributes, and appends a single `rect` element with a 40-pixel corner radius. Styling is handled with fixed positioning and hidden overflow in the page’s CSS.

Hhugomell

76% match

Loading thumbnail…

vizHub

This example renders a nearly blank HTML page with centered text, displaying the title "vizHub" at a massive font size. It demonstrates a minimal setup using plain CSS for styling and JavaScript for browser interaction, logging the string "cool" to the developer console upon load. The page relies solely on the Document Object Model and standard web APIs, with no external libraries or data sources involved. It serves as a bare-bones starter template for embedding custom visualizations in a React framework context.

Sstanemurhula

76% match

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1

76% match

Loading thumbnail…

SVG starter

This example displays a single empty SVG canvas with a small black square in the upper-left corner, created entirely through JavaScript. The code uses the Document API’s `createElementNS` method to construct the SVG namespace elements and `setAttribute` to set the canvas dimensions (960 by 500) and the rectangle’s size (100 by 100). The SVG is appended directly to the page body, with no external data source or interaction, demonstrating the lowest-level programmatic approach to SVG generation without any helper libraries.

HHamim Rahman

76% match

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG rendering by generating a grid of vertical rectangles that stretch across the full height of the browser window. The code creates 100 rectangle elements using the Document Object Model’s `createElementNS` method with the SVG namespace, setting each rectangle’s x-coordinate and width via attributes. It leverages vanilla JavaScript to dynamically append these shapes to an SVG container that is sized to match the viewport using `window.innerWidth` and `window.innerHeight`. The result is a simple, repeating pattern that demonstrates basic SVG shape creation without external libraries.

SSidney Oluoch

75% match