Skip to content

Instantly share code, notes, and snippets.

@phedinkus

phedinkus/heatmap-patterns-plus-minus.html

Created November 13, 2018 13:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phedinkus/39ecbf32363bc3ab45dbbb10a6ff4df8 to your computer and use it in GitHub Desktop.
Save phedinkus/39ecbf32363bc3ab45dbbb10a6ff4df8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
heatmap-patterns-plus-minus.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>heatmap patterns</title>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='2000'>
<defs>
<!-- Minus -->
<pattern id='minus-black' width="21" height="21" patternUnits="userSpaceOnUse">
<line x1="5" x2="10" y1="7.5" y2="7.5" stroke="black" stroke-width=2 />
<line x1="15" x2="20" y1="17.5" y2="17.5" stroke="black" stroke-width=2 />
</pattern>
<pattern id='minus-white' width="21" height="21" patternUnits="userSpaceOnUse">
<line x1="5" x2="10" y1="7.5" y2="7.5" stroke="white" stroke-width=2 />
<line x1="15" x2="20" y1="17.5" y2="17.5" stroke="white" stroke-width=2 />
</pattern>
<!-- Plus -->
<pattern id='plus-black' width="21" height="21" patternUnits="userSpaceOnUse">
<line x1="7.5" x2="7.5" y1="4" y2="11" stroke="black" stroke-width=2 />
<line x1="4" x2="11" y1="7.5" y2="7.5" stroke="black" stroke-width=2 />
<line x1="14" x2="21" y1="17.5" y2="17.5" stroke="black" stroke-width=2 />
<line x1="17.5" x2="17.5" y1="14" y2="21" stroke="black" stroke-width=2 />
</pattern>
<pattern id='plus-white' width="21" height="21" patternUnits="userSpaceOnUse">
<line x1="7.5" x2="7.5" y1="4" y2="11" stroke="white" stroke-width=2 />
<line x1="4" x2="11" y1="7.5" y2="7.5" stroke="white" stroke-width=2 />
<line x1="14" x2="21" y1="17.5" y2="17.5" stroke="white" stroke-width=2 />
<line x1="17.5" x2="17.5" y1="14" y2="21" stroke="white" stroke-width=2 />
</pattern>
<!-- Levels -->
<pattern id='plus-1' width="21" height="21" patternUnits="userSpaceOnUse">
<!-- <rect width='21' height='21' fill='black' /> -->
<rect width=21 height=21 fill='url(#plus-black)'></rect>
</pattern>
<pattern id='plus-2' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#c8c8c8'></rect>
<rect width=21 height=21 fill='url(#plus-black)'></rect>
</pattern>
<pattern id='plus-3' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#a0a0a0'></rect>
<rect width=21 height=21 fill='url(#plus-black)'></rect>
</pattern>
<pattern id='plus-4' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#787878'></rect>
<rect width=21 height=21 fill='url(#plus-black)'></rect>
</pattern>
<pattern id='plus-5' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#505050'></rect>
<rect width=21 height=21 fill='url(#plus-white)'></rect>
</pattern>
<pattern id='plus-6' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#282828'></rect>
<rect width=21 height=21 fill='url(#plus-white)'></rect>
</pattern>
<pattern id='plus-7' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#000000'></rect>
<rect width=21 height=21 fill='url(#plus-white)'></rect>
</pattern>
<pattern id='minus-1' width="21" height="21" patternUnits="userSpaceOnUse">
<!-- <rect width='21' height='21' fill='black' /> -->
<rect width=21 height=21 fill='url(#minus-black)'></rect>
</pattern>
<pattern id='minus-2' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#c8c8c8'></rect>
<rect width=21 height=21 fill='url(#minus-black)'></rect>
</pattern>
<pattern id='minus-3' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#a0a0a0'></rect>
<rect width=21 height=21 fill='url(#minus-black)'></rect>
</pattern>
<pattern id='minus-4' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#787878'></rect>
<rect width=21 height=21 fill='url(#minus-black)'></rect>
</pattern>
<pattern id='minus-5' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#505050'></rect>
<rect width=21 height=21 fill='url(#minus-white)'></rect>
</pattern>
<pattern id='minus-6' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#282828'></rect>
<rect width=21 height=21 fill='url(#minus-white)'></rect>
</pattern>
<pattern id='minus-7' width="21" height="21" patternUnits="userSpaceOnUse">
<rect width='21' height='21' fill='#000000'></rect>
<rect width=21 height=21 fill='url(#minus-white)'></rect>
</pattern>
</defs>
<rect y=0 width='100%' height='100' fill='url(#minus-7)'></rect>
<rect y=100 width='100%' height='100' fill='url(#minus-4)'></rect>
<rect y=200 width='100%' height='100' fill='url(#minus-2)'></rect>
<rect y=300 width='100%' height='100' fill='white'></rect>
<!-- <rect y='100' width='100%' height='100' fill='url(#plus-2)'></rect> -->
<rect y=400 width='100%' height='100' fill='url(#plus-2)'></rect>
<!-- <rect y=300 width='100%' height='100' fill='url(#plus-4)'></rect> -->
<rect y=500 width='100%' height='100' fill='url(#plus-4)'></rect>
<!-- <rect y=500 width='100%' height='100' fill='url(#plus-6)'></rect> -->
<rect y=600 width='100%' height='100' fill='url(#plus-7)'></rect>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment