Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Ddanh-luong
Last edited Sep 28, 2023
Created on Sep 28, 2023

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—grouped and transformed with SVG, each styled either inline or via CSS. A first group shows shapes without fills, a second adds explicit red and green fills, and a third inherits a pale fill with a black stroke. CSS classes control stroke styling for the line and path. The code uses raw SVG elements within an HTML document, relying on CSS properties like fill, stroke, stroke-width, and stroke-linejoin. Shapes are scaled and translated using SVG transform attributes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through both inline attributes and an external CSS stylesheet. It shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation apply to grouped elements. The visualization uses raw SVG markup within an HTML document, with CSS classes controlling line styles and joint/endpoint rounding. No JavaScript libraries are involved; the rendering relies entirely on the browser's native SVG support and CSS styling rules.

Ii211775
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS classes. The SVG is scaled and translated via transform groups, with explicit fills, strokes, and stroke-widths applied. It uses raw SVG elements within an HTML page, with CSS controlling the path stroke color, line join, and cap styles. No external libraries are involved; the rendering relies solely on native SVG presentation and a linked stylesheet.

Ppangaotata
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes—circles, rectangles, lines, and a path—styled with both inline attributes and external CSS. The first shapes appear unstyled, then a red circle and green rectangle show fill properties, followed by a group with a light blue fill and purple stroke. The `.lines` class applies pink stroke and width to the line and path, with the path receiving additional stroke color and linejoin/linecap settings. The SVG uses a scale transform for magnification and a translate transform for repositioning, all rendered directly in the browser without any JavaScript libraries.

LLaibaKhawar
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of SVG shapes—circles, rectangles, lines, and a path—arranged in a compact group, with styling applied through both inline attributes and CSS classes. It showcases how SVG primitives render different fills, strokes, and grouping transforms. The code uses raw SVG elements within an HTML document, leveraging CSS rules for line styling and a global viewport scale. No external JavaScript libraries are involved; the visualization relies entirely on static SVG markup and stylesheet declarations.

DDuong-NguyenTrinhTrung
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—stylized directly through CSS classes and inline attributes. It shows how fill colors, stroke widths, and geometric transforms like scaling and translation affect the rendering of grouped elements. The code uses no JavaScript libraries, relying solely on raw SVG markup and a linked stylesheet. The `lines` class applies stroke properties to the polyline-like path, while the second group overrides default fill and adds a black stroke, illustrating CSS specificity and SVG presentation attributes.

CCharlene Ong
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled and grouped using CSS classes and inline attributes. The rendering relies on raw SVG elements within an HTML document, with a separate stylesheet defining stroke properties for path elements. A scaling transformation enlarges the entire drawing, while translation groups reposition shape clusters. The code uses no JavaScript libraries, relying purely on SVG markup and CSS for styling, showing basic geometric primitives with varying fill colors and stroke configurations.

FFereidoun Mianji
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The shapes demonstrate inline fill attributes, a grouped set with a shared fill and stroke, and a separate class-based styling for lines. The code uses raw SVG elements within an HTML file, with a linked stylesheet applying stroke properties to the `.lines` class. Rendering relies on the browser’s native SVG support, with a scale transform applied to the entire group. No external JavaScript libraries are used, and the data is static geometry defined directly in markup.

PPrathik Kulkarni
93% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes like circles, rectangles, lines, and paths can be styled with CSS and inline attributes. It uses raw SVG markup within an HTML document, applying transformations such as scaling and translation to group elements. Fill colors, stroke widths, and stroke colors are set both directly on shapes and through CSS classes. The visualization serves as a static, code-driven illustration of basic vector graphics rendering, with no external libraries or data sources.

Ddok0086m
93% match