Old school D3 from simpler times

All examples By author By category About

KoGor

Full window Github gist

Web maps and animated SVG patterns

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.

<!DOCTYPE html>
<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>
		<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