Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 16, 2020

Created on Jan 16, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can combine to create a static, colorful composition. The code renders circles, rectangles, lines, and a path within a single SVG element, using inline attributes for some fills and CSS classes for others. It shows the effect of grouping elements with transformations, such as scaling and translation, to reposition shapes as a unit. The `.lines` class applies strokes and line joins via CSS, while the SVG elements define geometry directly in the markup.

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 and CSS styling combine to create a static composition of circles, rectangles, lines, and a path. The code uses plain SVG elements like `circle`, `rect`, `line`, and `path`, grouped with the `g` element and transformed with `scale` and `translate`. CSS classes such as `.lines` apply stroke properties, while inline attributes set fill colors like red, green, and yellow. The rendering is entirely SVG-based, with no external libraries or data sources, relying on declarative markup and stylesheets.

Mmusevvid

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and paths. The code uses inline SVG elements within an HTML page, with a separate stylesheet applying stroke properties to line and path elements. Circle and rect elements are colored individually or grouped via the `fill` and `stroke` attributes, while a `transform` scales the entire graphic. The rendering is purely SVG-based, requiring no JavaScript libraries.

DDaniel Korosi

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static visual composition. It shows circles, rectangles, lines, and a path, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG is rendered with a scaling transform and a translated group, while the `.lines` class applies stroke properties and path-specific colors. The code uses plain SVG elements—`circle`, `rect`, `line`, `path`, and `g`—with CSS rules from an external stylesheet, no JavaScript libraries involved.

BBirmanTAZ

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS style rules combine to create a static, colorful composition. It shows circles, rectangles, lines, and a path, with fill colors applied directly via attributes or inherited from group elements. The rendering uses plain SVG elements inside an HTML file, with CSS classes in an external stylesheet controlling stroke appearance, such as width, color, and line join for the path. The code also relies on SVG transform attributes to scale and translate the entire graphic.

SSamuel Elbaz

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styles combine to create a static composition of circles, rectangles, lines, and a path. The code renders without any JavaScript libraries, relying directly on SVG elements and a linked stylesheet. The stylesheet applies stroke properties to the lines group, and the markup uses inline attributes like `fill`, `stroke`, and `transform` to assign colors and positions. The `g` elements demonstrate grouping and coordinate-space transformations, while a path with a `non-scaling` stroke demonstrates stroke styling independent of the parent scale.

Eedxiao97

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through a static composition of circles, rectangles, lines, and paths. The shapes display varied fill colors, stroke widths, and transparency settings, with grouped elements transformed using SVG’s `translate` and `scale` attributes. The `.lines` CSS class applies stroke properties to lines and paths, while path-specific stroke-linejoin and stroke-linecap are set. The SVG renders inline in HTML with a linked stylesheet, showing how SVG presentation attributes combine with external CSS rules for color and geometry control.

CClair Sun

95% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a static composition. It shows circles, rectangles, lines, and a path arranged in a grid-like layout, with colors applied both through direct attributes and CSS classes. The SVG elements are rendered using inline markup, with group transformations via `transform="translate(...)"` and `scale(...)`. CSS handles stroke and fill for the path and line elements through the `.lines` class, while attribute-based fills and strokes are used on individual shapes.

Ddominicliu

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and paths. It shows shape attributes like fill, stroke, and stroke-width applied both directly and through CSS classes, with transforms for scaling and translation. The code uses raw SVG elements, CSS for styling the line group, and explicit attribute values for other shapes, all rendered in an HTML page with vanilla JavaScript-free markup.

LLonkiSolomki

94% match