Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
AAnnie Liao
Last edited Jun 5, 2020
Created on Jun 5, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Shapes with SVG and CSS

This example displays a collection of geometric shapes—circles, rectangles, lines, and a path—rendered as inline SVG elements within an HTML page. It demonstrates how CSS styles, such as stroke, fill, and stroke-width, apply both globally and through class selectors to control appearance. The code uses raw SVG markup and a stylesheet, with groups and transforms to position and scale shapes, offering a simple introduction to combining SVG and CSS for vector graphics.

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