Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Iirasheed01
Last edited Nov 22, 2019
Created on Nov 22, 2019

This example demonstrates basic SVG shapes and color styling using inline attributes and CSS classes. It shows circles, rectangles, a line, and a polyline path, with fill colors applied directly (like red or `#83cc2a`) and inherited through group elements. The code uses SVG’s `<g>` elements for transforms (`scale`, `translate`), plus CSS rules to control stroke properties such as width, linejoin, and linecap. Rendering is entirely client-side via the SVG DOM, with no external libraries or data sources.

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 how SVG shapes can be styled and organized with CSS and inline attributes. It shows circles, rectangles, lines, and a path, with elements grouped using `<g>` tags and transformed via translation and scaling. The code uses the SVG API directly in an HTML file, with a linked stylesheet that applies stroke and fill properties to the `.lines` class and its path. Color is specified through CSS classes, hexadecimal values, and named colors, while the rendering is done entirely in static SVG without JavaScript libraries or data.

Ssheikh357
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to construct and style basic geometric shapes—circles, rectangles, lines, and a path—using inline SVG elements and a linked CSS stylesheet. The drawing is scaled and translated via SVG `transform` attributes, with groups of shapes inheriting shared fills, strokes, and stroke widths from parent `<g>` elements. CSS classes further control the appearance of the polyline and path, specifying stroke color, line join, and line cap. The result shows how SVG’s native coordinate system and CSS presentational properties work together for crisp vector graphics.

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

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both presentation attributes and an external CSS stylesheet. It shows how fill colors can be set directly on elements (e.g., red, `#83cc2a`) or inherited from a parent `<g>` group, with stroke properties controlling outlines. The CSS classes `.lines` apply stroke width and color, while the path uses the `stroke-linejoin` and `stroke-linecap` properties. The SVG structure employs `transform` attributes for scaling and translation, rendering vector graphics directly in the browser without additional JavaScript libraries.

Mmi-desai
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—with colors applied through inline attributes and CSS classes. It shows how the `<g>` element groups shapes to share fill and stroke properties, while a scale transform enlarges the entire scene and a translate moves part of it. The code uses raw SVG markup with CSS for styling, including stroke-width, stroke-linejoin, and stroke-linecap on the line and path elements. No external libraries or data are involved; rendering is purely static SVG.

TTheRedUnicorn
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

LLinkous
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through HTML and CSS. It shows circles, rectangles, lines, and paths arranged in groups with varying fill colors, stroke properties, and transforms. The code applies CSS classes to style the line and path elements, while inline attributes handle other visual properties. Rendering uses SVG markup directly, with the `line` element and `path` element for the polyline, all scaled and translated within the `<g>` container.

Pprativis
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes, presentation attributes, and CSS classes. It shows shapes with explicit fills, a group using inherited fill with black strokes, and a separate group for lines with round stroke caps and joins. The code uses raw SVG elements, the `g` transform for scaling and translation, and a linked CSS stylesheet to define stroke properties for the `.lines` class, with no JavaScript or external libraries.

Sshahbaj1999
94% match