Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published0🌍 Public
Kkami310599
Last edited May 21, 2020
Created on May 21, 2020
Forked from HTML cars report

This example demonstrates basic geometric shapes rendered directly through the SVG API, including a circle, rectangle, line, and path. A `<g>` group element applies a transformation to translate shapes vertically and sets fill and stroke attributes. Two additional groups illustrate styling variations with different colors and stroke widths. The code uses native SVG elements within an HTML document, with the stylesheet defining a large monospace font for the body but no styling for the shapes themselves.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in overlapping groups against a blank canvas. It demonstrates how SVG elements can be styled and transformed using CSS classes and inline attributes. The code uses raw SVG markup with a `<g>` element for grouping, and applies styling through a linked stylesheet that sets stroke widths and colors. The visible transformations include scaling and translation, with the rendering approach being purely static SVG without any JavaScript libraries or data sources.

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

Shapes With SVG

This example demonstrates how to draw and group basic shapes using only SVG, with no external libraries or data. It shows circles and rectangles in different positions and sizes, some with individual colors and others grouped inside a `<g>` element that applies a shared blue fill and a translation transform. The code defines shapes directly in a static SVG canvas using standard elements such as `<circle>` and `<rect>`, with styling from a linked stylesheet that sets page margins and hides overflow.

KKateryna
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths, styled directly via CSS classes and inline attributes. Rendered inside an SVG element on an HTML page, the shapes are grouped using `<g>` elements that apply scaling and translation transforms. The CSS defines visual properties such as stroke color, stroke width, and line joins, with some groups inheriting fill and stroke from parent elements. The visualization makes no use of external JavaScript libraries, relying instead on static SVG markup and cascading styles.

PPenguin-jpg
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes, with grouping elements (`<g>`) applying transformations like scaling, translation, and fill inheritance. The SVG is embedded directly in the HTML, using no external JavaScript libraries. Renders via the SVG DOM, showing static geometry without interaction or data binding.

CChristopher A. Pfeifer
91% match