SVG Image Background

100%

SVG Image Background

✓ Published0🌍 Public

Last edited Mar 28, 2017

Created on Mar 24, 2017

This example shows eight geometric shapes—four rectangles and four circles—arranged in a grid, each filled with a different placeholder image from LoremPixel and outlined with a categorical color from D3’s `schemeCategory10`. The visualization demonstrates how SVG patterns can embed raster images via the `pattern` element and `image` reference. Using D3 v4’s selection and append methods, the code defines a pattern for each shape ID and then applies the pattern as the fill for each `rect` and `circle`, with `objectBoundingBox` units to tile the image evenly.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/c21277d7228a38ef5617908168251bb2'>SVG Stripes</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Shapes

This example demonstrates fundamental SVG shape elements—circle, rect, and line—positioned within a fixed 960 by 960 coordinate system. The visualization compares shapes with default styling against those customized with explicit `fill` and `stroke` attributes, while a `<g>` group applies shared `fill="teal"` and `stroke="black"` to its children. Beyond these static SVG primitives, the code also showcases basic D3 integration by importing `select` from `d3` and using it to set the text content of a div element, along with a separate ES6 module export. The rendering relies entirely on SVG markup.

YYogesh Joshi

78% match

Loading thumbnail…

Shapes with SVG

This example displays four basic SVG shapes—two circles and two rectangles—positioned on a plain dark background. The shapes use default black fills for the first circle and rectangle, while the second circle and rectangle are explicitly colored red and green. The visualization is built entirely with static SVG markup in an HTML file, styled by a separate CSS file, and does not use any JavaScript libraries or data binding. It demonstrates how raw SVG elements can compose a simple static scene.

LLoraay-A

78% match

Loading thumbnail…

Shapes

The visualization displays a collection of basic geometric shapes—an ellipse, rectangle, and circle—colored individually and grouped to illustrate SVG styling and transformation. A second group applies a uniform fill and stroke, while a line and an unclosed path demonstrate stroke properties and line joins. The example is built with d3.v5, using the `select` API to target the SVG, and relies on raw SVG elements and CSS classes for rendering, with a fixed viewport enforced by the stylesheet.

Bbakstorage00001

76% match

Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000

76% 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

76% match

Loading thumbnail…

SVG Fundamentals

This example reproduces a Sol LeWitt-inspired geometric composition using layered SVG elements and D3.js. It draws a grid of horizontal and vertical rectangles across the full viewport, with each line partially masked to create intricate overlapping patterns. The visualization uses D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate two masks containing circular, triangular, and other symbol shapes. These masks apply inverse fill logic—one inverting the grid’s visibility—producing a dynamic interplay between the background lines and foreground symbolic cutouts. The rendering relies entirely on SVG attributes like `mask` and `fill`.

Ssh_ip

76% match

Loading thumbnail…

SVG Fundamentals

This example shows a simple arrangement of geometric shapes—a green circle and four gray rectangles of varying sizes and positions—composed directly in SVG. The visualization demonstrates fundamental SVG markup, using inline `<circle>` and `<rect>` elements within an `<svg>` container to define primitive shapes. No JavaScript libraries or data sources are involved; the rendering relies entirely on static SVG attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `fill` to position and style each shape.

CChris Hudson

76% 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

76% match