shape

100%

✓ Published0🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

This example demonstrates the basic SVG shape elements available in the browser, including rectangles, circles, ellipses, lines, polylines, polygons, and paths. Each shape is rendered with a transparent fill and a colored stroke of varying width, showing how stroke properties work across different geometric primitives. The code uses inline SVG markup with standard attributes like `cx`, `ry`, `points`, and path commands such as `M`, `Q`, `T`, `C`, and `S`. The visualization is embedded directly in an HTML page with minimal CSS to reset margins and hide overflow.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Shape with SVG

A collection of basic SVG shapes—circles and rectangles—arranged in pairs on a canvas, with one group wrapped in a `<g>` element that applies a blue fill and black stroke to its children. The example demonstrates color overrides and inheritance through SVG attributes, including explicit `fill` and `stroke-width` properties on individual shapes. It also showcases a `<g class="lines">` group containing a `<line>` and a `<path>` that draw an angular, unconnected path across the lower portion of the viewport, with stroke styling applied via CSS. The code directly uses SVG elements like `circle`, `rect`, `line`, and `path` within a static `<svg>` embedded in HTML, with no JavaScript or data binding.

Wwiwinsrimulyani

88% 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. Styling is applied through a linked CSS stylesheet, using classes like `.lines` to set stroke properties and selectors such as `.lines path` for path-specific appearance. The SVG itself uses transform attributes for scaling and translation, while inline styles and presentation attributes (e.g., `fill`, `stroke-width`) define individual shape colors and outlines. No JavaScript libraries are used; the visualization relies solely on static SVG markup and cascading style rules.

NNeepaB

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled via inline attributes and CSS classes. The code renders shapes with explicit fills and strokes, then applies grouped transformations and stroke properties through class selectors. It uses SVG elements inside an HTML page, with CSS controlling appearance through classes like `.lines`. The visualization shows basic geometric composition, scaling, and translation without external libraries, relying purely on SVG markup and linked stylesheet rules.

AAreum Jo

88% match

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using CSS and JavaScript. The visualization shows a circle, a rectangle, and several lines and paths arranged on a 960-by-500 canvas. A group element applies a dark blue fill to two circles, while another group adds black strokes to the line and path. The code uses inline SVG attributes like `cx`, `cy`, `r`, and `transform`, paired with a CSS stylesheet that sets global margins and defines stroke properties for line elements. It serves as a minimal, static illustration of SVG markup within an HTML page.

JJL10897

88% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a group transform—styled inline and via CSS. It shows how shape attributes like `fill`, `stroke`, `stroke-width`, and `cx`/`cy`/`r` control appearance and position, with a highlighted class defined in styles.css. Rendered directly as SVG within an HTML page, the visualization uses no external libraries, relying solely on native SVG elements and React starter code for structure. The fixed coordinate system and hardcoded attributes illustrate fundamental vector graphics rendering.

Nncube-eng

88% 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 CSS classes. It shows how fill colors, stroke properties, and geometric transforms like scaling and translation affect the visual output. The code uses plain SVG elements within a React-less HTML page, with the styles.css file applying stroke width and line joins to the `.lines` group. Rendering is done entirely through the browser's native SVG support, with no additional JavaScript libraries.

Lloisasy

87% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates the basic building blocks of SVG shapes—circles, rectangles, lines, and paths—styled through CSS. It shows how a group element can apply shared fill and stroke properties, while a separate class targets line and path elements for custom stroke width and color. The code uses plain HTML, CSS, and JavaScript within a React framework, rendering via SVG. The shapes are manually positioned with fixed coordinates on a 960 by 500 canvas, with no external data source.

Vvoid-LSTM

87% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered directly within an HTML page. It shows how SVG coordinates originate from the top-left corner, and how a `g` group element applies shared styling attributes like fill and stroke to its children. The code uses raw SVG markup, along with CSS for page styling and a small JavaScript snippet that logs a message to the browser’s console. The shapes are positioned using absolute pixel coordinates within a 960×500 viewport.

Ssravaniboggaram

87% match