-
Notifications
You must be signed in to change notification settings - Fork 15
/
svg.html
26 lines (21 loc) · 4.2 KB
/
svg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML & CSS Visualisation Starter</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="../styles/styles.css">
<!-- import the webpage's javascript file -->
<script src="../scripts/svgvis.js" type="module" defer></script>
</head>
<body class="svg">
<section id="controls">
<button role="switch" data-control="play" data-on="false" aria-pressed="false">Play</button>
</section>
<section id="visual">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1317 925" fill-rule="evenodd" clip-rule="evenodd"><path d="M1010 459.6l-45.9 347 188.6 13.2 99.6-341.6-242.2-18.6z" fill="#231f20" fill-rule="nonzero"/><path d="M1171.4 560.2h-157.8v72.4h138.2v54.6h-138.2V810l-49.5-3.4 40-301.7h167.3v55.3z" fill="#00b8f1" fill-rule="nonzero"/><path d="M668.2 830.6l272 28.4L976 509.9H668.2v320.7z" fill="#231f20" fill-rule="nonzero"/><path d="M728.8 509.9L834.4 695V510h59.2v277h-63.5l-124.2-216v216h-37.7v-277h60.6z" fill="#ffd732" fill-rule="nonzero"/><path d="M374.8 575.6l266.9-34v329L363.5 925l11.3-349.4z" fill="#231f20" fill-rule="nonzero"/><path d="M495.6 899.1c-29.4-4.4-53-15.6-70.5-33.7-31.2-29.4-46.8-71.8-46.8-127 0-56.5 15.6-98.8 46.8-127 23.3-24 56.9-36 101-36 44 0 77.6 12 100.8 36 5.4 4.8 10.3 10.1 14.8 16v221.5c-4.5 5.9-9.4 11.4-14.8 16.5-3.6 3.7-7.6 7.2-11.7 10.4L495.6 899zm91.1-80.5c15-18.8 22.5-45.6 22.5-80.3 0-34.5-7.5-61.2-22.5-80a73.4 73.4 0 0 0-60.7-28.4 74.4 74.4 0 0 0-61 28.2c-15.2 18.8-22.8 45.6-22.8 80.2 0 34.7 7.6 61.5 22.8 80.3a74.4 74.4 0 0 0 61 28.2c25.5 0 45.7-9.4 60.7-28.2z" fill="#E40087" fill-rule="nonzero"/><path d="M64.4 857.3l285-50.4-5.3-311.6-253.2-17.7-26.5 379.7z" fill="#231f20" fill-rule="nonzero"/><path d="M93.9 543.1c24-24.2 54.4-36.3 91.4-36.3 49.5 0 85.7 16.2 108.6 48.7a105.5 105.5 0 0 1 20.4 54.9h-61.5a83.1 83.1 0 0 0-15.4-32c-11.1-12.7-27.7-19.1-49.7-19.1-22.3 0-40 9-52.9 27-12.9 18-19.4 43.6-19.4 76.6 0 33 6.9 57.8 20.5 74.2a64.7 64.7 0 0 0 52 24.6c21.6 0 38-7 49.3-21.1a92 92 0 0 0 15.6-34.2h61c-5.4 32.1-19 58.2-41 78.3-21.8 20.1-49.9 30.2-84 30.2-42.4 0-75.7-13.6-100-40.8-24.1-27.3-36.3-64.7-36.3-112.2 0-51.4 13.8-91 41.4-118.8z" fill="#00b8f1" fill-rule="nonzero"/><path d="M660 94.2l280.8 70.2-27 310.5H660V94.2z" fill="#231f20" fill-rule="nonzero"/><path d="M759.9 352.3a72.8 72.8 0 0 0 13.2 36.3c12 14.5 32.6 21.8 61.8 21.8 17.4 0 31.6-1.9 42.5-5.7 20.7-7.4 31-21.1 31-41.1 0-11.7-5.1-20.8-15.4-27.2a165.5 165.5 0 0 0-48.3-16.6l-37.5-8.4c-36.8-8.3-62.3-17.4-76.4-27.1-23.9-16.4-35.8-42-35.8-76.7 0-31.7 11.5-58.1 34.6-79 23-21 57-31.6 101.7-31.6 37.3 0 69.2 10 95.5 29.7 26.4 19.8 40.2 48.5 41.5 86.2H897c-1.3-21.3-10.5-36.5-27.8-45.5a93.5 93.5 0 0 0-43-8.9c-19.1 0-34.4 3.9-45.7 11.6a36.7 36.7 0 0 0-17.1 32.2c0 12.7 5.6 22.1 16.8 28.4 7.2 4.1 22.6 9 46.2 14.6l61 14.7c26.8 6.4 47 15 60.6 25.7 21.1 16.7 31.7 40.8 31.7 72.3 0 32.4-12.4 59.3-37.1 80.7-24.8 21.4-59.7 32-105 32-46 0-82.4-10.5-108.8-31.5-26.5-21.1-39.7-50-39.7-87H760z" fill="#00b8f1" fill-rule="nonzero"/><path d="M362.7 551.8l283-60.3-16-311.3-253.7-8.8-13.3 380.4z" fill="#231f20" fill-rule="nonzero"/><path d="M399.4 355v8.2c.6 27 3.6 46.1 8.9 57.1 5.3 11 16.7 16.6 34.1 16.6 17.3 0 28.7-6 34.3-18.1 3.3-7.1 5-19.2 5-36.1V137.5h73.2v244c0 29.8-5.2 53.4-15.5 70.8-17.4 29.5-48.9 44.3-94.4 44.3-45.5 0-76-12-91.5-35.8-15.5-23.9-23.3-56.4-23.3-97.6V355h69.2z" fill="#ffd732" fill-rule="nonzero"/><path d="M628.7 119.2l4-111.2-50.1 44.8-26-47.5-31.7 45.5-25.8-47.5L462 57.5 404.1 0l-4.5 129.7 229.1-10.5z" fill="#00b8f1" fill-rule="nonzero"/><path d="M331.6 234.5l-50.5-43-34.4 47.8-54.2-45.4-32.9 45.4-42.8-31-28.5 45.1M1231.4 234.5l-50.6-43-34.3 47.8-54.2-45.4-33 45.4-42.7-31-28.5 45.1" fill="none" stroke="#E40087" stroke-width="30.000024px"/><path d="M139.3 312L75.6 442h142.5l-78.8-130zM1020.3 298.2l-63.7 130h142.5l-78.8-130zM1237.3 298.2l-63.7 130H1316l-78.8-130z" fill="#ffd732" fill-rule="nonzero"/><path d="M255.5 424.5l-63.7-130h142.5l-78.8 130zM1136.5 410.7l-63.7-130h142.5l-78.8 130z" fill="#6ae582" fill-rule="nonzero"/></svg>
</section>
</body>
</html>