Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
CCarloWK1202
Last edited Jul 4, 2022
Created on Jun 30, 2022
Forked from HTML Starter

This example uses SVG and CSS to construct a grid of basic geometric shapes—circles and rectangles—in various colors, with a portion of the shapes offset and colored blue using a translated group. A pair of black lines and a path with a blue stroke and round line joins are rendered from hardcoded coordinates. The shapes are scaled by a factor of 1.5, and styling is applied via the CSS class `.lines` in the linked stylesheet, demonstrating how inline attributes and external style rules combine within an SVG canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled with both inline attributes and an external CSS stylesheet. The SVG is rendered directly in HTML, with a `scale` transform applied to the root group and a `translate` transform shifting a row of shapes. CSS classes like `.lines` set stroke properties, while inline `fill` and `stroke` attributes define colors, demonstrating the interplay between SVG presentation attributes and CSS styling within a React-free, bare-HTML page.

Eexistentialist1888
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG and styled using CSS. It shows circles, rectangles, lines, and a path within a container that applies scaling and translation transformations. Specific elements use inline `fill` attributes for color coding, while a group with class `lines` uses CSS rules to define stroke color, width, and line join rounding. The SVG markup is embedded directly in the HTML, with `transform` attributes controlling layout and positioning. No additional libraries are used beyond the native SVG and CSS APIs.

Iishmam11
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Jjugsomilk
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to draw and style basic SVG shapes—including circles, rectangles, lines, and a path—on a 960×500 canvas. The shapes are grouped and transformed using SVG’s `scale` and `translate` attributes to position and size them. CSS in an external stylesheet (styles.css) defines stroke and fill properties for the groups, including a `.lines` class that sets black strokes and a class-specific path style with a dark teal color and rounded line joins. The page uses plain HTML with linked CSS, no JavaScript frameworks or libraries.

Ppml31780
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and paths—styled with both inline attributes and CSS classes. Using React, the markup renders in an SVG element with inherited fill, stroke, and stroke-width properties for grouped shapes. The `lines` class in an external stylesheet applies black strokes, while a path overrides this with red and a round line join. Scaling and translation transforms position the shapes within a 960×500 viewport.

AAaron Guillen
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

MMauradion
93% match