Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published2🌍 Public
SSwetha Susan George
Last edited Aug 12, 2020
Created on Aug 12, 2020

This example demonstrates basic geometric shapes rendered as SVG elements, including circles, a rectangle, a line, and a freeform path composed of straight line segments. The illustration shows how SVG’s group element can apply transform attributes such as scaling and translation, while a CSS class can be used to set stroke color and width properties on shapes. The code relies on direct SVG markup for the drawing and a connected stylesheet for presentation, using no external libraries or JavaScript.

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 showcases basic geometric shapes—circles, rectangles, lines, and paths—rendered within an SVG canvas. It demonstrates how CSS classes, such as `.lines`, can control stroke color and width, while SVG presentation attributes like `fill`, `stroke`, and `transform` (including `scale` and `translate`) style individual elements. The code uses raw SVG markup in an HTML file, linked to an external stylesheet, to combine vector graphics with cascading style rules.

SSwetha Susan George
96% 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 basic geometric shapes rendered with SVG and styled using CSS. It shows circles, rectangles, lines, and a path within a container that applies scaling and translation transformations. Specific elements use inline `fill` attributes for color coding, while a group with class `lines` uses CSS rules to define stroke color, width, and line join rounding. The SVG markup is embedded directly in the HTML, with `transform` attributes controlling layout and positioning. No additional libraries are used beyond the native SVG and CSS APIs.

Iishmam11
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. Styling is applied through a linked CSS stylesheet, using classes like `.lines` to set stroke properties and selectors such as `.lines path` for path-specific appearance. The SVG itself uses transform attributes for scaling and translation, while inline styles and presentation attributes (e.g., `fill`, `stroke-width`) define individual shape colors and outlines. No JavaScript libraries are used; the visualization relies solely on static SVG markup and cascading style rules.

NNeepaB
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

MMauradion
94% match
Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates how CSS and SVG can be used together to create and style basic geometric shapes, including circles, rectangles, lines, and paths, within a scalable vector graphic. The SVG elements are organized using transforms for scaling and translation, while CSS classes apply stroke and fill properties, showcasing the interplay between presentation and structure. The example is built with React and renders purely through SVG markup.

Ffedericojv
94% 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