HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<header>
<a href="#" class="home">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="logo">
<path d="m75.597 113.38-4.682 4.699s-9.184 2.636-9.609 2.636c-.425 0-7.228-1.446-7.228-1.446l-3.061-1.7-.085-2.807 3.951-1.547" style="
fill: #e5b6ad;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m79.55 183.803-14.13-13.388-8.617-10.793-10.997-24.796-4.096-13.26-6.364-5.59-1.952-4.054-3.023-9.16-.177-5.453.99-.915 2.402.381 3.315 2.721-3.097-5.086c-.485-.689-1.47-3.289-2.016-4.394l-4.482-13.392-2.418-14.855c-.157-3.825-.59-5.684-.141-8.317.447-2.628 2.852-6.732 4.218-9.601 4.285-9.002 16.45-18.528 23.793-22.901 16.587-8.863 26.567-8.413 44.277-8.564 10.609 3.409 21.073 6.23 31.655 9.72 6.685 5.515 11.6 12.104 13.296 15.948l2.534 9.687s.292 5.245.336 8.062c.048 3.034.96 6.196 1.33 9.311.355 2.991.961 6.133 1.226 9.066.186 2.066.606 3.947.884 5.953l13.053 7.7 9.605 5.64 4.04 2.974c.736 2.17.748 2.224-1.22 3.125l-41.927-25.156L37.93 92.712l27.748 63.424L79.9 178.37z" style="
fill: #07ece4;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m137.94 81.549.625 43.353c2.145 20.09-5.403 34.567-21 45.54-4.964 9.919-11.403 16.731-21.6 16.009-17.14-.326-26.008-17.87-37.943-29.806l-12.09-27.201-9.685-42.387" style="
fill: #fae6e3;
fill-opacity: 1;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
" />
<path d="M57.258 102.67c5.94 3.624 10.66 6.137 20.325 6.522l-3.454-6.918c-6.084.427-32.546-7.327-16.87.396zM59.083 118.62c7.935 1.344 8.498-.152 16.168-6.036l-3.836-1.685c-6.085.427-28.008-.002-12.332 7.72z" style="
fill: #f1ccd3;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m70.349 107.146-4.412-2.668 5.42 1.452c4.604.676 6.727 2.645 7.495 4.83.893 2.538.775 7.886-.482 12.445-.765-2.121.052-6.49-2.547-10.75l-7.884-3.135-11.055 1.106-2 2.789c-5.087.97-4.826-2.032-2.153-3.959 2.086-1.504 7.197-2.843 11.84-2.933 2.085-.04 4.53.512 5.778.823z" style="
fill: #bd6b6a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M54.261 112.216c1.191-1.234 2.005-2.1 4.874-3.21 6.266-1.853 11.648.648 16.462 3.795l-6.377 1.465c-3.941.226-8.345.212-14.959-2.05z" style="
fill: #fff;
stroke: none;
stroke-width: 0.56507099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<ellipse cx="63.849" cy="111.403" rx="3.42" ry="3.373" style="
fill: #3f242a;
fill-opacity: 1;
stroke: none;
stroke-width: 0.642147;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="m37.55 98.881 9.607-4.079 14.138-1.972 53.593-4.932 26.632-4.932 5.261-2.302-3.526-25.104c-1-7.07 3.495-16.124-15.34-31.803L94.845 13.15l-23.357 1.756c-24.484 8.719-36.425 17.73-45.55 39.848l2.807 21.636 4.932 15.124z" style="
fill: #fff;
stroke: #000;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m47.157 94.802-9.207-32.55 9.535-6.247 20.386-4.275 14.466 2.96 9.207 11.179 5.59 12.165 1.643 11.179" style="
fill: none;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m75.253 159.802 7.052 11.082 9.671 8.663s-3.224-5.238-2.015-5.44c1.21-.201 8.463-.604 9.268-.604.806 0 15.716-9.47 15.716-9.47-6.471-2.146-6.868-5.364-4.229-9.117z" style="
fill: #e8c2c7;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.829412;
paint-order: stroke fill markers;
" />
<path d="M68.99 147c.266-1.064.067-4.989 1.075-4.977 5.855.07 11.592 4.415 11.086 4.393l16.185 5.687c-.25-.114 11.153 6.71 10.063 8.517-.156.26-2.956 9.73-4.296 9.172-6.657-2.768-17.625-20.85-19.54-21.578-4.023-1.53-7.086-3.014-7.382-3.17-.62.202-2.853-.77-3.434-.594-.173.05-.337.069-.545.176-1.225.636-2.882.743-3.213 2.375z" style="
fill: #f4aec1;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M73.296 127.846c-2.467 6.962-3.74 5.804-.165 10.85 3.784-1.126 5.452.73 8.549 2.795l3.288 1.15c2.198-2.27 4.507-3.31 7.398-4.273l4.603.822c5.003-3.108-.95-8.945-3.288-12.33" style="
fill: none;
stroke: #e89a91;
stroke-width: 0.90118903;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
" />
<path d="m74.38 143.894 8.615 4.009c11.018 2.753 15.147 7.05 22.522 11.014 1.59 4.502.002 8.304-3.221 9.975-1.246.646-3.11 1.825-5.233 2.378-7.798-.386-15.924-4.865-18.827-9.712-1.357-2.267-2.073-4.042-.878-6.56-.32-1.505-2.075-.353-3.644-1.24-1.188-.673-2.184-2.397-3.377-3.06-3.359-4.303.168-5.49 4.043-6.804z" style="
fill: #c84050;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m76.584 148.231 4.204 6.81c2.235-.64 2.546.744 3.851.917l2.63 3.124 2.138 2.465 5.918 2.302 2.959-3.123v-2.795l-2.137-3.288-3.781-2.795-9.37-3.945-6.248-2.302-.822 1.973z" style="
fill: #aa3843;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m45.61 107.687 5.812-4.418c8.603 1.73 9.695 3.305 17.204.233l-3.487-2.325c-11.593-1.165-18.556-6.141-19.53 6.51z" style="
fill: #000;
fill-opacity: 0.864706;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 0.582353;
" />
<path d="M43.244 121.325c-3.948-1.828-6.066-4.867-8.664-8.192l-3.452-10.11.082-4.933c1.454-1.87 5.763 1.39 6.74 3.617l1.316 3.617 1.726 5.507-.497 1.04z" style="
fill: #e99a93;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<ellipse cx="63.798" cy="109.902" rx="1.712" ry="1.842" style="
fill: #2b2422;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.54830098;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<ellipse cx="63.852" cy="109.613" rx=".811" ry=".601" style="
fill: #fff;
fill-opacity: 1;
stroke: none;
stroke-width: 0.47474799;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="M38.666 65.688c2.41 13.015 6.75 20.031 8.49 29.114l7.931-2.368s-2.24 2.986 1.99 2.24c4.23-.747 6.47 1.741 9.455.746 2.986-.995 4.976-4.23 4.976-4.23l15.923-2.737s1.592 4.217 6.47 2.488c4.876-1.728.248-21.148.248-21.148L82.337 54.69s-19.724-2.484-22.274-2.064c-2.55.42-12.578 3.379-12.578 3.379l-9.535 6.247z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 2.40317011;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M57.514 53.046s-.494-5.425-.494-6.247c0-.822 1.151-3.782 1.151-3.782l1.315-12.494 9.207-8.548s8.48-7.126 10.453-7.784c11.76.748 22.75 7.85 32.947 13.044 11.368 14.219 10.67 18.956 13.48 36.496l1.316 22.194-28.112 3.288s-4.612-19.319-6.42-21.456c-1.809-2.137-10.02-13.067-10.02-13.067l-11.796-1.387z" style="
fill: #0f090b;
fill-opacity: 1;
stroke: #000;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m98.764 89.286-3.487-12.722c-10.998 1.906-32.901 5.534-50.78 8.228l3.054 10.046L88.08 90.42z" style="
fill: #333;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M93.579 186.568c-4.409-2.803-8.817-5.968-13.226-9.306l-7.3-9.67-5.795-9.038c-6.198-16.637-9.694-28.424-18.119-32.942l-3.834-12.378 1.325-17.477c-1.783.38-3.989 8.818-6.135 16.114l5.58 19.995 12.09 27.201 17.257 19.725 5.309 4.827c3.89 1.577 8.42 2.983 12.848 2.949z" style="
mix-blend-mode: normal;
fill: #efc8c3;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M73.296 127.846c1.357.26 1.964.896 2.89 1.372-1.887 3.426-.296 5.433 1.264 9.034l6.564 5.19 3.957-2.934c-.147 2.433-10.84-.158-11.4-4.942-.19-1.624.04-6.603.04-6.603-2.436-3.389-2.7-4.338-3.315-1.117z" style="
fill: #bf7670;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M74.73 112.363c4.098 6.26 2.375 12.019 1.906 17.222l2.581-9.204c.412-2.847-2.922-9.067-4.486-8.018z" style="
fill: #e8a89f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M71.68 128.538c-5.742 5.5-5.715 7.529-3.575 14.693.883-1.273 2.936-3.892 4.675-4.338 0 0-2.087-.088-3.157-.818-.77-.525-.738-3.851-.809-4.242-.17-.936 4.482-5.987 4.482-5.987z" style="
fill: #e89a91;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M32.015 104.05c1.71-4.67 2.668-1.649 5.244 1.03l2.132.842-3.43-3.607c-.587-1.24-1.054-2.521-3.2-3.242-1.419 1.84-1.274 2.867-.746 4.976z" style="
fill: #822e2a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 2.40317011;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="m40.495 111.871 2.152 1.152s-.125-5.536-.062-6.47c.037-.554 2.07 1.896.786-3.759-.232-1.021.53-1.92.707-2.274.435-.87 2.363-3.98 2.799-4.354.435-.373 5.349-1.492 5.784-1.555.436-.062 1.68-.497 1.68-.497l-7.184.688-9.607 4.08-.688.394s3.608 9.766 3.732 10.201c.125.436.398 1.354.398 1.354z" style="
fill: #1d120c;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 2.40317011;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M54.477 112.563c.787-.943 2.157-3.238 3.158-3.565 4.96-1.622 6.858-1.5 9.98-.022 1.232.528 4.319 1.67 4.319 1.67" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #120301;
stroke-width: 1.20158005;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M53.994 113.063c1.964-2.271 1.432-2.13 2.498-3.085" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #120301;
stroke-width: 1.20158005;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M60.916 114.4c2.69.425 5.196.293 7.728.242 2.276-.5 4.697-.782 6.668-1.738" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #ffb4d3;
stroke-width: 0.420555;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M74.12 114.205s-5.97 4.105-6.468 4.105c-5.476.926-7.663.408-12.44-1.742" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #ffb4d3;
stroke-width: 1.20158005;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.829412;
paint-order: stroke fill markers;
" />
<path d="M73.736 153.592c2.173.562 5.156.642 4.916 2.185l2.187-.448c-1.235-1.102-1.143-3.496-1.352-4.786l-2.396-.465c-.706-1.04-1.215-1.856-1.39-2.636-.145-.642-.094-1.229.524-2.157l-5.491.567c-3.422.967 1.338 6.839 3.002 7.74z" style="
fill: #f9798f;
fill-opacity: 1;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M76.155 145.493c-1.935-.085-4.265.165-6.325.456l2.289-1.292c2.782-.8 3.258-.722 4.592.263l3.45 1.79 3.08 2.813c1.097.059 2.981.091 4.484.347l3.822 1.74 3.295 1.365 2.171 1.366 4.327 2.64-2.954 1.042-.043 3.117-2.937 2.686-1.574-2.12c-.163-1.68-.46-4.469-6.456-7.025l2.08-1.704.681 1.207 2.162-.37-2.814-2.03s-10.551-1.09-9.54-1.075c6.701.095-2.516.235-2.516.235l.006-.335c-.223-.348 1.1.88.249.209-1.834-1.804-3.032-3.17-1.529-5.325z" style="
fill: #6f2c24;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M72.23 146.23c.545 1.557 1.823 2.924 2.44 4.464 0 0 2.993-.02 3.37-1.337.376-1.318-1.677-3.84-1.677-3.84-1.042-.617-2.972.713-4.132.713z" style="
fill: #e46c78;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M69.846 146.136c.474 1.318-.205 3.539.789 4.283.987.739 2.111 2.385 3.153 2.843 1.64.721 3.075.075 3.454.33l1.883 1.863-1.046-1.311c-1.187.584-1.212.454-4.028 1.154-3.094-2.34-6.343-6.819-4.205-9.162z" style="
fill: #9a3b41;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.240316;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M69.303 147.978c-2.316-11.315 7.98-7.894 15.767-2.82l-.741-2.63-4.411-2.633c-4.001-2.572-8.616-2.304-11.173.77-1.034 2.282-.107 5.032.558 7.313z" style="
fill: #db8680;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M71.864 136.992c1.322 2.106 2.412 1.754 4.412 1.495l3.276 2.548c2.496 1.68 4.151 1.385 6.828.521" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #5d221c;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M69.21 147.352c2.422-1.604 4.209-1.301 6.306-1.93l-4.142.094c-.723.669-2.658 1.653-2.165 1.836z" style="
fill: #e46c78;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M77.305 150.411c-1.395-1.912-2.036-2.62-1.224-4.707l.797.095.941 1.628.527 2.104z" style="
fill: #8f2328;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m75.626 153.006 1.864-1.997 2.249-.117-.314 2.209z" style="
fill: #d7677f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m70.235 156.734 1.464-.999c-.687-1.84-3.35-3.401-1.597-4.925 0 0-.267-.6-.6-.6-3.384.542-.262 4.76.733 6.524z" style="
opacity: 0.43142102;
fill: #e89fe3;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m73.238 111.245-.856 2.267 3.526-.907z" style="
fill: #c6878b;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.420555;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="m47.612 106.02.997 3.704.57 4.274 1.425 1.282 3.846-1.995-1.71-.57-2.564.855.428-3.846-.855-2.137z" style="
fill: #e8c2c7;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.420555;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.582353;
paint-order: stroke fill markers;
" />
<path d="m32.938 102.03-.285 3.705 1.282 4.274 2.137 4.274 2.137 2.137 4.701 4.416-.997-4.131-1.282-5.984-1.71-5.271-.997-.428.997 5.557-1.567 1.852-1.71-.713-1.994-5.84z" style="
fill: #d7817f;
fill-opacity: 0.702941;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.829412;
paint-order: stroke fill markers;
" />
<path d="m35.562 102.985.302 3.929-.806 4.03 1.914-3.93-.403-3.526z" style="
fill: #d7817f;
fill-opacity: 0.702941;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.829412;
paint-order: stroke fill markers;
" />
<path d="M66.187 160.004c2.026 1.422 6.275 12.94 11.887 17.327l3.627.806c-4.608-5.924-9.76-12.03-11.283-16.925-3.729-3.648-2.903-.92-4.231-1.208z" style="
fill: #dba7a0;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M94.302 75.207c-1.179 0-12.38 7.37-12.38 7.37l-10.317 7.958-4.421 3.242-6.485 7.074 3.296-6.538s2.305-1.42 7.02-5.547c4.717-4.126 16.213-10.022 16.802-11.2.59-1.18 6.485-2.359 6.485-2.359z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M60.11 98.368c1.043-2.918 2.193-4.492 3.652-5.742s9.588-4.794 12.714-7.295c3.126-2.501 13.548-8.546 13.548-8.546l-3.96-4.794 3.335-3.543-1.668 5.628s-4.794 5.419-5.836 5.836c-1.042.417-11.047 6.253-11.047 6.253l-8.128 3.96-3.544 3.751s-.78.841-.78 1.675c0 .834 1.032 2.602 1.032 2.602M62.72 88.666l-6.253 5.21s.625-3.543 2.71-5.836c2.084-2.292 9.17-9.796 9.17-9.796s5.628-3.96 7.087-7.503c1.459-3.543 2.71-16.05 2.71-16.05h3.334s-3.126 17.926-3.751 19.176c-.626 1.25-7.712 8.963-8.546 9.796-.834.834-6.461 5.003-6.461 5.003z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M52.298 92.417c4.586-3.126 18.134-15.423 18.134-15.423s-13.965 6.67-14.382 7.712c-.417 1.042-3.752 7.711-3.752 7.711z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M49.797 92.417c3.127-2.71 9.171-12.088 9.171-12.088z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M74.746 77.924c-1.042 2.501-23.281 17.828-23.281 17.828l-4.352-.56-3.497-12.047z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M74.11 91.714c5.632-4.071 7.348-2.659 21.264-14.801l3.497 12.443z" style="
fill: #b4b0de;
fill-opacity: 0.232353;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M56.259 94.085c-.626 1.25-1.668-.626 4.793-2.084 6.462-1.46 25.22-14.382 25.22-14.382l-13.34 1.25z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.84112602;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m323.627 282.357-.23-.193a8.7 8.7 0 0 1-2.473 2.048c-.88.496-1.849.868-2.935 1.193-1.015.303-2.187.577-3.102.813-1.395.36-2.19.628-2.932.933.71-.292 1.586-.54 2.959-.817.91-.184 2.122-.395 3.153-.64 1.112-.263 2.136-.586 3.083-1.055 1.274-.633 2.13-1.399 2.707-2.09l-.23-.192zM330.627 280.73l-.27-.132a7.71 7.71 0 0 1-1.274 1.852c-.494.542-1.067 1.046-1.724 1.56-1.485 1.164-2.982 2.213-3.61 2.765 1.043-.916 1.708-1.144 3.786-2.521.7-.464 1.335-.937 1.892-1.466.75-.712 1.2-1.377 1.47-1.925l-.27-.133zM322.585 287.756l-.23-.193a5.168 5.168 0 0 1-.91.869c-.322.24-.676.45-1.084.659-.922.472-1.897.913-2.362 1.166.701-.382 1.231-.462 2.48-.89.44-.15.847-.316 1.228-.53a3.983 3.983 0 0 0 1.108-.888l-.23-.193zM324.252 284.025l-.21-.216c-1.455 1.413-3.182 2.694-6.378 4.289-2.78 1.387-5.614 2.685-6.96 3.43 2.215-1.227 3.318-1.498 7.088-3.158 3.23-1.422 5.194-2.699 6.67-4.13l-.21-.215z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m315.081 289.235-.21-.214c-.978.956-2.08 1.86-4.209 3.145-1.832 1.106-3.675 2.151-4.543 2.697 1.333-.837 2.274-1.198 4.69-2.434 2.154-1.104 3.51-2.027 4.482-2.98l-.21-.214zM318 289.86l-.183-.239c-1.585 1.205-6.106 5.168-7.53 6.284 1.424-1.116 6.314-4.605 7.894-5.805l-.182-.24zM318.416 291.111l-.297-.043c-.028.19-.096.486-.383.948a8.273 8.273 0 0 1-.849 1.096c-.328.37-.708.761-.996 1.063-.46.483-.611.66-.81.896.16-.189.426-.427.891-.81.322-.264.747-.604 1.127-.935a8.8 8.8 0 0 0 1.029-1.03c.376-.46.542-.838.585-1.142l-.297-.043z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="M38.209 37.835h16.132v14.581H38.209z" style="
fill: #f0f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.757761;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="matrix(.99817 -.06051 .12198 .99253 0 0)" />
<path d="M60.646 31.402h15.981V45.94H60.646z" style="
fill: #f0f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.75309902;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="matrix(.99876 .0498 -.08827 .9961 0 0)" />
<switch style="fill: #000" transform="rotate(-.46 10643.702 -16948.83) scale(.09484)">
<g style="fill: #000">
<path d="m53.6 95.5 26-42.5c1.7-2.9-.3-6.5-3.6-6.5H61.7V5.9c0-1.9-1.5-3.4-3.4-3.4H41.7c-1.9 0-3.4 1.5-3.4 3.4v40.6H24c-3.3 0-5.4 3.7-3.6 6.5l26 42.5c1.6 2.7 5.6 2.7 7.2 0z" style="fill: #000" transform="rotate(3.793 50.077 50.323)" />
</g>
</switch>
<g style="fill: #000; fill-opacity: 1">
<path d="M31.545 44.791h4.808v16.346h-4.808zM45.969 44.791h4.808v16.346h-4.808z" style="
fill: #000;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 1;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="matrix(.49429 -.0341 .0341 .49429 29.071 17.002)" />
<path d="m36.3 44.723 4.86 6.078 4.809-6.01.595 6.68-5.403 6.301-4.86-6.078z" style="
fill: #000;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 1;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="matrix(.49429 -.0341 .0341 .49429 29.071 17.002)" />
</g>
<path d="m326.321 283.303-.45-.029c-.03.47-.1 1.068-.39 1.829-.218.57-.519 1.128-.896 1.725-.853 1.349-1.782 2.633-2.145 3.267.57-.998 1.168-1.42 2.508-3 .465-.548.872-1.097 1.19-1.69.428-.799.597-1.51.633-2.073l-.45-.03zM319.422 286.86l-.18-.412c-.92.402-2.142 1.152-3.679 2.25-1.596 1.14-2.585 1.925-3.472 2.475a99.3 99.3 0 0 1 3.71-2.092c1.88-1.003 2.698-1.325 3.801-1.808l-.18-.412zM320.392 287.184l-.438.105c.07.29.129.606.052.946-.06.267-.196.524-.421.81-.213.27-.493.547-.717.786-.346.369-.486.57-.632.803.13-.209.36-.414.746-.667.276-.18.604-.366.915-.597.314-.233.597-.507.783-.872.254-.498.246-1.02.15-1.42l-.438.106zM310.474 288.693l-.408-.192c-.248.527-.526 1.038-1.376 1.87-.296.291-.63.59-.89.826-.357.324-.619.583-.776.73.17-.16.446-.338.88-.586.302-.173.699-.39 1.063-.614.979-.602 1.615-1.206 1.914-1.842l-.407-.192zM309.18 293.976l-.394-.219a1.347 1.347 0 0 0-.148.672c.005.195.044.366.085.53.042.165.079.304.088.455a.842.842 0 0 1-.116.502c.089-.136.183-.248.29-.464.077-.157.128-.301.188-.47.061-.171.108-.292.176-.42.082-.156.172-.272.225-.368l-.394-.218zM309.072 296.24l-.45-.031c-.01.167-.01.329-.046.466a.664.664 0 0 1-.206.33c-.118.111-.274.212-.412.309-.226.158-.276.217-.395.327.092-.085.241-.135.46-.162.14-.017.363-.03.544-.069a1.16 1.16 0 0 0 .598-.315c.242-.245.34-.574.357-.824l-.45-.031z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m308.749 293.76-.447.056c.035.28.237.54.43.774.076.092.14.172.178.259.052.118.046.234 0 .313.044-.076.12-.16.178-.31.044-.114.066-.238.079-.382.019-.217.032-.744.029-.766l-.447.056zM307.886 288.801l-.339-.297c-.32.366-1.02 1.276-1.767 2.186-.704.86-1.473 1.793-1.667 1.992.278-.286 1.038-.886 1.987-1.674.963-.8 1.77-1.505 2.125-1.91l-.339-.297zM302.712 290.634l-.374-.252c-.401.595-.654 1.015-1.553 2.03-.479.54-1.68 1.829-1.739 1.887.415-.414 1.054-.822 2.043-1.554.964-.714 1.635-1.324 1.996-1.86l-.373-.251zM299.37 292.898l-.436-.114c-.03.11-.048.266-.143.493a3.15 3.15 0 0 1-.31.55c-.16.238-.842 1.126-.836 1.12.227-.271.594-.438 1.15-.795a3.44 3.44 0 0 0 .585-.456c.234-.235.372-.48.425-.684l-.435-.114zM298.291 290.957l-.445.067c.023.157.064.364.023.646a2.64 2.64 0 0 1-.229.716c-.114.25-.266.522-.388.75-.228.425-.23.458-.362.732.083-.173.247-.372.505-.626.186-.183.407-.381.617-.601.212-.223.404-.462.541-.736.187-.376.226-.736.184-1.014l-.446.066zM324.273 284.273l-.443-.08c-.137.753-.28 1.42-.843 2.588-.473.98-.968 1.902-1.193 2.343.32-.627.77-1.053 1.576-2.106.76-.99 1.2-1.86 1.346-2.664l-.443-.081zM297.213 285.028l-.417-.17c-.471 1.153-.862 2.763-1.173 4.983-.283 2.019-.481 4.023-.674 4.997.106-.535.723-3.374 1.116-4.91.59-2.307 1.06-3.496 1.565-4.73l-.417-.17z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m296.89 284.057-.407-.194c-.46.962-1.444 3.985-1.857 4.83.413-.845 2.207-3.473 2.67-4.441l-.406-.195zM294.734 282.764l-.45.026c.033.558.076 1.005-.101 2.052-.067.394-.436 2.196-.42 2.126.125-.538.426-1.053.85-1.994.407-.903.606-1.634.57-2.236l-.45.026zM293.764 278.56l-.445-.073c-.133.821.1 3.177.013 3.953.087-.776.75-3.022.876-3.809l-.444-.072z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m292.362 276.188-.444.075c0 .007.041.012.085.063.034.041.063.1.085.178.02.075.034.16.044.232a.753.753 0 0 1 .014.206c.012-.04.067-.082.148-.132.058-.036.137-.08.21-.133a.824.824 0 0 0 .209-.212.524.524 0 0 0 .093-.353l-.444.076z" style="
fill: #3d2929;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="M88.262 187.055c9.491 1.464 18.595.048 23.553-4.2.6-.516 3.692-4.726 4.525-6.497 1.435-3.051 2.361-6.595 5.45-8.32 7.776-4.346 15.044-13.12 15.044-13.12 2.96-8.753 2.858-17 5.093-22.438.364-.886 1.383-2.829 1.894-3.556 3.364-4.782 6.424-4.498 5.21-11.283 3.978-6.083 6.7-9.565 7.417-16.496 5.61-.13 17.757 2.128 18.536-3.282-6.972.47-10.78.013-20.67-.953-1.603 6.76-6.026 13.99-8.11 18.632-1.338 2.984.218 6.369-.16 9.991-1.662.915-5.35 1.097-6.452 2.449-3.708 4.547-2.6 12.197-4.283 21.218l-1.372 6.48-16.923 15.018c-7.802 15.645-19.207 16.026-36.755 12.368l-3.006-2.843c1.761 5.126 5.951 5.923 11.009 6.832z" style="
mix-blend-mode: normal;
fill: #07ece4;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M101.95 171.057c-3.918 3.817-11.72.428-16.025-1.739-6.629-3.335-8.954-5.776-9.01-9.023l1.227.642.234.043-.519-.432.334-5.784 2.574 7.464 6.752 4.661 16.715-.377c.202 1.245-1.064 3.655-2.282 4.545z" style="
fill: #862c30;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.240316;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M92.926 112.152c7.436 5.23 9.439 3.77 18.39 2.917 4.524-4.963-1.354-1.446-9.742-3.884z" style="
fill: #f1ccd3;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M117.766 169.473c4.13-4.38-5.356-17.48-3.173-20.622 7.65-11.01 5.105-16.667-1.19-22.383 2.05 1.1 15.544 9.303 15.867-21.503-.468-10.327-5.296-17.743-22.392-18.887 17.334-5.475 34.263-.744 28.82 14.287-.142 1.09 1.223 2.4 1.57 3.368.342.955.782 6.99.896 7.926 1.972 16.274 2.243 24.04-1.318 35.58-3.778 12.753-9.885 15.006-18.079 21.906z" style="
fill: #f0cdc8;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.829412;
paint-order: stroke fill markers;
" />
<path d="M126.873 161.793s-2.505-1.4.442-6.116c2.948-4.716 9.138-15.328 9.138-15.328l-3.941-18.602 4.152-21.302 2.886 11.581-.74 3.56c3.258 9.89 1.298 6.71.163 18.762.18 6.1-2.954 17.515-7.384 23.687l-2.505 3.095z" style="
fill: #deada7;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.240316;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m94.174 111.078-3.653 1.675s.6-3.126.721-3.607c.12-.481 3.728-3.007 3.728-3.007l5.772-2.044s4.21-.962 4.69-.962c.481 0 5.171.48 5.652.48.481 0 3.367.722 3.367.722l1.095 3.455z" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M94.174 111.078c4.78-8.063 13.561-10.288 19.51-3.993-1.454 1.042-1.153 1.786-2.455 2.664-4.747 3.203-10.853 2.875-17.055 1.329z" style="
fill: #fff;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<ellipse cx="105.805" cy="107.294" rx="3.955" ry="4.088" style="
fill: #3f242a;
fill-opacity: 1;
stroke: none;
stroke-width: 0.67087501;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="M126.889 85.925c.481-.36 6.075-1.04 9.923-1.942 3.849-.902 7.374-1.29 7.374-1.29l4.185 3.953-.983 3.137-3.895 7.157-5.592 7.516-5.283-7.433-.969 2.308-.88-4.035-3.27-.28-1.503-4.75z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m174.063 99.2-5.13.764c-3.267-.099-5.554.202-11.39-.283-3.857-.321-9.077-9.205-15.595-16.616l1.193.21 4.697-1.337L174.063 99.2" style="
fill: #120b09;
fill-opacity: 1;
stroke: #000;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m86.858 156.698 6.74.082 1.973 1.48.411 2.055 1.398.328.904-2.712-5.096-5.425-6.658 1.315-6.576-.493 1.315.822 4.11 1.397z" style="
fill: #3c1a1c;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M140.001 127.216c7.678.679 7.639-6.617 7.091-11.044 5.495-5.34 5.87-8.976 7.789-15.46-.123-6.834.176-12.74-5.87-14.068-1.882-.413-4.263 1.385-7.033 5.93-.212 2.808-1.714 4.617-3.255 6.859l-1.512 4.069z" style="
fill: #fae6e3;
fill-opacity: 1;
stroke: #f3a3c2;
stroke-width: 0.240316;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
" />
<path d="m141.89 83.132 21.71 9.326 10.463 6.742c.648-.722 2.322-.847-1.512-4.184L147.04 80.885z" style="
fill: #57223b;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<ellipse cx="105.515" cy="106.944" rx="1.83" ry="1.898" style="
fill: #25080f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.47875899;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.614706;
paint-order: stroke fill markers;
" />
<path d="m87.071 138.487 7.723-4.69-6.192-14.443 4.728-21.05s7.471-3.433 12.687-2.877c1.594.17-6.275 5.245-5.163 5.734 3.586 1.577 13.854-.296 12.097 1.19-.192.163-20.092 4.226-20.652 9.54-.37 3.521 1.32 8.994 1.32 8.994l2.125 5.867-2.063.108 3.934 5.76 1.36 3.146-.68 2.465-1.326.959-4.603-.822-4.19 1.904-1.955 1.02z" style="
fill: #e8a89f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<ellipse cx="105.564" cy="106.779" rx=".871" ry=".575" style="
fill: #fff;
fill-opacity: 1;
stroke: none;
stroke-width: 1.26917005;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="M96.86 163.324s1.997.665 1.997-.266c0-.932-.066-1.332.733-1.531.798-.2 2.263-.333 2.263-.333l.2 3.261-5.193-.2z" style="
fill: #b24b5c;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M96.007 164.462c3.702-1.08 7.829.05 4.003.62l2.06 1.069-5.551-.052-3.455.628z" style="
fill: #ffbed1;
fill-opacity: 1;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M99.27 163.356c.156.737 2.499.609 3.124-.411l.532-1.217-3.233.289z" style="
fill: #f8adb5;
fill-opacity: 0.80882401;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="m94.2 98.154 4.185 1.86c5.36-1.186 9.307-2.85 14.645-4.13l9.535 4.595-2.741-2.407c-6.133-5.976-13.16-7.324-25.624.082z" style="
fill: #000;
fill-opacity: 0.93510299;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M144.634 93.534s1.705-2.308 2.286-2.787c5.037-3.245 5.342 1.737 5.935 4.779l-1.305-1.533-1.744-2.645-2.285.36z" style="
fill: #8f2f29;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M140.08 100.93c1.263-.301 5.662-2.098 5.662-2.098.247 2.748-.513 4.121-.265 4.782 0 0-1.984.721-2.044.24-.489-2.329-1.71-1.778-3.774-1.722z" style="
fill: #b45f56;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m150.346 93.873.482 11.364-3.186 6.254-1.137 6.116-.705-4.754.88-2.084s3.126-5.832 3.186-6.133c.06-.3-.181-8.959-.181-9.2 0-.24.661-1.563.661-1.563z" style="
fill: #e4a398;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #000;
stroke-width: 0;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M93.138 110.848c1.935-1.935 2.99-4.31 4.046-5.102 1.056-.792 3.558-1.651 3.558-1.651s6.47-1.252 7.614-1.076c1.143.176 6.095 1.316 6.095 1.316l1.095 3.455c-1.902-.234-7.75-3.763-7.982-3.451-.236.315-7.037 1.055-7.477 1.32-.44.263-4.838 3.254-5.014 3.606-.176.352-1.935 1.583-1.935 1.583z" style="
fill: #82403c;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 2.40317011;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="m92.12 161.383 2.547.164 1.88-1.609c-.416 2.406-1.826 2.584-4.346 2.185z" style="
fill: #ebadbe;
fill-opacity: 0.702941;
stroke: none;
stroke-width: 0.30039701;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
" />
<path d="M85.88 142.259c-.31.84 4.445-2.777 10.1-1.473" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #d98786;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M86.74 141.581c4.083-2.806 6.498-3.185 9.555-1.82" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #904943;
stroke-width: 1.20158005;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m82.549 161.993 1.531.931 1.265-.066 1.464.666.666-.333-.995-.78-1.574.096-.427-.281c-.416-.126-.012-.447-.11-.661-.16-.358-.717-.598-1.487-.438-.826.228-.74.462-.333.866z" style="
fill: #fda4b2;
fill-opacity: 0.732353;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="m87.63 163.92.8 1.664 1.93.998 1.464.666s.8.066.866-.466c.066-.533-.732-.999-.732-.999l-1.798-.732c-.768-.592-1.746-1.718-2.53-1.131z" style="
fill: #fe97a9;
fill-opacity: 1;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M89.683 163.9c.998-.2 1.53.333 1.53.333l1.332.4.999 1.33 1.264.134s.133-1.997-.732-2.064c-.865-.066-2.13-.665-2.13-.665l-1.664-.267-.333-.798-.732.066z" style="
fill: #cb4a60;
fill-opacity: 0.732353;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M85.682 168.145c1.065-.332.794-1.293.794-1.293-.497-1.224-1.407-1.241-2.596-1.598l2.149-.493c.563-.383.744-1.39-.076-1.622-.626-.177-1.263.446-1.976.535-1.627.013-1.917.578-3.361.724.638 1.21 3.3 2.8 5.066 3.747z" style="
fill: #f9798f;
fill-opacity: 0.667647;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="M83.548 160.262s1.664-.2 1.797.066c.133.267.333 1.332.333 1.332l1.863-.133-.133-.866-1.264-.466-.4-.665-2.196-.2z" style="
fill: #f9798f;
fill-opacity: 1;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="m79.62 151.076-.266 2.796 1.015.272.238 1.222 3.74-.696 2.285.98 2.924-.153c.538.282 2.278-.12 3.248.574.977.698 1.091 3.433 1.564 3.815 1.008.088 2.308 1.554 2.956 1.175 1.123-.658 1.231-3.465 1.256-4.173l-4.382-2.55-2.663-1.132-10.783-.466z" style="
fill: #28090c;
fill-opacity: 1;
fill-rule: evenodd;
stroke-width: 1.80245996;
stroke-linecap: square;
stroke-linejoin: round;
paint-order: stroke fill markers;
" />
<path d="m80.283 149.464 1.964.337 1.734.896 4.275.494 1.15.657 2.51.483 1.272 1.49-3.206.329-.575-1.398-.33 1.726-3.295-.066-1.896-1.771c-.195.726-.43 1.043-.973 1.509-.48.51-.411.419-1.255-.04-.939-1.473-1.394-.96-2.058-3.042.646-.37.44-.943.683-1.604z" style="
fill: #fff;
stroke: none;
stroke-width: 0.60080099px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
" />
<path d="M82.467 149.786c.84.74 1.391 2.465 1.43 2.988" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #6f2c24;
stroke-width: 0.240316;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m89.405 151.675.067 1.464" style="
fill: #6f2c24;
fill-opacity: 1;
fill-rule: evenodd;
stroke-width: 3.00396991;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
paint-order: stroke fill markers;
" />
<path d="m89.405 151.875.086 1.52" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #6f2c24;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M87.348 142.302c-1.412.673.015.269-3.54.73" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #904943;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M84.613 155.336c1.53-.066 2.995-.133 3.394-.333.4-.2.866-.333 1.531.133.666.466 1.598.533 1.598.533l-1.664.865-.466.4-1.198.066-1.398.067s-.267-.133-.533-.333-1.264-1.398-1.264-1.398z" style="
fill: #5f211a;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m80.552 155.802 1.797.533 1.132-.067 1.797.533-1.597-1.265-1.198-.6-1.332.134z" style="
fill: #c4656f;
fill-opacity: 0.75;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M81.284 160.728s-1.664-4.393-1.33-4.327c.332.067 1.73.4 1.73.4l2.53-.333 3.66 3.328-1.53.732-2.197-1.664-.866 1.132-1.065 2.196z" style="
fill: #e64a62;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M83.8 151.54c1.95-.14 3.553.997 5.46.895h3.107l-4.801-1.506-3.168-.143-1.229-.62-.88-.326-2.16-.376z" style="
fill: #eab2ad;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M86.248 168.58c2.432 1.05 9.022 2.368 9.32 2.07l3.765-.564s.282-1.13-.377-1.318c-.659-.189-5.742.094-5.742-.377 0-.47-2.353-1.883-2.918-2.07-.565-.19-2.824-.283-2.824-.283z" style="
fill: #d24f5f;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M84.742 160.39s.847-1.6 1.318-.377c.47 1.224.376 2.165 1.506 2.26 1.13.093 5.177.94 5.177.94h3.107l3.577-2.07s1.035.188.565.659c-.471.47-3.672 2.824-3.672 2.824l-5.648-.565s-1.977-.66-2.447-.942c-.471-.282-.471-.094-.942-.47-.47-.377-2.541-2.26-2.541-2.26z" style="
fill: #c53f59;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M86.483 157.095s.95-.084 2.486-.208c1.1-.089 1.176-.95 2.08-.734.162.04.56-.463 1.444.026 1.176.65 2.886 2.328 2.886 2.328v1.977l-3.107.565s1.79-1.977.377-2.166c-1.412-.188-2.26-.47-2.918-.564-.66-.094-3.248-1.224-3.248-1.224z" style="
fill: #8d3338;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M99.085 160.916s5.297.877 5.497.61c.2-.266.799-2.196.799-2.196s-.8-.666-1.531-.932c-2.306.068-4.243.222-4.765 2.518z" style="
fill: #e34f68;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M98.525 159.33s4.391-1.517 3.406-1.887c-1.488-.558-2.803 1.148-2.803 1.148z" style="
fill: #d96175;
fill-opacity: 0.79117695;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M88.319 162.837c.47-.188 2.542-.659 3.2-.565.66.094 4.237 1.695 4.707 1.13.47-.565 2.354-2.165 2.354-2.165s-.095 3.106-.565 3.2c-.47.095-4.707.754-4.707.754l-3.2-1.13z" style="
fill: #cb465e;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="m93.967 139.585 2.353 1.789" style="
fill: #904943;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 12.01580048;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M90.07 139.404c1.536.122 3.477-.783 4.81-.119.661.33 2.075-.122 2.42.349.576.788-.166 2.485-.166 2.485" style="
fill: #904943;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 12.07619953;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M96.885 108.05c1.417-1.29 3.238-2.78 5.064-2.976 3.417-.368 6.148-1.067 7.833-.413 2.551 1.899 3.196 2.365 4.8 3.003" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #020000;
stroke-width: 0.96125197;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M94.911 113.143s4.987 3.562 5.984 3.134c.997-.427 6.268-.855 6.268-.855l-1.282-.57-7.123-.712z" style="
fill: #edc0c4;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.420555;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.582353;
paint-order: stroke fill markers;
" />
<path d="m95.481 109.154-1.14 1.994 3.705.428-2.707-.997z" style="
fill: #c2978d;
fill-opacity: 1;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.614706;
paint-order: stroke fill markers;
" />
<path d="M79.234 181.957c1.451 1.57 8.07 4.765 12.641 4.138 13.907 1.509 21.253-4.9 26.092-16.42l9.268-7.455c4.907-2.072 11.298-12.866 11.766-26.21.563-16.033-.202-26.744-1.785-32.983" style="
fill: none;
fill-opacity: 0.885294;
fill-rule: evenodd;
stroke: #c04d89;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
paint-order: stroke fill markers;
" />
<path d="M151.514 91.097c-1.563-1.577-2.51-2.518-4.634-2.518" style="
fill: none;
fill-opacity: 1;
fill-rule: evenodd;
stroke: #8f2f3c;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" />
<path d="m139.123 104.596.493 9.408 1.018.084.1-8.484z" style="
fill: #b45f56;
fill-opacity: 0.732353;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" />
<path d="M83.98 88.77c.416 0 10.42-4.273 10.42-4.273s.939 1.46-.103 1.98c-1.043.521-10.318 2.293-10.318 2.293z" style="
fill: #e6e6e6;
fill-opacity: 0.50882401;
fill-rule: evenodd;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" />
<path d="m390.74 286.526-.234-.187c-1.31 1.645-4.971 6.904-6.227 8.524 1.256-1.62 5.392-6.51 6.697-8.15l-.235-.187zM384.07 285.9l-.219-.205c-.583.624-1.048 1.517-1.486 2.929-.487 1.568-.597 2.237-1.004 3.112.271-.583.76-1.818 1.285-3.007.61-1.382 1.1-2.04 1.644-2.624l-.22-.205zM383.446 290.694l-.294-.063c-.12.554-.517 2.696-.81 4.24-.316 1.666-.646 3.406-.772 3.952.153-.663.575-2.134 1.065-3.883.495-1.771.928-3.363 1.104-4.182l-.293-.064z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.60080099;
stroke-linecap: square;
stroke-linejoin: round;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 0.697059;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m337.426 276.295-.449-.046c-.039.382-.108.834-.355 1.328-.187.374-.446.715-.785 1.07-.319.333-.709.675-1.02.965-.488.452-.705.7-.95.996.217-.263.544-.527 1.058-.855.367-.234.793-.477 1.204-.764.42-.292.8-.617 1.105-1.027.414-.555.59-1.14.64-1.62l-.448-.047zM333.868 277.805l-.315-.323c-.68.664-1.343 1.582-2.074 2.81-.76 1.278-1.216 2.135-1.815 2.903.189-.243 1.65-2.02 2.181-2.64 1.062-1.236 1.543-1.652 2.338-2.428l-.315-.322zM339.905 275.11l-.375-.25c-.148.223-.446.876-.727 1.498-.28.623-.521 1.187-.623 1.339.103-.154.529-.589.998-1.089.47-.501.952-1.022 1.103-1.25l-.376-.249z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m335.162 275.972-.444-.079a4.26 4.26 0 0 1-.612 1.612c-.298.469-.689.902-1.175 1.347-.456.418-1.003.85-1.432 1.205-.665.55-.974.854-1.296 1.197.29-.308.715-.628 1.4-1.053.456-.282 1.088-.646 1.607-.995.56-.377 1.064-.783 1.476-1.27.56-.66.82-1.328.92-1.885l-.444-.08zM342.816 273.708l-.441.092c.052.25.109.565.04.976-.053.316-.17.639-.35 1.002-.17.341-.394.712-.57 1.02-.283.495-.379.71-.512 1.007.11-.247.317-.528.656-.902.243-.268.532-.558.801-.876.273-.323.51-.661.667-1.041.215-.52.227-1 .15-1.37l-.441.092zM342.061 271.444l-.438-.104c-.223.936-.49 1.846-1.32 3.548-.694 1.426-1.389 2.752-1.691 3.348.423-.833 1.013-1.542 2.082-3.122 1.004-1.485 1.581-2.625 1.806-3.565l-.439-.105z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
<path d="m333.437 276.08-.347.287c.138.167.283.367.39.615.082.189.14.401.162.648.038.444-.048.933-.232 1.488-.175.525-.43 1.077-.618 1.514-.114.264-.202.48-.273.681a3.762 3.762 0 0 0-.16.588 2.06 2.06 0 0 1 .218-.563c.098-.184.22-.384.372-.622.25-.39.604-.91.875-1.42.284-.535.498-1.09.541-1.662a2.585 2.585 0 0 0-.093-.927c-.111-.381-.3-.688-.488-.915l-.347.288z" style="
fill: #271a1a;
fill-opacity: 1;
fill-rule: nonzero;
stroke: none;
stroke-width: 0.90118903;
stroke-linecap: square;
stroke-linejoin: round;
stroke-opacity: 0.83823494;
paint-order: stroke fill markers;
" transform="translate(-249.235 -198.068)" />
</svg>
</a>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
</header>
<main id="maincontent">
<article>
<h1>Logo tilt</h1>
<div class="details">
<svg class="author-img" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
</svg>
<span class="author">Rob O'Leary</span>
<span class="publish-date">| Published on Apr. 16, 2022</span>
</div>
<img src="https://raw.githubusercontent.com/robole/vscode-marky-dynamic/master/img/banner.png" alt="marky markdown" />
<p>
<strong>Scroll down to see head logo fall over.</strong>
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem nobis
ex voluptate aliquam, dicta nam cupiditate veniam rem? Maiores velit
voluptates placeat distinctio quisquam, eveniet qui reiciendis
voluptas ex ipsum.
</p>
<p>
Placeat eligendi sint similique neque quas. Inventore distinctio sit
porro expedita omnis repellendus neque accusamus perferendis, iure
alias sunt? Dicta nesciunt necessitatibus id aliquam. Exercitationem
laudantium ratione debitis suscipit natus.
</p>
<p>
Neque sit obcaecati pariatur amet porro nam non eligendi quis ducimus
impedit consectetur, est quisquam facilis cum quaerat dolore minima
dolorum enim ab quam totam quae sint suscipit voluptas. Sequi!
</p>
<p>
Nobis, provident possimus. Commodi asperiores, omnis repellat alias
mollitia, excepturi ullam consectetur amet a maiores harum numquam
quam eaque aliquid praesentium, voluptatem quibusdam natus ipsam
delectus unde adipisci! Voluptas, ab.
</p>
<p>
Veritatis, doloribus cum sequi minima quis molestias illum
reprehenderit odit libero suscipit quaerat voluptates maxime excepturi
dicta exercitationem reiciendis accusantium adipisci numquam corrupti
quia recusandae aspernatur in iure error! Illum?
</p>
<p>
Impedit, quos minima ullam quasi deserunt adipisci minus labore? Ullam
facere vitae nulla iure officiis. Vero, rem quaerat maxime quasi
sapiente voluptatibus nesciunt reprehenderit voluptatum a deleniti
est, facere quam.
</p>
<p>
Quia corrupti a quo quisquam voluptatem, voluptatum tempora placeat
aliquid labore commodi! Ea laborum veniam hic porro ut laboriosam
nesciunt ratione natus, tempore libero? Nisi quibusdam nobis qui alias
nesciunt.
</p>
<p>
Eum praesentium libero repellat repellendus officia culpa sit porro
veniam quae nihil iusto vero optio temporibus a dolorum aspernatur
distinctio illum quaerat quas, voluptas magnam ut cupiditate
blanditiis saepe. Eius!
</p>
<p>
Neque quasi suscipit laboriosam doloribus ad. Veritatis commodi beatae
nisi quo. Asperiores nisi ex tenetur ullam, consequuntur saepe ducimus
repudiandae voluptate maiores ab quasi libero sed pariatur optio,
laboriosam accusantium.
</p>
<p>
Repellendus, amet? Ab, esse fugiat nisi ad placeat hic facilis iste
ullam natus quidem. Quae atque voluptas modi aperiam in qui dolore aut
nulla architecto, exercitationem voluptatum. Exercitationem, atque
dolore.
</p>
<p>
Eligendi aliquam totam laborum, eveniet fugiat dignissimos, dicta
deleniti, fuga amet accusamus quae sequi. Repudiandae nam repellendus
consequatur fugit et, commodi beatae iure dolore! Commodi accusamus
similique nesciunt laboriosam! Sunt.
</p>
<p>
Vero molestiae maiores nemo voluptatem cupiditate eaque eos quas
dolore natus tempore quo mollitia saepe inventore, dolores deleniti
esse assumenda incidunt voluptatum magnam repudiandae, facilis iure
est. Qui, assumenda voluptate?
</p>
<p>
Asperiores dolorem tempore a, delectus nobis aperiam incidunt sequi
deserunt veritatis porro, corrupti officia. Modi repellendus pariatur
eligendi rerum velit non earum facilis, veniam vitae magni sit
accusantium nobis accusamus.
</p>
<p>
Laboriosam voluptate odit harum voluptatibus ipsum necessitatibus, cum
libero voluptas et, cumque numquam amet doloribus vitae velit quia
ipsam? Impedit illo aspernatur fugiat, necessitatibus velit optio
tempora ex deserunt nisi!
</p>
<p>
Fugit ea commodi aliquid! Maxime pariatur maiores quidem ratione,
numquam culpa est dolores autem dolorum facere nemo, voluptatibus
consequatur earum totam quod ipsum dolor necessitatibus fuga repellat
repellendus perferendis et.
</p>
<p>
Aliquam accusamus rerum nihil reiciendis eos, dicta praesentium eum.
Tempore provident eligendi numquam, eum eaque libero recusandae
praesentium aut asperiores voluptas facilis dolor quos alias ut
aliquid repellendus totam. In.
</p>
<p>
Quasi hic, aliquam dicta minima rerum adipisci necessitatibus neque
rem quae at numquam cumque ad ullam, accusantium corporis, nostrum
aspernatur. Autem, tenetur. Aliquid maiores sequi architecto dicta
labore incidunt debitis.
</p>
<p>
Recusandae dicta nostrum distinctio suscipit. Maiores doloremque
tempore maxime cupiditate illum praesentium, voluptate, quos, sapiente
excepturi saepe dignissimos repudiandae laudantium soluta quae ipsam.
Illo, quas asperiores. Nisi aspernatur quae ipsa!
</p>
<p>
Maiores nostrum ducimus assumenda ea reprehenderit. A rem nihil
labore. Dolore provident incidunt expedita sapiente, explicabo omnis
hic ab adipisci, suscipit, quos iusto est aliquid. Numquam ipsam nulla
id nobis?
</p>
<p>
Dolore perferendis, non hic quo deserunt ratione, velit recusandae
impedit, eligendi porro vero. Eligendi quam dolor iusto libero ipsa
laudantium fugiat quis aliquam inventore ullam debitis, possimus
voluptas rem mollitia.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad provident
maxime tempora? Facere, in rerum iste laborum recusandae aspernatur
earum, expedita eum deserunt, sint architecto quia amet. Culpa,
officiis ipsam!
</p>
<p>
Dolorum alias praesentium perspiciatis odit quo nihil, consequatur
consequuntur numquam accusantium non, atque saepe ducimus aspernatur
tempora est doloremque omnis ipsa obcaecati quam. Qui aliquid impedit
expedita? Molestiae, itaque minus.
</p>
<p>
Quaerat, dolores. Tempore, consectetur. Omnis modi consequuntur, quae
rerum aliquam rem architecto quis beatae numquam? Consequatur
quibusdam placeat dolores consequuntur voluptate. Quod, ipsum neque
fugiat quisquam ducimus ipsa perspiciatis voluptatum?
</p>
<p>
Distinctio consequatur optio repellendus repudiandae animi odio
quibusdam vel quas sequi, ratione natus dolor ab atque provident.
Architecto quod autem reprehenderit quisquam eaque nostrum cupiditate
harum illum magnam. Esse, reprehenderit.
</p>
<p>
Maiores perspiciatis beatae necessitatibus! Magnam doloremque ut,
inventore consequatur minus reiciendis esse dolorum quod delectus!
Veniam, dolore saepe quo ullam illo, quisquam quae, placeat aliquid
sunt vitae quod delectus? Dolor?
</p>
<p>
Ex aliquid sapiente facilis repudiandae natus! Perspiciatis eos
accusamus dolorum blanditiis ullam corrupti quidem dignissimos,
aspernatur, consequatur, earum doloremque dolor cum beatae.
Consectetur culpa ipsum quo, deserunt voluptate nihil ex!
</p>
<p>
Natus labore maiores voluptates atque excepturi fugiat ex culpa
laudantium eius vero nulla reiciendis voluptate aliquid cupiditate
reprehenderit tempora earum et quod, sunt eum odio vel, sint officia
nostrum? Hic?
</p>
<p>
Dolorem accusamus animi sapiente eos facilis assumenda aliquid, a
magnam, hic incidunt labore tempora, nostrum blanditiis facere soluta
repellendus architecto sint placeat optio dolores ducimus laboriosam?
Exercitationem ad quae corrupti.
</p>
<p>
Tenetur quaerat iste dolores odio perferendis neque consectetur quae
commodi fuga, laboriosam amet placeat ipsam incidunt debitis tempore a
aperiam inventore obcaecati illo rem. Accusantium ab quas ipsum
laborum similique?
</p>
<p>
Ratione sed nam molestiae nemo. Animi sed exercitationem unde, commodi
fugiat laboriosam velit illum obcaecati doloremque veniam quod dicta
harum, incidunt expedita iste, deserunt quisquam cumque explicabo
sequi tempora excepturi?
</p>
<p>
Iure rerum fuga culpa quam non aut quidem deserunt magni temporibus
dolores, sed, nisi corporis omnis architecto dicta delectus quis
laboriosam cumque dolor dolorum! Suscipit voluptatum eos dolorem
sapiente eveniet?
</p>
<p>
Necessitatibus incidunt quis dolorum consequatur cupiditate hic magni
earum, possimus eum. Deleniti, libero. Corporis rerum suscipit,
delectus minima ab animi quia ipsam repellendus reiciendis perferendis
eius molestias laboriosam blanditiis mollitia!
</p>
<p>
Quas aliquam magnam quaerat suscipit, dolorem distinctio excepturi
nobis soluta officiis laudantium temporibus cum itaque nam quos
aliquid similique modi voluptate, error vel, tenetur corrupti. Saepe
nulla deserunt natus iure.
</p>
<p>
Hic nobis minus vero, quisquam voluptates reiciendis laudantium alias.
Distinctio, repellat magnam nam rerum quidem provident sit ipsam
blanditiis animi a autem sunt, eius similique beatae quia. Quia, quos
voluptatibus.
</p>
<p>
Ea vero consequatur qui earum doloribus fugiat ex? Omnis vero
voluptatem consequuntur mollitia doloribus non et voluptates nemo
tempora molestiae doloremque nulla unde rem at iusto, totam quidem
deserunt voluptate.
</p>
<p>
Similique nisi enim voluptate quaerat consequuntur eligendi, magni
facere alias eveniet rem amet. Quidem, ipsam error veniam molestiae
numquam qui labore voluptate soluta inventore quod rem magnam libero,
dolorem laborum?
</p>
<p>
Debitis, velit quibusdam! Error sed rerum quia rem dolore magnam at
impedit nulla. Aut dolore, ratione voluptatum dolor possimus facere
nihil, blanditiis distinctio corrupti consectetur doloremque error
voluptates molestias praesentium!
</p>
<p>
Totam cum hic error libero iusto recusandae nostrum, iure autem fugit
beatae quis modi facere voluptatibus consequuntur, quia sed vero at
officiis voluptas sint magnam. Quo deserunt deleniti temporibus dicta?
</p>
<p>
Laudantium labore impedit suscipit quidem consequatur illo molestiae
animi tempore! Voluptatum fugiat modi aut ducimus minima facilis,
iste, cum laborum quis vero alias, perferendis nulla? Voluptatem
corrupti maiores corporis rerum?
</p>
<p>
Necessitatibus esse nisi provident cumque vero est expedita iusto
earum vel temporibus harum non officia ipsam, eveniet saepe. Quas qui
sunt dolor natus quam a sapiente, libero voluptatibus itaque eligendi!
</p>
</article>
</main>
<footer>
<nav aria-label="Footer navigation">
<div class="footer-links">
<ul>
<li>
<h2>What we do</h2>
</li>
<li><a href="/newsletters/">Newsletters</a></li>
<li><a href="/community/">Forums</a></li>
</ul>
<ul>
<li>
<h2>About</h2>
</li>
<li><a href="/about-us/">Our story</a></li>
<li><a href="/legals/">Terms of use</a></li>
<li><a href="/privacy-policy/">Privacy policy</a></li>
<li>
<a href="#">Corporate memberships</a>
</li>
</ul>
<ul>
<li>
<h2>Contact</h2>
</li>
<li><a href="/contact-us/">Contact us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="/write-for-us/">Write an article for us</a></li>
<li>
<a href="#/" target="_blank">Advertise</a>
</li>
</ul>
<ul class="social">
<li>
<h2>Connect</h2>
</li>
<li>
<a href="#" rel="noopener noreferrer" target="_blank" aria-label="See facebook account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="social-icon fa-facebook-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See twitter account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="social-icon fa-twitter-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See RSS feed"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss-square" class="social-icon fa-rss-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
</svg></a>
</li>
</ul>
</div>
<p class="copyright">
© 2010 –
<!-- -->2022
<!-- -->
Yada Yada Pty. Ltd.
</p>
</nav>
</footer>
/* Scroll down, brah
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
/* scroll-related */
.logo {
height: 6rem;
transition: transform 0.6s cubic-bezier(0.95, 0.05, 0.8, 0.04);
}
.scroll-down {
transform: rotate(60deg);
}
.scroll-up {
transform: rotate(0);
}
/* other styles */
body {
font-family: "Open Sans", sans-serif;
margin: 0;
overflow-x: hidden;
}
body > header {
position: sticky;
top: 0;
display: flex;
align-items: center;
min-height: 4em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
font-weight: 700;
font-size: 1.25rem;
padding: 0;
background-color: white;
}
.home {
padding: 0 2rem 0 0.5rem;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
}
nav a {
text-decoration: none;
color: inherit;
}
main {
display: grid;
max-width: 800px;
margin: 20px auto;
padding:5px;
}
.details {
display: grid;
grid-template-columns: auto max-content 1fr;
align-items: center;
grid-gap: 10px;
margin-bottom: 30px;
width: 100%;
}
h1 {
font-family: Raleway, serif;
font-size: 2.25em;
line-height: 1.25em;
grid-column: 1 / -1;
}
.author-img {
width: 45px;
height: 45px;
border-radius: 50%;
}
article img {
display: block;
width: 100%;
}
a,
a:visited {
text-decoration: none;
}
footer {
background-color: black;
color: white;
margin: 0;
font-size: 1.1rem;
}
footer nav {
margin: 0 auto;
max-width: 1248px;
width: 100%;
}
.footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-evenly;
padding: 16px;
width: 100%;
}
@media screen and (max-width: 600px) {
.footer-links {
grid-template-columns: auto;
}
}
.footer-links ul {
display: flex;
flex-direction: column;
}
.social {
align-self: flex-start;
}
.social-icon {
width: 1.5em;
margin-right: 0.5rem;
}
.copyright {
text-align: center;
padding: 5px;
margin: 0;
}
/* Code can be found in repo: https://github.com/robole/artifice
*/
let logo = document.querySelector(".logo");
let previousScrollPosition = 0;
const isScrollingDown = () => {
let goingDown = false;
let scrollPosition = window.pageYOffset;
if (scrollPosition > previousScrollPosition) {
goingDown = true;
}
previousScrollPosition = scrollPosition;
return goingDown;
};
const handleScroll = () => {
if (isScrollingDown()) {
logo.classList.add("scroll-down");
logo.classList.remove("scroll-up");
} else {
logo.classList.add("scroll-up");
logo.classList.remove("scroll-down");
}
};
const scrollThrottle = _.throttle(handleScroll, 100);
window.addEventListener("scroll", scrollThrottle);
Also see: Tab Triggers