Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
CCarloGato
Last edited Dec 2, 2019
Created on Dec 2, 2019
Forked from HTML Cars Report

This example demonstrates how to combine SVG shapes and CSS styling to create a static geometric composition. It pairs circles and rectangles with varying fills, strokes, and transformations, including a translated group of shapes outlined in black and a set of red lines with a rounded path. The visualization relies on inline SVG attributes for positioning and the `<g>` element for grouping, while an external stylesheet defines the red stroke style for lines and the stroke color for the path. The rendered output is a canvas of 960 by 500 pixels, scaled by a factor of 1.2.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a static composition of circles, rectangles, lines, and paths. The visualization uses the SVG API directly, with elements like `<circle>`, `<rect>`, `<line>`, and `<path>` arranged via grouping and transforms. Shapes inherit fill and stroke properties from parent `<g>` elements or from a CSS class, with one path using a rounded line join. All shapes are rendered as static vector graphics in an SVG container, with explicit coordinate positioning and no interactive or data-driven behavior.

Ffiona187412
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling to create a static composition of circles, rectangles, lines, and paths. The visualization uses the SVG API directly, with elements like `<circle>`, `<rect>`, `<line>`, and `<path>` arranged via grouping and transforms. Shapes inherit fill and stroke properties from parent `<g>` elements or from a CSS class, with one path using a rounded line join. All shapes are rendered as static vector graphics in an SVG container, with explicit coordinate positioning and no interactive or data-driven behavior.

Ffiona187412
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
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG elements with CSS styling to create and transform basic geometric shapes. The visualization shows circles, rectangles, lines, and paths arranged in a grid-like layout, with some shapes inheriting default black fills while others are explicitly colored red and green. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>` inside a `<g>` element with scale and translate transforms. CSS classes and rules in `styles.css` control stroke properties, including a custom `stroke-linejoin` for paths, while the body’s margin and overflow are reset for full-viewport display.

Ooabundes
92% match
Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Rryankinsey1
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of inline SVG shapes—circles, rectangles, lines, and paths—to build a static composition with varying fills, strokes, and transformations. It shows how SVG presentation attributes define the base appearance, while CSS rules in an external stylesheet override styling for grouped elements, such as setting a black stroke and round line joins on the path. The entire canvas is wrapped in a scaling <g> element, and an additional translation group repositions a set of shapes. The rendering relies entirely on native SVG markup and CSS, without any external JavaScript libraries or data sources.

AAustin0524
92% match
Loading thumbnail…

Shapes with SVG and css

This example shows how SVG shapes and CSS styling can be combined to create a simple composition of circles, rectangles, lines, and a path. The first two shapes use default black fill, while the next two apply explicit red and green fills via attributes. A nested group applies a light blue fill and black stroke to its children, and a separate group with the class "lines" sets stroke color and width through CSS, with the path getting a cyan stroke and rounded joins. The entire drawing uses SVG elements and CSS rules, scaled 1.5 times within a 960 by 500 viewport.

Ssemopz
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic SVG shapes combine with CSS styling to create a layered, static composition. It demonstrates circles, rectangles, and a polyline path within a transformed group, with one group filled red and stroked black. A separate group class applies black strokes to lines and a blue stroke with round joins to paths. The page uses raw SVG elements and an external CSS file, with no JavaScript libraries, to illustrate direct styling and transformation techniques.

OOliver Wills
92% match