Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Ppml31780
Last edited Nov 10, 2022
Created on Nov 4, 2022

This example shows how to draw and style basic SVG shapes—including circles, rectangles, lines, and a path—on a 960×500 canvas. The shapes are grouped and transformed using SVG’s `scale` and `translate` attributes to position and size them. CSS in an external stylesheet (styles.css) defines stroke and fill properties for the groups, including a `.lines` class that sets black strokes and a class-specific path style with a dark teal color and rounded line joins. The page uses plain HTML with linked CSS, no JavaScript frameworks or 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 demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—are styled using CSS, with explicit fills, strokes, and group transformations. The SVG markup defines a 960×500 canvas, scaled by 1.5, containing shapes with hardcoded coordinates. CSS rules in `styles.css` apply stroke styling to line elements via a `.lines` class and set a round stroke-linejoin on paths, while the body’s margin and overflow are reset. No JavaScript or data is involved; the rendering relies solely on SVG’s native presentation attributes and external stylesheets.

Mmp7090
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 a collection of basic SVG shapes, including circles, rectangles, paths, and lines, composed within a single SVG canvas. The shapes are styled using both inline presentation attributes and an external CSS stylesheet, which defines a class for the line group to apply stroke properties. The SVG elements are nested within a `<g>` group that applies a scaling and translation transform. The rendering approach uses raw SVG markup within an HTML page, with no JavaScript libraries or data sources involved.

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

Shapes with SVG and CSS

This example uses raw SVG markup inside an HTML file to draw a collection of circles, rectangles, lines, and a path, positioned on a 960-by-500 canvas and scaled by a factor of 0.7. The SVG shapes are styled with both presentation attributes, such as `fill` and `stroke`, and an external CSS stylesheet. The CSS file defines a `.lines` class that applies a black stroke and width of 10 to the line and path elements, while the path's fill, stroke color, and stroke-linejoin are overridden by more specific CSS rules. No external JavaScript or React logic alters the shapes, as the behavior is purely declarative.

Aaurelio-david
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—combined with CSS styling. The code uses raw SVG markup within an HTML page, with CSS rules in a separate stylesheet. Shapes are scaled, translated, and grouped using SVG transform attributes, while CSS classes control stroke and fill properties. The presentation shows how CSS can override SVG attributes, as seen in the `.lines` class applying stroke styles to paths.

AArsenalRobert
95% match
Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Vvoid-LSTM
94% match