D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
roachhd
Full window
Github gist
SVGs are farking sick mate
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%09%3Cdefs%3E%0A%09%09%3Cfilter%20id%3D%22b%22%3E%0A%09%09%09%3CfeGaussianBlur%20stdDeviation%3D%2220%22%2F%3E%0A%09%09%3C%2Ffilter%3E%0A%09%09%3CradialGradient%20id%3D%22l%22%20cx%3D%2250%25%22%20cy%3D%220%25%22%20fy%3D%22-50%25%22%20r%3D%2282%25%22%3E%0A%09%09%09%3Cstop%20offset%3D%2240%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A1%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%2290%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A.5%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A0%22%2F%3E%0A%09%09%3C%2FradialGradient%3E%0A%09%09%3CradialGradient%20id%3D%22l2%22%20cx%3D%2250%25%22%20cy%3D%220%25%22%20fy%3D%22-45%25%22%20r%3D%2275%25%22%3E%0A%09%09%09%3Cstop%20offset%3D%2240%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A1%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%2290%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A.5%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A0%22%2F%3E%0A%09%09%3C%2FradialGradient%3E%0A%09%09%3CradialGradient%20id%3D%22l3%22%20cx%3D%2250%25%22%20cy%3D%220%25%22%20fy%3D%22-40%25%22%20r%3D%2265%25%22%3E%0A%09%09%09%3Cstop%20offset%3D%2240%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A1%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%2290%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A.5%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23fff%3B%20stop-opacity%3A0%22%2F%3E%0A%09%09%3C%2FradialGradient%3E%0A%09%09%3ClinearGradient%20id%3D%22r%22%20x2%3D%22100%25%22%20y2%3D%220%22%3E%0A%09%09%09%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%23f04848%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%2233%25%22%20style%3D%22stop-color%3A%23467aeb%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%2266%25%22%20style%3D%22stop-color%3A%2385e66c%3B%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%23f26f2e%3B%22%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%09%3Cmask%20id%3D%22m%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%09%09%09%3Cg%20filter%3D%22url(%23b)%22%3E%0A%09%09%09%09%3Crect%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%225%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2210%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2215%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2220%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2225%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2230%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2235%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2240%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2245%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2250%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2255%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2260%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2265%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2270%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2275%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2280%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2285%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2290%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l2)%22%2F%3E%0A%09%09%09%09%3Crect%20x%3D%2295%25%22%20width%3D%225%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23l3)%22%2F%3E%0A%09%09%09%3C%2Fg%3E%0A%09%09%3C%2Fmask%3E%0A%09%3C%2Fdefs%3E%0A%09%3Crect%20fill%3D%22url(%23r)%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20mask%3D%22url(%23m)%22%2F%3E%0A%3C%2Fsvg%3E <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;"> <animateColor attributeName="fill" from="#0000ff" to="#ff0000" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"/> </circle>