Building shapes with SVG and CSS

100%

Building shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 18, 2020

Created on Jan 18, 2020

This example demonstrates how SVG elements and CSS transforms can combine to build and scale geometric shapes. It shows a circle, rectangle, line, and path grouped together within an SVG canvas, with the entire group scaled down using a CSS `.scale` class that applies `transform: scale(0.2)`. The visualization highlights the SVG API for drawing primitive shapes and CSS for coordinate transformations, while accompanying JavaScript modules handle car data filtering and report generation via Promises.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styling them with CSS classes and inline attributes. The visualization showcases grouping and transformation techniques, such as scaling and translation, to position and layer elements. It uses the native SVG API for rendering and CSS for stroke and fill customization. The code also includes asynchronous JavaScript data handling with Promises, filtering and formatting car data into a text report, though this logic is separate from the visual shapes.

Mmjoaquim12

87% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG primitives can be styled and combined with CSS to create layered geometric compositions. The visualization shows overlapping circles, grouped shapes with transforms, and polygonal line paths rendered on a 960 by 500 canvas. It uses raw SVG elements like `<circle>`, `<line>`, and `<path>`, along with CSS rules that define stroke colors, widths, and line joins. The code applies scaling and translation transforms to demonstrate coordinate manipulation, making it a minimal but complete illustration of declarative vector graphics in the browser.

Ttj2040

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays a small collection of primitive shapes—circles, rectangles, and lines—arranged in an SVG canvas. It demonstrates how SVG elements can be styled and transformed using both inline attributes and an external CSS stylesheet. The SVG groups use transform attributes like scale and translate to reposition shapes, while CSS classes like `.lines` and `.lines path` apply stroke colors and widths. The visualization shows basic geometric composition without any interactivity or data binding, relying solely on static SVG markup and CSS styling.

Llisacaligagan

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates SVG shapes styled with CSS, illustrating how grouping and transform attributes organize and position circles, rectangles, and paths. The visualization uses inline SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes like `fill`, `stroke`, and `stroke-width` controlling appearance. CSS classes in the stylesheet define properties for the line graph, including color and stroke-linejoin. The rendering is purely client-side SVG, with no external JavaScript libraries. The layout applies a scale transform to the entire graphic and a translate transform to center the line elements.

Kkevin0903

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling and JavaScript data processing. It draws circles, rectangles, lines, and paths in an SVG canvas, using groups and CSS classes to apply stroke and fill properties. The page also displays a car report generated from hardcoded JSON data, filtered by price and formatted with ES6 template literals. The `getCars.js` file returns a Promise simulating async data loading, though the report uses the static list from the HTML.

AAnunay Biswas

84% match

Loading thumbnail…

SVG and CSS: Shapes

This example demonstrates fundamental SVG shape rendering combined with CSS styling. It displays a circle, rectangle, line, and path on a 900x500 canvas, with elements grouped and transformed using SVG’s `scale` and `translate` attributes. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`, `text`) and defines a CSS class in `styles.css` to apply stroke styling to grouped shapes. No external libraries are used, relying solely on native Scalable Vector Graphics markup and CSS.

Bbkopruluoglu3

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes—circles, rectangles, lines, and a path—are assembled into a structured composition. An SVG canvas scales the entire group, while CSS classes and inline attributes control fill colors, stroke properties, and line joins. The code uses the native SVG elements `circle`, `rect`, `line`, and `path`, along with the `transform` attribute to translate and scale groups. Inline presentation attributes such as `fill` and `stroke` work together with the external stylesheet to define the visual appearance, demonstrating the interplay between SVG markup and CSS styling.

SSun-XH

83% match