Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Nov 25, 2019

Created on Nov 25, 2019

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements combined with CSS classes. It highlights the flexibility of SVG for drawing shapes and the ability to control their appearance, such as fill colors, strokes, and line joins, through stylesheets. The visualization uses a D3 v5 selection to update a text message in the DOM, while the layout is achieved with SVG transformations. The code imports the `select` function from D3 and relies on an ES6 module for the displayed message.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

RResl411

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a grid and styled through CSS classes and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and transforms (scale, translate) apply both directly and via stylesheet rules. The visualization loads D3.js from UNPKG and uses its `select` API to inject a message into an HTML element, while a local ES6 module supplies the text. Rendering relies entirely on SVG markup within the HTML file, with CSS controlling the appearance of grouped elements.

Ccharliekramer

93% match

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jjakenachlas

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and paths—and style them using CSS rules defined in a separate stylesheet. It shows the effects of inline fill attributes, group-level styling properties, and class-based selectors, including stroke color and width. The code imports `select` from D3.js and uses it to set text content in a `div`. The entire scene is rendered through raw SVG markup, with a `transform` applied to the root group.

Ddtdenver

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using Cascading Style Sheets (CSS) alongside inline attributes. The visualization shows a scaled grouping of primitives, with some shapes inheriting fill and stroke properties from parent `<g>` elements, while others specify these directly. The code imports the `select` function from D3.js to update a message div, and uses SVG’s `transform` attribute for scaling and translation. CSS classes like `.line` apply stroke styling and path-specific properties, such as `stroke-linejoin`, to the rendered vector graphics.

Ccpsshan

92% match

Loading thumbnail…

Shapes with SVG and CSS

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.

Ssourcebox-bug

92% match