Index

100%

✓ Published0🌍 Public

Last edited Sep 30, 2013

Created on Sep 30, 2013

A single red rectangle is rendered on a transparent canvas using the Canvas 2D API, positioned near the center of the page. The shape is drawn with a solid red fill and a thin black stroke, as defined by the Google Web Designer serialization data embedded in the page. The code reads the serialized canvas configuration and directly invokes the 2D context methods `fillRect` and `strokeRect` to produce the static graphic, with no interactivity or animation.

AI-generated description

Similar vizzes

Loading thumbnail…

Hello Canvas

This example shows an HTML5 canvas that fills its entire 960-by-500 pixel area with a solid red rectangle. The code acquires a 2D drawing context using the canvas `getContext` API, sets the `fillStyle` to red, and calls `fillRect` to cover the full canvas bounds. It serves as a minimal starter template for rendering graphics, with CSS that removes page margins and hides overflow for an immersive full-window display.

CCurran Kelleher

74% match

Loading thumbnail…

Blank

This example displays a single red circle centered within an SVG canvas. The circle is positioned at coordinates (255, 255) with a radius of 122, rendered against a blank background defined by the SVG element's 666-by-666 pixel dimensions. The visualization uses plain SVG markup with inline attributes for fill color, coordinates, and radius, requiring no additional JavaScript libraries or frameworks. The code demonstrates a minimal static graphic, serving as a starting point for more complex React-based visualizations.

Aarounde

67% 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

66% match

Loading thumbnail…

Circle with Triangle

A blue circle filled via the Canvas 2D API’s `arc` and `fill` methods forms the backdrop for a red triangle drawn with `moveTo`, `lineTo`, `closePath`, and `fill`. Both shapes are rendered on a 400×400 canvas element in an HTML page, with no external libraries or data sources. The example demonstrates basic geometric drawing and color fills using native JavaScript canvas commands.

TTanmay Nagepatil

66% match

Loading thumbnail…

Big Red Square

A minimal visualization presents a single red rectangle filling the entire viewport. The page uses an inline `style` attribute on a `div` element to set a full-height red background, with no JavaScript or external libraries involved. The example demonstrates the simplest possible way to render a static, full-screen color field in a web browser, serving as a bare-bones starting point for more complex data-driven graphics.

CColinEberhardt

66% match

Loading thumbnail…

DataViz_Examples

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.

SSubhadra Sundar

66% match

Loading thumbnail…

test

This example displays a single red rectangle on an SVG canvas. The rectangle is defined with inline attributes and CSS styles that apply a border and fill color. Interactive behavior is included: hovering over the shape triggers a CSS transition, gradually changing its fill to green and expanding its stroke width over three seconds. The code uses plain HTML, CSS, and SVG, with no external libraries. The rendering relies on the SVG `rect` element and CSS `:hover` and `transition` properties.

Ssirenajbpearl@gmail.com

66% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static, fixed-size canvas. A red rectangle with a blue outline, a blue diagonal line, and a circle are each positioned using explicit `x`, `y`, `width`, `height`, `cx`, `cy`, and `r` attributes. The SVG markup is written directly in the HTML, using no JavaScript libraries or data sources. The shapes illustrate fundamental SVG primitives and their styling properties, including `fill`, `stroke`, and `stroke-width`, with no interaction or dynamic behavior.

Bblaze-d83

65% match