Animated SVG pattern on Leaflet map (zoom available). Animation made with help of D3.js. Blur filter added for revealing level of hardware acceleration in different browsers. As we can see perfomance degradation quite unsignificant. Works great in Firefox and webkit based browsers.
xxxxxxxxxx<html><head> <meta charset=UTF-8 /> <title>Dynamic pattern animation</title> <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' /> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script> <style> .checkbox-control { background-color: #fff; box-shadow: rgba(0, 0, 0, 0.65) 0px 1px 5px 0px; } .checkbox-control > label { background-color: #fff; border-radius: 4px; cursor: pointer; display: block; padding: 4px; } .checkbox-control input { vertical-align: bottom; } .dropdown-control { box-shadow: rgba(0, 0, 0, 0.65) 0px 1px 5px 0px; background-color: #fff; } .dropdown-control > label { background-color: #fff; border-radius: 4px; padding: 4px; display: block; } </style></head><body> <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> <script src="dpa.js"></script> <!--SVG filters for map container --> <svg> <defs> <pattern id="diagonalHatch" width="40" height="40" patternTransform="rotate(55 0 0)translate(0 0)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="40" stroke-dasharray="8, 5, 4, 8, 5" style="stroke:#0099FF; stroke-width:6 " /> </pattern> <pattern id="diagonalHash" width="30" height="30" patternTransform="rotate(0 0 0)" patternUnits="userSpaceOnUse"> <g> <line x1="0" y1="0" x2="0" y2="30" style="stroke:#0099FF; stroke-width:6" /> <line x1="0" y1="0" x2="30" y2="0" style="stroke:#0099FF; stroke-width:6" /> </g> </pattern> </defs> </svg> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url
https://d3js.org/d3.v3.min.js
https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js