Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Mmayurgadge58
Last edited Dec 27, 2019
Created on Dec 27, 2019
Forked from HTML Starter

This example shows basic geometric shapes rendered as SVG elements on an HTML page, with a few shapes styled using inline fill attributes and a CSS class that sets text color to red. The page displays two circles and two rectangles at fixed positions within a 960-by-500 SVG viewport, using plain SVG markup without any external libraries. The rendering approach is straightforward static SVG, with one circle and one rectangle using default black fills, while the remaining circle and rectangle use explicit red and green fill colors. The HTML links to a separate Styles.css file for global body styling, but the visual shapes rely entirely on SVG attributes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with CSS & SVG

This example shows two geometric shapes drawn on an SVG canvas: a red circle with a black stroke and a green rectangle with a blue stroke. The HTML page uses inline SVG elements (`<circle>` and `<rect>`) to render the shapes, with CSS properties for fill and stroke applied directly as SVG presentation attributes. The code uses the native SVG API within a plain HTML document, requiring no external libraries, and demonstrates basic vector shape creation with explicit coordinate and dimension attributes.

Cclass-sikh
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements, styled and positioned through CSS and inline attributes. The visualization shows two circles and two rectangles, first with default black fills, then with explicit red and green fills, and finally a group with a light blue fill and black stroke. Additional lines and a path illustrate stroke styling with a thick black outline. The code uses plain SVG markup within an HTML page, with minimal CSS to reset the body margin and hide overflow. The rendering approach relies entirely on native SVG capabilities without any JavaScript libraries.

XXin Li
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a set of geometric shapes—two circles, two rectangles, and a line—arranged in an SVG canvas. The rectangles are grouped and styled with red strokes and a soft pink fill via CSS, while the circles use inline fill attributes. It demonstrates basic SVG rendering with React, using static markup without interactive behavior or data binding. The code relies on plain SVG elements (`circle`, `rect`, `line`) and CSS class selectors to apply visual properties, highlighting a minimal approach to shape composition.

TTeaMelab
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes—circles and rectangles—rendered in a web page through SVG elements, with CSS controlling their styling. A group of shapes uses default black fills, another uses explicit `fill` attributes, and a third demonstrates CSS classes to apply strokes and colors. The visualization also includes lines and a path drawn with stroke styling. The code uses plain SVG markup, CSS selectors, and hypertext markup, with all shapes placed inside an SVG canvas scaled by a factor of 1.5.

VVinceVerspeek
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Aargonaeut
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and a line—styled with CSS and positioned directly in an HTML document. It shows how SVG elements can be given inline attributes like `fill`, `stroke`, `stroke-width`, and a `transform` group to control color, outlines, and placement. The code uses no JavaScript libraries, relying purely on native SVG markup and a small external stylesheet that resets the page margins. A red-highlighted class in the CSS hints at potential text styling, though no text elements appear in the rendered graphic.

Nncube-eng
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows two basic geometric shapes—a circle and a rectangle—drawn on an SVG canvas. The shapes are styled directly with SVG presentation attributes, including fill colors, pink outlines, and a stroke width of ten pixels. The visualization is implemented with a minimal HTML page that embeds SVG markup without any scripting or external libraries. All rendering is handled by the browser’s native SVG support, with no JavaScript or CSS rules applied beyond the inline attributes.

NNJANGHU
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes using SVG elements, including circles and rectangles with different fill colors and positions. The code defines an SVG canvas with a width of 900 and height of 500, then adds four shapes directly in the HTML markup. It uses plain SVG syntax for rendering, with a linked CSS stylesheet that resets the body margins and hides overflow. A small JavaScript snippet logs a message to the browser console, demonstrating where to inspect output using developer tools. The shapes include two circles and two rectangles, with fill attributes specified inline for some elements.

Ssrhodes
93% match