D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jfsiii
Full window
Github gist
SVG colored patterns via masks/CSS without images
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>SVG colored patterns via mask</title> <style> /* FF seems to need explicit dimensions */ svg { width: 500px; height: 500px; } rect.hbar { mask: url(#mask-stripe) } .thing-1 { fill: blue; } .thing-2 { fill: green; } </style> </head> <body> <svg> <defs> <pattern id="pattern-stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect> </pattern> <mask id="mask-stripe"> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" /> </mask> </defs> <!-- bar chart --> <rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect> <rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect> <rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect> <!-- horizontal bar chart --> <rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect> <rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect> <rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect> </svg> </body> </html>