Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published1🌍 Public
VVarun Khanna
Last edited Oct 5, 2019
Created on Oct 5, 2019

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed directly in HTML. It shows default black shapes, colored fills, and a group with orange fill and black strokes, alongside a green stroked path with rounded line joins. The code uses raw SVG elements within an `<svg>` tag, applying transforms like `scale()` and `translate()`, with styling through an external stylesheet. The rendering approach is pure SVG, with no JavaScript libraries or data binding.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

IImmaculata-Mary Muoghalu
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged and styled with CSS and inline attributes. It shows how default black fills contrast with explicit colors like red and green, and how groups apply shared transforms and styles, such as translating shapes and adding strokes. The code uses plain SVG elements within an HTML file, with CSS classes controlling stroke color and width, and inline attributes like `fill` and `transform` for individual styling. The rendering is entirely SVG-based, with no external libraries.

AAznaggar
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid-like composition with varied fill colors, strokes, and transforms. The rendering uses raw SVG markup inside an HTML page, with CSS classes applied to style group elements, such as setting black stroke and width for line elements. The code relies on standard SVG APIs (circle, rect, line, path) and CSS selectors to control presentation, including a `translate` transform to reposition groups and a `scale` transform on the root group. No external JavaScript libraries or data sources are used, as the shapes are hardcoded in the markup.

Aantoniojl@gmail.com
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. It shows uncolored shapes, shapes with explicit fill colors, and a group with inherited fill and stroke properties. The code uses raw SVG elements within an HTML page, linked to a separate stylesheet that applies stroke width, colors, and round line joins. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

烽烽火戏猪猴
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

YYF
92% 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