Shapes with SVG

100%

Shapes with SVG

✓ Published0🌍 Public

Last edited Apr 28, 2021

Created on Apr 28, 2021

This example displays four basic SVG shapes—two circles and two rectangles—positioned on a plain dark background. The shapes use default black fills for the first circle and rectangle, while the second circle and rectangle are explicitly colored red and green. The visualization is built entirely with static SVG markup in an HTML file, styled by a separate CSS file, and does not use any JavaScript libraries or data binding. It demonstrates how raw SVG elements can compose a simple static scene.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays four basic SVG shapes—two circles and two rectangles—positioned on a 960×500 canvas using inline SVG markup. The shapes appear in two rows, with the top row using default black fills and the bottom row using explicit green and yellow fill colors. It demonstrates how SVG elements can be styled directly through attributes or CSS, though the provided stylesheet only sets body margins and overflow. The visualization serves as a minimal technical reference for combining SVG geometry with basic CSS for layout control.

AAparnaPSha

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered directly in HTML, featuring two circles and two rectangles with varying positions and colors, including a red circle and a green square. The visualization uses plain SVG markup within index.html, styled minimally through CSS in styles.css, which sets the page margin to zero and hides overflow while applying a red highlight class. No external JavaScript libraries are used; the code relies solely on native SVG elements and CSS properties to construct the simple geometric composition.

Mmkdeeps01

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, including two circles and a red rectangle. The circles are grouped using an SVG `<g>` transform to shift them horizontally, while the rectangle is positioned independently. Styling is handled through an external CSS file, which sets the page margin to zero and hides overflow. The visualization uses raw SVG elements within an HTML document, with a green color class defined for potential highlighting, though no dynamic behavior is shown.

Uuskh580e

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, a polygon, and a rectangle—arranged in a fixed composition on an 800-by-500 canvas. The scene includes overlapping elements, such as a white circle with a black stroke and a teal triangle paired with a circle, rendered directly via standard SVG markup. Styling is applied through an external CSS file, which sets the page’s font and margin properties. The visualization demonstrates how raw SVG elements and CSS rules combine to create a static, illustrative graphic without any JavaScript libraries.

Rrangitit

90% match

Loading thumbnail…

Shapes with SVG & CSS

This example shows a static collection of geometric shapes composed of circles and rectangles in three color-coded groupings, alongside polygonal line drawings. The first two rows demonstrate default black shapes, a set with explicit fill colors, and a translated group with purple fill and black strokes. A lower group renders two lines and a zigzag path with a thick black outline and yellow join styling. The visualization is built with raw SVG elements inside an HTML page, styled via CSS classes that apply stroke widths and colors to the line elements.

AAli Shah

90% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements, styled and positioned through CSS and inline attributes. The visualization shows two circles and two rectangles, first with default black fills, then with explicit red and green fills, and finally a group with a light blue fill and black stroke. Additional lines and a path illustrate stroke styling with a thick black outline. The code uses plain SVG markup within an HTML page, with minimal CSS to reset the body margin and hide overflow. The rendering approach relies entirely on native SVG capabilities without any JavaScript libraries.

XXin Li

89% match

Loading thumbnail…

Shapes With SVG

This example demonstrates basic SVG shape rendering using static circle and rectangle elements defined directly in the HTML markup. It shows how coordinates, dimensions, and fill colors control each shape’s appearance, with a grouping element (`<g>`) applying a shared blue fill and vertical translation to a second row of shapes. The scene uses plain SVG attributes without external libraries, paired with a minimal CSS file that resets margins and hides overflow for a clean full-viewport canvas.

Ssalvar2134

89% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid with varied fill and stroke styling. It demonstrates how CSS classes and inline attributes control shape appearance, including a group with a light blue fill and black stroke, plus a separate group of lines with a thick round-joined stroke. The visualization uses plain SVG markup within an HTML file, linked to an external stylesheet, and does not rely on D3 or any JavaScript libraries. The shapes are scaled uniformly via an SVG transform.

Rreo440

89% match