Skip to main content
SimilarExport ZIP
100%

DataViz_Examples

✓ Published0🌍 Public
SSubhadra Sundar
Last edited Sep 6, 2021
Created on Sep 6, 2021
Forked from HTML Starter

This example shows a single rounded red rectangle with a thick blue stroke rendered inside a 400×400 SVG canvas. The drawing appears in the center of a page with oversized 13em text styling, though no text is visible. The code uses raw SVG elements—specifically a `rect` with `rx` and `ry` attributes—and applies inline CSS properties for fill, stroke, and stroke width. It also includes a script that logs a message to the browser’s developer console, demonstrating basic HTML, CSS, and JavaScript integration without any external libraries.

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 TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg
81% match
Loading thumbnail…

Try SVG

This example demonstrates a single red rounded rectangle rendered inside an SVG element with a black border. The page uses basic HTML structure, with CSS styling targeting the SVG by ID and the rectangle by element type. The SVG markup defines the shape with x, y, width, height, and rounded corner radii, while CSS applies fill color, stroke, stroke-width, and opacity. The rect is purely static, showing SVG’s native vector drawing capabilities without any JavaScript libraries or data sources; the styling shows how CSS can control SVG presentation attributes.

AAr0manKhan
80% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes drawn on an empty canvas, including a red circle and a blue rectangular outline with a thick stroke. The visualization uses raw SVG elements within an HTML page, with no external JavaScript libraries or data sources. It highlights basic rendering capabilities by setting explicit coordinates, dimensions, and fill or stroke properties directly in the markup. This serves as a minimal introduction to vector graphics via SVG.

KKeith Cuniah
80% match
Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

YYash G
79% 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
79% match
Loading thumbnail…

SVG Fundamentals

This example showcases the fundamental building blocks of SVG graphics, demonstrating how to create basic shapes like circles and rectangles. The SVG canvas displays several circles with varying radii and fill colors—red, green, and blue—alongside two rectangles with distinct stroke colors and widths (magenta and navy). The code uses raw SVG markup within an HTML document, styled with minimal CSS that sets a large font size for the message text. The rendering approach relies on declarative SVG elements such as `<circle>` and `<rect>`, directly embedded in the markup with attributes like `cx`, `cy`, `r`, `fill`, and `stroke`.

KKim Bum Jun
79% match
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes—a red circle, a navy rectangle with a peru stroke, and a black line—rendered directly in HTML using inline SVG markup. The code defines a 1000x1000 SVG canvas and positions each shape with explicit coordinate attributes such as `cx`, `cy`, `x`, `y`, and `x1`/`y1`. It demonstrates basic styling through fill and stroke properties, including stroke-width. No external libraries or data sources are used; the visualization relies entirely on native SVG elements within a static HTML document.

AAhmet Cetin
79% match
Loading thumbnail…

this is displyed in the title of the web page

This example displays a red circle and a rectangular shape directly on an SVG canvas using plain SVG elements. The page renders a circle at coordinates (50, 50) with a radius of 50 pixels and a rectangle with a width of 100 and height of 200, followed by the text “Hello world”. The visualization uses React as the framework and renders through SVG, with the shapes defined directly in the HTML structure without additional JavaScript libraries.

Aamith-2001
79% match