Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Ssourcebox-bug
Last edited Apr 10, 2019
Created on Apr 10, 2019

This example demonstrates basic geometric shapes drawn with SVG, including lines and paths, styled through an external CSS file. The visualization is built using D3 version 5 to select and manipulate the SVG container, while the rendering relies on native SVG elements and CSS properties for stroke color, width, line joins, and caps. The CSS classes, such as `.lines`, apply styling to path elements within the SVG, resulting in round-cornered, dark teal strokes. The code shows how D3 and SVG can be combined for simple vector graphics without a dataset.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of geometric SVG shapes styled through CSS, showcasing how vector primitives can be visually customized. The code initializes an SVG canvas with a fixed width and height, then relies on CSS rules to define stroke colors, line joins, and line caps for path elements. It uses D3 version 5 to select the SVG element, though the visible JavaScript is incomplete. The stylesheet applies a dark teal stroke and rounded line endings to all paths within a `.lines` class, while the body has no margin to maximize the canvas display area.

Ssourcebox-bug
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling. A single SVG canvas is rendered, and D3 is loaded to manipulate it, referencing CSS classes for line properties. The visualization uses the SVG rendering approach and D3 v5 framework, with styles defining stroke colors and widths for path elements. The code sets up the SVG element with a fixed width and height, but the specific shape-drawing logic is incomplete in the provided file.

Ssourcebox-bug
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—using SVG elements embedded directly in an HTML page, with styling controlled through CSS. The code uses D3.js v5 to select the SVG container and relies on standard SVG attributes like `cx`, `r`, `x`, `y`, and `d` to define geometry. A simple transform group shifts and scales the shapes, while stroke and fill properties, including a blue fill with black stroke on a subgroup, show how visual appearance is set.

DDaniel Weston
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. Circles and rectangles are drawn with static positions, colors, and stroke properties, while a line and path are grouped together to showcase shared stroke attributes. The visualization uses D3 v5 imported via UNPKG and leverages the `select` function from D3, though the code primarily relies on raw SVG markup within the HTML. Local ES6 modules and CSS from external files are also imported to structure the project.

MMuiruriscode
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and apply styling directly through attributes and CSS classes. The SVG is scaled with a transform, while a nested group uses inline styles for fills and strokes. CSS rules in `styles.css` define black strokes for the `.lines` group and an orange stroke for its path element. The visualization relies solely on raw SVG markup and CSS, with no JavaScript-based data logic or D3 imports involved in the rendering.

Cchrisvaillancourt
92% 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
92% match