Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
XXin Li
Last edited Mar 19, 2021
Created on Mar 19, 2021
Forked from HTML Starter

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.

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 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.

Mmayurgadge58
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles and rectangles—using SVG elements styled directly and through CSS classes. It shows how fill colors, stroke properties, and transforms can be defined inline or via a stylesheet to control appearance. The code uses raw SVG markup within an HTML document, leveraging the `circle`, `rect`, `line`, and `path` APIs, with CSS rules in `style.css` applying stroke styling to a group of lines.

Yyuanwanttoeat
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
94% 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
94% match
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 simple geometric shapes can be composed and styled using SVG elements and CSS. It shows two circles and two rectangles arranged on a canvas, with a lime stroke applied to one group and a hotpink line and path rendered as part of a separate group. The code uses raw SVG markup within an HTML page, along with a linked stylesheet that applies global typography and group-specific styling, such as stroke color and width, as well as a round line join for the path.

AAnnie Liao
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
94% 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
94% match