Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
svg pattern

3 Articles
{
,

}
Direct link to the article Optimizing SVG Patterns to Their Smallest Size
SVG svg pattern SVG use

Optimizing SVG Patterns to Their Smallest Size

I recently created a brick wall pattern as part of my #PetitePatterns series, a challenge where I create organic-looking patterns or textures in SVG within 560 bytes (or approximately the size of two tweets). To fit this constraint, I have …

Avatar of Bence Szabó
Bence Szabó on Mar 18, 2022
Direct link to the article Creating Patterns With SVG Filters
SVG svg filters svg pattern

Creating Patterns With SVG Filters

For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, …

Avatar of Bence Szabó
Bence Szabó on Mar 15, 2021
Direct link to the article SVG Patterns
pattern SVG svg pattern

SVG Patterns

The SVG <pattern> element allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like:

  • Define a <pattern> inside of the SVG
  • Define the shapes
…
Avatar of Geoff Graham
Geoff Graham on May 3, 2017 (Updated on Dec 15, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top