I recently ran across Dudley Storey’s blog, and it is a treasure trove of HTML, CSS and SVG goodness. My find was his post on SVG responsive maps, which is a pretty slick trick!
Tag Archives: SVG
SVG Patterns
SVG Patterns is a great site with many examples of using SVG patterns for backgrounds.
SVG patterns have the benefit of being scalable (they are vector graphics) while typically being smaller than bitmap graphics. They also are have more browser support than CSS3 gradients.
The site links to code samples for each pattern on Codepen so you can test them out, fork them and play with them, etc.
CSS3 Patterns
The idea behind SVG patterns was inspired by CSS3 Patterns, which is pretty cool.
SVG CSS Injection
Through some random occurence I stumbled upon PJ Onori’s blog. I noticed a post titled “SVG CSS Injection” – that seemed pretty interesting, so I clicked. I was pleasantly surprised.
🙂
I have always thought vector graphics were really cool. I like the concept of SVG, but I haven’t gotten much into it. I still don’t know what tool to use to make the SVG graphics, but once made, PJ’s technique seems like a pretty cool concept. Basically, he “injects” the SVG graphics in the page where he can then manipulate them with javascript. He can change the color on-the-fly, etc. There is a nice demo page to show off his work.
The code is available on Github, so you can fork it if you think it is awesome. I hope to have a chance to play with it. I may not get to use it at work, but maybe I can sprinkle some SVG goodness on this blog. We’ll see…