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.
<form action="#" data-controller="avatar" data-avatar-shape-value="false">
<div>
<label for="user_screen_name">Screen name</label>
<input type="text" id="user_screen_name" name="user[screen_name]" placeholder="enter text to generate an avatar..." autofocus="true" data-avatar-target="text" data-action="avatar#generate">
</div>
<div>
<label for="user_avatar">Avatar</label>
<div class="flex items-center" style="gap: .5rem; flex-wrap: wrap;">
<input accept="image/*" class="sr-only" type="file" name="user[avatar]" id="user_avatar" data-avatar-target="input" data-action="avatar#fileChosen avatar#preview">
<img class="avatar" data-avatar-target="image" src="">
<fieldset class="inline-block p-1 border-2 rounded-full focus-within:outline focus-within:outline-blue-400" data-avatar-target="type">
<span class="relative inline-block">
<input class="sr-only peer" type="radio" id="user_avatar_type_shape" name="user[avatar_type]" data-action="avatar#setTypeToShape">
<label class="text-base font-normal border-2 border-transparent rounded-full block py-1 px-2 peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-200 hover:border-blue-600 peer-focus:bg-red-200- peer-focus:border-red-600-" for="user_avatar_type_shape">Shape</label>
</span>
<span class="relative inline-block">
<input class="sr-only peer" type="radio" id="user_avatar_type_initials" name="user[avatar_type]" checked data-action="avatar#setTypeToInitials">
<label class="text-base font-normal border-2 border-transparent rounded-full block py-1 px-2 peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-200 hover:border-blue-600 peer-focus:bg-red-200- peer-focus:border-red-600-" for="user_avatar_type_initials">Initials</label>
</span>
</fieldset>
<button hidden name="button" type="button" class="button" data-avatar-target="revert" data-action="avatar#reset">Revert to default avatar</button>
<label class="button button-secondary" for="user_avatar">Upload your avatar…</label>
</div>
</div>
</form>
body {
margin: 2rem;
}
form {
max-width: 30rem;
margin: 0 auto;
}
form > * ~ * {
margin-top: 1rem;
}
[multiple],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
label {
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(55 65 81 / 1);
font-weight: 600;
}
input[type="file"]:focus ~ label {
border-color: -webkit-focus-ring-color;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 5px;
// outline-offset: -2px;
}
input[type="text"] {
display: block;
width: 100%;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
border-width: 1px;
border-radius: 0.375rem;
}
.avatar {
width: 4rem;
min-width: 4rem;
height: 4rem;
border-radius: 9999px;
background-color: lightgray;
border: 2px solid #fff;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
box-shadow: 0px 3px 8px rgba(18, 18, 18, 0.04),
0px 1px 1px rgba(18, 18, 18, 0.02);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-weight: 400;
cursor: pointer;
border: 1px solid lightgray;
border-radius: 9999px;
background-color: transparent;
color: initial;
font-size: 1rem;
}
.button-secondary {
background-color: rgb(243, 244, 246);
border-color: rgb(209, 213, 219);
}
.button:hover {
box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgb(229, 231, 235) 0px 0px 0px 8px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}
[hidden], [hidden="true"] { display: none !important }
class FileImageController extends Stimulus.Controller {
static get targets() {
return [ "input", "image" ]
}
connect() {}
preview(event) {
if (this.inputTarget.files.length == 0) return
if (this.inputTarget.files.length > 1) return
const file = this.inputTarget.files.item(0)
const objectURL = URL.createObjectURL(file)
Object.assign(this.imageTarget, {
src: objectURL,
alt: file.name
})
}
}
class AvatarController extends FileImageController {
static get shapePaths() {
return [
"m15.856 0 3.856 9.321L29.713 8l-6.145 8 6.145 8-10.001-1.321L15.856 32 12 22.679 2 24l6.144-8L2 8l10 1.321z",
"M16.017 0 18.4 8.665l7.021-5.609-3.165 8.411 8.978-.411L23.729 16l7.505 4.944-8.978-.411 3.165 8.411-7.021-5.609L16.017 32l-2.383-8.665-7.022 5.609 3.166-8.411-8.978.411L8.305 16 .8 11.056l8.978.411-3.166-8.411 7.022 5.609z",
"M14.39.98c.675-1.307 2.545-1.307 3.22 0l4.306 8.326c.172.334.444.606.778.778l8.325 4.305c1.308.676 1.308 2.546 0 3.222l-8.325 4.305a1.812 1.812 0 0 0-.778.778l-4.305 8.325c-.676 1.308-2.546 1.308-3.222 0l-4.305-8.325a1.813 1.813 0 0 0-.778-.778L.981 17.61c-1.308-.676-1.308-2.546 0-3.222l8.325-4.305c.334-.172.606-.444.778-.778L14.39.981Z",
"M14.989.825a1.6 1.6 0 0 1 2.022 0l1.27 1.035c.399.326.93.44 1.428.305l1.577-.427a1.6 1.6 0 0 1 1.845.823l.746 1.473a1.6 1.6 0 0 0 1.177.859l1.62.256a1.6 1.6 0 0 1 1.348 1.499l.086 1.662a1.6 1.6 0 0 0 .724 1.259l1.386.903a1.6 1.6 0 0 1 .62 1.912l-.596 1.56a1.6 1.6 0 0 0 .151 1.44l.906 1.4a1.6 1.6 0 0 1-.21 1.998l-1.173 1.178a1.6 1.6 0 0 0-.447 1.379l.261 1.648a1.6 1.6 0 0 1-1.005 1.743l-1.538.592a1.6 1.6 0 0 0-.971 1.083l-.426 1.602a1.6 1.6 0 0 1-1.632 1.188l-1.633-.088a1.6 1.6 0 0 0-1.333.595l-1.03 1.281a1.6 1.6 0 0 1-1.977.421l-1.454-.746a1.601 1.601 0 0 0-1.462 0l-1.454.746a1.6 1.6 0 0 1-1.977-.42l-1.03-1.282a1.6 1.6 0 0 0-1.333-.595l-1.633.088a1.6 1.6 0 0 1-1.632-1.188l-.426-1.602a1.6 1.6 0 0 0-.971-1.083l-1.538-.592a1.6 1.6 0 0 1-1.005-1.743l.26-1.648a1.6 1.6 0 0 0-.446-1.38L.91 18.783a1.6 1.6 0 0 1-.21-1.998l.906-1.4a1.6 1.6 0 0 0 .15-1.44l-.596-1.56a1.6 1.6 0 0 1 .62-1.912l1.387-.903a1.6 1.6 0 0 0 .724-1.259l.086-1.662a1.6 1.6 0 0 1 1.347-1.499l1.62-.256a1.6 1.6 0 0 0 1.178-.859l.746-1.473a1.6 1.6 0 0 1 1.845-.823l1.577.427a1.6 1.6 0 0 0 1.428-.305L14.99.825Z",
"M15.65.295c.068-.393.632-.393.7 0l.748 4.342c.06.346.53.406.674.085L19.574.704c.164-.365.71-.224.678.174L19.9 5.269c-.028.35.413.526.632.251l2.743-3.443c.249-.313.744-.04.614.338L22.456 6.58c-.115.332.27.612.55.4l3.51-2.652c.32-.24.73.147.511.48l-2.42 3.679c-.194.293.109.66.433.524l4.059-1.693c.368-.154.67.323.375.592l-3.258 2.959c-.26.236-.057.666.29.616l4.352-.629c.395-.057.569.481.216.667l-3.89 2.055c-.31.163-.221.63.127.668l4.372.476c.397.043.432.607.044.7l-4.278 1.02c-.34.082-.37.556-.042.68l4.116 1.55c.373.14.268.696-.131.689l-4.397-.078c-.35-.006-.497.446-.21.648l3.602 2.526c.327.23.087.741-.298.635l-4.239-1.17c-.338-.094-.592.308-.364.575l2.862 3.344c.26.304-.1.74-.446.54l-3.816-2.189c-.304-.175-.65.151-.495.466l1.942 3.953c.176.359-.28.69-.567.412l-3.152-3.072c-.251-.244-.667-.015-.595.328l.9 4.313c.081.391-.444.6-.652.258l-2.29-3.76a.355.355 0 0 0-.658.169l-.2 4.401c-.017.4-.578.47-.694.088l-1.285-4.213a.355.355 0 0 0-.68 0l-1.285 4.213c-.117.382-.677.311-.695-.088l-.199-4.401a.355.355 0 0 0-.658-.17l-2.29 3.761c-.208.341-.733.133-.651-.258l.9-4.313c.071-.343-.345-.572-.596-.328l-3.152 3.072c-.286.279-.743-.053-.567-.412l1.942-3.953c.155-.315-.191-.64-.495-.466l-3.816 2.19c-.346.199-.706-.237-.446-.54l2.862-3.345c.228-.267-.026-.669-.364-.575l-4.24 1.17c-.384.106-.624-.405-.297-.635l3.602-2.526c.287-.202.14-.654-.21-.648l-4.397.078c-.399.007-.504-.549-.13-.69l4.115-1.55c.328-.123.299-.597-.042-.679l-4.278-1.02c-.388-.093-.353-.657.044-.7l4.372-.476c.348-.037.437-.505.127-.668l-3.89-2.055c-.353-.186-.179-.724.216-.667l4.352.629c.347.05.55-.38.29-.616l-3.258-2.96c-.296-.268.007-.745.375-.591l4.06 1.693c.323.135.626-.231.433-.524L4.973 4.809c-.22-.334.192-.721.51-.48L8.995 6.98c.28.212.664-.068.55-.4L8.111 2.415c-.13-.378.365-.65.614-.338l2.743 3.443c.219.275.66.1.632-.25L11.747.877c-.031-.398.515-.54.679-.174l1.802 4.018c.143.32.614.261.674-.085L15.65.295Z",
"M11.51 2.614c2.044-3.485 7.082-3.485 9.127 0l.074.126a5.291 5.291 0 0 0 4.526 2.614h.147c4.04.029 6.56 4.392 4.564 7.905l-.073.128a5.291 5.291 0 0 0 0 5.226l.073.128c1.995 3.513-.524 7.876-4.564 7.904l-.147.001a5.292 5.292 0 0 0-4.526 2.614l-.074.126c-2.045 3.485-7.083 3.485-9.128 0l-.074-.126a5.291 5.291 0 0 0-4.527-2.614h-.146c-4.04-.029-6.56-4.392-4.564-7.905l.073-.128c.92-1.62.92-3.606 0-5.226l-.073-.128c-1.996-3.513.524-7.876 4.564-7.904l.146-.001a5.291 5.291 0 0 0 4.527-2.614l.074-.126Z",
"M17.143 0h-2.286v13.241L5.494 3.878 3.878 5.494l9.363 9.363H0v2.286h13.241l-9.363 9.363 1.616 1.616 9.363-9.363V32h2.286V18.759l9.363 9.363 1.616-1.616-9.363-9.363H32v-2.286H18.759l9.363-9.363-1.616-1.616-9.363 9.363z",
"M17.143 0h-2.286v10.12L11.066.737l-2.119.856 3.889 9.627-7.342-7.342-1.616 1.616 7.037 7.037-9.119-3.984-.915 2.094 9.649 4.216H0v2.286h10.53L.881 21.359l.915 2.094 9.119-3.984-7.037 7.037 1.616 1.616 7.342-7.342-3.889 9.627 2.119.856 3.791-9.383V32h2.286V21.88l3.791 9.383 2.119-.856-3.889-9.627 7.342 7.342 1.616-1.616-7.037-7.037 9.119 3.984.915-2.094-9.649-4.216H32v-2.286H21.47l9.649-4.216-.915-2.094-9.119 3.984 7.037-7.037-1.616-1.616-7.342 7.342 3.889-9.627-2.119-.856-3.791 9.383z",
"M16.04 32c-.504 0-.93-.365-1.053-.855-.39-1.56-1.135-3.22-2.237-4.978-1.306-2.112-3.167-4.07-5.583-5.875-2.102-1.589-4.204-2.672-6.306-3.25C.363 16.905 0 16.463 0 15.947c0-.506.35-.942.836-1.081 2.06-.589 4.046-1.544 5.956-2.866 2.194-1.528 4.027-3.361 5.5-5.5 1.302-1.905 2.196-3.79 2.682-5.653C15.1.359 15.53 0 16.035 0c.51 0 .943.366 1.067.861.28 1.117.719 2.26 1.315 3.43.75 1.445 1.708 2.834 2.875 4.167a25.694 25.694 0 0 0 4 3.542c1.923 1.364 3.88 2.322 5.867 2.874.488.136.841.57.841 1.076 0 .514-.364.951-.86 1.087-1.26.346-2.556.903-3.89 1.671a25.061 25.061 0 0 0-4.5 3.375c-1.389 1.278-2.528 2.625-3.417 4.042-1.104 1.762-1.85 3.434-2.24 5.017-.12.491-.547.858-1.052.858Z",
"M19.2 0h-6.4v8.275L6.949 2.424 2.424 6.949 8.275 12.8H0v6.4h8.275l-5.851 5.851 4.525 4.525 5.851-5.851V32h6.4v-8.275l5.851 5.851 4.525-4.525-5.851-5.851H32v-6.4h-8.275l5.851-5.851-4.525-4.525L19.2 8.275z",
"M16 32c-1.333 0-2.444-.43-3.333-1.292-.89-.86-1.334-1.902-1.334-3.125 0-.694.14-1.32.417-1.875.278-.555.764-1.166 1.458-1.833.723-.667 1.292-1.292 1.709-1.875.444-.611.666-1.139.666-1.583v-1.5a3.638 3.638 0 0 1-1.625-.834 3.2 3.2 0 0 1-.875-1.583h-1.5c-.472 0-1.027.222-1.666.667a10.99 10.99 0 0 0-1.834 1.625c-.583.639-1.166 1.11-1.75 1.416-.555.306-1.194.459-1.916.459-1.25 0-2.306-.445-3.167-1.334C.417 18.445 0 17.333 0 16c0-1.333.417-2.444 1.25-3.333.861-.89 1.917-1.334 3.167-1.334 1.166 0 2.166.417 3 1.25a47.148 47.148 0 0 0 2.25 2.125c.666.584 1.305.875 1.916.875h1.5c.14-.639.43-1.166.875-1.583a3.156 3.156 0 0 1 1.625-.833v-1.5c0-.723-.555-1.64-1.666-2.75l-.875-.875c-1.14-1.14-1.709-2.348-1.709-3.625 0-1.25.445-2.292 1.334-3.125C13.583.43 14.694 0 16 0c1.333 0 2.445.43 3.333 1.292.89.86 1.334 1.902 1.334 3.125 0 1.416-.695 2.75-2.084 4-1.389 1.277-2.083 2.36-2.083 3.25v1.5c.639.11 1.167.389 1.583.833.445.417.723.944.834 1.583h1.5c.944 0 2.027-.708 3.25-2.125 1.25-1.416 2.555-2.125 3.916-2.125 1.25 0 2.292.459 3.125 1.375C31.57 13.598 32 14.694 32 16c0 1.333-.43 2.445-1.292 3.333-.86.89-1.902 1.334-3.125 1.334-1.166 0-2.152-.403-2.958-1.209a35.7 35.7 0 0 0-2.25-2.083c-.695-.583-1.347-.875-1.958-.875h-1.5c-.223 1.333-1.028 2.139-2.417 2.417v1.5c0 .833.694 1.902 2.083 3.208 1.39 1.306 2.084 2.625 2.084 3.958 0 1.25-.459 2.292-1.375 3.125C18.402 31.57 17.306 32 16 32Z",
"M16 32a5.608 5.608 0 0 1-2.917-.792A5.866 5.866 0 0 1 11 29.167a5.848 5.848 0 0 1-.75-2.917c0-1.333.306-2.444.917-3.333.61-.89 1.555-1.93 2.833-3.125.944-.861 1.417-1.681 1.417-2.459v-.75h-.75c-.861 0-2.042.862-3.542 2.584-1.472 1.722-3.264 2.583-5.375 2.583A5.848 5.848 0 0 1 2.833 21 6.226 6.226 0 0 1 .75 18.917 5.848 5.848 0 0 1 0 16c0-1.056.25-2.014.75-2.875a5.761 5.761 0 0 1 2.083-2.083 5.609 5.609 0 0 1 2.917-.792c2.083 0 3.861.847 5.333 2.542 1.473 1.694 2.667 2.541 3.584 2.541h.75v-.666c0-.778-.473-1.598-1.417-2.459l-.958-.875a12.144 12.144 0 0 1-1.917-2.291c-.583-.917-.875-2.014-.875-3.292 0-1.056.25-2.014.75-2.875A5.761 5.761 0 0 1 13.083.792 5.609 5.609 0 0 1 16 0c1.055 0 2.014.264 2.875.792a5.762 5.762 0 0 1 2.083 2.083c.528.861.792 1.82.792 2.875 0 2.083-.847 3.861-2.542 5.333-1.694 1.473-2.541 2.667-2.541 3.584v.666h.666c.945 0 2.14-.847 3.584-2.541 1.416-1.695 3.194-2.542 5.333-2.542 1.056 0 2.014.264 2.875.792a5.45 5.45 0 0 1 2.083 2.041c.528.861.792 1.834.792 2.917a5.608 5.608 0 0 1-.792 2.917A5.76 5.76 0 0 1 29.125 21c-.861.5-1.82.75-2.875.75-1.305 0-2.43-.32-3.375-.958-.917-.64-1.944-1.57-3.083-2.792-.861-.945-1.681-1.417-2.459-1.417h-.666v.75c0 1.028.847 2.223 2.541 3.584 1.695 1.36 2.542 3.138 2.542 5.333a5.61 5.61 0 0 1-.792 2.917 5.537 5.537 0 0 1-2.041 2.041c-.862.528-1.834.792-2.917.792Z",
"M19.2 2.286A2.286 2.286 0 0 0 16.914 0h-1.828A2.286 2.286 0 0 0 12.8 2.286v.47c0 2.037-2.462 3.056-3.902 1.617l-.333-.333a2.286 2.286 0 0 0-3.232 0L4.04 5.333a2.286 2.286 0 0 0 0 3.232l.333.333c1.44 1.44.42 3.902-1.617 3.902h-.47A2.286 2.286 0 0 0 0 15.086v1.828A2.286 2.286 0 0 0 2.286 19.2h.47c2.037 0 3.056 2.462 1.617 3.902l-.333.333a2.286 2.286 0 0 0 0 3.232l1.293 1.293c.892.893 2.34.893 3.232 0l.333-.333c1.44-1.44 3.902-.42 3.902 1.617v.47A2.286 2.286 0 0 0 15.086 32h1.828a2.286 2.286 0 0 0 2.286-2.286v-.47c0-2.037 2.462-3.056 3.902-1.617l.333.333c.892.893 2.34.893 3.232 0l1.293-1.293a2.286 2.286 0 0 0 0-3.232l-.332-.333c-1.44-1.44-.42-3.902 1.616-3.902h.47A2.286 2.286 0 0 0 32 16.914v-1.828a2.286 2.286 0 0 0-2.286-2.286h-.47c-2.037 0-3.056-2.462-1.617-3.902l.333-.333a2.286 2.286 0 0 0 0-3.232L26.667 4.04a2.286 2.286 0 0 0-3.232 0l-.333.333c-1.44 1.44-3.902.42-3.902-1.617v-.47Z",
"M17.6 0a1.6 1.6 0 0 1 1.6 1.6v2.812c0 1.425 1.723 2.14 2.731 1.131l1.988-1.988a1.6 1.6 0 0 1 2.263 0l2.263 2.263a1.6 1.6 0 0 1 0 2.262l-1.988 1.989c-1.008 1.008-.294 2.731 1.131 2.731H30.4a1.6 1.6 0 0 1 1.6 1.6v3.2a1.6 1.6 0 0 1-1.6 1.6h-2.812c-1.425 0-2.139 1.723-1.131 2.731l1.988 1.988a1.6 1.6 0 0 1 0 2.263l-2.263 2.263a1.6 1.6 0 0 1-2.262 0l-1.989-1.988c-1.008-1.008-2.731-.294-2.731 1.131V30.4a1.6 1.6 0 0 1-1.6 1.6h-3.2a1.6 1.6 0 0 1-1.6-1.6v-2.812c0-1.425-1.723-2.139-2.731-1.131L8.08 28.445a1.6 1.6 0 0 1-2.262 0l-2.263-2.263a1.6 1.6 0 0 1 0-2.262l1.988-1.989c1.008-1.008.294-2.731-1.131-2.731H1.6A1.6 1.6 0 0 1 0 17.6v-3.2a1.6 1.6 0 0 1 1.6-1.6h2.812c1.425 0 2.14-1.723 1.131-2.731L3.555 8.08a1.6 1.6 0 0 1 0-2.262l2.263-2.263a1.6 1.6 0 0 1 2.262 0l1.989 1.988c1.008 1.008 2.731.294 2.731-1.131V1.6A1.6 1.6 0 0 1 14.4 0h3.2ZM16 24a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z",
"m16.257.138 3.018 5.031a.32.32 0 0 0 .4.13l5.398-2.297a.32.32 0 0 1 .444.323l-.516 5.845a.32.32 0 0 0 .247.34l5.719 1.315a.32.32 0 0 1 .17.522l-3.854 4.425a.32.32 0 0 0 0 .42l3.853 4.425a.32.32 0 0 1-.17.522l-5.718 1.316a.32.32 0 0 0-.247.34l.516 5.844a.32.32 0 0 1-.444.323l-5.399-2.297a.32.32 0 0 0-.4.13l-3.017 5.032a.32.32 0 0 1-.55 0l-3.017-5.032a.32.32 0 0 0-.4-.13l-5.4 2.297a.32.32 0 0 1-.443-.323l.516-5.844a.32.32 0 0 0-.247-.34L.998 21.139a.32.32 0 0 1-.17-.522l3.853-4.425a.32.32 0 0 0 0-.42L.828 11.347a.32.32 0 0 1 .17-.522L6.716 9.51a.32.32 0 0 0 .247-.34l-.516-5.845a.32.32 0 0 1 .444-.323l5.4 2.297a.32.32 0 0 0 .399-.13L15.708.138a.32.32 0 0 1 .549 0ZM16 24a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z",
"M16.503 0a.64.64 0 0 1 .64.64v6.188c0 .703.97.892 1.233.24l2.318-5.738a.64.64 0 0 1 .834-.353l.932.376a.64.64 0 0 1 .354.834l-2.472 6.116c-.26.647.553 1.185 1.046.692l4.665-4.664a.64.64 0 0 1 .905 0l.711.71a.64.64 0 0 1 0 .906l-4.189 4.189c-.5.5.061 1.322.71 1.039l5.428-2.372a.64.64 0 0 1 .842.33l.403.922a.64.64 0 0 1-.33.843l-6.256 2.733c-.635.277-.437 1.226.257 1.226h6.826a.64.64 0 0 1 .64.64v1.006a.64.64 0 0 1-.64.64h-6.826c-.694 0-.892.949-.257 1.226l6.256 2.733a.64.64 0 0 1 .33.843l-.403.922a.64.64 0 0 1-.842.33l-5.429-2.372c-.648-.283-1.209.539-.709 1.04l4.19 4.188a.64.64 0 0 1 0 .905l-.712.711a.64.64 0 0 1-.905 0l-4.665-4.665c-.493-.492-1.307.046-1.046.693l2.472 6.116a.64.64 0 0 1-.354.834l-.933.376a.64.64 0 0 1-.833-.353l-2.318-5.738c-.263-.652-1.233-.463-1.233.24v6.188a.64.64 0 0 1-.64.64h-1.006a.64.64 0 0 1-.64-.64v-6.188c0-.703-.97-.892-1.233-.24l-2.318 5.738a.64.64 0 0 1-.833.353l-.933-.376a.64.64 0 0 1-.354-.834l2.472-6.116c.26-.647-.553-1.185-1.046-.692l-4.665 4.664a.64.64 0 0 1-.905 0l-.711-.71a.64.64 0 0 1 0-.906l4.189-4.189c.5-.5-.061-1.322-.71-1.039l-5.428 2.372a.64.64 0 0 1-.842-.33l-.403-.922a.64.64 0 0 1 .33-.843l6.256-2.733c.635-.277.437-1.226-.257-1.226H.64a.64.64 0 0 1-.64-.64v-1.006a.64.64 0 0 1 .64-.64h6.826c.694 0 .892-.949.257-1.226l-6.256-2.733a.64.64 0 0 1-.33-.843l.403-.922a.64.64 0 0 1 .842-.33l5.429 2.372c.648.283 1.209-.539.709-1.04L4.33 5.948a.64.64 0 0 1 0-.905l.712-.711a.64.64 0 0 1 .905 0l4.665 4.664c.493.493 1.307-.045 1.046-.692L9.186 2.187a.64.64 0 0 1 .354-.834l.933-.376a.64.64 0 0 1 .833.353l2.318 5.738c.263.652 1.233.463 1.233-.24V.64a.64.64 0 0 1 .64-.64h1.006ZM16 22.857a6.857 6.857 0 1 0 0-13.714 6.857 6.857 0 0 0 0 13.714Z",
"M17.143.64a.64.64 0 0 0-.64-.64h-1.006a.64.64 0 0 0-.64.64v6.188c0 .703-.97.892-1.233.24L11.306 1.33a.64.64 0 0 0-.833-.353l-.933.376a.64.64 0 0 0-.354.834l2.472 6.116c.26.647-.553 1.185-1.046.692L5.947 4.331a.64.64 0 0 0-.905 0l-.711.71a.64.64 0 0 0 0 .906l4.189 4.189c.5.5-.061 1.322-.71 1.039L2.383 8.803a.64.64 0 0 0-.842.33l-.403.922a.64.64 0 0 0 .33.843l6.256 2.733c.635.277.437 1.226-.257 1.226H.64a.64.64 0 0 0-.64.64v1.006c0 .353.287.64.64.64h6.826c.694 0 .892.949.257 1.226l-6.256 2.733a.64.64 0 0 0-.33.843l.403.922a.64.64 0 0 0 .842.33l5.429-2.372c.648-.283 1.209.539.709 1.04l-4.19 4.188a.64.64 0 0 0 0 .905l.712.711c.25.25.655.25.905 0l4.665-4.665c.493-.492 1.307.046 1.046.693l-2.472 6.116a.64.64 0 0 0 .354.834l.933.376a.64.64 0 0 0 .833-.353l2.318-5.738c.263-.652 1.233-.463 1.233.24v6.188c0 .353.287.64.64.64h1.006a.64.64 0 0 0 .64-.64v-6.188c0-.703.97-.892 1.233-.24l2.318 5.738a.64.64 0 0 0 .834.353l.932-.376a.64.64 0 0 0 .354-.834l-2.472-6.116c-.26-.647.553-1.185 1.046-.692l4.665 4.664c.25.25.655.25.905 0l.711-.71a.64.64 0 0 0 0-.906l-4.189-4.189c-.5-.5.061-1.322.71-1.039l5.428 2.372a.64.64 0 0 0 .842-.33l.403-.922a.64.64 0 0 0-.33-.843l-6.256-2.733c-.635-.277-.437-1.226.257-1.226h6.826a.64.64 0 0 0 .64-.64v-1.006a.64.64 0 0 0-.64-.64h-6.826c-.694 0-.892-.949-.257-1.226l6.256-2.733a.64.64 0 0 0 .33-.843l-.403-.922a.64.64 0 0 0-.842-.33l-5.429 2.372c-.648.283-1.209-.539-.709-1.04l4.19-4.188a.64.64 0 0 0 0-.905l-.712-.711a.64.64 0 0 0-.905 0l-4.665 4.664c-.493.493-1.307-.045-1.046-.692l2.472-6.116a.64.64 0 0 0-.354-.834l-.933-.376a.64.64 0 0 0-.833.353l-2.318 5.738c-.263.652-1.233.463-1.233-.24V.64Z",
"M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16Zm0-9a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z",
"M8 16a8 8 0 0 0 8-8 8 8 0 0 0 8 8 8 8 0 0 0-8 8 8 8 0 0 0-8-8Zm0 0a8 8 0 1 0 8 8 8 8 0 1 0 8-8 8 8 0 1 0-8-8 8 8 0 1 0-8 8Z",
"m18.608 12.076 1.316 1.316c1.194-.268 2.587-.422 4.076-.422 4.418 0 8 1.356 8 3.03 0 1.674-3.582 3.03-8 3.03-1.489 0-2.882-.154-4.076-.422l-1.316 1.316c.268 1.194.422 2.588.422 4.076 0 4.418-1.356 8-3.03 8-1.674 0-3.03-3.582-3.03-8 0-1.489.154-2.882.422-4.076l-1.316-1.316c-1.194.268-2.587.422-4.076.422-4.418 0-8-1.356-8-3.03 0-1.674 3.582-3.03 8-3.03 1.489 0 2.882.154 4.076.422l1.316-1.316c-.268-1.194-.422-2.587-.422-4.076 0-4.418 1.356-8 3.03-8 1.674 0 3.03 3.582 3.03 8 0 1.489-.154 2.882-.422 4.076Z",
"m18.608 12.076 5.288-5.289a.93.93 0 0 1 1.317 1.316l-5.289 5.289c1.194-.268 2.587-.422 4.076-.422 4.418 0 8 1.356 8 3.03 0 1.674-3.582 3.03-8 3.03-1.489 0-2.882-.154-4.076-.422l5.289 5.288a.93.93 0 0 1-1.317 1.317l-5.288-5.289c.268 1.194.422 2.588.422 4.076 0 4.418-1.356 8-3.03 8-1.674 0-3.03-3.582-3.03-8 0-1.489.154-2.882.422-4.076l-5.289 5.289a.93.93 0 0 1-1.316-1.317l5.289-5.288c-1.194.268-2.587.422-4.076.422-4.418 0-8-1.356-8-3.03 0-1.674 3.582-3.03 8-3.03 1.489 0 2.882.154 4.076.422L6.787 8.104a.93.93 0 0 1 1.316-1.317l5.289 5.289c-.268-1.194-.422-2.587-.422-4.076 0-4.418 1.356-8 3.03-8 1.674 0 3.03 3.582 3.03 8 0 1.489-.154 2.882-.422 4.076Z",
"M16 16s2-5.356 2-9.143C18 3.07 17.105 0 16 0s-2 3.07-2 6.857C14 10.644 16 16 16 16Zm0 0s2.373 5.201 5.05 7.88c2.679 2.677 5.483 4.215 6.264 3.434.78-.781-.757-3.585-3.435-6.263S16 16 16 16Zm0 0s5.356-2 9.143-2C28.93 14 32 14.895 32 16s-3.07 2-6.857 2C21.356 18 16 16 16 16Zm0 0s-5.201 2.373-7.88 5.05c-2.677 2.679-4.215 5.483-3.434 6.264.781.78 3.585-.757 6.263-3.435S16 16 16 16Zm0 0c.005.012 2 5.36 2 9.143C18 28.93 17.105 32 16 32s-2-3.07-2-6.857C14 21.356 16 16 16 16Zm0 0s-5.356-2-9.143-2C3.07 14 0 14.895 0 16s3.07 2 6.857 2C10.644 18 16 16 16 16Zm0 0s5.201-2.373 7.88-5.05c2.677-2.679 4.215-5.483 3.434-6.264-.781-.78-3.585.757-6.263 3.435S16 16 16 16Zm-5.05-7.88C13.626 10.8 16 16 16 16s-5.201-2.373-7.88-5.05C5.444 8.27 3.906 5.466 4.687 4.685c.781-.78 3.585.757 6.263 3.435Z",
"m16 2 5.12 15.68L32 30l-16-3.36L0 30l10.88-12.32z",
"m16 0 4.526 11.475L32 16l-11.474 4.526L16 32l-4.525-11.474L0 16l11.475-4.525z",
"M0 25.345C7.385 21.032 7.385 10.97 0 6.657 7.385 8.989 8.99 7.385 6.656 0c4.313 7.385 14.376 7.385 18.689 0-2.333 7.385-.728 8.99 6.655 6.657-7.383 4.313-7.383 14.375 0 18.688-7.383-2.334-8.988-.73-6.655 6.655-4.313-7.385-14.376-7.385-18.69 0 2.335-7.385.73-8.99-6.655-6.655Zm16-3.425a5.92 5.92 0 1 0 0-11.84 5.92 5.92 0 0 0 0 11.84Z",
"M21.714 0H10.286v10.286H0v11.428h10.286V32h11.428V21.714H32V10.286H21.714z",
"M17.116 14.016a1.28 1.28 0 0 1-2.232 0L8.075 1.907A1.28 1.28 0 0 1 9.191 0h13.618a1.28 1.28 0 0 1 1.116 1.907l-6.81 12.109Zm-3.1 3.1a1.28 1.28 0 0 0 0-2.232L1.907 8.075A1.28 1.28 0 0 0 0 9.191v13.618a1.28 1.28 0 0 0 1.907 1.116l12.109-6.81Zm3.1.868a1.28 1.28 0 0 0-2.232 0L8.075 30.093A1.28 1.28 0 0 0 9.191 32h13.618a1.28 1.28 0 0 0 1.116-1.907l-6.81-12.109Zm.868-3.1a1.28 1.28 0 0 0 0 2.232l12.109 6.809A1.28 1.28 0 0 0 32 22.809V9.191a1.28 1.28 0 0 0-1.907-1.116l-12.109 6.81Z",
"M24.97 23.03 17.94 16l7.03-7.03L32 16l-7.03 7.03Zm-17.94 0L0 16l7.03-7.03L14.06 16l-7.03 7.03ZM16 32l-7.03-7.03L16 17.94l7.03 7.03L16 32Zm0-17.94L8.97 7.03 16 0l7.03 7.03L16 14.06Z",
"M19.984.787 16.928 13.76 23.94 2.426a.64.64 0 0 1 .997-.116l4.753 4.753a.64.64 0 0 1-.116.997L18.24 15.072l12.973-3.056a.64.64 0 0 1 .787.623v6.722a.64.64 0 0 1-.787.623L18.24 16.928l11.334 7.012a.64.64 0 0 1 .116.997l-4.753 4.753a.64.64 0 0 1-.997-.116L16.928 18.24l3.056 12.973a.64.64 0 0 1-.623.787h-6.722a.64.64 0 0 1-.623-.787l3.056-12.973L8.06 29.574a.64.64 0 0 1-.997.116L2.31 24.937a.64.64 0 0 1 .116-.997l11.334-7.012L.787 19.984A.64.64 0 0 1 0 19.36v-6.722a.64.64 0 0 1 .787-.623l12.973 3.056L2.426 8.06a.64.64 0 0 1-.116-.997L7.063 2.31a.64.64 0 0 1 .997.116l7.012 11.334L12.016.787A.64.64 0 0 1 12.64 0h6.722a.64.64 0 0 1 .623.787ZM16 17.829a1.829 1.829 0 1 0 0-3.658 1.829 1.829 0 0 0 0 3.658Z",
"M9.385 23.646a2.115 2.115 0 0 0-1.03-1.03C4.819 20.98 2.02 18.62.528 17.205a1.642 1.642 0 0 1 0-2.412c1.493-1.415 4.29-3.773 7.827-5.409.454-.21.82-.576 1.03-1.03C11.021 4.819 13.38 2.02 14.794.528a1.642 1.642 0 0 1 2.413 0c1.414 1.493 3.773 4.29 5.408 7.827.21.454.577.82 1.03 1.03 3.537 1.636 6.334 3.994 7.827 5.409a1.642 1.642 0 0 1 0 2.413c-1.493 1.414-4.29 3.773-7.826 5.408-.454.21-.82.577-1.03 1.03-1.636 3.537-3.995 6.334-5.41 7.827a1.642 1.642 0 0 1-2.412 0c-1.415-1.493-3.773-4.29-5.409-7.826ZM16 21.882a5.882 5.882 0 1 0 0-11.763 5.882 5.882 0 0 0 0 11.763Z",
"M32 16.107 16 0 0 16.107h15.787L0 32h32L16.213 16.107z",
"M16 3.977 10.667 0v10.667H0L3.977 16 0 21.333h10.667V10.667h10.666V0L16 3.977ZM28.023 16 32 10.667H21.333v10.666H10.667V32L16 28.023 21.333 32V21.333H32L28.023 16Z",
"M2.945 16.067a3.521 3.521 0 0 0-2.83 3.453v8.96A3.52 3.52 0 0 0 3.634 32h8.96a3.521 3.521 0 0 0 3.472-2.945 3.521 3.521 0 0 0 3.453 2.83h8.96a3.52 3.52 0 0 0 3.52-3.52v-8.96a3.521 3.521 0 0 0-2.945-3.473 3.521 3.521 0 0 0 2.83-3.452V3.52A3.52 3.52 0 0 0 28.366 0h-8.96a3.52 3.52 0 0 0-3.473 2.945A3.521 3.521 0 0 0 12.48.115H3.52A3.52 3.52 0 0 0 0 3.634v8.96a3.521 3.521 0 0 0 2.945 3.472Z",
"M4.686 4.686a6.423 6.423 0 0 0-1.737 5.908A6.423 6.423 0 0 0 0 16a6.423 6.423 0 0 0 2.949 5.406 6.423 6.423 0 0 0 1.737 5.908 6.424 6.424 0 0 0 5.908 1.737A6.423 6.423 0 0 0 16 32a6.424 6.424 0 0 0 5.406-2.949 6.424 6.424 0 0 0 5.908-1.737 6.424 6.424 0 0 0 1.737-5.908A6.424 6.424 0 0 0 32 16a6.423 6.423 0 0 0-2.949-5.406 6.424 6.424 0 0 0-1.737-5.908 6.423 6.423 0 0 0-5.908-1.737A6.423 6.423 0 0 0 16 0a6.423 6.423 0 0 0-5.406 2.949 6.423 6.423 0 0 0-5.908 1.737Z",
"M2.949 10.594a6.423 6.423 0 0 1 1.737-5.908 6.423 6.423 0 0 1 5.908-1.737A6.423 6.423 0 0 1 16 0a6.423 6.423 0 0 1 5.406 2.949 6.423 6.423 0 0 1 5.908 1.737 6.424 6.424 0 0 1 1.737 5.908A6.423 6.423 0 0 1 32 16a6.424 6.424 0 0 1-2.949 5.406 6.424 6.424 0 0 1-1.737 5.908 6.424 6.424 0 0 1-5.908 1.737A6.424 6.424 0 0 1 16 32a6.423 6.423 0 0 1-5.406-2.949 6.424 6.424 0 0 1-5.908-1.737 6.423 6.423 0 0 1-1.737-5.908A6.423 6.423 0 0 1 0 16a6.423 6.423 0 0 1 2.949-5.406Zm8.484 9.965a6.429 6.429 0 1 0 9.09-9.092 6.429 6.429 0 0 0-9.09 9.092Z",
"M20.357 17.65c2.98 1.127 6.99.922 9.544-.49L32 16l-2.099-1.16c-2.553-1.412-6.564-1.617-9.544-.49l-2.234.847c-.014-.045-.031-.089-.047-.133l2.171-.979c2.905-1.31 5.595-4.29 6.403-7.094l.664-2.305-2.305.664c-2.803.807-5.785 3.498-7.094 6.403l-.946 2.097a2.234 2.234 0 0 0-.132-.06l.812-2.147c1.128-2.98.922-6.99-.489-9.544L16 0l-1.16 2.099c-1.412 2.553-1.617 6.564-.49 9.544l.813 2.147c-.045.018-.088.04-.132.06l-.946-2.097c-1.31-2.905-4.29-5.595-7.094-6.403l-2.305-.664.664 2.305c.807 2.803 3.498 5.785 6.403 7.094l2.171.98c-.016.043-.033.087-.047.132l-2.234-.846c-2.98-1.128-6.99-.923-9.544.489L0 16l2.099 1.16c2.553 1.412 6.564 1.617 9.544.49l2.339-.886c.018.04.037.08.058.12l-2.287 1.03c-2.905 1.31-5.595 4.292-6.403 7.095l-.664 2.305 2.305-.664c2.803-.807 5.785-3.498 7.094-6.402l1.061-2.355c.04.017.08.03.12.044l-.915 2.42c-1.128 2.98-.923 6.99.489 9.544l1.16 2.1 1.16-2.1c1.412-2.553 1.617-6.564.49-9.544l-.917-2.42c.04-.014.081-.027.12-.044l1.062 2.354c1.31 2.905 4.29 5.595 7.094 6.403l2.305.664-.664-2.305c-.807-2.803-3.498-5.785-6.402-7.094l-2.288-1.031c.021-.04.04-.08.058-.12l2.34.885Z",
"M23.387 16c2.403-.475 4.767-1.65 6.21-3.193l1.637-1.751-2.355-.455c-2.074-.4-4.676.039-6.9 1.067 1.665-1.797 2.888-4.136 3.147-6.233l.296-2.38-2.173 1.017c-1.913.895-3.76 2.78-4.955 4.918.291-2.431-.095-5.043-1.117-6.891L16.017 0l-1.16 2.099c-1.022 1.848-1.408 4.46-1.118 6.891-1.194-2.138-3.041-4.023-4.955-4.918L6.612 3.056l.295 2.38c.26 2.096 1.483 4.435 3.147 6.232-2.223-1.028-4.826-1.468-6.9-1.067L.8 11.056l1.638 1.752C3.88 14.35 6.244 15.524 8.647 16c-2.403.475-4.767 1.65-6.21 3.192L.8 20.944l2.354.455c2.074.4 4.677-.039 6.9-1.067-1.664 1.797-2.887 4.136-3.147 6.232l-.295 2.38 2.172-1.016c1.914-.895 3.76-2.78 4.955-4.918-.29 2.431.096 5.043 1.118 6.891L16.017 32l1.16-2.099c1.022-1.848 1.408-4.46 1.117-6.891 1.195 2.138 3.042 4.023 4.955 4.918l2.172 1.016-.295-2.38c-.26-2.096-1.482-4.435-3.146-6.232 2.223 1.028 4.825 1.467 6.9 1.067l2.354-.455-1.638-1.752C28.154 17.65 25.79 16.476 23.387 16Z",
"M29.596 12.807c-1.442 1.544-3.806 2.718-6.209 3.193 2.403.475 4.767 1.65 6.21 3.192l1.637 1.752-2.355.455c-2.074.4-4.676-.039-6.9-1.067 1.665 1.797 2.887 4.136 3.147 6.232l.295 2.38-2.172-1.016c-1.913-.895-3.76-2.78-4.955-4.918.29 2.431-.095 5.043-1.117 6.891L16.017 32l-1.16-2.099c-1.022-1.848-1.408-4.46-1.118-6.891-1.194 2.138-3.041 4.023-4.955 4.918l-2.172 1.016.295-2.38c.26-2.096 1.483-4.435 3.147-6.232-2.223 1.028-4.826 1.468-6.9 1.067L.8 20.944l1.637-1.752C3.88 17.65 6.245 16.476 8.648 16c-2.403-.475-4.767-1.65-6.21-3.193L.8 11.056l2.354-.455c2.074-.4 4.677.039 6.9 1.067C8.39 9.87 7.167 7.532 6.907 5.435l-.295-2.38 2.172 1.017c1.914.895 3.761 2.78 4.955 4.918-.29-2.431.096-5.043 1.118-6.891L16.017 0l1.16 2.099c1.022 1.848 1.408 4.46 1.117 6.891 1.195-2.138 3.042-4.023 4.955-4.918l2.173-1.016-.296 2.38c-.26 2.096-1.482 4.435-3.146 6.232 2.223-1.028 4.825-1.468 6.9-1.067l2.354.455-1.638 1.752Zm-16.595 6.184a4.211 4.211 0 1 0 5.955-5.955 4.211 4.211 0 0 0-5.955 5.955Z",
"M16 0c.543 8.602 7.398 15.457 16 16-8.602.543-15.457 7.398-16 16-.543-8.602-7.398-15.457-16-16 8.602-.543 15.457-7.398 16-16Z",
"M16 0c.002 5.903 7.138 8.859 11.314 4.686C23.14 8.862 26.097 15.998 32 16c-5.903.002-8.859 7.138-4.686 11.314C23.138 23.14 16.002 26.097 16 32c-.002-5.903-7.138-8.859-11.314-4.686C8.86 23.138 5.903 16.002 0 16c5.903-.002 8.859-7.138 4.686-11.314C8.862 8.86 15.998 5.903 16 0Z",
"M16 27.798C3.898 37.911-5.911 28.102 4.202 16-5.911 3.898 3.898-5.911 16 4.202 28.1-5.911 37.911 3.898 27.798 16 37.911 28.093 28.1 37.911 16 27.798Z",
"M22.4 22.399C35.2 35.2-3.2 35.2 9.6 22.399-3.2 35.2-3.2-3.2 9.6 9.599-3.2-3.2 35.2-3.2 22.4 9.6 35.2-3.2 35.2 35.2 22.4 22.4Z",
"M16.003 22.191c-13.673 18.57-24.758 7.486-6.19-6.192-18.576-13.675-7.491-24.755 6.19-6.19C29.676-8.762 40.761 2.325 22.193 16c18.56 13.678 7.474 24.763-6.19 6.192Z",
"M15.999 32v-8.965L0 15.999h8.965L15.999 0v8.965L32 15.999h-8.965z",
"M15.999 32v-2.49C7.849 29.51 0 24.15 0 16h2.488c0-8.15 5.361-16 13.511-16v2.49C24.149 2.49 32 7.85 32 16h-2.488c0 8.15-5.363 16-13.513 16Z",
"M21.689 25.74c4.875 8.347-16.25 8.347-11.376 0-9.03 8.347-12.4 4.974-4.052-4.051-8.348 4.875-8.348-16.25 0-11.376-8.348-9.03-4.975-12.4 4.052-4.052-4.875-8.348 16.25-8.348 11.376 0 9.03-8.348 12.398-4.975 4.05 4.052 8.348-4.875 8.348 16.25 0 11.376 8.348 9.029 4.98 12.398-4.05 4.05Z",
"M18.877 20.925c8.63 14.766-14.373 14.766-5.754 0-13.148 14.766-16.815 11.1-2.048-2.047-14.767 8.63-14.767-14.374 0-5.754C-3.692-.025-.025-3.692 13.123 11.076c-8.63-14.768 14.373-14.768 5.754 0 13.148-14.768 16.815-11.1 2.048 2.048 14.767-8.632 14.767 14.373 0 5.754 14.767 13.148 11.095 16.813-2.048 2.047Z",
"M25.345 32c-4.313-7.385-14.376-7.385-18.69 0 2.335-7.385.73-8.99-6.655-6.655C7.385 21.032 7.385 10.97 0 6.657 7.385 8.989 8.99 7.385 6.656 0c4.313 7.385 14.376 7.385 18.689 0-2.333 7.385-.728 8.99 6.655 6.657-7.383 4.313-7.383 14.375 0 18.688-7.383-2.334-8.988-.73-6.655 6.655Z",
"M26.435 30.711c.064.71-1.71 1.615-2.268 1.172a13.088 13.088 0 0 0-16.331-.003c-.558.442-2.334-.464-2.27-1.173.293-3.264-1.01-4.566-4.273-4.273-.71.064-1.615-1.712-1.173-2.27a13.086 13.086 0 0 0-.003-16.33C-.326 7.276.58 5.502 1.29 5.566c3.266.294 4.57-1.008 4.276-4.273C5.502.583 7.278-.322 7.836.12A13.088 13.088 0 0 0 24.167.117c.558-.443 2.332.462 2.268 1.172-.294 3.268 1.009 4.571 4.276 4.277.71-.064 1.615 1.71 1.172 2.268a13.088 13.088 0 0 0-.003 16.33c.442.558-.464 2.334-1.173 2.27-3.264-.293-4.566 1.011-4.272 4.277Z",
"M20.342 32C16 32 16 26.788 11.656 26.788 6.656 26.788 0 25.342 0 20.34c0-4.343 5.21-4.343 5.21-8.686C5.21 6.658 6.658 0 11.659 0 16 0 16 5.212 20.344 5.212 25.341 5.212 32 6.658 32 11.66c0 4.343-5.213 4.343-5.213 8.686C26.785 25.351 25.341 32 20.342 32ZM15.92 21.84a5.92 5.92 0 1 0 0-11.84 5.92 5.92 0 0 0 0 11.84Z",
"M19.735 32C16 32 16 23.035 12.265 23.035c-4.3 0-12.265.998-12.265-3.3 0-3.736 8.964-3.736 8.964-7.47C8.964 7.966 7.966 0 12.264 0 16 0 16 8.965 19.736 8.965c4.3 0 12.265-.998 12.265 3.3 0 3.734-8.965 3.734-8.965 7.47 0 4.298 1 12.265-3.3 12.265Z",
"M14.928 3.025c0-8.645 5.403 3.61 3.245 7.354 2.161-3.744 15.478-5.193 7.99-.869C33.65 5.186 25.738 16 21.416 16c4.322 0 12.234 10.808 4.745 6.49 7.489 4.324-5.828 2.875-7.989-.868 2.161 3.743-3.245 15.999-3.245 7.353 0 8.646-5.404-3.61-3.245-7.353-2.16 3.743-15.477 5.192-7.989.869-7.488 4.323.424-6.49 4.748-6.49C4.118 16-3.794 5.191 3.694 9.51c-7.488-4.324 5.828-2.875 7.99.869-2.16-3.748 3.244-16 3.244-7.354Z",
"M14.942 10.957c0-21.425 6.618-6.42 1.261 2.86 5.357-9.28 21.662-11.052 3.107-.338 18.555-10.714 8.87 2.52-1.846 2.52 10.712 0 20.401 13.234 1.846 2.522 18.555 10.712 2.25 8.94-3.107-.34 5.357 9.28-1.26 24.287-1.26 2.86 0 21.427-6.61 6.42-1.262-2.86-5.355 9.28-21.66 11.052-3.104.34-18.556 10.712-8.87-2.522 1.845-2.522-10.713 0-20.4-13.234-1.845-2.52-18.556-10.714-2.25-8.941 3.104.337-5.355-9.278 1.261-24.284 1.261-2.859Z",
"M9.813 16C-8.763 2.323 2.322-8.757 16.003 9.81 29.676-8.763 40.761 2.324 22.193 16c18.56 13.677 7.474 24.762-6.19 6.191-13.673 18.57-24.758 7.486-6.19-6.192ZM16 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
"M16 29.394C17.084 30.697 18.17 32 20.341 32c5 0 6.443-6.649 6.445-11.655 0-2.172 1.303-3.257 2.607-4.343C30.697 14.916 32 13.83 32 11.659c0-5-6.659-6.447-11.656-6.447-2.171 0-3.257-1.303-4.343-2.606C14.915 1.303 13.829 0 11.658 0 6.657 0 5.21 6.658 5.21 11.655c0 2.172-1.303 3.257-2.606 4.343C1.303 17.084 0 18.17 0 20.341c0 5 6.657 6.447 11.656 6.447 2.171 0 3.257 1.303 4.343 2.606Zm0-7.474a5.92 5.92 0 1 0 0-11.84 5.92 5.92 0 0 0 0 11.84Z",
"M4.202 16C-5.911 3.898 3.898-5.911 16 4.202 28.1-5.911 37.911 3.898 27.798 16 37.911 28.093 28.1 37.911 16 27.798 3.898 37.911-5.911 28.102 4.202 16ZM16 21.92a5.92 5.92 0 1 0 0-11.84 5.92 5.92 0 0 0 0 11.84Z",
"M13.123 20.925c-13.148 14.766-16.815 11.1-2.048-2.047-14.767 8.63-14.767-14.374 0-5.754C-3.692-.025-.025-3.692 13.123 11.076c-8.63-14.768 14.373-14.768 5.754 0 13.148-14.768 16.815-11.1 2.048 2.048 14.767-8.632 14.767 14.373 0 5.754 14.767 13.148 11.095 16.813-2.048 2.047 8.63 14.766-14.373 14.766-5.754 0ZM16 20a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
"M8.114 0h-8v8a8.001 8.001 0 0 0 6.984 7.936A8.001 8.001 0 0 0 0 23.886v8h8a8.002 8.002 0 0 0 7.936-6.984A8.001 8.001 0 0 0 23.886 32h8v-8a8.002 8.002 0 0 0-6.984-7.936A8.001 8.001 0 0 0 32 8.114v-8h-8a8.001 8.001 0 0 0-7.936 6.984A8.001 8.001 0 0 0 8.114 0Z",
"M16.062 14.697C15.399 6.47 8.512 0 .114 0c0 8.359 6.41 15.22 14.582 15.938C6.47 16.601 0 23.488 0 31.886c8.359 0 15.22-6.41 15.938-14.582C16.601 25.53 23.488 32 31.886 32c0-8.359-6.41-15.22-14.582-15.938C25.53 15.399 32 8.512 32 .114c-8.359 0-15.22 6.41-15.938 14.582ZM16 16Z",
"M15.996 16C7.161 15.998 0 8.835 0 0h32c0 8.835-7.161 15.998-15.996 16C24.839 16.002 32 23.165 32 32H0c0-8.835 7.161-15.998 15.996-16Z"
]
}
static get backgroundColors() {
return ['F7F9FC', 'EEEDFD', 'FFEBEE', 'FDEFE2', 'E7F9F3', 'EDEEFD', 'ECFAFE', 'F2FFD1', 'FFF7E0', 'FDF1F7', 'EAEFE6', 'E0E6EB', 'E4E2F3', 'E6DFEC', 'E2F4E8', 'E6EBEF', 'EBE6EF', 'E8DEF6', 'D8E8F3', 'ECE1FE']
}
static get textColors() {
return ['060A23', '4409B9', 'BD0F2C', 'C56511', '216E55', '05128A', '1F84A3', '526E0C', '935F10', '973562', '69785E', '2D3A46', '280F6D', '37364F', '363548', '4D176E', 'AB133E', '420790', '222A54', '192251'];
}
static get shapeColors() {
return ['060A23', '5E36F5', 'E11234', 'E87917', '3EA884', '0618BC', '0FBBE6', '87B80A', 'FFC933', 'EE77AF', '69785E', '2D3A46', '280F6D', '37364F', '363548', '4D176E', 'AB133E', '420790', '222A54', '192251'];
}
static get targets() {
return super.targets.concat(["text", "revert", "type"])
}
static get values() {
return {
shape: { type: Boolean, default: true },
}
}
connect() {
this.userChoseFile = this._determineIfUserChoseFile()
if (!this.userChoseFile) this.revertTarget.setAttribute('hidden', true)
}
generate(event, value = null) {
if (this.userChoseFile) return
// NOTE: `value ||=` will assign if `value` equals `""`
value = value == null ? event.currentTarget.value : value
let svg
if (this.shapeValue) {
svg = this._generateShape(value)
} else {
svg = this._generateInitials(value)
}
this._attach(svg, value)
this.preview()
}
fileChosen() {
this.userChoseFile = true
this.revertTarget.removeAttribute('hidden')
this.typeTarget.setAttribute('hidden', true)
}
reset(event) {
this.inputTarget.value = null
this.userChoseFile = false
this.generate(null, this.textTarget.value)
this.revertTarget.setAttribute('hidden', true)
this.typeTarget.removeAttribute('hidden')
this.inputTarget.focus()
}
toggleType(event) {
this.shapeValue = !this.shapeValue
this.generate(null, this.textTarget.value)
}
setTypeToInitials(event) {
this.shapeValue = false
this.generate(null, this.textTarget.value)
}
setTypeToShape(event) {
this.shapeValue = true
this.generate(null, this.textTarget.value)
}
_generateShape(value) {
const key = this._randomNumber({
value: value,
min: 0,
max: (this.constructor.textColors.length - 1)
});
const shapeKey = this._randomNumber({
value: value,
min: 0,
max: (this.constructor.shapePaths.length - 1)
});
const backgroundColor = this.constructor.backgroundColors[key];
const shapeColor = this.constructor.shapeColors[key];
const shapePath = this.constructor.shapePaths[shapeKey];
return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 48 48' fill='#${shapeColor}' style='background-color:#${backgroundColor}'><path d='${shapePath}'></path></svg>`
}
_generateInitials(value) {
const key = this._randomNumber({
value: value,
min: 0,
max: (this.constructor.textColors.length - 1)
});
const backgroundColor = this.constructor.backgroundColors[key]
const textColor = this.constructor.textColors[key]
const string = String(value).toUpperCase()
let initials
if (/\s/.test(string)) {
initials = string.trim().split(/\s+/).map(word => word.charAt(0)).slice(0, 2).join('')
} else {
initials = string.substring(0, 2)
}
return `<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 48 48' fill='#${textColor}' style='background-color:#${backgroundColor}'><text x="16" y="16" dominant-baseline="central" text-anchor="middle" font-size="20" font-family="sans-serif">${initials}</text></svg>`
}
_attach(svg) {
// Create a new File object
const avatarFile = new File(
[svg],
'avatar.svg',
{
type: 'image/svg+xml',
lastModified: new Date(),
}
);
// Now let's create a DataTransfer to get a FileList
const dataTransfer = new DataTransfer();
dataTransfer.items.add(avatarFile);
this.inputTarget.files = dataTransfer.files;
}
_determineIfUserChoseFile() {
if (this.imageTarget.getAttribute('src') == "") return false
if (this.imageTarget.getAttribute('src').startsWith("data:")) return false
if (this.imageTarget.getAttribute('src').includes("teamos-auto-generated-avatar-for")) return false
return true
}
_randomNumber(opts) {
var value = opts.value,
min = opts.min,
max = opts.max;
var random = this._convertStringToFloat(value);
return this._constrainFloatToRange({
random: random,
min: min,
max: max
});
}
// https://github.com/macmcmeans/aleaPRNG
// https://github.com/nusu/avvvatars
// https://github.com/nquinlan/better-random-numbers-for-javascript-mirror/tree/master/support/js
// mirroring parts of http://baagoe.com/en/RandomMusings/javascript/
_convertStringToFloat( data ) {
const two_to_the_pos_thirty_two = 4294967296 // 0x100000000, 2^32
const two_to_the_neg_thirty_two = 2.3283064365386963e-10; // 2^-32
let n = 4022871197; // 0xefc8249d
let string = data.toString();
// cache the length
for( var i = 0, l = data.length; i < l; i++ ) {
n += string.charCodeAt( i );
var h = 0.02519603282416938 * n;
n = h >>> 0;
h -= n;
h *= n;
n = h >>> 0;
h -= n;
n += h * two_to_the_pos_thirty_two; // 0x100000000 2^32
}
return ( n >>> 0 ) * two_to_the_neg_thirty_two; // 2^-32
};
_constrainFloatToRange(opts) {
var random = opts.random,
min = opts.min,
max = opts.max;
return Math.floor(random * (max - min + 1) + min);
}
}
const application = Stimulus.Application.start()
application.register('avatar', AvatarController)
Also see: Tab Triggers