Funny shapes with SVG

100%

Funny shapes with SVG

✓ Published1🌍 Public

Last edited Jan 24, 2021

Created on Jan 23, 2021

This example demonstrates basic geometric shapes constructed with SVG elements, including circles, rectangles, lines, and paths. It shows how graphical primitives can be styled with fill colors and strokes, and grouped and transformed using SVG’s `g` element with `scale` and `translate` attributes. The code uses raw SVG markup inside an HTML document, with CSS classes like `.lines` to control stroke properties. A simple path with rounded line joins illustrates polyline rendering within the scaled coordinate space.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles and rectangles—with inline fill attributes, alongside grouped elements that inherit styling and a polyline path. The code uses raw SVG elements and CSS classes, where the `.lines` class applies stroke properties and the `.lines path` rule adds a red rounded stroke. A `<g>` element with a transform attribute shifts a pink-and-black group of shapes, while CSS sets the page margin and overflow. No JavaScript libraries are involved; the rendering relies solely on SVG markup and stylesheet rules.

RRobindj2000

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

89% match

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

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—circles, rectangles, lines, and a path—arranged with CSS styling and SVG transforms. It shows how fill colors can be applied per shape or inherited by groups, and how stroke properties define the appearance of line elements. The code uses raw SVG markup with a `<g>` element for grouping and scaling/translating, while the external stylesheet applies stroke width and color to the `.lines` class and its path child. The rendering approach is purely SVG, with no JavaScript libraries involved.

GGuruBigData

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Cclaudiatomateo

89% match

Loading thumbnail…

Shapes with SVG

This example shows basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed composition with varied fill colors and stroke styles. It demonstrates how raw SVG markup, without any JavaScript libraries, can create static vector graphics. The code uses core SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with grouping via `<g>` and transform attributes for scaling and translation. CSS classes style the lines and paths, while inline attributes control fill and stroke properties for the other shapes.

Eestregan

89% match