31 lines
3.1 KiB
HTML
31 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Cacheable 3 colour SVGs via <use></title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<body data-theme="dark">
|
|
<svg class="defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="package" viewBox="0 0 36 36"><g data-note="darker elements"><path d="M33.94,10.08A3.11,3.11,0,0,0,33.56,9L18,18l-7-4h0L27,4.72,25,3.57,9,12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.38a3.28,3.28,0,0,0,1.63,2.8l12.75,7.36a3.27,3.27,0,0,0,3.24,0l12.76-7.36.35-.24A3.27,3.27,0,0,0,34,25.38V10.64a2.64,2.64,0,0,0,0-.29A1.26,1.26,0,0,0,33.94,10.08Z"></path></g><g data-note="lighter elements" style="fill: currentcolor"><path d="M9,12.8,25,3.56,19.62.46a3,3,0,0,0-.78-.33A3,3,0,0,0,18.11,0a1.92,1.92,0,0,0-.24,0,3.37,3.37,0,0,0-.71.09,3.16,3.16,0,0,0-.79.33L3.62,7.82,3.38,8l-.21.17A3.18,3.18,0,0,0,2.44,9Z"></path><path d="M33.56,9a3.18,3.18,0,0,0-.73-.86L32.62,8l-.25-.16L32,7.58,27,4.72,11,14h0l7,4Z"></path><path d="M11,14v5.22a.5.5,0,0,1-.75.43l-.75-.43a1,1,0,0,1-.5-.87V12.8H9L2.44,9a3.11,3.11,0,0,0-.38,1.07,1.26,1.26,0,0,0,0,.27,2.64,2.64,0,0,0,0,.29V25.36a2.64,2.64,0,0,0,0,.29,1.26,1.26,0,0,0,0,.27,3.23,3.23,0,0,0,1.11,1.93l.21.16a2.2,2.2,0,0,0,.25.17l.81.47,11.94,6.89A3.27,3.27,0,0,0,18,36V18Z" style="opacity: 0.5"></path></g></symbol><symbol id="delivery" viewBox="0 0 36 36"><g data-note="darker elements"><path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69.94.94,0,0,0,.93-.24l5.14-5.22-4-1.87Z"></path></g><g data-note="lighter elements" style="fill: currentcolor"><path d="M34.81,5.17.68,14.85A.94.94,0,0,0,.54,16.6l10.11,4.71,24.93-16A.9.9,0,0,0,34.81,5.17Z"></path><path d="M35.72,5.41,15.34,23.5l4,1.87,6.52,3a1.87,1.87,0,0,0,2.56-1.06l7.51-21A.92.92,0,0,0,35.72,5.41Z"></path><path d="M35.72,5.41l-.14-.11-24.93,16,2,8.83a.92.92,0,0,0,.65.69l2.06-7.33Z" style="opacity: 0.5"></path></g></symbol></defs></svg>
|
|
<div class="layout">
|
|
<div class="icons">
|
|
<button id="icon-1"><svg class="icon" viewBox="0 0 36 36"><use href="#package"></use></svg></button><button class="alt" id="icon-2"><svg class="icon" viewBox="0 0 36 36"><use href="#delivery"></use></svg></button>
|
|
</div>
|
|
<div class="segmented-control">
|
|
<input id="light-theme" name="theme" type="radio" value="light" /><label for="light-theme">Light</label><input checked="" id="dark-theme" name="theme" type="radio" value="dark" /><label for="dark-theme">Dark</label>
|
|
</div>
|
|
<div class="links">
|
|
<a href="https://twitter.com/_AntiAlias_/status/1416989388429352961?s=20" target="_top" title="Twitter thread">Detailed explanation</a><a href="https://codepen.io/scootman/project/editor/ArpPQr" target="_top" title="Codepen project">Production ready demo</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|