135 lines
No EOL
20 KiB
HTML
135 lines
No EOL
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<script>
|
||
const setTheme = (theme) => {
|
||
theme ??= localStorage.theme || "system";
|
||
document.getElementById("themeLight").checked = theme === "light";
|
||
document.getElementById("themeDark").checked = theme === "dark";
|
||
localStorage.theme = theme;
|
||
};
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
setTheme();
|
||
});
|
||
</script>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||
<title>Iconography</title>
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<a href="/" id="backToWiki">
|
||
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
||
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
||
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
||
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
||
</a>
|
||
</header>
|
||
<div>
|
||
<nav>
|
||
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
||
<ul>
|
||
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
||
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
||
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
||
<li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
|
||
<li class="active"><a href=""><i data-icon="info"></i>Iconography</a></li>
|
||
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
||
<li><a href="../glow"><i data-icon="info"></i>Glow</a></li>
|
||
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
||
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
||
<li id="themeToggleDark" class="themeToggle">
|
||
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
|
||
<label for="themeDark">
|
||
<i data-icon="light"></i>
|
||
</label>
|
||
</li>
|
||
<li id="themeToggleLight" class="themeToggle">
|
||
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
|
||
<label for="themeLight">
|
||
<i data-icon="light"></i>
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<main>
|
||
|
||
<div class="alert">
|
||
<i data-icon="warning"></i>
|
||
<p>
|
||
<strong>Work in progress</strong>
|
||
This style guide is still under development.<br>
|
||
Not all resources may be available yet, explanations and examples may be missing and things may
|
||
change without notice.
|
||
</p>
|
||
</div>
|
||
|
||
<h1>Iconography</h1>
|
||
<p>Icons can help with conveying meaning or to help with directions. In order to fit into the overall theme,
|
||
we wanted to have a set of icons that implement the same design characteristics and rules as the <a
|
||
href="../logo/">logo, about which you can read more here</a>, and our font, <a
|
||
href="../typography/">Argon Glow, which we talk about more in the typography</a>.</p>
|
||
<p>Of course, creating a full iconset would require years of work for such a small team, which is why we
|
||
focused on the icons needed for the wiki, styleguide and signage on the event. At time of writing that
|
||
is still roughly sixty icons which we needed to design. They can be found in our design repository (not
|
||
yet published).</p>
|
||
<!-- TODO: Link to repository or other form of icon collection -->
|
||
<p>Luckily, the rules which the icons needed to adhere to, also meant, that the icons would need to be
|
||
fairly simple. Uniform bend-radii (based on a circle, not bezier), a minimum gap distance, and as few
|
||
lines as possible, all within a limited canvas size. In the end, we decide on an SVG canvas of 600 by
|
||
600 units with a uniform grid of 25 units between gridlines. Line width was set to 50 units, and the
|
||
same for a 90° bend's radius. Because gaps didn't always align perfectly to the grid, they were chosen
|
||
to always be at least 50 units and rounded up to the next gridline. Because we are aiming at a
|
||
neon-esque tube look, line-caps were set to rounded, adding a semicircle with a radius of 25 units.</p>
|
||
<figure>
|
||
<svg height="20rem" viewBox="0 0 600 600" version="1.1" id="svg" xml:space="preserve"
|
||
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<style>
|
||
g {
|
||
fill: var(--color-foreground);
|
||
}
|
||
</style>
|
||
</defs>
|
||
<g>
|
||
<path
|
||
d="M 213.37856,242.00777 C 227.32944,264.08838 251.97907,278.75 280,278.75 c 1.62235,0 3.23375,-0.0492 4.83265,-0.14613 v -7.5149 C 283.23611,271.19575 281.62471,271.25 280,271.25 c -25.69487,0 -48.1643,-13.57397 -60.70703,-33.93164 l -0.46709,-0.75791 z" />
|
||
<path
|
||
d="m 277.18801,72.132287 c 15.38784,6.470687 32.9424,8.121551 50.32371,3.594275 4.76947,-1.242294 9.3272,-2.898256 13.6409,-4.918946 l -5.67991,-5.67991 c -3.15163,1.331329 -6.43925,2.45223 -9.85162,3.341044 -14.67629,3.822705 -29.46101,2.785261 -42.66223,-2.107307 z" />
|
||
<g aria-label="α=135°, r=75 px">
|
||
<path
|
||
d="m 196.15111,292.57293 -0.45833,-2.40625 q -0.46875,-2.46875 -2.32292,-2.46875 -1.39583,0 -2.03124,1.14583 -0.80209,1.4375 -0.80209,3.33333 0,2.29167 0.78125,3.38541 0.79167,1.11459 2.05208,1.11459 1.39583,0 2.14583,-2.21875 z m 1.07291,-3.1875 1.03125,-3.05208 h 1.70833 l -2.13541,6.32291 0.41667,2.28124 q 0.0937,0.51042 0.45833,0.9375 0.42708,0.5 0.76041,0.5 h 0.91667 V 298 h -1.14583 q -0.97917,0 -1.85417,-0.875 -0.42708,-0.4375 -0.60416,-1.35416 -0.47917,1.15625 -1.45833,2.06249 -0.45834,0.42709 -1.94792,0.42709 -2.44791,0 -3.63541,-1.58333 -1.21875,-1.63542 -1.21875,-4.5 0,-3.06249 1.32292,-4.49999 1.46875,-1.60416 3.53124,-1.60416 3.23958,0 3.85416,3.31249 z m 6.43749,-1.07291 h 13.35415 v 1.74999 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 18.26039,3.66666 h 3.4375 V 284.3646 l -3.73958,0.75 v -1.91666 l 3.71874,-0.75 h 2.10417 v 13.78123 h 3.43749 V 298 h -8.95832 z m 19.5833,-6.61457 q 1.51042,0.32291 2.35417,1.34374 0.85416,1.02084 0.85416,2.52083 0,2.30208 -1.58333,3.5625 -1.58333,1.26041 -4.49999,1.26041 -0.97917,0 -2.02083,-0.19791 -1.03125,-0.1875 -2.13541,-0.57292 V 295.5 q 0.87499,0.51042 1.91666,0.77084 1.04166,0.26041 2.17708,0.26041 1.97916,0 3.01041,-0.78125 1.04167,-0.78125 1.04167,-2.27083 0,-1.37499 -0.96875,-2.14583 -0.95833,-0.78124 -2.67708,-0.78124 h -1.8125 v -1.72917 h 1.89583 q 1.55208,0 2.375,-0.61458 0.82291,-0.625 0.82291,-1.79167 0,-1.19791 -0.85416,-1.83333 -0.84375,-0.64583 -2.42708,-0.64583 -0.86458,0 -1.85417,0.1875 -0.98958,0.1875 -2.17708,0.58333 v -1.87499 q 1.19792,-0.33334 2.23958,-0.5 1.05209,-0.16667 1.97917,-0.16667 2.39583,0 3.79166,1.09375 1.39583,1.08333 1.39583,2.9375 0,1.29166 -0.73958,2.18749 -0.73958,0.88542 -2.10417,1.22917 z m 7.21874,-7.16666 h 8.26041 v 1.77083 h -6.33333 v 3.8125 q 0.45834,-0.15625 0.91667,-0.22917 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42708 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16666 -1.01041,-0.16667 -2.09375,-0.5 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05208,-0.94792 1.05208,-2.57292 0,-1.62499 -1.05208,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 16.60414,1.0625 q -0.83333,0 -1.40624,0.58333 -0.57292,0.57292 -0.57292,1.40625 0,0.82292 0.57292,1.39583 0.57291,0.5625 1.40624,0.5625 0.83334,0 1.40625,-0.5625 0.57292,-0.57291 0.57292,-1.39583 0,-0.82292 -0.58334,-1.40625 -0.57291,-0.58333 -1.39583,-0.58333 z m 0,-1.34375 q 0.66667,0 1.28125,0.26042 0.61458,0.25 1.0625,0.72916 0.47917,0.46875 0.71875,1.0625 0.23958,0.59375 0.23958,1.28125 0,1.375 -0.96875,2.33333 -0.95833,0.94791 -2.35416,0.94791 -1.40625,0 -2.34375,-0.93749 -0.93749,-0.9375 -0.93749,-2.34375 0,-1.39583 0.95833,-2.36458 0.95833,-0.96875 2.34374,-0.96875 z" />
|
||
<path
|
||
d="m 194.40111,314.79164 q -0.32291,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83333,-0.0937 -1.625,0 -2.5,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60417,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35417,-0.52083 0.19791,0 0.4375,0.0312 0.23958,0.0208 0.53124,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 h -13.35415 z m 0,4.24999 h 13.35415 v 1.77083 h -13.35415 z m 17.36456,-10.11456 h 9.99998 v 0.89583 l -5.64582,14.65622 h -2.19791 l 5.31249,-13.78122 h -7.46874 z m 14.12498,0 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.5625,3.90624 -1.56249,1.38542 -4.40624,1.38542 -0.97916,0 -2,-0.16667 -1.01041,-0.16667 -2.09374,-0.5 v -2.11458 q 0.9375,0.51042 1.93749,0.76042 1,0.25 2.11458,0.25 1.80209,0 2.85417,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85417,-0.94792 -0.84374,0 -1.68749,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 21.91663,13.80206 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33334,1.6875 1.33334,4.4375 0,2.74999 -1.33334,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.87499,-3.3125 -0.86459,-1.20833 -2.38542,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38542,-1.19791 0.87499,-1.20833 0.87499,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98957 h -2.26041 l -3.39583,-4.58332 -3.39583,4.58332 h -2.26041 l 4.53124,-6.10415 -4.14583,-5.56249 h 2.26042 l 3.09374,4.15624 3.09375,-4.15624 z" />
|
||
</g>
|
||
<path
|
||
d="m 187.79306,570.26801 h 8.26041 v 1.77083 h -6.33333 v 3.81249 q 0.45834,-0.15625 0.91667,-0.22916 0.45833,-0.0833 0.91666,-0.0833 2.60417,0 4.125,1.42709 1.52083,1.42708 1.52083,3.86457 0,2.51042 -1.5625,3.90625 -1.5625,1.38541 -4.40624,1.38541 -0.97917,0 -2,-0.16667 -1.01041,-0.16666 -2.09375,-0.49999 v -2.11458 q 0.9375,0.51041 1.9375,0.76041 1,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94791 1.05209,-0.94792 1.05209,-2.57292 0,-1.62499 -1.05209,-2.57291 -1.05208,-0.94791 -2.85416,-0.94791 -0.84375,0 -1.6875,0.18749 -0.83333,0.1875 -1.70833,0.58334 z m 18.05206,1.38541 q -1.625,0 -2.44791,1.60417 -0.8125,1.59375 -0.8125,4.80207 0,3.19792 0.8125,4.80208 0.82291,1.59375 2.44791,1.59375 1.63541,0 2.44791,-1.59375 0.82292,-1.60416 0.82292,-4.80208 0,-3.20832 -0.82292,-4.80207 -0.8125,-1.60417 -2.44791,-1.60417 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -4,-2.0625 -1.37499,-2.07291 -1.37499,-5.99999 0,-3.93749 1.37499,-5.99999 1.38542,-2.07291 4,-2.07291 z m 17.43747,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60417,-1.04166 1.52083,-1.54166 0.92708,-0.51042 2.20833,-0.51042 2.125,0 3.44791,1.6875 1.33333,1.6875 1.33333,4.43749 0,2.75 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91666,-0.51041 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.31249 -0.86458,-1.20834 -2.38541,-1.20834 -1.52083,0 -2.39583,1.20834 -0.86458,1.19791 -0.86458,3.31249 0,2.11458 0.86458,3.32291 0.875,1.19792 2.39583,1.19792 1.52083,0 2.38541,-1.19792 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21874,5.67707 4.43749,5.98958 h -2.26041 l -3.39583,-4.58333 -3.39583,4.58333 h -2.26041 l 4.53124,-6.10416 -4.14582,-5.56249 h 2.26041 l 3.09374,4.15624 3.09375,-4.15624 z"
|
||
transform="rotate(-45)" aria-label="50 px" />
|
||
<g aria-label="α=90°, r=50 px">
|
||
<path
|
||
d="m 281.87513,91.958416 -0.45833,-2.406247 q -0.46875,-2.468746 -2.32291,-2.468746 -1.39583,0 -2.03125,1.145832 -0.80208,1.437498 -0.80208,3.333328 0,2.291663 0.78125,3.385411 0.79166,1.114582 2.05208,1.114582 1.39583,0 2.14583,-2.218747 z m 1.07292,-3.187495 1.03125,-3.052079 h 1.70833 l -2.13542,6.322907 0.41667,2.281246 q 0.0937,0.510416 0.45833,0.937499 0.42708,0.499999 0.76042,0.499999 h 0.91666 v 1.624997 h -1.14583 q -0.97916,0 -1.85416,-0.874998 -0.42709,-0.4375 -0.60417,-1.354165 -0.47916,1.156248 -1.45833,2.062497 -0.45833,0.427083 -1.94791,0.427083 -2.44792,0 -3.63541,-1.583331 -1.21875,-1.635414 -1.21875,-4.499993 0,-3.062495 1.32291,-4.499993 1.46875,-1.604164 3.53125,-1.604164 3.23958,0 3.85416,3.312495 z m 6.43749,-1.072915 h 13.35414 v 1.749997 h -13.35414 z m 0,4.249993 h 13.35414 v 1.770831 h -13.35414 z m 17.9583,5.114575 v -1.916663 q 0.79167,0.374999 1.60417,0.572915 0.8125,0.197917 1.59374,0.197917 2.08334,0 3.17708,-1.395831 1.10417,-1.406248 1.26042,-4.26041 -0.60417,0.895832 -1.53125,1.374997 -0.92708,0.479166 -2.05208,0.479166 -2.33333,0 -3.69791,-1.406247 -1.35417,-1.416665 -1.35417,-3.864578 0,-2.395829 1.41667,-3.843744 1.41666,-1.447914 3.77083,-1.447914 2.69791,0 4.11457,2.072913 1.42708,2.062497 1.42708,5.999991 0,3.677078 -1.74999,5.874991 -1.73958,2.187496 -4.6875,2.187496 -0.79166,0 -1.60416,-0.156249 -0.8125,-0.15625 -1.6875,-0.46875 z m 4.1875,-6.593739 q 1.41666,0 2.23958,-0.968749 0.83333,-0.968748 0.83333,-2.656246 0,-1.67708 -0.83333,-2.645829 -0.82292,-0.979165 -2.23958,-0.979165 -1.41667,0 -2.25,0.979165 -0.82292,0.968749 -0.82292,2.645829 0,1.687498 0.82292,2.656246 0.83333,0.968749 2.25,0.968749 z m 13.82289,-7.249989 q -1.625,0 -2.44791,1.604164 -0.8125,1.593748 -0.8125,4.802076 0,3.197912 0.8125,4.802076 0.82291,1.593747 2.44791,1.593747 1.63542,0 2.44791,-1.593747 0.82292,-1.604164 0.82292,-4.802076 0,-3.208328 -0.82292,-4.802076 -0.81249,-1.604164 -2.44791,-1.604164 z m 0,-1.666664 q 2.61458,0 3.98958,2.072913 1.38541,2.062497 1.38541,5.999991 0,3.927077 -1.38541,5.999991 -1.375,2.062496 -3.98958,2.062496 -2.61458,0 -3.99999,-2.062496 -1.375,-2.072914 -1.375,-5.999991 0,-3.937494 1.375,-5.999991 1.38541,-2.072913 3.99999,-2.072913 z m 12.12498,1.343748 q -0.83333,0 -1.40625,0.583332 -0.57291,0.572916 -0.57291,1.406248 0,0.822916 0.57291,1.395831 0.57292,0.562499 1.40625,0.562499 0.83333,0 1.40625,-0.562499 0.57292,-0.572915 0.57292,-1.395831 0,-0.822915 -0.58334,-1.406248 -0.57291,-0.583332 -1.39583,-0.583332 z m 0,-1.343748 q 0.66667,0 1.28125,0.260416 0.61458,0.25 1.0625,0.729166 0.47916,0.468749 0.71875,1.062498 0.23958,0.593749 0.23958,1.281248 0,1.374998 -0.96875,2.33333 -0.95833,0.947915 -2.35416,0.947915 -1.40625,0 -2.34375,-0.937499 -0.9375,-0.937498 -0.9375,-2.343746 0,-1.395831 0.95834,-2.364579 0.95833,-0.968749 2.34374,-0.968749 z" />
|
||
<path
|
||
d="m 273.33869,114.17713 q -0.32292,-0.1875 -0.70833,-0.27083 -0.375,-0.0937 -0.83334,-0.0937 -1.62499,0 -2.49999,1.0625 -0.86458,1.05208 -0.86458,3.03124 v 6.14582 h -1.92708 v -11.66664 h 1.92708 v 1.81249 q 0.60416,-1.06249 1.57291,-1.57291 0.96875,-0.52083 2.35416,-0.52083 0.19792,0 0.4375,0.0312 0.23959,0.0208 0.53125,0.0729 z m 2.26041,0.1875 h 13.35415 v 1.75 H 275.5991 Z m 0,4.24999 h 13.35415 v 1.77083 H 275.5991 Z m 17.91664,-10.11456 h 8.2604 v 1.77083 h -6.33332 v 3.81249 q 0.45833,-0.15625 0.91666,-0.22917 0.45834,-0.0833 0.91667,-0.0833 2.60416,0 4.12499,1.42708 1.52083,1.42708 1.52083,3.86458 0,2.51041 -1.56249,3.90624 -1.5625,1.38542 -4.40625,1.38542 -0.97916,0 -1.99999,-0.16667 -1.01042,-0.16666 -2.09375,-0.5 v -2.11458 q 0.9375,0.51042 1.9375,0.76042 0.99999,0.25 2.11458,0.25 1.80208,0 2.85416,-0.94792 1.05208,-0.94791 1.05208,-2.57291 0,-1.625 -1.05208,-2.57291 -1.05208,-0.94792 -2.85416,-0.94792 -0.84375,0 -1.6875,0.1875 -0.83333,0.1875 -1.70833,0.58333 z m 18.05205,1.38541 q -1.62499,0 -2.44791,1.60416 -0.8125,1.59375 -0.8125,4.80208 0,3.19791 0.8125,4.80208 0.82292,1.59374 2.44791,1.59374 1.63542,0 2.44792,-1.59374 0.82291,-1.60417 0.82291,-4.80208 0,-3.20833 -0.82291,-4.80208 -0.8125,-1.60416 -2.44792,-1.60416 z m 0,-1.66666 q 2.61458,0 3.98958,2.07291 1.38541,2.0625 1.38541,5.99999 0,3.92708 -1.38541,5.99999 -1.375,2.0625 -3.98958,2.0625 -2.61458,0 -3.99999,-2.0625 -1.375,-2.07291 -1.375,-5.99999 0,-3.93749 1.375,-5.99999 1.38541,-2.07291 3.99999,-2.07291 z m 17.43748,14.08331 v 6.18749 h -1.92708 v -16.10414 h 1.92708 v 1.77083 q 0.60416,-1.04167 1.52083,-1.54167 0.92708,-0.51041 2.20833,-0.51041 2.125,0 3.44791,1.68749 1.33333,1.6875 1.33333,4.4375 0,2.74999 -1.33333,4.43749 -1.32291,1.6875 -3.44791,1.6875 -1.28125,0 -2.20833,-0.5 -0.91667,-0.51042 -1.52083,-1.55208 z m 6.52082,-4.07291 q 0,-2.11458 -0.875,-3.3125 -0.86458,-1.20833 -2.38541,-1.20833 -1.52083,0 -2.39583,1.20833 -0.86458,1.19792 -0.86458,3.3125 0,2.11458 0.86458,3.32291 0.875,1.19791 2.39583,1.19791 1.52083,0 2.38541,-1.19791 0.875,-1.20833 0.875,-3.32291 z m 14.86456,-5.84374 -4.21875,5.67707 4.4375,5.98957 h -2.26042 l -3.39582,-4.58332 -3.39583,4.58332 h -2.26042 l 4.53125,-6.10415 -4.14583,-5.56249 h 2.26041 l 3.09375,4.15624 3.09374,-4.15624 z" />
|
||
</g>
|
||
<path
|
||
d="m 557.29687,216.24219 -5.30273,5.30273 5.05078,5.05078 -24.74805,24.74805 -5.05273,-5.05078 -5.30273,5.30273 10.35546,10.35547 35.35547,-35.35547 z" />
|
||
</g>
|
||
<path style="fill:#808080;"
|
||
d="m 71.185431,207.42553 c -24.198406,24.1984 -24.198409,64.19342 1e-6,88.39183 24.198409,24.1984 64.188198,24.19318 88.386608,-0.005 L 274.47515,180.90903 c 2.66087,-2.66088 4.20734,-2.30988 6.60826,-1.31541 2.4009,0.99451 3.74779,1.84302 3.7478,5.60606 l -10e-6,389.80306 a 25.000064,25.000064 0 0 0 24.99756,24.99756 25.000064,25.000064 0 0 0 25.00277,-25.00277 V 185.19446 c -10e-6,-23.9138 -15.38944,-43.83349 -34.6124,-51.79591 -19.22297,-7.96242 -44.18796,-4.75275 -61.09758,12.15688 L 124.21844,260.45854 c -5.09092,5.09091 -12.58327,5.09091 -17.67419,0 -5.09091,-5.09092 -5.09613,-12.5885 -0.005,-17.67941 L 292.15457,57.163588 c 9.97246,-9.972464 25.38634,-9.972456 35.35881,1e-5 L 504.29182,233.94204 a 25.000064,25.000064 0 0 0 35.34837,0 25.000064,25.000064 0 0 0 0.005,-35.35361 L 362.86699,21.809987 c -29.07996,-29.07996 -76.98606,-29.0799534 -106.06602,2e-6 z" />
|
||
</svg>
|
||
<figcaption>Example icon depicting an arrow pointing up, which follows the design rules outlined above.
|
||
Two bends are given an angle-marker and values that describe one as a 90° angle with a 50 px bend
|
||
radius, and the other as a 135° angle with a a 75 px bend. At one end of the only line, the
|
||
line-width is marked as 50 px.</figcaption>
|
||
</figure>
|
||
</main>
|
||
</div>
|
||
<script src="../assets/script/styleguide.js" type="text/javascript"></script>
|
||
</body>
|
||
|
||
</html> |