Preliminary iconography
All checks were successful
/ build (push) Successful in 11s

This commit is contained in:
lilith 2025-03-01 16:23:08 +01:00
commit 226916834b
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A

View file

@ -50,6 +50,63 @@
</div> </div>
<h1>Iconography</h1> <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> </main>
</div> </div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script> <script src="../assets/script/styleguide.js" type="text/javascript"></script>