Skip to content

Instantly share code, notes, and snippets.

@peksi

peksi/index.html

Created January 15, 2019 08:17
Show Gist options
  • Save peksi/dc1df179f845f218a1222cca36401114 to your computer and use it in GitHub Desktop.
Save peksi/dc1df179f845f218a1222cca36401114 to your computer and use it in GitHub Desktop.
Download ZIP
vare svg map
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Väre map</title>
<style type="text/css">
body {
background: #333;
}
.st0 {
fill: #555;
stroke-miterlimit: 10;
}
.st1 {
fill: #F18700;
stroke-miterlimit: 10;
}
.blinker {
fill: red;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
// if there is hash in url, blink specific väre letter block
if (window.location.hash) {
setInterval(function () {
$(window.location.hash.toUpperCase()).toggleClass("blinker");
}, 500)
} else {
console.log('nohash');
}
});
</script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="100%" height="100%" viewBox="0 0 420 420" xml:space="preserve">
<g id="path">
<path class="st0" d="M158.6,57.7l6-19.3L212,53.1l49.9,15.6c0,0,9.8,6.4,14.8,9.7l35.7,38.2l6.1,3.7l47.4,14.7l-6,19.3l-17,26.8
l-14.8,13.8l-12.8,12.9l-3.9,14.4l-6,19.3l-19.1,26.1l39.3,41.9l10.7,11.3c3.8,1.7,17.6,7.6,17.6,7.6l40.5,12.5l-6,19.3l-43.6-13.5
l-14.5,27l-14.8,13.8L281.4,351l-4.6-4.2l-33.4-10.3l-17.8-12.1l-34.2-36.5l14.8-13.8l3.4-6.2l-34.2-36.5l14.8-13.8l4.5-11.9
l-13.1-9.6l-34-36.3l14.8-13.8l-3.8-8.7l-47.4-14.7l-13-9.5l-34-36.3l-7.8-4.4L9,57.7l6-19.3l14.9-26.7l26.5,27l25-5l5.1,4.7
l47.4,14.7l15,9.9L158.6,57.7z" />
</g>
<g id="blocks">
<rect id="B" x="280.9" y="352.3" transform="matrix(0.6835 0.7299 -0.7299 0.6835 361.309 -108.5906)" class="st1"
width="50" height="20.2" />
<rect id="H" x="236.9" y="246.1" transform="matrix(0.6835 0.7299 -0.7299 0.6835 269.9033 -110.0672)" class="st1"
width="50" height="20.2" />
<rect id="I" x="191" y="289.1" transform="matrix(0.6835 0.7299 -0.7299 0.6835 286.7614 -62.9319)" class="st1"
width="50" height="20.2" />
<rect id="N" x="175" y="232.6" transform="matrix(0.6835 0.7299 -0.7299 0.6835 240.4571 -69.1339)" class="st1"
width="50" height="20.2" />
<rect id="F" x="293.5" y="159.6" transform="matrix(0.6835 0.7299 -0.7299 0.6835 224.6746 -178.7325)" class="st1"
width="50" height="20.2" />
<rect id="C" x="279.5" y="289.5" transform="matrix(0.6835 0.7299 -0.7299 0.6835 314.4069 -125.9841)" class="st1"
width="46" height="20.2" />
<rect id="J" x="261" y="94.3" transform="matrix(0.6835 0.7299 -0.7299 0.6835 167.0521 -176.5535)" class="st1"
width="52.3" height="20.2" />
<rect id="P" x="190.2" y="95.3" transform="matrix(0.6835 0.7299 -0.7299 0.6835 145.0079 -123.6174)" class="st1"
width="49.7" height="20.2" />
<rect id="L" x="220.2" y="160.9" transform="matrix(0.6835 0.7299 -0.7299 0.6835 202.3869 -124.7538)" class="st1"
width="49.7" height="20.2" />
<rect id="R" x="147.2" y="160.9" transform="matrix(0.6835 0.7299 -0.7299 0.6835 179.2843 -71.4693)" class="st1"
width="49.7" height="20.2" />
<rect id="T" x="133.7" y="77.9" transform="matrix(0.6835 0.7299 -0.7299 0.6835 114.4282 -87.8825)" class="st1"
width="49.7" height="20.2" />
<rect id="X" x="63.7" y="77.9" transform="matrix(0.6835 0.7299 -0.7299 0.6835 92.2751 -36.7878)" class="st1"
width="49.7" height="20.2" />
<rect id="U" x="113" y="110.1" transform="matrix(0.9552 0.2961 -0.2961 0.9552 41.7806 -35.432)" class="st1"
width="49.7" height="20.2" />
<rect id="Q" x="169.9" y="129.1" transform="matrix(0.9552 0.2961 -0.2961 0.9552 49.9353 -51.4168)" class="st1"
width="49.7" height="20.2" />
<rect id="M" x="199.4" y="195.6" transform="matrix(0.9552 0.2961 -0.2961 0.9552 70.9462 -57.1694)" class="st1"
width="49.7" height="20.2" />
<rect id="G" x="259.8" y="214.3" transform="matrix(0.9552 0.2961 -0.2961 0.9552 79.2008 -74.2205)" class="st1"
width="49.7" height="20.2" />
<rect id="S" x="160.4" y="45.3" transform="matrix(0.9552 0.2961 -0.2961 0.9552 24.7098 -52.3706)" class="st1"
width="49.7" height="20.2" />
<rect id="O" x="210.3" y="60.9" transform="matrix(0.9552 0.2961 -0.2961 0.9552 31.5673 -66.441)" class="st1"
width="49.7" height="20.2" />
<rect id="E" x="314.3" y="127.1" transform="matrix(0.9552 0.2961 -0.2961 0.9552 55.8398 -94.2623)" class="st1"
width="49.7" height="20.2" />
<rect id="K" x="241.9" y="127.1" transform="matrix(0.9552 0.2961 -0.2961 0.9552 52.5913 -72.8094)" class="st1"
width="49.7" height="20.2" />
<rect id="V" x="82.4" y="45.3" transform="matrix(0.9552 0.2961 -0.2961 0.9552 21.2097 -29.2562)" class="st1"
width="49.7" height="20.2" />
<rect id="Y" x="10.9" y="45.3" transform="matrix(0.9552 0.2961 -0.2961 0.9552 18.0042 -8.0875)" class="st1"
width="49.7" height="20.2" />
<rect id="A" x="350" y="334.2" transform="matrix(0.9552 0.2961 -0.2961 0.9552 118.5736 -94.4704)" class="st1"
width="42.4" height="20.2" />
<rect id="D" x="245.7" y="321.9" transform="matrix(0.9552 0.2961 -0.2961 0.9552 110.0913 -63.0285)" class="st1"
width="35" height="20.2" />
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment