Skip to main content
SimilarExport ZIP
100%

js picture

✓ Published0🌍 Public
MmyN3RD
Last edited Mar 19, 2023
Created on Mar 19, 2023
Forked from HTML Starter

This example shows a simple SVG canvas with a single black rectangle placed at the top-left corner of a 960 by 500 pixel drawing area. The code creates the SVG element and the rectangle programmatically using the DOM API and SVG namespace methods. It uses native JavaScript DOM manipulation with `document.createElementNS` and `setAttribute` calls, and appends elements to the document body. No external libraries or data sources are involved; it demonstrates the minimum setup for drawing shapes with pure JavaScript.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by constructing a single rectangle using raw DOM manipulation. The code programmatically creates an SVG element and a rect child node via the `document.createElementNS` API, setting explicit width and height attributes of 960 by 500 pixels for the canvas and 100 by 100 for the shape. It shows how to manually build SVG graphics without any visualization library, relying solely on native browser methods and CSS styling for the page layout. The rectangle is appended directly to the body, illustrating the basic SVG creation workflow.

Sslyfer-cell
80% 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
79% match
Loading thumbnail…

SVG fundamentals, baby

This example demonstrates the foundational steps of creating and styling SVG elements using plain JavaScript. It creates an SVG container that fills the entire browser window using the `document.createElementNS` API with the SVG namespace. The code then appends a rectangle with a fixed width of 100 pixels and height of 50 pixels, filling it with black via the `setAttribute` method. The example relies entirely on native browser APIs—no external libraries such as D3 or React—though the metadata notes the framework as React, which is not used in the visible code.

Ddsims2157
79% match
Loading thumbnail…

JS Basic

This example demonstrates a minimal HTML page that uses JavaScript to create and position an SVG circle element on the page. The code initializes an SVG container, appends a circle, and sets its center coordinates to (200, 300), though it does not currently display the circle in the browser. The example showcases basic DOM manipulation and SVG creation using vanilla JavaScript, with CSS styling applied to a message class for text formatting. It serves as a foundational introduction to combining HTML, CSS, and JavaScript for web visualization.

TTianming Liu
79% match
Loading thumbnail…

SVG Fundamentals

This example shows a minimal SVG canvas with a fixed 960 by 500 dimensions, currently rendering only a blank white space. The page uses plain HTML, CSS, and JavaScript, with the SVG element defined directly in the markup. The JavaScript console demonstrates basic language features, including variable declarations, arithmetic, an object literal, a for loop, and an arrow function for addition. No data visualization or graphical output is present; the focus is on foundational syntax and SVG setup.

SSander Rebane
78% match
Loading thumbnail…

Prova JS

This example creates a full-screen SVG visualization using vanilla JavaScript, without any external libraries. It initializes a rectangular blue shape that spans the height of the viewport, with its width fixed at 10 pixels. The code uses `document.createElementNS` to construct the SVG element and its child rectangle, setting attributes for dimensions and fill color. The visualization demonstrates basic SVG rendering and DOM manipulation within a React framework, though it does not incorporate React components or state management.

KKarreb94
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental elements of SVG graphics, displaying a single black circle positioned at coordinates (100, 100) with a radius of 100 pixels within an SVG canvas. The implementation uses a minimal HTML page with inline SVG markup, rendered directly through the browser’s SVG renderer without any JavaScript or external libraries. It serves as a stripped-down starting point for understanding how vector shapes are declared and positioned, contrasting with more complex React-based visualization setups referenced in the accompanying README.

Rrealjpthedev
78% match