Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
FFateh Moonesi
Last edited Jul 24, 2022
Created on Jul 24, 2022

This example demonstrates how SVG shapes and colors can be styled entirely with CSS, using thin, rounded paths on a dark teal background. The page loads an empty HTML body and relies on an external stylesheet to define stroke properties, including width, line joins, and line caps, for all path elements within a `.lines` container. The specific libraries or data sources are not visible in the provided code; instead, the focus is on the minimal interplay between inline SVG structure and cascading style rules.

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 static composition of abstract shapes and colors rendered entirely with SVG and CSS. The page shows a series of curved, black-outlined paths with rounded joins and caps, filled with a dark teal stroke color, set against a blank canvas. The visualization relies on inline SVG elements styled via an external stylesheet that defines the stroke width, color, and line rendering properties, without any JavaScript or data-driven dynamic behavior.

Ffjx
89% 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
89% 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
89% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates foundational SVG shapes—circles, rectangles, lines, and paths—stylized directly with CSS classes and inline presentation attributes. The SVG markup, rendered at a fixed 960×500 canvas, applies a global scale transform and translates groups to position elements, with fill and stroke properties defined both per shape and as inherited group styles. The separate `styles.css` file sets the stroke color, width, line join, and cap for elements in the `.lines` class, while the body margin and overflow are also set externally. No JavaScript or external data is used; the visualization relies purely on declarative SVG and CSS.

AAchorn
89% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline—styled with CSS classes and inline attributes. It uses SVG elements directly in the HTML, with a `<g>` group applying a scale transform and another group applying a translation and shared fill and stroke properties. The CSS defines stroke colors, widths, and line join/cap styles for the `.lines` class and its path. No external libraries are used; rendering relies entirely on native SVG and CSS.

YYU
89% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

A fork of an SVG and CSS example shows geometric shapes—circles, rectangles, lines, and a path—arranged in a grid and transformed with a scale. Basic shapes initially appear unfilled or with simple fills, while a translated group applies a light blue fill and black stroke to its children. The custom `.lines` class sets stroke properties on the SVG elements, with the path receiving a distinct dark teal color, rounded joins, and caps. The code uses raw SVG elements and CSS selectors, with no JavaScript libraries, and is rendered directly in the browser.

Aalisaipsoc
89% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates the styling and rendering capabilities of SVG shapes and paths in a web browser. The visualization employs CSS classes to apply a consistent black stroke with a width of 10 units to line elements, while path elements within those lines receive a rounded join and cap, plus a teal color (#25656d). The page embeds D3 version 7.8.5 via a CDN link, logging the library to the console. The minimal body and overflow-hidden styles suggest a fullscreen presentation of the geometric elements.

HHızır Gökhan Uyduran
89% 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
89% match