Skip to main content
SimilarExport ZIP
100%

Marcus' shapes with SVG and CSS

✓ Published1🌍 Public
Mms-aus
Last edited Aug 18, 2019
Created on Aug 17, 2019

SVG shapes—circles, rectangles, polygons, lines, and paths—are drawn directly in an HTML document, with each shape's fill, stroke, and position set through inline presentation attributes or grouped CSS classes. The view is scaled using an SVG transform, and a duplicated set of shapes is translated horizontally to show how group-level style inheritance works; for instance, the translated group applies a yellow fill and blue stroke to all contained shapes, while a `.lineClass` group sets its stroke color and linejoin properties via an external stylesheet. No JavaScript or data files are used; the markup and CSS in `index.html` and `myStyles.css` fully determine the static composition.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581
82% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental SVG shapes—circles and rectangles—styling through both inline attributes and CSS classes. It shows how presentation properties like fill, stroke, and stroke-width can be defined either directly or via a stylesheet. The code applies a scale transform to the entire group, then a translate with a grouped color and stroke style, and finally a path with a round stroke-linejoin. The `.lines` class in `styles.css` sets stroke appearance, while `index.html` uses standard SVG markup within an HTML document.

Hhamza.miftah@gmail.com
82% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

Jjmarcrum3
81% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It demonstrates how scale and translate transforms reposition elements, while classes like `.lines` apply stroke properties. The rendering relies directly on SVG markup in `index.html` with CSS rules from `styles.css`, using no JavaScript libraries. A yellow background and grouped elements with shared fills and strokes highlight how SVG and CSS combine to control color, geometry, and coordinate systems.

Mmeihaoming
81% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS. It shows a static composition where the first circle and rectangle inherit default fills, a translated group applies shared fill and blue stroke attributes, and the `.lines` class sets black stroke width for lines while paths override the stroke to red with round line joins. The code uses the SVG API directly within an HTML document, with CSS rules in a separate stylesheet controlling presentation. No external libraries are involved.

TTiffani Gamboa
81% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using static HTML and CSS. The SVG canvas is scaled down with a transform, while individual elements are positioned and colored through direct attributes like `fill` and `stroke`, or via CSS classes such as `.lines` that set stroke properties. The code uses plain SVG markup and CSS rules, with no JavaScript libraries, to show shape composition and styling.

Ddrewbt
81% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline attributes. The visualization shows four groups of shapes with varied fills, strokes, and stroke widths, including a translated cluster with a purple fill and a black outline. A separate group applies CSS-defined stroke properties to lines and a path. The code uses native SVG elements within an HTML document, with styles defined in an external stylesheet. All shapes are rendered client-side, with no external data or JavaScript libraries involved.

Mmandelmech
81% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403
81% match