Last active
March 18, 2020 10:37
-
-
Save derpycoder/1248690d8ec980f913473a9de825e350 to your computer and use it in GitHub Desktop.
CSS Pattern Background & Pan Using Mouse
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}`; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'> | |
| <rect width='128' height='128' fill='#fff'/> | |
| <g> | |
| <circle cx="0" cy="0" r="2" fill="#ccc"/> | |
| <circle cx="0" cy="32" r="1" fill="#ccc"/> | |
| <circle cx="0" cy="64" r="1" fill="#ccc"/> | |
| <circle cx="0" cy="96" r="1" fill="#ccc"/> | |
| <circle cx="0" cy="128" r="2" fill="#ccc"/> | |
| <circle cx="32" cy="0" r="1" fill="#ccc"/> | |
| <circle cx="32" cy="32" r="1" fill="#ccc"/> | |
| <circle cx="32" cy="64" r="1" fill="#ccc"/> | |
| <circle cx="32" cy="96" r="1" fill="#ccc"/> | |
| <circle cx="32" cy="128" r="1" fill="#ccc"/> | |
| <circle cx="64" cy="0" r="1" fill="#ccc"/> | |
| <circle cx="64" cy="32" r="1" fill="#ccc"/> | |
| <circle cx="64" cy="64" r="1" fill="#ccc"/> | |
| <circle cx="64" cy="96" r="1" fill="#ccc"/> | |
| <circle cx="64" cy="128" r="1" fill="#ccc"/> | |
| <circle cx="96" cy="0" r="1" fill="#ccc"/> | |
| <circle cx="96" cy="32" r="1" fill="#ccc"/> | |
| <circle cx="96" cy="64" r="1" fill="#ccc"/> | |
| <circle cx="96" cy="96" r="1" fill="#ccc"/> | |
| <circle cx="96" cy="128" r="1" fill="#ccc"/> | |
| <circle cx="128" cy="0" r="2" fill="#ccc"/> | |
| <circle cx="128" cy="32" r="1" fill="#ccc"/> | |
| <circle cx="128" cy="64" r="1" fill="#ccc"/> | |
| <circle cx="128" cy="96" r="1" fill="#ccc"/> | |
| <circle cx="128" cy="128" r="2" fill="#ccc"/> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment