Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
SSwetha Susan George
Last edited Aug 12, 2020
Created on Aug 12, 2020
Forked from Different Cars

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.

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

SSwetha Susan George
96% 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
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
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
96% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to draw basic geometric shapes—circles, rectangles, lines, and paths—in an SVG canvas, using CSS classes to apply stroke and fill styling. The code uses raw SVG elements alongside a linked stylesheet, with JavaScript and React noted as part of the broader setup, though the visible rendering relies solely on SVG markup and CSS rules. CSS classes like `.lines` control line thickness and color, while inline attributes set shape fills and transformations, such as scaling and translating groups.

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

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements styled with CSS. It shows how SVG presentation attributes like `fill` and `stroke` can be applied directly to elements or inherited from parent `<g>` groups. The code uses the React framework but primarily relies on raw SVG markup within an HTML file. A CSS class named `.lines` applies stroke properties to line and path elements, with path-specific styling for `stroke-linejoin`. The example illustrates layering, grouping via transforms, and styling inheritance.

Bbhayyasaheb
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Jjugsomilk
95% match