Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jul 3, 2019

Created on Jul 3, 2019

This example demonstrates how SVG shapes can be styled with CSS and grouped using SVG transformation. It shows circles, rectangles, and a line, with groups of shapes translated vertically and given fill and stroke attributes. The SVG canvas dimensions are set to 960 by 500, and inline SVG elements are rendered directly in the HTML. The `g` element is used to apply transform and style changes to the grouped shapes, while the `circle`, `rect`, and `line` elements are drawn with specific coordinates and radii. The CSS file sets the body margin to zero and hides overflow.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—as rendered through a combination of inline SVG markup and CSS styling. The code showcases how to apply fills, strokes, and stroke widths directly on elements, as well as how to group shapes for shared visual attributes using the `transform` and `g` elements. The CSS stylesheet defines classes (`.lines`) to control stroke properties and `stroke-linejoin`, while also setting a global body margin. The page uses a 960x500 SVG canvas with a scale transformation to enlarge the displayed shapes.

JJMason88

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

Ddmcgown3

93% match

Loading thumbnail…

Shapes with SVG

This example shows how to compose SVG shapes—circles, rectangles, lines, and a path—into a grouped, scaled illustration using plain HTML and CSS. The code directly places SVG elements with attributes for position, size, fill, and stroke, and uses nested `<g>` elements to apply `translate` and `scale` transforms. CSS classes style the line group with purple and blue strokes, while the presentation is rendered entirely via the browser’s native SVG support, with no external JavaScript libraries.

Aadelgrosso

93% 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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

JJordan Arnold

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates SVG shapes styled with CSS, illustrating how grouping and transform attributes organize and position circles, rectangles, and paths. The visualization uses inline SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes like `fill`, `stroke`, and `stroke-width` controlling appearance. CSS classes in the stylesheet define properties for the line graph, including color and stroke-linejoin. The rendering is purely client-side SVG, with no external JavaScript libraries. The layout applies a scale transform to the entire graphic and a translate transform to center the line elements.

Kkevin0903

92% match