Skip to content

Instantly share code, notes, and snippets.

@russbiggs

russbiggs/index.html

Created June 12, 2019 17:51
Show Gist options
  • Save russbiggs/432578c4625486125ceba22a21952a1f to your computer and use it in GitHub Desktop.
Save russbiggs/432578c4625486125ceba22a21952a1f to your computer and use it in GitHub Desktop.
Download ZIP
Paragraph 14 Compliance History
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>Document</title>
<style>
svg text {
font-family: 'Roboto', sans-serif;
}
.top {
fill:lightgray;
stroke: black;
stroke-width: 1px;
}
.top--compliance {
fill: #66a61e;
}
.top--non-compliance {
fill: #d95f02;
}
.middle {
fill: lightgray;
stroke: black;
stroke-width: 1px;
}
.middle--non-compliance {
fill:#d95f02;
}
.middle--compliance {
fill:#66a61e;
}
.bottom {
fill:lightgray;
stroke: black;
stroke-width: 1px;
}
.bottom--non-compliance {
fill:#d95f02;
}
.bottom--compliance {
fill:#66a61e;
}
</style>
</head>
<body>
<div>
<svg width="100" height="120" class="svg1"></svg>
<svg width="100" height="120" class="svg2"></svg>
<svg width="100" height="120" class="svg3"></svg>
<svg width="100" height="120" class="svg4"></svg>
<svg width="100" height="120" class="svg5"></svg>
<svg width="100" height="120" class="svg6"></svg>
<svg width="100" height="120" class="svg7"></svg>
<svg width="100" height="120" class="svg8"></svg>
</div>
<script>
var classes = [
['bottom', 'middle','top', 'IMR-1'],
['bottom', 'middle','top', 'IMR-2'],
['bottom--compliance', 'middle','top', 'IMR-3'],
['bottom--compliance', 'middle--non-compliance','top--non-compliance', 'IMR-4'],
['bottom--compliance', 'middle--non-compliance','top--non-compliance', 'IMR-5'],
['bottom--compliance', 'middle--non-compliance','top--non-compliance', 'IMR-6'],
['bottom--compliance', 'middle--non-compliance','top--non-compliance', 'IMR-8'],
['bottom--compliance', 'middle--non-compliance','top--non-compliance', 'IMR-9']
]
for (let i = 1; i < 9; i++) {
var svg = document.querySelector(`.svg${i}`);
var bottomTriangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
bottomTriangle.setAttribute('points',"50 5, 100 100, 0 100")
bottomTriangle.classList.add('bottom', classes[i-1][0]);
svg.appendChild(bottomTriangle)
var middleTriangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
middleTriangle.setAttribute('points',"50 5, 100 100, 0 100")
middleTriangle.classList.add('middle',classes[i-1][1]);
middleTriangle.setAttribute('transform', `translate(${100/6}, 1) scale(0.6666,0.6666)`)
svg.appendChild(middleTriangle)
var topTriangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
topTriangle.setAttribute('points',"50 5, 100 100, 0 100");
topTriangle.setAttribute('transform', `translate(${100/3}, 3) scale(0.3333,0.3333)`)
topTriangle.classList.add('top', classes[i-1][2]);
svg.appendChild(topTriangle)
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.textContent = classes[i-1][3];
text.setAttribute('y', 115);
text.setAttribute('x', 30);
svg.appendChild(text);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment