212 lines
17 KiB
HTML
212 lines
17 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="shortcut icon" href="../assets/image/favicon.png" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="../assets/style/styleguide.css"
|
|
/>
|
|
<title>Doodles</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="pen"></i>Colors</a>
|
|
</li>
|
|
<li>
|
|
<a href="../typography"><i data-icon="font"></i>Typography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../iconography"><i data-icon="info"></i>Iconography</a>
|
|
</li>
|
|
<li>
|
|
<a href="../logo"><i data-icon="hare_head"></i>Logo</a>
|
|
</li>
|
|
<li>
|
|
<a href="../glow"><i data-icon="lightbulb"></i>Glow</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href=""><i data-icon="looping"></i>Doodles</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demopage"><i data-icon="code"></i>Demopage</a>
|
|
</li>
|
|
<li>
|
|
<a href="../generator"
|
|
><i data-icon="settings"></i>Image Generator</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="../changelog"><i data-icon="history"></i>Changelog</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="lightbulb"></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="lightbulb"></i>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
<h1>Doodles</h1>
|
|
<p>
|
|
To add a bit of variety to the design or as part of a page's
|
|
background, we designed a few doodles which can be used to fill some
|
|
space. These consist of an icon (preferably of something that can
|
|
move) and a dashed line behind it, which shows the path travelled. The
|
|
line has rounded ends and a line-to-space ratio of 1:3 (the lines will
|
|
appear longer due to the line caps), where 1 is the line thickness.
|
|
Here are some examples:
|
|
</p>
|
|
<div style="color: var(--color-text-4)">
|
|
<svg
|
|
style="width: 66%"
|
|
viewBox="0 0 3000 1200"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs id="defs" />
|
|
<g id="layer">
|
|
<path
|
|
style="
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 50;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 50, 150;
|
|
stroke-dashoffset: 0;
|
|
stroke-opacity: 1;
|
|
paint-order: fill markers stroke;
|
|
"
|
|
d="m 25.000002,1175.0001 c 650.000048,0 1550.000098,-1150.000113 875.000068,-1150.000113 -725.00006,0 -103.84433,976.922213 250.00003,800.000063 200,-100.00001 323.8192,-463.50213 550,-400.00003 361.6858,101.54621 325.0001,675.00008 650.0001,325.00002"
|
|
/>
|
|
<path
|
|
style="fill: currentColor"
|
|
d="m 2787.4987,171.54852 a 62.1,62.1 0 0 0 -21.815,4.885 l -473.07,200.738 c -48.038,20.384 -52.852,90 -8.076,116.8 l 39.984,23.934 a 25,25 0 0 0 34.291,-8.611 25,25 0 0 0 -8.611,-34.291 l -39.985,-23.934 c -12.309,-7.367 -11.28,-22.267 1.926,-27.87 l 473.072,-200.738 c 5.133,-2.178 10.814,-0.833 14.424,3.416 3.61,4.249 4.022,10.072 1.043,14.785 l -201.363,318.675 c -16.664,26.371 -50.638,34.466 -77.404,18.445 l -4.643,-2.78 a 25,25 0 0 0 -34.291,8.612 25,25 0 0 0 8.611,34.291 l 4.645,2.78 c 49.586,29.68 114.48,14.215 145.35,-34.64 l 201.362,-318.672 c 14.549,-23.025 12.428,-53.113 -5.207,-73.87 -11.021,-12.972 -26.621,-20.552 -42.889,-21.816 a 63,63 0 0 0 -7.354,-0.138 m -138.563,142.725 a 25,25 0 0 0 -11.898,5.088 l -211.47,166.139 c -30.343,23.84 -48.087,60.34 -48.087,98.93 v 62.023 a 25,25 0 0 0 25,25 25,25 0 0 0 25.002,-25 v -62.023 a 75.75,75.75 0 0 1 28.975,-59.612 l 211.468,-166.138 a 25,25 0 0 0 4.215,-35.104 25,25 0 0 0 -23.205,-9.303"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
|
|
<svg
|
|
style="width: 100%"
|
|
viewBox="0 0 4500 1400"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs id="defs" />
|
|
<path
|
|
style="
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 50;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 50, 150;
|
|
stroke-dashoffset: 0;
|
|
stroke-opacity: 1;
|
|
paint-order: fill markers stroke;
|
|
"
|
|
d="m 4475.0003,24.999987 c -650.0001,0 -1097.3925,635.933123 -422.3924,635.933123 725,0 -156.9976,714.06699 -552.6076,714.06699 -240.6699,0 -1100.0001,-1075.00009 -1500.0001,-575.00005 -400.0001,500.00005 -575.0001,250.00005 -1050.00013,250.00005"
|
|
/>
|
|
<path
|
|
d="m 555.31062,50.000016 c 23.1013,1.46577 45.1439,16.03587 53.1205,39.943117 l 9.4986,28.495167 a 24.98238,24.98238 0 0 1 -15.8014,31.60271 24.98238,24.98238 0 0 1 -31.6024,-15.80135 l -9.4986,-28.49517 c -2.345,-6.801345 -8.824,-8.736208 -14.4235,-4.25086 l -48.4449,38.74703 c -20.1105,16.0945 -33.9068,38.73236 -38.958,63.97642 l -5.7752,28.87628 c -7.6808,38.4392 -35.4697,69.89238 -72.6655,82.2843 l -57.0081,18.99678 c -26.7362,8.91207 -50.9426,24.09778 -70.593,44.29068 l -29.9757,30.81116 -1.1733,0.87952 c -13.5148,10.84696 -22.1921,26.44308 -24.8014,43.53141 0.2927,19.81764 11.5507,37.74146 29.3601,46.69749 l 10.3194,5.18898 c 36.126,18.17595 52.5927,61.47574 37.6472,99.0472 l -13.7782,34.66034 c -10.7883,27.11738 -16.3291,56.02878 -16.3291,85.21008 v 2.052 c 0,29.16945 5.5699,58.0546 16.3878,85.12808 l 13.6025,33.9799 c 14.5115,36.29057 9.0586,77.62323 -14.4234,108.8917 l -16.6516,22.19204 -0.2924,0.58657 c -10.5244,12.37136 -12.1074,29.63271 -4.3386,43.78071 5.482,7.5047 15.2148,8.3256 21.7525,1.4655 l 4.8369,-5.0425 0.879,-0.5866 c 12.8407,-11.1695 24.1858,-23.92202 33.8192,-37.94967 l -1.7593,2.99023 c 13.368,-26.76555 32.347,-50.36197 55.618,-69.19166 a 24.98238,24.98238 0 0 1 35.1385,3.69384 24.98238,24.98238 0 0 1 -3.694,35.13816 c -17.736,14.33558 -32.1831,32.31508 -42.3818,52.7044 l -0.879,1.4655 -0.8791,1.4656 c -12.0195,17.4725 -26.1794,33.3707 -42.1567,47.3075 l 1.4657,-1.4655 -4.0748,4.2509 c -28.0557,29.2576 -77.3651,24.9186 -99.8654,-8.8242 l -0.294,-0.5866 -0.2926,-0.5866 c -18.85,-32.456 -15.1856,-73.53059 9.1468,-102.11379 l -0.879,1.17309 16.1824,-21.57671 c 13.0457,-17.38447 16.0359,-40.18067 7.9741,-60.34119 l -13.6029,-33.98006 c -13.1919,-32.97784 -19.9933,-68.17161 -19.9933,-103.69098 v -2.052 c 0,-35.50179 6.7426,-70.68688 19.8761,-103.67626 l 13.7785,-34.66033 c 5.541,-13.92512 -0.2013,-29.1988 -13.6905,-35.94146 l -10.3194,-5.18875 c -35.2346,-17.7362 -57.4298,-54.04412 -57.0986,-93.48008 l 0.02,-1.46576 0.18,-1.46576 c 3.9874,-30.39237 19.5834,-58.09604 43.4904,-77.29806 l -2.3452,2.05212 28.9059,-29.71181 c 25.2126,-25.91511 56.3053,-45.42198 90.6227,-56.85817 l 57.0019,-18.99678 c 20.2574,-6.74273 35.279,-23.746 39.465,-44.68645 l 5.7768,-28.875 c 7.3582,-36.76818 27.4692,-69.77511 56.7439,-93.1957 l 48.4597,-38.744094 c 11.8144,-9.43976 26.0618,-13.3388 39.9109,-12.48864 z m 88.5227,133.118294 c 9.5571,-0.29329 19.202,0.11664 28.7884,1.759 l 51.3324,8.56031 c 40.21,6.68406 61.8805,53.5868 40.8988,88.54031 l -23.5406,39.21314 c -20.14,33.53464 -54.3462,56.24284 -93.0727,61.77476 l -75.9756,10.84695 c -19.935,2.93161 -36.0088,17.35511 -40.887,36.85317 l -0.8791,3.72317 -0.2011,0.58628 c -7.2408,22.83722 -3.0489,47.64151 11.1109,66.92565 17.8535,20.81438 44.4374,43.04473 88.5197,76.05753 l -0.5867,-0.58644 c 28.1141,19.58315 55.0673,40.76986 80.7688,63.41941 l 0.2941,0.27861 0.2924,0.2933 c 69.7343,65.7645 117.1998,154.70939 129.9994,254.53051 7.4462,37.49221 3.811,76.34188 -10.4952,111.79663 l -0.2942,0.879 -0.2924,0.8791 c -15.9774,32.4969 -39.9082,59.1803 -58.7789,86.673 l -0.2924,0.5866 -0.2926,0.5866 c -17.2084,22.2509 -27,49.3037 -28.1138,77.3973 0,0.2199 0.02,0.5865 0.02,0.5865 l -0.034,-0.5865 c 0,0.068 -0.02,0.1354 -0.02,0.2199 v -0.5866 l -0.068,-0.879 c 3.8993,38.1901 -12.6349,75.7088 -43.4668,98.5987 l -0.879,0.5866 -72.5425,46.4749 C 593.64862,1339.276 557.02402,1350 519.61662,1350 h -2.9607 l -2.9316,-0.5866 c -32.4587,-7.798 -56.4099,-35.5486 -59.6407,-68.7138 -4.9544,-33.1801 8.971,-66.5211 36.267,-86.1246 l -3.0784,2.6382 4.2802,-4.28 c 16.8569,-16.8567 24.9773,-40.4797 22.0164,-64.1202 l -12.5766,-100.6799 c -4.9543,-39.73497 13.1041,-78.98338 46.5069,-101.07003 l 23.746,-15.68426 a 24.98238,24.98238 0 0 1 34.6195,7.06529 24.98238,24.98238 0 0 1 -7.0652,34.62227 l -23.7461,15.68411 c -17.6482,11.6678 -27.0879,32.20362 -24.4788,53.18802 l 12.5766,100.6714 c 4.8664,38.9082 -8.531,77.9366 -36.264,105.6608 l -5.7166,5.7167 -1.4656,1.1731 c -12.2834,8.8239 -18.469,23.6872 -16.0653,38.6032 l 0.1361,0.879 0.084,0.8792 c 0.879,11.4624 8.707,20.7263 19.4658,24.3028 26.619,-0.5866 52.5723,-8.3844 75.0227,-22.7493 l 70.6197,-45.2463 c 16.5928,-12.4593 25.4464,-32.5526 23.3356,-53.1911 l -0.084,-0.8791 -0.034,-0.8789 c -0.02,-0.879 -0.034,-1.4656 -0.068,-2.3453 l -0.02,-0.5866 0.034,-0.879 c 1.4662,-38.6445 14.9227,-75.8816 38.5632,-106.4817 20.6678,-29.9524 42.2972,-55.375 53.8738,-78.60803 10.3485,-26.23783 13.0163,-54.88829 7.4757,-82.56585 l -0.1799,-0.87896 -0.118,-0.87906 c -11.0229,-88.52262 -52.9039,-167.26833 -114.7314,-225.68056 -24.1565,-21.28342 -49.5149,-41.1626 -75.9255,-59.57894 l -0.2924,-0.24039 -0.2941,-0.25798 c -45.2728,-33.904 -74.8996,-58.01937 -97.2264,-84.26311 l -0.2942,-0.58628 -0.2924,-0.58626 c -24.1565,-32.22423 -31.3006,-74.19309 -19.1432,-112.58831 l -0.2926,1.46577 0.8791,-2.99022 c 9.7615,-39.09005 42.3989,-68.50283 82.2922,-74.19896 l 75.9784,-10.84691 c 23.8635,-3.40067 44.8887,-17.35511 57.2924,-38.02293 l 23.5393,-39.21026 c 3.7229,-6.18569 0.879,-12.37136 -6.2736,-13.544 l -51.3413,-8.5603 c -24.3908,-4.07491 -49.3095,2.34528 -68.6113,17.85348 l -85.9108,68.70215 a 24.98238,24.98238 0 0 1 -35.1175,-3.89903 24.98238,24.98238 0 0 1 3.8989,-35.12063 l 85.9114,-68.70215 c 22.7786,-18.20527 50.5878,-28.52452 79.2473,-29.83495 z m -280.5603,843.10879 a 24.98238,24.98238 0 0 1 30.295,18.176 l 12.87,51.4438 c 9.6449,38.5448 -1.7594,79.426 -29.797,107.5167 l -4.28,4.2801 c -14.3943,14.3943 -19.466,35.2436 -13.9547,54.6832 6.8601,10.2899 18.8797,15.7133 31.2277,13.3679 a 24.98238,24.98238 0 0 1 29.2281,19.8472 24.98238,24.98238 0 0 1 -19.8469,29.228 c -34.0564,6.5082 -68.6906,-9.6157 -85.6352,-39.8727 l -1.1733,-2.0521 -0.879,-2.3453 c -12.6644,-37.9732 -2.6384,-79.9801 25.5636,-108.2789 l 4.2803,-4.2801 c 15.7428,-15.7428 22.0456,-38.4743 16.6516,-60.0568 l -12.8699,-51.4438 a 24.98238,24.98238 0 0 1 18.1761,-30.2923 z m 488.7396,41.2535 a 24.98238,24.98238 0 0 1 14.4527,12.518 l 3.0784,6.1857 c 17.8826,35.7949 -9.3812,79.9361 -49.4095,79.9361 h -0.879 a 24.98238,24.98238 0 0 1 -24.9773,-24.9772 24.98238,24.98238 0 0 1 24.9773,-24.9772 h 0.879 c 4.9838,0 6.9478,-3.1956 4.7198,-7.6223 l -3.1074,-6.1564 a 24.98238,24.98238 0 0 1 11.1694,-33.5227 24.98238,24.98238 0 0 1 19.0848,-1.4656 z"
|
|
style="fill: currentColor"
|
|
/>
|
|
</svg>
|
|
|
|
<svg
|
|
style="width: 50%"
|
|
viewBox="0 0 800 4500"
|
|
xml:space="preserve"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs id="defs" />
|
|
<g id="layer">
|
|
<path
|
|
style="
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 50;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-dasharray: 50, 150;
|
|
stroke-dashoffset: 0;
|
|
stroke-opacity: 1;
|
|
paint-order: fill markers stroke;
|
|
"
|
|
d="M 700.00005,4400.0003 C -350.00002,3325.0004 900.00007,2600.0002 575,1900.0002 249.99993,1200.0002 225.00004,1425.0001 375.00003,925.00006"
|
|
/>
|
|
<path
|
|
d="m 564.77596,150.58167 c -16.08962,-3.9189 -33.41023,-2.77531 -49.36167,4.05482 l -22.97968,9.84143 a 189.67,189.67 0 0 0 -94.66759,88.90232 l -4.68819,9.29661 a 221.3,221.3 0 0 0 -23.25236,85.26529 l -6.81434,104.40293 a 25,25 0 0 0 23.31863,26.57414 25,25 0 0 0 26.57317,-23.31886 l 6.81337,-104.40317 a 171.3,171.3 0 0 1 17.99889,-65.99515 l 4.69447,-9.30126 a 139.63,139.63 0 0 1 69.70729,-65.46541 l 22.97969,-9.84144 c 11.67806,-5.00044 24.96365,-1.76451 33.03424,8.04604 l 28.5894,34.75484 a 83.1,83.1 0 0 1 18.91145,54.49322 l -0.7116,35.23957 a 173.1,173.1 0 0 1 -14.92108,66.87243 l -24.29891,54.59032 0.61606,-1.27852 a 111.98,111.98 0 0 0 -7.66741,83.51472 25,25 0 0 0 0.44572,1.34776 321.4,321.4 0 0 1 19.37694,107.98068 l 0.0167,3.07943 a 83.47,83.47 0 0 1 -19.64816,54.31715 l -7.93148,9.41136 c -3.59718,4.26796 -7.18042,3.3952 -8.41207,-2.0489 l -2.71527,-12.00455 -0.006,-0.0169 a 540,540 0 0 1 -11.52439,-74.46952 l -0.004,-0.0247 c -2.86871,-34.42258 -27.60449,-63.35508 -61.16728,-71.52986 l -19.22885,-4.68351 c -33.22676,-8.39656 -68.33959,5.51212 -86.81272,34.37945 l -0.11219,0.17749 a 547,547 0 0 1 -44.99501,61.64398 l -7.92879,9.41304 c -3.59719,4.26796 -7.18043,3.39521 -8.41208,-2.0489 l -2.71503,-12.00552 a 83.47,83.47 0 0 1 7.53043,-57.26863 l 29.35001,-55.83535 a 25,25 0 0 0 -10.50686,-33.76141 25,25 0 0 0 -33.76075,10.4957 l -29.34272,55.83918 a 133.52,133.52 0 0 0 -12.03814,91.56713 l 2.71619,11.99654 c 9.6453,42.63147 67.24245,56.66022 95.41163,23.2391 l 7.92764,-9.40406 a 597,597 0 0 0 49.10413,-67.28273 l -0.11311,0.1855 c 6.97581,-10.90082 19.90078,-16.01748 32.4477,-12.8462 l 19.64468,4.7848 c 12.84644,3.12896 22.07873,13.92956 23.17343,27.10691 l 0.006,0.0169 a 590,590 0 0 0 12.58849,81.38269 l 2.71294,11.98031 c 9.64554,42.63051 67.24268,56.65926 95.41261,23.23934 l 7.9269,-9.40526 a 133.52,133.52 0 0 0 31.41929,-86.84549 l -0.0172,-3.08161 c -0.25602,-42.13955 -7.71037,-83.91626 -21.98437,-123.55922 a 61.92,61.92 0 0 1 4.27762,-46.08576 25,25 0 0 0 0.61532,-1.27973 l 24.29868,-54.58935 a 223.1,223.1 0 0 0 19.23217,-86.1992 l 0.70874,-35.23203 A 133.16,133.16 0 0 0 635.3325,211.62774 l -28.5913,-34.74706 c -11.02296,-13.4002 -25.87867,-22.38087 -41.96829,-26.29976 m -29.82935,122.41817 a 25,25 0 0 0 -30.2061,18.37368 25,25 0 0 0 18.37368,30.20609 c 13.70338,3.33769 21.71113,16.50369 18.37368,30.20609 -3.33745,13.70241 -16.50271,21.71137 -30.2061,18.37368 -13.70338,-3.33769 -21.71112,-16.50368 -18.37367,-30.20609 a 25,25 0 0 0 -18.37368,-30.20609 25,25 0 0 0 -30.20609,18.37367 c -9.73216,39.95686 15.16417,80.88612 55.12103,90.61828 39.95686,9.73216 80.88611,-15.16417 90.61828,-55.12103 9.73216,-39.95686 -15.1632,-80.88588 -55.12103,-90.61828 M 449.60415,623.3729 a 25,25 0 0 0 -30.2061,18.37368 l -15.13768,62.15004 a 25,25 0 0 0 18.37368,30.20609 25,25 0 0 0 30.20609,-18.37367 l 15.13768,-62.15005 A 25,25 0 0 0 449.60415,623.3729"
|
|
style="fill: currentColor"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|