Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
DDimiter Zlatkov
Last edited Jul 10, 2021
Created on Jul 10, 2021
Forked from HTML Starter

This example shows how basic geometric shapes—a circle and a rectangle—can be drawn directly on an SVG canvas. The shapes are positioned using explicit `cx`, `cy`, `r`, `x`, `y`, `width`, and `height` attributes inside an inline `<svg>` element. It uses plain HTML and CSS, with no JavaScript libraries, and demonstrates static styling via an external stylesheet. The rendering approach is native SVG, showing the simplest possible setup for creating vector graphics in a web page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, and a line—arranged within an SVG canvas. It shows how SVG elements can be styled directly via attributes like `fill`, `stroke`, and `stroke-width`, and how a grouping element `<g>` applies these styles collectively to its children. The rendering relies on raw SVG markup embedded in an HTML page, with a linked CSS stylesheet controlling page layout and overflow. The code uses core SVG APIs for drawing, without additional JavaScript libraries or data sources.

VVivian Peng
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes—circles and rectangles—using SVG elements styled with CSS. The code defines two identical groups of shapes, each translated vertically using SVG’s `transform` attribute, rendering blue circles and green rectangles on a 960×500 canvas. It uses plain SVG markup within an HTML page, with CSS (via `styles.css`) controlling the page layout and margins, while no JavaScript or external library is required. The rendering approach relies entirely on static SVG and CSS, demonstrating fundamental vector graphics in a bare-bones React-free setup.

AAbhinav Arun
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
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 how to draw basic geometric shapes using SVG elements styled with CSS and inline attributes. It shows a pink circle with a black stroke and a green rectangle with a blue stroke, each positioned within an SVG canvas. The code uses raw HTML markup with `<svg>`, `<circle>`, and `<rect>` elements, applying fill and stroke properties directly via presentation attributes. While the title references CSS, no external stylesheets or JavaScript libraries are present, relying solely on SVG’s native styling capabilities.

Rrayray196
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