Shapes withe SVG and HTML

100%

Shapes withe SVG and HTML

✓ Published1🌍 Public

Last edited Dec 11, 2019

Created on Oct 28, 2019

This example demonstrates how CSS and HTML can be used to create large, colorful shapes on a dark blue background. The page displays a single, oversized number "0" rendered in bold Ubuntu type, centered horizontally with a warm off-white color. The code uses plain HTML body content styled entirely through an external stylesheet, which imports the Ubuntu font from Google Fonts and sets the background, text alignment, font size, and family. No JavaScript or data visualization libraries are involved.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a blank SVG canvas paired with CSS styling for typography in monospace. The index.html includes an empty `<svg>` element, while styles.css sets the body font size and family, and defines a `.highlighted` class that colors text red. The visualization relies on raw SVG (via the native `svg` element) and CSS for styling, with no JavaScript libraries or data sources currently active. It showcases how simple shapes or markup could be added and styled through linked stylesheets, though no actual shapes are yet drawn in the provided code.

AAbdouEnsaj

81% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style visual shapes using SVG and CSS within the VizHub environment. The page displays a large, centered greeting message, “Hello VizHub!” sourced from an ES6 module, with the text rendered in a bold, high-contrast style. A custom white Ubuntu font and a navy background are applied globally through a linked stylesheet. The code relies on standard HTML5, CSS3, and ES6 module syntax, with no additional visualization libraries, to show basic DOM styling and module export patterns.

Sshawchand

80% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape creation and styling within a 960-by-500 viewport, using CSS to control visual properties. The index.html file contains an empty SVG element, while styles.css applies global body margins and overflow settings. The code relies on native SVG markup and linked CSS rules, with no JavaScript libraries or data sources involved, and includes an embedded YouTube tutorial link in the README for further reference.

CCharles Chung

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a single large circle rendered with SVG alongside a styled HTML body. The visualization shows a basic geometric shape without data mapping, using inline SVG markup and a CSS stylesheet to set page typography. The code initializes an empty `<svg>` element and adds a `<circle>` with a fixed radius, while `styles.css` applies monospace font styling and a red `.highlighted` class. The example relies on native HTML5 and SVG APIs, with no external JavaScript libraries or data sources.

Mmkdeeps01

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes, beginning with a single large circle positioned on a 960×500 canvas. The visualization uses plain SVG markup within an HTML file, styled through an external CSS stylesheet that sets the page margin to zero and hides overflow. The accompanying README provides a tutorial on using JavaScript objects, arrays, and modules, while a linked YouTube video offers further context. The rendering relies entirely on core SVG elements and CSS, with no additional JavaScript libraries or data sources.

Ssyedkabir268

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of raw SVG shapes within an HTML page, displaying circles and rectangles at specific coordinates. The code uses native SVG elements like `<circle>` and `<rect>` positioned on a 960×960 canvas, with some shapes colored via `fill` attributes while others remain default black. It applies basic CSS styling through an external stylesheet, including a `.highlighted` class and page-level body margins. No JavaScript libraries are used; the visualization relies solely on static SVG markup and Cascading Style Sheets for rendering.

Iilsan142

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

79% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG and styled using CSS. It shows circles and rectangles in various colors, including a group of shapes translated down the canvas using an SVG transform. The code relies on inline SVG elements and CSS rules for presentation, such as setting the body margin and overflow properties. No data source is used; the visualization is purely a static arrangement of shapes.

Mmkdeeps01

79% match