PUBLIC MARKS with tag pattern

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='5' height='5' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(90)'%3E%3Crect width='100%25' height='100%25' fill='rgba(255, 250, 240,0)'/%3E%3Cpath d='M0 13h 40v5h-40z' fill='rgba(26, 32, 44,1)'/%3E%3Cpath d='M 20 20a 1 1 0 0 0 0 2a 1 1 0 0 0 0-2zM-10-10h 60v 60h-60z' fill='rgba(240, 255, 244,1)'/%3E%3Cpath d='M13 0v40h5v-40z' fill='rgba(26, 32, 44,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ")

A web component for drawing patterns with css.

Textures are useful for the selective perception of different categories

SVG patterns for Data Visualization

There are many ways to fill the background of a DOM or SVG element, including using solid colors or gradients. If you want to use a repeating pattern of some kind, the easiest way to do so is to create an SVG document that defines it and use it as a pattern fill. SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. (source: http://philbit.com/svgpatterns/#whysvg)

background-color: #8a0027; background-image: url(http://www.transparenttextures.com/patterns/knitted-netting.png); /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */

The light that a city emits is like its glowing fingerprint. From the orderly grid of Manhattan, to the sprawling, snaking streets of Milan, to the bright contrast of Kuwait’s ring-roads, each city leaves its own pattern of tiny glowing dots. See if you can ID these cities based on the way they shine.

Back in June of 2013, I launched Capptivate.co: a kinetic pattern library that captures and preserves delightful iOS animations. For an overview of the thinking behind the site, how to use it, and info about the tools I used to build it, read this post.

Atomic design is a methodology used to construct web design systems.

THIS ON GOING PROJECT COMPILES PATTERNS SHARED BY THE MOST TALENTED DESIGNERS OUT THERE FOR YOU TO USE FREELY IN YOUR DESIGNS.