Skip to main content
SimilarExport ZIP
100%

SVG Postcard

✓ Published0🌍 Public
SSpaceActuary
Last edited Jun 26, 2017
Created on Jun 26, 2017

This example generates a postcard-like composition in SVG. It uses placeholder city images from lorempixel.com, embedded as patterns to fill a large rectangle and any circles in the scene. The text "SELECTED" and "TEXT HERE" is placed along a curved path defined by a generated `d` attribute, with a heavy crimson font and a layered text-shadow. The code builds the SVG with d3.v4, using selections, `d3.scaleOrdinal`, `d3.schemeCategory10`, and SVG `<pattern>`, `<image>`, `<textPath>`, and `<path>` elements.

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>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/25e72aadac28f2c87667816e82c609db'>SVG Image Background</a>

mit Licensed

Similar vizzes

Loading thumbnail…

SVG Image Background

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.

SSpaceActuary
73% match
Loading thumbnail…

SVG Playground

This example shows a collection of primitive SVG shapes—circles, a line, and two paths—arranged in a 960 by 500 viewport to create a small, static composition. Overlapping circles in maroon and green sit beside a navy line, while a curved path and a rectilinear path add contrast. The code uses plain SVG markup within an `index.html` file, defining shapes with attributes like `cx`, `r`, and `d`. A commented-out rectangle and inline CSS for full-bleed display are also present, but no external libraries or data sources are involved.

CCurran Kelleher
73% match
Loading thumbnail…

svg fundamendtal

This example demonstrates how to compose static SVG shapes—including a circle, rectangle, and path—inside an HTML document. It also shows the basics of importing and using D3.js and local ES6 modules. The code loads D3 from UNPKG and calls `select` from D3 to update the text content of a message div. A separate local module exports a simple string, and the example includes a CSS rule that styles that message text. The SVG markup is rendered directly in the browser without any data-driven joins or interactions.

Ppiggy1195@gmail.com
73% match
Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck
72% 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
72% match
Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

SSushant Kunkekar
71% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes, including circles with varying fills and radii, and a green line with a specified stroke width. It loads D3 via UNPKG and uses the `select` API from D3 to update a message div with text from a local ES6 module. The visualization renders directly to an SVG element in the HTML, while a separate CSS file styles the message text.

Rrandelriley
71% match
Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe
71% match