Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
AAravind Subramaniam
Last edited Jan 17, 2020
Created on Jan 17, 2020

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—arranged in a grid and styled with both inline attributes and CSS classes. The SVG elements are grouped and transformed using the `transform` attribute for scaling and translation, while the CSS file defines stroke properties for the line elements. Rendered entirely with inline SVG markup, the visualization shows how fill colors can be applied directly or inherited from parent `<g>` groups, including combined fill and stroke effects.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with inline attributes and CSS. It shows how fills, strokes, stroke widths, and transforms like scaling and translation affect rendering. The code uses raw SVG elements within an HTML document, with a separate stylesheet applying stroke properties to grouped line and path elements via class selectors. The visualization is purely illustrative, showcasing foundational shape composition without a dataset.

Ssravani-cs
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates fundamental SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged in a grid. Using inline SVG elements, the visualization applies fill colors, stroke properties, and transforms directly in the markup. The `styles.css` file defines classes like `.lines` to set stroke color, width, linecap, and linejoin for the line and path elements. The code uses SVG's `<g>` grouping and `transform` attributes to translate and scale entire collections of shapes simultaneously.

Aabensasi
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled and transformed using CSS. The graphic shows a progression from default black fills to explicit color fills, then a group with a custom light-blue fill and black stroke, and finally a connected polyline path. The code relies on native SVG elements like `<circle>`, `<rect>`, `<path>`, and the `<g>` container, while CSS classes such as `.lines` apply stroke properties and line joins. The inline `transform` attributes handle scaling and translation, and all shapes are embedded directly in the HTML without external data.

Vvigneshatreya4
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes. It shows how fill colors, stroke widths, and line joins can be applied both directly and via stylesheet rules, with groups using transforms for scaling and translation. The SVG is rendered inline in HTML, with the `.lines` class controlling stroke properties and path-specific rounded joins and caps.

SSachithraanu
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. It shows the effects of fill colors, stroke widths, line joins, and grouped transformations such as scaling and translation. The rendering relies entirely on SVG elements styled by CSS, with classes like `.lines` controlling stroke properties and the `fill` attribute applying color. No JavaScript libraries are used; the visualization is purely static markup and styles.

Wwen787
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and colored through different CSS and inline styling techniques. It shows how stroke, fill, and stroke-width properties apply variously via presentation attributes, group-level cascading styles, and a dedicated `.lines` class. The SVG is grouped and scaled using a `transform` attribute, while the stylesheet employs CSS selectors like `.lines path` to target specific elements. The rendering relies entirely on SVG and plain CSS, with no JavaScript libraries involved.

JJiakunGong
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and SVG attributes. It shows a scaled and translated group of basic geometric forms, with colors applied both directly in the markup (e.g., `fill="red"`, `fill="#83cc2a"`) and via CSS classes like `.lines`. The illustration highlights inheritance of presentation properties, such as fill and stroke, from parent `<g>` elements, while also showcasing stroke width, line join, and cap styling on a polyline and a path.

SShantanu Tripathi
92% match