Try SVG

100%

✓ Published0🌍 Public

Last edited Feb 6, 2021

Created on Feb 6, 2021

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.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16

80% match

Loading thumbnail…

1

A single red circle is drawn inside an SVG element on a bare-bones HTML page, demonstrating the foundational relationship between CSS, JavaScript, and SVG rendering. The circle is positioned at coordinates (50, 50) with a radius of 40, and its fill color is set to red via a CSS rule that targets all SVG elements. This example uses plain HTML and inline CSS, with no JavaScript or external libraries, serving as a minimal showcase of static vector graphics in the browser.

Sshayan yadegaridehkordi

80% match

Loading thumbnail…

Shape SVG and CSS

This example demonstrates basic SVG shape rendering alongside CSS styling in a simple web page. It shows three geometric shapes—two circles and a rectangle—positioned on a 960 by 500 canvas using inline SVG markup. The first circle and rectangle have no explicit fill, relying on default black rendering, while the second circle is explicitly filled red. The code uses standard HTML5, SVG elements like `circle` and `rect`, and a linked external stylesheet that sets the body margin and overflow properties. No JavaScript libraries or data sources are involved, highlighting raw SVG and CSS techniques.

Ookrzysiek

79% match

Loading thumbnail…

SVG Fundamental

This example demonstrates basic SVG shape rendering, showing circles and rectangles with varied fill colors, stroke properties, and dimensions. The code uses raw SVG elements like `<circle>` and `<rect>` within an HTML document, with attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` controlling appearance. A large outlined rectangle with a blue stroke frames the composition, while a smaller yellow rectangle with a navy border provides contrast. The rendering relies entirely on native SVG markup without additional JavaScript libraries.

Nnoverhalomoan98

79% match

Loading thumbnail…

Hello HTML

This example shows a single red square rendered in SVG, which transitions to green with a thicker border when hovered. The page uses plain HTML, CSS, and JavaScript, with a 1000x1000 SVG element containing a `<rect>`. The CSS defines the shape's stroke, fill, and a 3-second transition on those properties, triggered by the `:hover` pseudo-class. No external libraries are used; it demonstrates basic SVG and CSS interactivity.

Ssreerajchundayil

79% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered directly in HTML, featuring two circles and two rectangles with varying positions and colors, including a red circle and a green square. The visualization uses plain SVG markup within index.html, styled minimally through CSS in styles.css, which sets the page margin to zero and hides overflow while applying a red highlight class. No external JavaScript libraries are used; the code relies solely on native SVG elements and CSS properties to construct the simple geometric composition.

Mmkdeeps01

78% match