derpycoder · March 18, 2020 10:37
diff --git a/blueprint.svg b/blueprint.svg
diff --git a/css-bg-mouse-pan.html b/css-bg-mouse-pan.html
 <html>
  <head>
    <script>
      function init() {
        const TOPOGRAPHY_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBjbGFzcz0ic3ZlbHRlLTFrbXJ1MHUiPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWxsPSIjZmZmIj48L3JlY3Q+PGc+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMCIgY3k9IjY0IiByPSIxIiBmaWxsPSIjY2NjIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIwIiBjeT0iOTYiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIxMjgiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjMyIiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjY0IiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9Ijk2IiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjAiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjMyIiByPSIxIiBmaWxsPSIjY2NjIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxMjgiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTI4IiBjeT0iOTYiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMiIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==";
        const BLUEPRINT_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBjbGFzcz0ic3ZlbHRlLTFrbXJ1MHUiPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWxsPSIjMWE1YWMyIj48L3JlY3Q+PGcgZmlsbD0iIzM1NzZjOSI+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSIyNS42Ij48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSI1MS4yIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSI3Ni44Ij48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSIxMDIuNCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iMjUuNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iNTEuMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iNzYuOCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iMTAyLjQiPjwvcmVjdD48L2c+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNzQ5Y2RhIj48L3JlY3Q+PC9zdmc+";
        const HATCH_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+CiAgPHBhdGggZD0iTS0xLDEgbDcsLTcgTTAsMTQgbDE0LC0xNCBNMTMsMTUgbDcsLTciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgogIDxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgc3Ryb2tlPSJub25lIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC4yIj4KPC9yZWN0Pjwvc3ZnPg==";
        
        const target = document.getElementById("target");
        const backgroundDelta = { x: 0, y: 0 };
        
        target.style.background = `url(${TOPOGRAPHY_PAT})`;
        
        target.addEventListener("mousedown", (event) => {          
          target.addEventListener("mousemove", handleDrag);
        });
        
        target.addEventListener("mouseup", (event) => {
          target.removeEventListener("mousemove", handleDrag);
        });
        
        function handleDrag(event) {
          backgroundDelta.x += event.movementX;
          backgroundDelta.y += event.movementY;
          
          target.style.backgroundPositionX = `${backgroundDelta.x}px`;
          target.style.backgroundPositionY = `${backgroundDelta.y}px`;
        }
      }
    </script>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      
      html,
      body {
        margin: 0;
        padding: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
      }
      
      #target {
        width: 100%;
        height: 100vh;
        }
      </style>
  </head>
  <body onLoad="init()">
    <div id="target"></div>
  </body>
 </html>
diff --git a/hatch-pattern.svg b/hatch-pattern.svg
diff --git a/svg-to-b64.js b/svg-to-b64.js
 function svgToBase64Image() {
  const svg = document.getElementById('target-svg');
  
  const div = document.createElement('div');
  div.appendChild(svgElement.cloneNode(true));
  
  const b64 = window.btoa(div.innerHTML);
  
  return `data:image/svg+xml;base64,${b64}`;
 }
diff --git a/topography.svg b/topography.svg
	<html>
	<head>
	<script>
	function init() {
	const TOPOGRAPHY_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBjbGFzcz0ic3ZlbHRlLTFrbXJ1MHUiPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWxsPSIjZmZmIj48L3JlY3Q+PGc+PGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMCIgY3k9IjY0IiByPSIxIiBmaWxsPSIjY2NjIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIwIiBjeT0iOTYiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjAiIGN5PSIxMjgiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjMyIiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMzIiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjY0IiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iNjQiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9Ijk2IiBjeT0iMCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSIzMiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSI5NiIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iOTYiIGN5PSIxMjgiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjAiIHI9IjIiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjMyIiByPSIxIiBmaWxsPSIjY2NjIj48L2NpcmNsZT48Y2lyY2xlIGN4PSIxMjgiIGN5PSI2NCIgcj0iMSIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTI4IiBjeT0iOTYiIHI9IjEiIGZpbGw9IiNjY2MiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMiIgZmlsbD0iI2NjYyI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==";
	const BLUEPRINT_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBjbGFzcz0ic3ZlbHRlLTFrbXJ1MHUiPjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiBmaWxsPSIjMWE1YWMyIj48L3JlY3Q+PGcgZmlsbD0iIzM1NzZjOSI+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSIyNS42Ij48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSI1MS4yIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSI3Ni44Ij48L3JlY3Q+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxIiB5PSIxMDIuNCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iMjUuNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iNTEuMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iNzYuOCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEyOCIgeD0iMTAyLjQiPjwvcmVjdD48L2c+PHJlY3Qgd2lkdGg9IjEyOCIgaGVpZ2h0PSIxMjgiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNzQ5Y2RhIj48L3JlY3Q+PC9zdmc+";
	const HATCH_PAT = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+CiAgPHBhdGggZD0iTS0xLDEgbDcsLTcgTTAsMTQgbDE0LC0xNCBNMTMsMTUgbDcsLTciIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgogIDxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgc3Ryb2tlPSJub25lIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC4yIj4KPC9yZWN0Pjwvc3ZnPg==";

	const target = document.getElementById("target");
	const backgroundDelta = { x: 0, y: 0 };

	target.style.background = `url(${TOPOGRAPHY_PAT})`;

	target.addEventListener("mousedown", (event) => {
	target.addEventListener("mousemove", handleDrag);
	});

	target.addEventListener("mouseup", (event) => {
	target.removeEventListener("mousemove", handleDrag);
	});

	function handleDrag(event) {
	backgroundDelta.x += event.movementX;
	backgroundDelta.y += event.movementY;

	target.style.backgroundPositionX = `${backgroundDelta.x}px`;
	target.style.backgroundPositionY = `${backgroundDelta.y}px`;
	}
	}
	</script>
	<style>
	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	html,
	body {
	margin: 0;
	padding: 0 !important;
	overflow: hidden;
	box-sizing: border-box;
	}

	#target {
	width: 100%;
	height: 100vh;
	}
	</style>
	</head>
	<body onLoad="init()">
	<div id="target"></div>
	</body>
	</html>
	function svgToBase64Image() {
	const svg = document.getElementById('target-svg');

	const div = document.createElement('div');
	div.appendChild(svgElement.cloneNode(true));

	const b64 = window.btoa(div.innerHTML);

	return `data:image/svg+xml;base64,${b64}`;
	}