Showing and not showing the shopping cart item count

Showing and not showing the shopping cart item count - javascript

Using the following codes, I display the number of products in the shopping cart numerically next to the shopping cart icon.
HTML:
<div class="ico-shop">
<a href="<?php echo wc_get_cart_url(); ?>">
<button class="ico-shop_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
</button>
<span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
</a>
</div>
CSS:
.ico-shop button {
background: none;
border: none;
outline: none;
list-style: none;
padding-right: 17px;
border-right: 2px solid #afb1b5;
}
.ico-shop {
position: relative;
}
.counting_cart_items {
position: absolute;
top: 18px;
right: 3px;
font-size: 12px;
background: #52abff;
color: #fff;
text-shadow: none;
padding: 1px 7px;
border-radius: 50%;
}
PHP (In the function file):
function custom_cart_count_fragments( $fragments ) {
$fragments[ 'div.cart-totals' ] = '<div class="cart-totals">' . WC()->cart->get_cart_contents_count() . '</div>';
return $fragments;
}
Result:
But I don't want this number to be displayed when there are no items in the cart.
For this purpose, I wrote the following script code, which does not work:
script:
var cart_item = document.querySelector(".counting_cart_items");
$(cart_item).each(function () {
if ($(this) == 0) {
$(this).css("display", "none");
} else {
$(this).css("display", "block");
}
});
Is there a way to solve this problem?

Why not something like
<div class="ico-shop">
<a href="<?php echo wc_get_cart_url(); ?>">
<button class="ico-shop_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16" >
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
</svg>
</button>
<?php if (WC()->cart->get_cart_contents_count() > 0) { ?>
<span class="counting_cart_items"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
<?php } ?>
</a>
</div>
Or (only pertinent line included here)
<span class="counting_cart_items" style="display: <?php echo (WC()->cart->get_cart_contents_count() > 0 ? "block" : "none"); ?>><?php echo WC()->cart->get_cart_contents_count(); ?></span>
Alternatively, you could give the span an ID, then use document.getElementByID(<id>).style.display = <block/none>. I suspect $(this) == 0 may also not be working as you intend it to. I would need more information to comment on how to do more in JS

Related

How to select all elements except the one hovered using Vanilla Javascript?

I am trying to create a social sharing box. Here is my code so far:
const icon = document.querySelectorAll(".icon");
const box = document.querySelector(".social-box");
Array.from(icon).map((i) => {
i.addEventListener("mouseover", function(e) {
const el = e.target;
// el.style.fill = el.getAttribute('data-color');
el.style.backgroundColor = el.getAttribute("data-color");
});
i.addEventListener("mouseout", function(e) {
let obj = e.relatedTarget;
while (obj != null) {
if (obj == this) {
return;
}
obj = obj.parentNode;
}
// console.log(e.target)
const el = e.target;
el.style.backgroundColor = "";
});
});
body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
min-height: 100vh;
background-color: whitesmoke;
color: #fff;
}
.social-box {
width: 800px;
min-height: 60px;
background-color: #fff;
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 8px;
background-color: #fff;
transition: all .1s ease-out;
box-shadow: 0 2px 9px 5px rgba(0, 0, 0, 0.1), 0 4px 5px 0 rgba(0, 0, 0, 0.014), 0 4px 15px 0 rgba(0, 0, 0, 0.09);
overflow: hidden;
cursor: pointer;
}
div span {
position: absolute;
left: 10px;
opacity: 0;
/* transition: all .1s ease-out; */
}
.social-box:hover div {
background-color: currentcolor;
fill: black;
}
.icon {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
align-self: stretch;
flex: 100%;
transition: all .2s ease;
fill: white;
}
.twitter {
background-color: #1DA1F2;
}
.facebook {
background-color: #1877F2;
}
.reddit {
background-color: #f04b23;
}
div.whatsapp {
background-color: #71C169;
}
.flipboard {
background-color: #bf2626;
}
.buffer {
background-color: #323b43;
}
.hackernews {
background-color: #d85623;
}
.email {
background-color: #6bcce9;
}
.pocket {
background-color: #ef4056;
}
.linkedin {
background-color: #2767b1;
}
div .icon:hover {
/* background-color: red; */
fill: white;
flex: 300%;
}
div .icon:hover span {
position: relative;
opacity: 1;
}
#media (max-width: 800px) {
.social-box {
max-width: 150px;
flex-direction: column;
}
.icon {
padding: 20px 20px 20px 0;
}
}
<div class="social-box">
<div data-color="#1da1f2" class="icon twitter">
<svg role="img" fill="currenColor" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" /></svg>
<span>Twitter</span></div>
<div data-color="#f04b23" class="icon reddit">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" /></svg>
<span>Reddit</span></div>
<div data-color="#71c169" class="icon whatsapp">
<svg width="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" /></svg>
<span>Whatsapp</span></div>
<div data-color="#1877f2" class="icon facebook">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" /></svg>
<span>Facebook<span></div>
<div data-color="#bf2626" class="icon flipboard">
<svg width="24" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0v24h24V0H0zm19.2 9.6h-4.8v4.8H9.6v4.8H4.8V4.8h14.4v4.8z" /></svg>
<span>Flipboard</span></div>
<div data-color="#323b43" class="icon buffer">
<svg width="24" height="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.784 18.24c.287.142.287.267 0 .374l-11.357 5.223c-.287.145-.57.145-.854 0L.213 18.614c-.284-.107-.284-.232 0-.375l2.722-1.23c.284-.14.57-.14.852 0l7.787 3.573c.285.14.57.14.854 0l7.787-3.574c.283-.14.568-.14.852 0l2.717 1.23zm0-6.454c.287.143.287.285 0 .426L12.427 17.44c-.287.104-.57.104-.854 0L.213 12.21c-.284-.143-.284-.284 0-.426l2.722-1.227c.284-.144.57-.144.852 0l7.787 3.57c.285.144.57.144.854 0l7.787-3.57c.283-.144.568-.144.852 0l2.717 1.226zM.214 5.76c-.285-.143-.285-.267 0-.375L11.574.16c.283-.14.57-.14.852 0l11.358 5.23c.287.107.287.232 0 .375l-11.357 5.223c-.287.143-.57.143-.854 0L.213 5.76z" /></svg>
<span>Buffer</span>
</div>
<div data-color="#d85623" class="icon hackernews">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z" /></svg>
<span>HackerNews</span></div>
<div data-color="#6bcce9" class="icon email">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.585 5.267c1.834 0 3.558.811 4.824 2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0 1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941 1.029.543 1.521-1.564 3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971 6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424 4.744 1.769-.715 2.586 1.676.749 2.457-2.776 1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847 6.093 5.62 2.245 10.567-.698 17.09.117 21.022 4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816 1.42-4.516.037-4.498-2.031l-.019-.678c-1.265 1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812 0-3.659 3.189-6.885 6.814-6.885zm4.561 6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745 0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256 4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z" /></svg>
<span>Email</span></div>
<div data-color="#ef4056" class="icon pocket">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.813 10.259l-5.646 5.419c-.32.305-.73.458-1.141.458-.41 0-.821-.153-1.141-.458l-5.646-5.419c-.657-.628-.677-1.671-.049-2.326.63-.657 1.671-.679 2.325-.05l4.511 4.322 4.517-4.322c.66-.631 1.697-.607 2.326.049.631.645.615 1.695-.045 2.326l-.011.001zm5.083-7.546c-.299-.858-1.125-1.436-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023c1.411 1.03 2.989 1.728 4.694 2.072.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029 1.633-.36 3.148-1.036 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z" /></svg>
<span>Pocket</span></div>
<div data-color="#2767b1" class="icon linkedin">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
<span>Linkedin</span></div>
</div>
https://codepen.io/codewithjalaj/pen/rNxRzYR
When I hover on one of the icons I want the fill color of the rest of the icons changed to the color present in the data-color atrribute.
I tried to do something like this element.style.fill = element.dataset.color in javascript but it changes the color of all the icons. Is there any way to select all the icons except the hovered one?

What you can do is basically. Keep a reference to the icons array. In the mouse hover event filter your array to exclude the hovered item.
const icons = Array.from(icon);
icons.map((i) => {
i.addEventListener("mouseover", function (e) {
const el = e.target;
el.style.backgroundColor = el.getAttribute("data-color");
icons.filter(x=>x !== el).
forEach(r=>r.style.fill= r.getAttribute("data-color")) // here the rest of the items are set.
});

To change color of the rest of the icons, I selected them with querySelectorAll, took each of them by forEach and changed their color. Then I changed the selected one, so It looks like everything but the selected is changed.
I also removed the rest of the code, changing the colors back, since its not part of the question.
const icon = document.querySelectorAll(".icon");
const box = document.querySelector(".social-box");
Array.from(icon).map((i) => {
i.addEventListener("mouseover", function (e) {
const el = e.target;
const elems = document.querySelectorAll('[data-color]');
elems.forEach(el => {
el.style.backgroundColor = el.getAttribute("data-color");
console.log(el.getAttribute("data-color"));
});
el.style.backgroundColor = 'white';
});
});
body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
min-height: 100vh;
background-color: whitesmoke;
color: #fff;
}
.social-box {
width: 800px;
min-height: 60px;
background-color: #fff;
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 8px;
background-color: #fff;
transition: all .1s ease-out;
box-shadow: 0 2px 9px 5px rgba(0,0,0,0.1), 0 4px 5px 0 rgba(0,0,0,0.014), 0 4px 15px 0 rgba(0,0,0,0.09);
overflow: hidden;
cursor: pointer;
}
div span {
position: absolute;
left: 10px;
opacity: 0;
/* transition: all .1s ease-out; */
}
.social-box:hover div {
background-color: currentcolor;
fill: black;
}
.icon {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
align-self: stretch;
flex: 100%;
transition: all .2s ease;
fill: white;
}
.twitter {
background-color: #1DA1F2;
}
.facebook {
background-color: #1877F2;
}
.reddit {
background-color: #f04b23;
}
div.whatsapp {
background-color: #71C169;
}
.flipboard {
background-color: #bf2626;
}
.buffer {
background-color: #323b43;
}
.hackernews {
background-color: #d85623;
}
.email {
background-color: #6bcce9;
}
.pocket {
background-color: #ef4056;
}
.linkedin {
background-color: #2767b1;
}
div .icon:hover {
/* background-color: red; */
fill: white;
flex: 300%;
}
div .icon:hover span {
position: relative;
opacity: 1;
}
#media (max-width: 800px) {
.social-box {
max-width: 150px;
flex-direction: column;
}
.icon {
padding: 20px 20px 20px 0;
}
}
<div class="social-box">
<div data-color="#1da1f2" class="icon twitter">
<svg role="img" fill="currenColor" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" /></svg>
<span>Twitter</span></div>
<div data-color="#f04b23" class="icon reddit">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" /></svg>
<span>Reddit</span></div>
<div data-color="#71c169" class="icon whatsapp">
<svg width="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" /></svg>
<span>Whatsapp</span></div>
<div data-color="#1877f2" class="icon facebook">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" /></svg>
<span>Facebook<span></div>
<div data-color="#bf2626" class="icon flipboard">
<svg width="24" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0v24h24V0H0zm19.2 9.6h-4.8v4.8H9.6v4.8H4.8V4.8h14.4v4.8z" /></svg>
<span>Flipboard</span></div>
<div data-color="#323b43" class="icon buffer">
<svg width="24" height="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.784 18.24c.287.142.287.267 0 .374l-11.357 5.223c-.287.145-.57.145-.854 0L.213 18.614c-.284-.107-.284-.232 0-.375l2.722-1.23c.284-.14.57-.14.852 0l7.787 3.573c.285.14.57.14.854 0l7.787-3.574c.283-.14.568-.14.852 0l2.717 1.23zm0-6.454c.287.143.287.285 0 .426L12.427 17.44c-.287.104-.57.104-.854 0L.213 12.21c-.284-.143-.284-.284 0-.426l2.722-1.227c.284-.144.57-.144.852 0l7.787 3.57c.285.144.57.144.854 0l7.787-3.57c.283-.144.568-.144.852 0l2.717 1.226zM.214 5.76c-.285-.143-.285-.267 0-.375L11.574.16c.283-.14.57-.14.852 0l11.358 5.23c.287.107.287.232 0 .375l-11.357 5.223c-.287.143-.57.143-.854 0L.213 5.76z" /></svg>
<span>Buffer</span>
</div>
<div data-color="#d85623" class="icon hackernews">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z" /></svg>
<span>HackerNews</span></div>
<div data-color="#6bcce9" class="icon email">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.585 5.267c1.834 0 3.558.811 4.824 2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0 1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941 1.029.543 1.521-1.564 3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971 6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424 4.744 1.769-.715 2.586 1.676.749 2.457-2.776 1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847 6.093 5.62 2.245 10.567-.698 17.09.117 21.022 4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816 1.42-4.516.037-4.498-2.031l-.019-.678c-1.265 1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812 0-3.659 3.189-6.885 6.814-6.885zm4.561 6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745 0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256 4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z" /></svg>
<span>Email</span></div>
<div data-color="#ef4056" class="icon pocket">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.813 10.259l-5.646 5.419c-.32.305-.73.458-1.141.458-.41 0-.821-.153-1.141-.458l-5.646-5.419c-.657-.628-.677-1.671-.049-2.326.63-.657 1.671-.679 2.325-.05l4.511 4.322 4.517-4.322c.66-.631 1.697-.607 2.326.049.631.645.615 1.695-.045 2.326l-.011.001zm5.083-7.546c-.299-.858-1.125-1.436-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023c1.411 1.03 2.989 1.728 4.694 2.072.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029 1.633-.36 3.148-1.036 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z" /></svg>
<span>Pocket</span></div>
<div data-color="#2767b1" class="icon linkedin">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
<span>Linkedin</span></div>
</div>

I removed a couple of what appeared to be extraneous commands in i.addEventListener("mouseover", function(e) { and replaced them with a forEach that iterates over all elements with attribute data-color and styles each according to it's associated color specified in the data-color attribute.
I also commented out fill: black; in the .social-box:hover div css declaration. You may want to put that back, but I thought it worked better when not changing the button text to black especially since one of the buttons has a black background.
const icon = document.querySelectorAll(".icon");
const box = document.querySelector(".social-box");
Array.from(icon).map((i) => {
i.addEventListener("mouseover", function (e) {
let allMenuItems = document.querySelectorAll('[data-color]');
allMenuItems.forEach(menuItem);
});
function menuItem(item) {
item.style.backgroundColor = item.getAttribute("data-color");
}
i.addEventListener("mouseout", function (e) {
let obj = e.relatedTarget;
while (obj != null) {
if (obj == this) {
return;
}
obj = obj.parentNode;
}
});
});
body {
margin: 0;
padding: 0;
display: grid;
place-items: center;
min-height: 100vh;
background-color: whitesmoke;
color: #fff;
}
.social-box {
width: 800px;
min-height: 60px;
background-color: #fff;
display: flex;
justify-content: space-evenly;
align-items: center;
border-radius: 8px;
background-color: #fff;
transition: all .1s ease-out;
box-shadow: 0 2px 9px 5px rgba(0,0,0,0.1), 0 4px 5px 0 rgba(0,0,0,0.014), 0 4px 15px 0 rgba(0,0,0,0.09);
overflow: hidden;
cursor: pointer;
}
div span {
position: absolute;
left: 10px;
opacity: 0;
/* transition: all .1s ease-out; */
}
.social-box:hover div {
background-color: currentcolor;
/*fill: black;*/
}
.icon {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
align-self: stretch;
flex: 100%;
transition: all .2s ease;
fill: white;
}
.twitter {
background-color: #1DA1F2;
}
.facebook {
background-color: #1877F2;
}
.reddit {
background-color: #f04b23;
}
div.whatsapp {
background-color: #71C169;
}
.flipboard {
background-color: #bf2626;
}
.buffer {
background-color: #323b43;
}
.hackernews {
background-color: #d85623;
}
.email {
background-color: #6bcce9;
}
.pocket {
background-color: #ef4056;
}
.linkedin {
background-color: #2767b1;
}
div .icon:hover {
/* background-color: red; */
fill: white;
flex: 300%;
}
div .icon:hover span {
position: relative;
opacity: 1;
}
#media (max-width: 800px) {
.social-box {
max-width: 150px;
flex-direction: column;
}
.icon {
padding: 20px 20px 20px 0;
}
}
<div class="social-box">
<div data-color="#1da1f2" class="icon twitter">
<svg role="img" fill="currenColor" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" /></svg>
<span>Twitter</span></div>
<div data-color="#f04b23" class="icon reddit">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" /></svg>
<span>Reddit</span></div>
<div data-color="#71c169" class="icon whatsapp">
<svg width="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" /></svg>
<span>Whatsapp</span></div>
<div data-color="#1877f2" class="icon facebook">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" /></svg>
<span>Facebook<span></div>
<div data-color="#bf2626" class="icon flipboard">
<svg width="24" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0v24h24V0H0zm19.2 9.6h-4.8v4.8H9.6v4.8H4.8V4.8h14.4v4.8z" /></svg>
<span>Flipboard</span></div>
<div data-color="#323b43" class="icon buffer">
<svg width="24" height="24" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M23.784 18.24c.287.142.287.267 0 .374l-11.357 5.223c-.287.145-.57.145-.854 0L.213 18.614c-.284-.107-.284-.232 0-.375l2.722-1.23c.284-.14.57-.14.852 0l7.787 3.573c.285.14.57.14.854 0l7.787-3.574c.283-.14.568-.14.852 0l2.717 1.23zm0-6.454c.287.143.287.285 0 .426L12.427 17.44c-.287.104-.57.104-.854 0L.213 12.21c-.284-.143-.284-.284 0-.426l2.722-1.227c.284-.144.57-.144.852 0l7.787 3.57c.285.144.57.144.854 0l7.787-3.57c.283-.144.568-.144.852 0l2.717 1.226zM.214 5.76c-.285-.143-.285-.267 0-.375L11.574.16c.283-.14.57-.14.852 0l11.358 5.23c.287.107.287.232 0 .375l-11.357 5.223c-.287.143-.57.143-.854 0L.213 5.76z" /></svg>
<span>Buffer</span>
</div>
<div data-color="#d85623" class="icon hackernews">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z" /></svg>
<span>HackerNews</span></div>
<div data-color="#6bcce9" class="icon email">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M11.585 5.267c1.834 0 3.558.811 4.824 2.08v.004c0-.609.41-1.068.979-1.068h.145c.891 0 1.073.842 1.073 1.109l.005 9.475c-.063.621.64.941 1.029.543 1.521-1.564 3.342-8.038-.946-11.79-3.996-3.497-9.357-2.921-12.209-.955-3.031 2.091-4.971 6.718-3.086 11.064 2.054 4.74 7.931 6.152 11.424 4.744 1.769-.715 2.586 1.676.749 2.457-2.776 1.184-10.502 1.064-14.11-5.188C-.977 13.521-.847 6.093 5.62 2.245 10.567-.698 17.09.117 21.022 4.224c4.111 4.294 3.872 12.334-.139 15.461-1.816 1.42-4.516.037-4.498-2.031l-.019-.678c-1.265 1.256-2.948 1.988-4.782 1.988-3.625 0-6.813-3.189-6.813-6.812 0-3.659 3.189-6.885 6.814-6.885zm4.561 6.623c-.137-2.653-2.106-4.249-4.484-4.249h-.09c-2.745 0-4.268 2.159-4.268 4.61 0 2.747 1.842 4.481 4.256 4.481 2.693 0 4.464-1.973 4.592-4.306l-.006-.536z" /></svg>
<span>Email</span></div>
<div data-color="#ef4056" class="icon pocket">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.813 10.259l-5.646 5.419c-.32.305-.73.458-1.141.458-.41 0-.821-.153-1.141-.458l-5.646-5.419c-.657-.628-.677-1.671-.049-2.326.63-.657 1.671-.679 2.325-.05l4.511 4.322 4.517-4.322c.66-.631 1.697-.607 2.326.049.631.645.615 1.695-.045 2.326l-.011.001zm5.083-7.546c-.299-.858-1.125-1.436-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023c1.411 1.03 2.989 1.728 4.694 2.072.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029 1.633-.36 3.148-1.036 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z" /></svg>
<span>Pocket</span></div>
<div data-color="#2767b1" class="icon linkedin">
<svg role="img" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
<span>Linkedin</span></div>
</div>

Cannot interact with button using javascript

I am trying to adapt some js to build an interactive quiz. The quiz should allow users to select an answer, if they click submit they move on to the next question. If they get the answer wrong a feedback button shows up, if they click the button they get some text output.
There is also a hint button at the bottom of the page if the users click the button a 'hint' pops up.
It would be difficult to explain what the issue I am having is without showing some visuals
This is my desired output:
and the bottom:
This is what I am currently getting:
The hint bubble is only supposed to show up after I manually click it, however currently the bubble appears without any user interaction.
This is what my javascript looks like:
var star = '<svg id="star" x="0px" y="0px" viewBox="0 0 512.001 512.001"><path fill="#ffdc64" d="M499.92 188.26l-165.84-15.38L268.2 19.9c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35L256 413.2l143.2 85.03c10.03 5.96 22.32-2.97 19.76-14.35L382.34 321.4l125.12-109.92c8.77-7.7 4.07-22.14-7.54-23.22z"/><path fill="#ffc850" d="M268.2 19.91c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35l31.97-18.98c4.42-182.1 89.03-310.33 156.02-383.7L268.2 19.92z"/></svg>';
//Initialisation of variables
var currentQuestion = -1;
var tokens = 200;
var questions =[
{
"id":"q0",
"topic":"Sciences",
"weight":2,
"questionTxt": "Who created the weightlessness theory (Gravity)?",
"hint": "I was an English mathematician, physicist, astronomer, theologian.",
"options":[
{
"optionTxt": "Galileo",
"answer": false
},
{
"optionTxt": "Newton",
"answer": true
},
{
"optionTxt": "Maxwell",
"answer": false
},
{
"optionTxt": "Euler",
"answer": false
}
],
"feedback":"I was an English mathematician, physicist, astronomer, theologian. I was Isaac Newton. Legends said that I discovered it thanks to an apple falling on the floor."
},
{
"id":"q1",
"topic":"Geography",
"weight":1,
"questionTxt": "What is the capital city of Chile?",
"hint": "It is begining with an 'S'.",
"options":[
{
"optionTxt": "Santiago",
"answer": true
},
{
"optionTxt": "San José",
"answer": false
},
{
"optionTxt": "Buenos Aires",
"answer": false
},
{
"optionTxt": "San Diego",
"answer": false
}
],
"feedback":"The capital city of Chile is Santiago."
},
{
"id":"q2",
"topic":"History",
"weight":3,
"questionTxt": "Who was able to write in reverse?",
"hint": "I was very appreciated by Francois 1er.",
"options":[
{
"optionTxt": "Archimedes",
"answer": false
},
{
"optionTxt": "Leonardo di Vinci",
"answer": true
},
{
"optionTxt": "Darwin",
"answer": false
},
{
"optionTxt": "Einstein",
"answer": false
}
],
"feedback":"I was very appreciated by Francois 1er in France. I am Leonardo di Vinci. I did this system of writting in order to protect my ideas! We are able to read my notes only with a mirror."
}
];
var skills = [];
for(var i = 0; i<questions.length; i++){
var topic = questions[i].topic;
if(skills.length===0){
skills.push(questions[i].topic);
}else{
if(skills.findIndex(topics => topics === topic)<0){
skills.push(questions[i].topic)
}
}
}
for(var i = 0; i<skills.length; i++){
$('#skills').append('<div class="skill '+skills[i].toLowerCase()+'">'+skills[i]+'</div>')
}
$('#money').text(tokens);
if(currentQuestion==-1){
questionInit();
}
//--------------------------------------------------------------------------------------
//Logic for the options
$('.option').click(function(){
//only one option can be checked
$('.option').removeClass('checked');
$(this).toggleClass('checked');
var questionSelected = $('#question-options .checked').length;
if(questionSelected===1){
$('#question .submit').css('display','flex');
}
});
//end logic for options
//--------------------------------------------------------------------------------------
//logic for end of test + animations
$('#question .submit').click(function(){
$('.hint, #hint').hide();
$('#question .submit').css('display','none');
if(currentQuestion === questions.length-1){
$('.nextQ').hide();
}else{
$('#question .nextQ').css('display','flex');
}
$('#question .feedback').css('display','flex');
$('.option').addClass('disabled');
$('.option').find('.textOpt').toggleClass('hide');
//add for each options if this is or not the right answer - For only 4 options
// for(var i=0; i<4; i++){
// console.log($('#opt'+i).data("result"))
// }
if($('.checked').data("r")== true){
var currentTopic = questions[currentQuestion].topic.toLowerCase();
$('.'+currentTopic).append(star);
}
});
//end of logic for end of test + animations
//logic for the feedback
$('.feedback').click(function(){
$(this).addClass('disabled');
var feedback = $('#feedback');
var feedbackText = $('#feedback p');
var feedbackTitle = $('#feedback h1');
$('#feedback').append('<h2>Feedback</h2><p>'+questions[currentQuestion].feedback+'</p>');
TweenLite.to(feedback, 0.5, {opacity:"1"});
});
//Logic for the hint button
$('.hint').click(function(){
// $(this).addClass('disabled');
var hint = $('#hint');
if(tokens!==0){
if(hint.hasClass('hide')){
tokens=tokens-100;
$('#money').text(tokens);
}
hint.toggleClass('hide');
}else if(tokens===0 && hint.hasClass('hide')==false){
hint.toggleClass('hide');
}
});
//Logic for the next button
$('.nextQ').click(function(){
$('.feedback, .hint').removeClass('disabled');
$('.hint, #hint').hide();
$('.option').find('svg').remove();
questionInit();
});
function questionInit(){
//reinitialise for each questions the variables and the style + some info in the console
$('.option').removeClass('checked');
$('#question .btn').css('display','none');
$('#feedback').empty();
$('#hint').empty();
$('#hint').addClass('hide');
$('.feedback, .hint, .option').removeClass('disabled');
$('.hint, #hint').show();
max=0;
currentQuestion++;
console.warn("--------------------------------------------------------")
console.warn("Question "+ (currentQuestion + 1));
console.warn(questions[currentQuestion].questionTxt);
console.warn("- - - - - - - - - - - - - - - - - - - ")
//--------------------------------------------------------------------------------------
//append the question from the array question
$('#question-text h1').html("Question "+ (currentQuestion + 1) + " - "+questions[currentQuestion].topic);
$('#question-text p').html(questions[currentQuestion].questionTxt);
$('#hint').append('<h2>Hint</h2><p>'+questions[currentQuestion].hint+'</p>');
var topic = questions[currentQuestion].topic;
var topicItem = '.skill.'+topic.toLowerCase();
for(var i=0; i<4; i++){
var opt = '#opt'+i;
var label = i+1;
var text = questions[currentQuestion].options[i].optionTxt;
var data = questions[currentQuestion].options[i].answer;
$(opt).html('<div class="label" data-label="'+label+'"></div>'+'<div class="textOpt">'+text+'</div>');
$(opt).data('r', data);
if($(opt).data("r") === true){
$(opt).find('.textOpt').addClass('right hide');
}else{
$(opt).find('.textOpt').addClass('wrong hide');
}
}
}
and my html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'second/css/app/quiz_control.css' %}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'second/js/app/quiz_control.js' %}" defer></script>
</head>
</head>
<div id='strand'>
<div id='profile'>
<div id='picture'></div>
<div id='tokens'>Your hints: <span id='money'></span>/200</div>
<p><i>Each hint is 100</i></p>
<p>You are a star in:</p>
<div id='skills'></div>
</div>
<div id='quiz'>
<div id='question'>
<div id='question-text'>
<h1></h1>
<p></p>
</div>
<div id='question-options'>
<div class='option' id='opt0' data-r=''></div>
<div class='option' id='opt1' data-r=''></div>
<div class='option' id='opt2' data-r=''></div>
<div class='option' id='opt3' data-r''></div>
</div>
<div class='btn-wrapper'>
<div class='submit btn'>Submit</div>
<div class='hint btn'></div>
<div class='feedback btn'>Feedback</div>
<div class='nextQ btn'>Next</div>
</div>
<div class='feedbackTxt'>
<div id='hint' class='hide'></div>
<div id='feedback'></div>
</div>
</div>
</div>
</div>
</html>
This is probably a rookie question, but I have extremely limited experience with javascript.

When your css have commands like &.hide it have to be processed before being served to the browser. To do that in codepen change settings accordingly:
On your site, you have to compile using SCSS before uploading to the server, or use a pipeline to do it automatically, if your host allow it.
Here's the pen with the preprocessor applied. See that I haven't touched your code https://codepen.io/bortao/pen/eYNqdWr

Check out my snippet please, it should work:
$(function(){
var star = '<svg id="star" x="0px" y="0px" viewBox="0 0 512.001 512.001"><path fill="#ffdc64" d="M499.92 188.26l-165.84-15.38L268.2 19.9c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35L256 413.2l143.2 85.03c10.03 5.96 22.32-2.97 19.76-14.35L382.34 321.4l125.12-109.92c8.77-7.7 4.07-22.14-7.54-23.22z"/><path fill="#ffc850" d="M268.2 19.91c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35l31.97-18.98c4.42-182.1 89.03-310.33 156.02-383.7L268.2 19.92z"/></svg>';
//Initialisation of variables
var currentQuestion = -1;
var tokens = 200;
var questions =[
{
"id":"q0",
"topic":"Sciences",
"weight":2,
"questionTxt": "Who created the weightlessness theory (Gravity)?",
"hint": "I was an English mathematician, physicist, astronomer, theologian.",
"options":[
{
"optionTxt": "Galileo",
"answer": false
},
{
"optionTxt": "Newton",
"answer": true
},
{
"optionTxt": "Maxwell",
"answer": false
},
{
"optionTxt": "Euler",
"answer": false
}
],
"feedback":"I was an English mathematician, physicist, astronomer, theologian. I was Isaac Newton. Legends said that I discovered it thanks to an apple falling on the floor."
},
{
"id":"q1",
"topic":"Geography",
"weight":1,
"questionTxt": "What is the capital city of Chile?",
"hint": "It is begining with an 'S'.",
"options":[
{
"optionTxt": "Santiago",
"answer": true
},
{
"optionTxt": "San José",
"answer": false
},
{
"optionTxt": "Buenos Aires",
"answer": false
},
{
"optionTxt": "San Diego",
"answer": false
}
],
"feedback":"The capital city of Chile is Santiago."
},
{
"id":"q2",
"topic":"History",
"weight":3,
"questionTxt": "Who was able to write in reverse?",
"hint": "I was very appreciated by Francois 1er.",
"options":[
{
"optionTxt": "Archimedes",
"answer": false
},
{
"optionTxt": "Leonardo di Vinci",
"answer": true
},
{
"optionTxt": "Darwin",
"answer": false
},
{
"optionTxt": "Einstein",
"answer": false
}
],
"feedback":"I was very appreciated by Francois 1er in France. I am Leonardo di Vinci. I did this system of writting in order to protect my ideas! We are able to read my notes only with a mirror."
}
];
var skills = [];
for(var i = 0; i<questions.length; i++){
var topic = questions[i].topic;
if(skills.length===0){
skills.push(questions[i].topic);
}else{
if(skills.findIndex(topics => topics === topic)<0){
skills.push(questions[i].topic)
}
}
}
for(var i = 0; i<skills.length; i++){
$('#skills').append('<div class="skill '+skills[i].toLowerCase()+'">'+skills[i]+'</div>')
}
$('#money').text(tokens);
if(currentQuestion==-1){
questionInit();
}
//--------------------------------------------------------------------------------------
//Logic for the options
$('.option').click(function(){
//only one option can be checked
$('.option').removeClass('checked');
$(this).toggleClass('checked');
var questionSelected = $('#question-options .checked').length;
if(questionSelected===1){
$('#question .submit').css('display','flex');
}
});
//end logic for options
//--------------------------------------------------------------------------------------
//logic for end of test + animations
$('#question .submit').click(function(){
$('.hint, #hint').hide();
$('#question .submit').css('display','none');
if(currentQuestion === questions.length-1){
$('.nextQ').hide();
}else{
$('#question .nextQ').css('display','flex');
}
$('#question .feedback').css('display','flex');
$('.option').addClass('disabled');
$('.option').find('.textOpt').toggleClass('hide');
//add for each options if this is or not the right answer - For only 4 options
// for(var i=0; i<4; i++){
// console.log($('#opt'+i).data("result"))
// }
if($('.checked').data("r")== true){
var currentTopic = questions[currentQuestion].topic.toLowerCase();
$('.'+currentTopic).append(star);
}
});
//end of logic for end of test + animations
//logic for the feedback
$('.feedback').click(function(){
$(this).addClass('disabled');
var feedback = $('#feedback');
var feedbackText = $('#feedback p');
var feedbackTitle = $('#feedback h1');
$('#feedback').append('<h2>Feedback</h2><p>'+questions[currentQuestion].feedback+'</p>');
TweenLite.to(feedback, 0.5, {opacity:"1"});
});
$('.hint').click(function(){
$("#hint").toggleClass('hintTrigger');
})
//Logic for the hint button
$('.hint').click(function(){
// $(this).addClass('disabled');
var hint = $('#hint');
if(tokens!==0){
if(hint.hasClass('hide')){
tokens=tokens-100;
$('#money').text(tokens);
}
hint.toggleClass('hide');
}else if(tokens===0 && hint.hasClass('hide')==false){
hint.toggleClass('hide');
}
});
//Logic for the next button
$('.nextQ').click(function(){
$('.feedback, .hint').removeClass('disabled');
$('.hint, #hint').hide();
$('.option').find('svg').remove();
questionInit();
});
function questionInit(){
//reinitialise for each questions the variables and the style + some info in the console
$('.option').removeClass('checked');
$('#question .btn').css('display','none');
$('#feedback').empty();
$('#hint').empty();
$('#hint').addClass('hide');
$('.feedback, .hint, .option').removeClass('disabled');
$('.hint.btn').show();
max=0;
currentQuestion++;
console.warn("--------------------------------------------------------")
console.warn("Question "+ (currentQuestion + 1));
console.warn(questions[currentQuestion].questionTxt);
console.warn("- - - - - - - - - - - - - - - - - - - ")
//--------------------------------------------------------------------------------------
//append the question from the array question
$('#question-text h1').html("Question "+ (currentQuestion + 1) + " - "+questions[currentQuestion].topic);
$('#question-text p').html(questions[currentQuestion].questionTxt);
$('#hint').append('<h2>Hint</h2><p>'+questions[currentQuestion].hint+'</p>');
var topic = questions[currentQuestion].topic;
var topicItem = '.skill.'+topic.toLowerCase();
for(var i=0; i<4; i++){
var opt = '#opt'+i;
var label = i+1;
var text = questions[currentQuestion].options[i].optionTxt;
var data = questions[currentQuestion].options[i].answer;
$(opt).html('<div class="label" data-label="'+label+'"></div>'+'<div class="textOpt">'+text+'</div>');
$(opt).data('r', data);
if($(opt).data("r") === true){
$(opt).find('.textOpt').addClass('right hide');
}else{
$(opt).find('.textOpt').addClass('wrong hide');
}
}
}
});
#strand{
display:flex;
flex-direction:row;
width:80%;
height: 600px;
background:#e6dedd;
-webkit-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
-moz-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
box-shadow: 3px 3px 15px 0px rgba(34,40,49,0.7);
margin:8% auto 0 auto;
}
#profile{
width: 40%;
height: 100%;
background:#9fa6a0;
display:flex;
flex-direction:column;
padding:0 20px;
color:white;
justify-content: flex-start;
align-items: center;
#picture{
width: 70%;
margin-top:20px;
height: 165px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='girl' x='0px' y='0px' viewBox='0 0 464 464'%3E%3Cpath fill='%23e69f5f' d='M400 400s-58.9 24-168 24-168-24-168-24l21.16-264.46C91.28 58.99 155.18 0 231.96 0h.07c76.79 0 140.69 59 146.81 135.53L400 400z'/%3E%3Cpath fill='%23e09156' d='M274.81 6.38A147.06 147.06 0 0 0 232.03 0h-.06C155.18 0 91.27 59 85.16 135.53L64 400s28.88 11.71 83.47 18.77L274.8 6.37z'/%3E%3Cpath fill='%23ffd7a3' d='M383.39 414l-1.53-5.24a5.27 5.27 0 0 0-5.73-3.75l-5.33-40a40 40 0 0 0-21.76-30.49l-17.23-8.61a5.05 5.05 0 0 0-6.77 2.29l-34.1-12.55A16 16 0 0 1 280 300.47v-25.8l34.46-14.36A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3L184 274.68v25.8a16 16 0 0 1-10.94 15.18l-34.1 12.54a5.03 5.03 0 0 0-6.74-2.3l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-5.33 40a5.28 5.28 0 0 0-5.73 3.76l-1.53 5.22a5.28 5.28 0 0 0 3.59 6.55l11.8 3.44V448a16 16 0 0 0 16 16h240a16 16 0 0 0 16-16v-24.02l11.8-3.44a5.28 5.28 0 0 0 3.59-6.55z'/%3E%3Cpath fill='%23fdc88e' d='M280 274.67h-96v25.8a16 16 0 0 1-7.75 13.7c66.92 11.56 103.75-39.5 103.75-39.5z'/%3E%3Cpath fill='%23ffe1b2' d='M344 160v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80 80 0 0 0 61.54 0l51.7-21.54A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48z'/%3E%3Cpath fill='%23623f33' d='M288 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e4b07b' d='M232 248.22c-14.22 0-27.53-3.5-36.5-9.6a8 8 0 1 1 9-13.23c6.29 4.28 16.57 6.83 27.5 6.83s21.21-2.56 27.5-6.83a8 8 0 1 1 9 13.22c-8.97 6.1-22.28 9.6-36.5 9.6z'/%3E%3Cpath fill='%23ffd7a3' d='M162 243.72a37.5 37.5 0 0 1-10-25.62v-34.42c43.63-3.3 102.53-32.2 137.82-59.86L280 114s-71 46-160 46a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80.12 80.12 0 0 0 7.73 2.74c-22.85-16.7-38.06-31.31-46.97-40.87z'/%3E%3Cpath fill='%23ff6473' d='M377.2 412.94L370.8 365a40 40 0 0 0-21.76-30.49l-17.23-8.62a5.1 5.1 0 0 0-7.19 3.37C313.53 370.03 276.27 400 232 400c-44.29 0-81.56-29.99-92.64-70.76a5.07 5.07 0 0 0-7.14-3.35l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-6.51 48.84c21.13 7.27 57.3 18.15 57.3 18.15v32h176v-32l57.2-19.06z'/%3E%3Cpath fill='%23f05467' d='M143.8 429.56a47.91 47.91 0 0 0-9.4-26.36l-37.56-50.08a38.98 38.98 0 0 0-3.64 11.9l-6.34 47.55 56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M80.61 414a5.28 5.28 0 0 0 3.59 6.54l59.8 17.44V432c0-3.78-.6-7.48-1.46-11.11l-53.86-15.71a5.28 5.28 0 0 0-6.54 3.59l-1.53 5.22z'/%3E%3Cpath fill='%23f05467' d='M320.2 429.56a47.91 47.91 0 0 1 9.4-26.36l37.56-50.08a38.98 38.98 0 0 1 3.64 11.9l6.34 47.55-56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M383.39 414a5.28 5.28 0 0 1-3.59 6.54L320 437.98V432c0-3.78.6-7.48 1.46-11.11l53.86-15.71c2.8-.82 5.73.79 6.54 3.59l1.53 5.22z'/%3E%3Cpath fill='%23623f33' d='M176 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e69f5f' d='M103.73 112.98l.27 53.07c75.5 0 138.1-23.59 179.17-44.83C270.4 135.06 251.2 153.91 224 176c0 0 71.23-28.32 111.13-63.5a94.5 94.5 0 0 0-94.5-94.5h-42.4c-52.38 0-94.77 42.6-94.5 94.98z'/%3E%3Cpath fill='%23e09156' d='M269.79 22.59a94.4 94.4 0 0 0-29.16-4.6h-42.4a94.5 94.5 0 0 0-94.5 94.99l.27 53.08c22.02 0 42.93-2.02 62.53-5.39C238.81 105.33 269.67 22.9 269.8 22.6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-origin: content-box;
background-position:center;
}
#tokens{
font-weight:bold;
font-size:26px;
}
#skills{
width: 100%;
margin-top:20px;
display:flex;
flex-direction:column;
justify-content:flex-start;
text-align:left;
.skill{
margin: 10px 0;
svg{
height:20px;
}
}
}
}
#quiz{
width: 60%;
height: 100%;
padding:0 20px;
position:relative;
background: white;
.option{
cursor:pointer;
height:30px;
position:relative;
margin-bottom:10px;
background-image:none;
display:flex;
flex-direction:row;
font-weight:bold;
transition: 300ms all ease-in;
&.checked, &:hover{
color: #e61c5d;
font-weight: bold;
.label{
&:after{
background:#e61c5d;
}
&:before{
color:white;
}
}
}
.textOpt{
line-height:30px;
&.right{
&:after{
content:'';
position:absolute;
top:2px;
right: 15%;
width:10px;
height:10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='tick'%3E%3Cpath d='M504.502 75.496c-9.997-9.998-26.205-9.998-36.204 0L161.594 382.203 43.702 264.311c-9.997-9.998-26.205-9.997-36.204 0-9.998 9.997-9.998 26.205 0 36.203l135.994 135.992c9.994 9.997 26.214 9.99 36.204 0L504.502 111.7c9.998-9.997 9.997-26.206 0-36.204z'/%3E%3C/svg%3E");
background-size: 10px 10px;
}
&.hide{
&:after{
background-image:none;
}
}
}
&.wrong{
&:after{
content:'';
position:absolute;
top:2px;
right: 15%;
width:10px;
height:10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='cross'%3E%3Cpath d='M505.943 6.058c-8.077-8.077-21.172-8.077-29.249 0L6.058 476.693c-8.077 8.077-8.077 21.172 0 29.249 4.038 4.04 9.332 6.058 14.625 6.058 5.293 0 10.586-2.019 14.625-6.059L505.943 35.306c8.076-8.076 8.076-21.171 0-29.248z'/%3E%3Cpath d='M505.942 476.694L35.306 6.059c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.076-8.077 21.171 0 29.248l470.636 470.636c4.038 4.039 9.332 6.058 14.625 6.058 5.293 0 10.587-2.019 14.624-6.057 8.075-8.078 8.075-21.173-.001-29.25z'/%3E%3C/svg%3E");
background-size: 10px 10px;
}
&.hide{
&:after{
background-image:none;
}
}
}
}
.label{
position:relative;
height:30px;
width:30px;
margin-right:15px;
&:before{
content:attr(data-label);
position:absolute;
top: 5px;
left: 9px;
height: 15px;
z-index:100;
font-weight:bold;
}
&:after{
content:'';
z-index:10;
position:absolute;
background:#ff9280;
top:0;
left:0;
width:100%;
height:30px;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 300ms all ease-in;
}
}
}
}
.disabled{pointer-events:none;}
.btn-wrapper{
display:flex;
flex-direction:row;
width:100%;
justify-content:center;
align-items:space-between;
}
.btn{
cursor:pointer;
width:90px;
height:20px;
background:#e61c5d;
color:white;
margin: 10px 5px;
padding:10px;
display:flex;
justify-content:center;
align-items:center;
z-index:10000;
transition:all 500ms ease-in;
font-weight:bold;
&:hover{
background:#930077;
}
&.feedback, &.submit{
margin-left:0;
}
}
#hint{
position: absolute;
width: 50%;
text-align: center;
bottom: 100px;
right: 58px;
padding: 10px;
border-radius: 20px;
background: #e61c5d;
color: white;
transition:700ms ease all;
display: none;
&.hide{
opacity:0;
}
}
#hint.hintTrigger{
display: block;
}
.hint{
position:absolute;
bottom:10px;
right:10px;
height:45px;
width:45px;
border-radius:20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
background-size:45px;
background-repeat:no-repeat;
background-origin: content-box;
&:hover{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
background-size:45px;
background-repeat:no-repeat;
background-origin: content-box;
}
}
//HERE YOUR HEADER CONTENT
<div id='strand'>
<div id='profile'>
<div id='picture'></div>
<div id='tokens'>Your hints: <span id='money'></span>/200</div>
<p><i>Each hint is 100</i></p>
<p>You are a star in:</p>
<div id='skills'></div>
</div>
<div id='quiz'>
<div id='question'>
<div id='question-text'>
<h1></h1>
<p></p>
</div>
<div id='question-options'>
<div class='option' id='opt0' data-r=''></div>
<div class='option' id='opt1' data-r=''></div>
<div class='option' id='opt2' data-r=''></div>
<div class='option' id='opt3' data-r=''></div>
</div>
<div class='btn-wrapper'>
<div class='submit btn'>Submit</div>
<div class='hint btn'></div>
<div class='feedback btn'>Feedback</div>
<div class='nextQ btn'>Next</div>
</div>
<div class='feedbackTxt'>
<div id='hint' class='hide'></div>
<div id='feedback'></div>
</div>
</div>
</div>
</div>
Also edited your codepen example here is an example

AnimeJS Motion Path - Make element follow SVG path giving undesirable result

I'm trying to get the orange marker to follow the course of this RC car race track using an SVG element and the AnimeJS library.
But no matter what I try, I get really strange and undesirable results.
Sometimes I can see the marker following the path but the path it's on is offset from the course and not in the same scale, and some things I try I cannot see the marker at all but I can see the scrollbars on my page altering, which indicates that the marker is there and is moving.
I can also look at the browser's inspect tool and can see that the element's styles are changing rapidly - translateX, translateY and rotate.
The code, as I've left it here, shows the marker is moving. If you look carefully in the JSFiddle demo, and wait 9.49seconds for each lap to complete, you can see a flash of an orange ball for a nano-second but the ball isn't to scale and I have no idea what path it's following.
What am I doing wrong? How can this be achieved? I'm open to using other libraries or tools if it helps.
JSFiddle
HTML
<section id="race-event-overview">
[...]
<div class="race-track-map">
<svg class="race-track" viewBox="0 0 560 350" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<path class="track"
d="M648.018 1019s-26.755-194 194-194H2618.98c220.76 0 194 194 194 194v527h-.24s10.84 139-112.49 139-112.49-139-112.49-139h-.24v-286s11.83-148-109.52-148H1413s-81-1.45-81 111c0 0-11.07 108 127 108h807s102-6.22 102 107-116 108-116 108h-247s-204.73 67.41-226.18 61.85c-86.34-22.36-182.03-60.17-220.82-61.85h-347s-103 6.77-103-100v-115s5.06-108-118-108c-123.058 0-113 108-113 108v134s10.542 109-121 109-109-118-109-118v-437"
fill="none" stroke="#2f3b42" stroke-width="88.44"
transform="matrix(-.20047 .08679 -.08673 -.2006 718.369 267.998)" />
<circle class="ball" cx="2903.86" cy="664.618" r="31.382" fill="#ff5000" transform="matrix(-.16499 .12905 -.12897 -.1651 775.915 26.115)" />
<path
d="M305.953 299.197c.673-.28 1.187-.623 1.536-1.032.352-.41.582-.857.695-1.336a3.82 3.82 0 0 0 .046-1.488 6.622 6.622 0 0 0-.42-1.486 4.669 4.669 0 0 0-.805-1.32 3.496 3.496 0 0 0-1.122-.86c-.42-.201-.889-.305-1.4-.304-.512-.002-1.053.115-1.624.351l-.942.391 3.093 7.474.943-.39zm-1.479 1.48l-3.725-9 1.913-.793c.749-.31 1.438-.456 2.072-.434.638.02 1.21.161 1.723.42.514.263.96.624 1.337 1.08.382.454.687.967.92 1.53.226.546.383 1.127.471 1.743a4.598 4.598 0 0 1-.09 1.788 4.008 4.008 0 0 1-.862 1.619c-.43.503-1.043.92-1.846 1.253l-1.913.793zM309.778 287.935l2.975-1.233c.308-.128.64-.165.996-.115.357.053.698.16 1.018.318.321.161.61.36.867.598.257.235.435.479.537.725.072.174.112.385.121.632.012.246-.01.507-.065.78a3.992 3.992 0 0 1-.265.83c-.12.277-.28.534-.478.777.37.376.709.71 1.016 1.008.309.294.6.571.878.828.28.256.553.497.825.726.27.225.552.46.845.7-.09.074-.18.145-.274.21-.078.054-.171.112-.268.176-.1.065-.199.119-.301.161a36.469 36.469 0 0 1-1.164-1.024c-.34-.307-.72-.655-1.134-1.052-.414-.395-.82-.809-1.22-1.235l-2 .828 1.66 4.011a2.996 2.996 0 0 1-.189.1c-.059.027-.118.055-.18.08a7.99 7.99 0 0 1-.26.101 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.355-.218.498-.414.141-.2.252-.416.33-.646.081-.234.127-.471.137-.713a1.404 1.404 0 0 0-.086-.613 1.44 1.44 0 0 0-.382-.518 2.506 2.506 0 0 0-.6-.408 2.173 2.173 0 0 0-.686-.21 1.212 1.212 0 0 0-.64.07l-2.01.833 1.429 3.452 2.01-.833zM322.842 293.064a1.348 1.348 0 0 1-.204.112l-.192.08c-.085.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.06-.035.128-.07.213-.108a3.347 3.347 0 0 1 .45-.187c.076-.028.15-.052.216-.07l3.725 9zM327.345 280.57a3.548 3.548 0 0 1 .872-.18c.36 1.541.617 2.928.762 4.153.153 1.225.25 2.276.293 3.149.052 1.022.05 1.924-.005 2.71-.051.03-.106.06-.156.091-.054.033-.113.06-.176.086l-.202.084c-.149.062-.27.109-.356.134-.087.026-.16.05-.23.069a23.798 23.798 0 0 1-1.949-1.954 41.468 41.468 0 0 1-2.028-2.436 41.908 41.908 0 0 1-2.361-3.417c.08-.06.16-.123.245-.185.082-.05.164-.104.254-.162.088-.053.184-.113.289-.173a34.127 34.127 0 0 0 1.992 2.946 51.55 51.55 0 0 0 1.89 2.36c.67.784 1.32 1.501 1.95 2.15l.05-.02a51.588 51.588 0 0 0-.483-5.928 37.681 37.681 0 0 0-.65-3.476zM330.873 279.193l4.508-1.869c.031.051.063.112.095.182.033.07.06.129.08.178.043.102.076.19.101.26.025.066.041.123.05.166l-3.667 1.52 1.315 3.177 3.178-1.317c.047.064.08.127.104.187l.077.186c.03.071.057.137.075.197.022.06.04.12.055.181l-3.178 1.317 1.468 3.546 3.666-1.52a1.1 1.1 0 0 1 .102.182l.068.166c.03.071.057.144.081.21.026.07.044.13.055.182l-4.508 1.869-3.725-9zM338.282 276.122l2.975-1.233c.309-.127.644-.166 1-.116.356.053.694.16 1.014.32.324.16.61.359.87.596.254.236.432.48.534.726.072.174.116.384.124.631.01.248-.014.508-.068.782a3.97 3.97 0 0 1-.262.828 3.389 3.389 0 0 1-.48.778c.369.376.708.71 1.015 1.009.309.293.604.57.88.826.278.257.551.498.823.727.271.226.552.46.849.7-.09.074-.181.145-.277.211-.079.053-.169.11-.27.175a1.837 1.837 0 0 1-.3.162 36.469 36.469 0 0 1-1.163-1.024 51.803 51.803 0 0 1-1.132-1.054 31.187 31.187 0 0 1-1.223-1.234l-2 .829 1.661 4.01a3.974 3.974 0 0 1-.63.281 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.358-.218.498-.414.141-.199.252-.416.334-.647.078-.233.123-.47.137-.713a1.45 1.45 0 0 0-.087-.613 1.484 1.484 0 0 0-.382-.518 2.702 2.702 0 0 0-.6-.407 2.241 2.241 0 0 0-.689-.21 1.204 1.204 0 0 0-.64.07l-2.01.834 1.429 3.451 2.01-.833zM349.138 271.567c.37-.154.726-.251 1.057-.291.331-.04.621-.05.87-.033.296.015.567.063.809.137-.002.215-.125.514-.367.892a2.6 2.6 0 0 0-.626-.13 3.599 3.599 0 0 0-.659-.007 2.48 2.48 0 0 0-.769.194c-.66.274-1.07.598-1.237.972-.165.376-.133.842.097 1.396.145.351.32.603.519.762.2.158.421.257.662.291.242.034.499.024.771-.028.27-.052.551-.108.841-.175.306-.07.62-.126.948-.168.327-.042.644-.02.954.066.308.083.603.253.878.507.276.254.518.629.725 1.129.185.445.273.854.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.31-.426.588-.755.835a5.327 5.327 0 0 1-1.186.659c-.428.177-.818.285-1.17.317-.353.036-.655.041-.907.015a3.244 3.244 0 0 1-.818-.19c.025-.094.062-.2.109-.313.036-.089.083-.185.137-.29.053-.107.117-.203.193-.292.194.087.404.15.632.184.2.03.427.037.677.02.254-.018.533-.087.833-.211.722-.3 1.186-.666 1.39-1.102.208-.434.191-.936-.045-1.507-.154-.372-.338-.647-.552-.816a1.473 1.473 0 0 0-.703-.318 2.362 2.362 0 0 0-.807.023c-.286.052-.576.112-.873.178a7.665 7.665 0 0 1-.923.162c-.31.034-.616.014-.912-.061a1.998 1.998 0 0 1-.829-.46c-.258-.227-.482-.573-.672-1.033-.177-.429-.263-.822-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.297.383-.564.675-.795a4.402 4.402 0 0 1 1.049-.602zM211.104 51.174l3.093-1.281c.28-.116.577-.15.898-.101.323.046.64.163.946.347.31.183.596.43.864.737.265.308.484.67.655 1.08a3.7 3.7 0 0 1 .18 2.289 2.608 2.608 0 0 1-.421.92c-.19.267-.423.457-.703.573l-2.247.932 1.305 3.154a2.34 2.34 0 0 1-.184.096c-.061.03-.12.057-.174.08a7.99 7.99 0 0 1-.26.1c-.084.032-.16.057-.227.074l-3.725-9zm4.969 3.923a1.17 1.17 0 0 0 .511-.413c.136-.19.23-.414.282-.67.053-.252.062-.527.03-.818a3.147 3.147 0 0 0-.227-.87 3.344 3.344 0 0 0-.472-.816 2.413 2.413 0 0 0-.597-.555 1.756 1.756 0 0 0-.664-.254 1.19 1.19 0 0 0-.651.076l-2.01.833 1.788 4.32 2.01-.833zM223.692 56.501a1.348 1.348 0 0 1-.205.112l-.191.08c-.086.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.059-.035.13-.071.212-.108a3.347 3.347 0 0 1 .452-.187c.078-.03.149-.052.215-.07l3.725 9zM225.098 46.296l-2.499 1.035a.653.653 0 0 1-.056-.104c-.022-.037-.045-.075-.062-.118l-.057-.137c-.017-.04-.04-.107-.076-.2a5.995 5.995 0 0 1-.074-.227l5.88-2.436c.047.074.086.145.115.216l.08.192c.032.077.058.15.083.216.023.064.038.118.046.162l-2.498 1.035 3.4 8.214a1.435 1.435 0 0 1-.225.12l-.205.085c-.089.037-.17.067-.248.096a1.96 1.96 0 0 1-.205.065l-3.4-8.214zM232.702 42.167c.37-.154.725-.25 1.057-.29.33-.04.621-.05.87-.033.296.014.567.063.808.137 0 .214-.125.513-.366.891a2.6 2.6 0 0 0-.626-.129 3.599 3.599 0 0 0-.659-.008 2.48 2.48 0 0 0-.769.195c-.66.273-1.07.598-1.237.971-.165.377-.133.842.096 1.396.146.352.32.604.52.762.2.159.42.258.662.292.242.033.499.024.771-.029.27-.051.551-.108.841-.174.306-.07.62-.127.947-.169.328-.041.645-.019.955.067.308.083.602.252.878.506s.518.63.725 1.13c.184.445.273.853.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.309-.426.588-.755.835a5.327 5.327 0 0 1-1.186.658c-.428.178-.818.286-1.17.318-.353.036-.655.04-.907.014a3.244 3.244 0 0 1-.818-.19c.025-.094.061-.2.108-.312.037-.09.084-.186.137-.291.054-.106.117-.203.194-.292.194.088.404.151.632.184.2.03.426.037.677.02.253-.017.533-.086.833-.21.722-.3 1.186-.666 1.39-1.102.208-.435.191-.936-.045-1.508-.154-.371-.338-.646-.552-.816a1.473 1.473 0 0 0-.703-.317 2.362 2.362 0 0 0-.807.023c-.286.052-.576.111-.873.178a7.665 7.665 0 0 1-.923.161c-.31.035-.617.015-.912-.06a1.998 1.998 0 0 1-.83-.46c-.257-.228-.48-.574-.671-1.034-.177-.428-.263-.821-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.296.383-.563.675-.795a4.402 4.402 0 0 1 1.049-.602zM500.743 4.226c.158.359.263.68.322.966.057.289.092.534.11.74a3.55 3.55 0 0 1-.038.643 2.036 2.036 0 0 1-.818-.308c.017-.128.023-.274.017-.439a6.131 6.131 0 0 0-.097-.53 3.995 3.995 0 0 0-.254-.737c-.182-.411-.4-.74-.658-.984a1.873 1.873 0 0 0-.948-.481c-.377-.075-.823-.055-1.337.054-.513.11-1.11.317-1.793.618-1.324.585-2.197 1.204-2.62 1.866-.422.661-.454 1.398-.094 2.216.124.28.25.512.378.69.132.179.251.32.362.419.123.112.245.2.364.257-.01.165-.034.303-.068.415a1.397 1.397 0 0 1-.257.495 3.279 3.279 0 0 1-.538-.432 4.925 4.925 0 0 1-1-1.509c-.514-1.168-.51-2.176.015-3.03.523-.854 1.545-1.616 3.061-2.286.77-.34 1.458-.57 2.069-.692.612-.12 1.155-.125 1.637-.017.48.11.9.335 1.259.679.361.342.67.805.926 1.387zM496.267 18.149a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.829-.546 1.25-.85l1.232-.884-1.441-3.268c-.483.103-.979.208-1.481.32-.505.112-.992.23-1.468.356a1.45 1.45 0 0 1-.088-.172 1.154 1.154 0 0 1-.083-.157l-.073-.165c-.02-.045-.04-.097-.061-.154a1.746 1.746 0 0 1-.055-.17 49.542 49.542 0 0 1 4.244-.913 44.45 44.45 0 0 1 3.101-.406c.984-.09 1.832-.13 2.55-.122.065.102.118.199.16.291l.118.27c.034.077.063.152.086.218.027.069.049.126.07.174.018.055.033.105.05.145A31.595 31.595 0 0 1 502.225 14a48.029 48.029 0 0 1-2.413 2.012 54.36 54.36 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.09-.16c-.026-.05-.05-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a25.604 25.604 0 0 0 1.588-1.237c.494-.419.927-.794 1.299-1.125.43-.395.83-.771 1.203-1.13l-.026-.06zM506.12 18.636l-1.08-2.45a.452.452 0 0 1 .101-.058.619.619 0 0 1 .114-.067l.135-.06c.039-.017.104-.043.196-.076.091-.037.166-.064.223-.079l2.541 5.763c-.07.052-.141.09-.211.12l-.187.083a2.721 2.721 0 0 1-.371.137l-1.08-2.45-8.046 3.552a1.417 1.417 0 0 1-.123-.217l-.09-.205a6.737 6.737 0 0 1-.1-.24 1.812 1.812 0 0 1-.068-.201l8.046-3.552zM509.385 23.956l1.95 4.421a1.76 1.76 0 0 1-.178.099c-.067.036-.126.062-.174.083a3.61 3.61 0 0 1-.254.106 1.084 1.084 0 0 1-.164.052l-1.585-3.595-3.112 1.373 1.374 3.117a.895.895 0 0 1-.183.108l-.182.08c-.07.031-.135.06-.193.078-.06.024-.119.043-.178.06l-1.374-3.118-3.473 1.534 1.585 3.595a1.088 1.088 0 0 1-.178.105l-.162.072c-.07.03-.14.062-.207.084a1.423 1.423 0 0 1-.178.059l-1.95-4.422 8.816-3.891zM512.589 31.223l1.286 2.917c.134.303.18.634.138.987a3.371 3.371 0 0 1-.293 1.012c-.151.325-.34.615-.57.874-.228.258-.465.44-.706.546-.17.075-.377.123-.622.137a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.459c-.364.374-.687.718-.974 1.029-.284.312-.55.61-.798.89s-.48.557-.7.831c-.217.274-.443.557-.672.856a4.114 4.114 0 0 1-.216-.27c-.054-.076-.113-.164-.18-.262a1.82 1.82 0 0 1-.166-.294c.313-.39.642-.782.987-1.175.296-.345.633-.724 1.016-1.144.38-.42.78-.833 1.192-1.24l-.864-1.96-3.929 1.735a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.99 1.99 0 0 1-.074-.212l8.816-3.891zm-2.916 4.632c.083.188.224.35.42.483.2.136.418.241.648.317.232.071.467.111.708.119.24.004.442-.028.605-.1.179-.079.345-.21.503-.39.157-.182.286-.383.39-.603.102-.222.165-.45.191-.687a1.193 1.193 0 0 0-.084-.631l-.87-1.972-3.38 1.493.87 1.97zM507.812 44.274a1.277 1.277 0 0 1-.115-.2l-.081-.185c-.039-.087-.073-.172-.108-.26a1.991 1.991 0 0 1-.076-.218l8.815-3.891c.036.058.073.128.112.208a3.395 3.395 0 0 1 .195.442c.03.077.055.147.073.212l-8.815 3.892zM516.065 47c.43-.494.77-.885 1.023-1.168.25-.28.443-.49.568-.622.154-.158.25-.25.294-.28l-.026-.059-8.239 3.65a2.39 2.39 0 0 1-.112-.207c-.039-.08-.07-.144-.09-.191a6.737 6.737 0 0 1-.1-.24 1.477 1.477 0 0 1-.063-.19l8.815-3.892c.075.125.137.244.187.356l.156.356c.1.227.17.393.212.502.043.105.074.191.093.257l-4.74 5.451-1.002 1.141c-.243.275-.428.477-.555.607a2.888 2.888 0 0 1-.27.273l.025.059 8.25-3.659c.036.061.073.129.109.203a3.002 3.002 0 0 1 .185.42c.032.08.056.15.07.206l-8.814 3.892a5.06 5.06 0 0 1-.188-.35c-.053-.106-.104-.22-.16-.347a8.382 8.382 0 0 1-.212-.511c-.04-.116-.076-.211-.098-.285L516.065 47zM516.108 62.871c-.15-.258-.3-.53-.456-.815-.124-.243-.264-.516-.418-.826a19.72 19.72 0 0 1-.45-.953c-.28-.635-.437-1.211-.466-1.724-.03-.509.073-.979.313-1.406.24-.427.62-.822 1.14-1.192.519-.37 1.187-.735 2.004-1.096 2.952-1.303 4.943-.79 5.968 1.534.21.476.351.895.43 1.262.077.364.123.675.132.929.02.298.003.553-.055.763a2.845 2.845 0 0 1-.42-.072 1.443 1.443 0 0 1-.277-.092.78.78 0 0 1-.196-.124c.047-.168.072-.37.069-.603a4.825 4.825 0 0 0-.086-.734 4.666 4.666 0 0 0-.333-1.004 2.961 2.961 0 0 0-.69-.997 2.271 2.271 0 0 0-1.023-.538c-.4-.098-.86-.102-1.38-.02-.52.085-1.106.274-1.758.562-.725.32-1.31.631-1.754.935-.447.304-.77.624-.972.957-.2.336-.29.693-.272 1.074.021.382.132.808.337 1.273.145.327.274.605.385.834a9.277 9.277 0 0 0 .52.958l3.46-1.528-.647-1.47a.614.614 0 0 1 .111-.066c.037-.023.073-.046.113-.063l.126-.056c.047-.021.11-.045.184-.075.075-.026.142-.05.202-.065l1.012 2.296-4.853 2.142zM521.841 76.093l.318-.635c-.748-.416-1.305-1.036-1.673-1.87-.388-.88-.453-1.718-.192-2.512.26-.79.784-1.363 1.573-1.711 1.298-.574 2.482-.277 3.549.892.52-.685 1.007-1.128 1.464-1.329.495-.219 1.005-.206 1.522.04.518.243.904.649 1.155 1.217.24.546.277 1.069.115 1.565-.165.498-.493.853-.989 1.072-.842.372-1.848.077-3.013-.881a18.673 18.673 0 0 0-1.935 3.216c.653.123 1.44-.017 2.358-.422l.418-.191.492 1.117c-1.245.55-2.481.65-3.714.305a12.118 12.118 0 0 0-.744 1.724l-.704-1.597zm.752-1.412a28.372 28.372 0 0 1 2.325-3.75c-.734-.723-1.496-.912-2.282-.564a2.293 2.293 0 0 0-1.252 1.278 2.162 2.162 0 0 0 .024 1.753c.234.529.63.956 1.185 1.283zm3.607-3.466c.725.644 1.391.828 2.001.559.585-.259.748-.678.49-1.264-.255-.576-.676-.735-1.263-.476-.387.17-.797.566-1.228 1.181zM533.811 79.356l1.338 3.036c.12.272.16.565.12.887-.04.319-.148.634-.323.942-.174.311-.41.6-.709.872a3.86 3.86 0 0 1-1.053.675 3.576 3.576 0 0 1-1.15.297 3.505 3.505 0 0 1-1.11-.068 2.609 2.609 0 0 1-.918-.394 1.615 1.615 0 0 1-.582-.683l-.973-2.207-3.09 1.364a2.32 2.32 0 0 1-.1-.18c-.03-.06-.058-.118-.081-.171a7.92 7.92 0 0 1-.106-.255 2.39 2.39 0 0 1-.078-.223l8.815-3.892zm-3.766 5.008c.089.202.229.368.42.498.19.13.414.218.667.263.252.047.524.05.81.01.291-.037.576-.12.856-.243.302-.134.569-.295.796-.485.228-.188.406-.39.536-.605a1.74 1.74 0 0 0 .236-.663c.03-.227-.001-.44-.09-.643l-.87-1.97-4.23 1.867.869 1.971zM530.581 95.977a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.828-.549 1.25-.85l1.232-.884-1.44-3.268c-.484.103-.98.208-1.482.32-.505.112-.991.23-1.467.356a1.482 1.482 0 0 1-.09-.171 1.181 1.181 0 0 1-.082-.158l-.073-.165c-.02-.045-.039-.097-.06-.154a1.746 1.746 0 0 1-.056-.17c1.605-.41 3.018-.716 4.245-.913a44.45 44.45 0 0 1 3.1-.406c.984-.09 1.832-.13 2.55-.122.066.102.119.199.16.291l.118.27c.035.078.063.149.087.218.026.069.048.126.07.174.017.055.033.106.05.145a31.595 31.595 0 0 1-1.945 1.875 50.197 50.197 0 0 1-2.412 2.012 55.932 55.932 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.091-.16c-.025-.05-.049-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a27.13 27.13 0 0 0 1.588-1.237c.494-.418.927-.794 1.299-1.125.431-.395.83-.771 1.203-1.13l-.026-.059zM540.736 95.063l1.285 2.915c.135.306.18.634.138.987a3.371 3.371 0 0 1-.293 1.012 3.674 3.674 0 0 1-.57.874c-.228.258-.464.442-.705.549-.17.075-.378.12-.623.134a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.46c-.363.375-.687.719-.973 1.032-.285.31-.551.608-.799.888-.247.28-.48.557-.7.831-.217.273-.442.56-.672.856a4.404 4.404 0 0 1-.215-.267l-.18-.265a1.82 1.82 0 0 1-.167-.294c.313-.39.642-.782.987-1.175.296-.345.633-.725 1.016-1.145.38-.418.78-.832 1.192-1.238l-.864-1.96-3.929 1.734a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.87 1.87 0 0 1-.072-.21l8.815-3.89zm-2.915 4.633c.081.184.223.346.42.483.199.133.416.238.646.314.232.071.469.114.708.119.24.004.442-.028.605-.1.179-.08.345-.21.503-.39.158-.18.286-.383.39-.603.102-.223.165-.451.193-.684a1.21 1.21 0 0 0-.085-.632l-.87-1.974-3.38 1.492.87 1.975zM544.195 104.994l-1.08-2.45a.446.446 0 0 1 .1-.061.619.619 0 0 1 .115-.065l.135-.059.195-.08c.092-.033.168-.06.224-.075l2.541 5.763c-.072.048-.14.089-.21.12l-.188.083a5.178 5.178 0 0 1-.213.087 1.038 1.038 0 0 1-.158.05l-1.08-2.45-8.046 3.551a1.417 1.417 0 0 1-.123-.217l-.09-.204a6.904 6.904 0 0 1-.1-.243 1.815 1.815 0 0 1-.068-.198l8.046-3.552zM548.448 112.426c.16.364.265.713.312 1.04.047.327.063.615.053.864-.009.291-.05.56-.117.804-.214 0-.512-.115-.891-.346.061-.194.1-.402.113-.622a3.568 3.568 0 0 0-.007-.653 2.458 2.458 0 0 0-.21-.757c-.285-.647-.615-1.046-.988-1.203-.376-.155-.834-.11-1.377.13-.345.152-.591.328-.743.529a1.345 1.345 0 0 0-.273.662 2.32 2.32 0 0 0 .045.763c.057.266.12.543.192.829.075.3.139.61.187.934.05.323.034.637-.044.946a2.09 2.09 0 0 1-.48.881c-.245.279-.61.527-1.1.743-.437.193-.839.29-1.207.295a2.074 2.074 0 0 1-1.019-.24 2.674 2.674 0 0 1-.842-.728 5.26 5.26 0 0 1-.679-1.159c-.185-.42-.3-.804-.34-1.15a4.478 4.478 0 0 1-.035-.899c.025-.299.082-.571.17-.814.093.022.198.056.311.1.089.035.185.079.29.13.107.05.204.11.293.185a2.32 2.32 0 0 0-.167.629c-.026.199-.028.42-.005.671.024.25.098.526.228.82.312.708.685 1.159 1.12 1.351.435.197.93.169 1.49-.079.364-.16.632-.349.794-.564a1.46 1.46 0 0 0 .299-.704c.032-.252.019-.517-.041-.798-.057-.28-.124-.568-.196-.86a7.6 7.6 0 0 1-.18-.91 2.546 2.546 0 0 1 .039-.905 1.98 1.98 0 0 1 .436-.831c.219-.26.556-.49 1.006-.689.42-.185.807-.279 1.163-.282.355-.006.682.067.98.213.297.15.566.366.801.65.237.286.444.627.62 1.024z"
fill="#707070" fill-rule="nonzero" />
<path d="M3181 719l29-13" fill="none" stroke="#fff" stroke-width="8.02"
transform="matrix(.4417 0 0 .44199 -911.014 -195.384)" />
</svg>
</div>
</section>
SCSS:
#race-event-overview {
position: relative;
height: 500px;
background: #242D33;
.race-track-map {
position: absolute;
top: 75px;
right: 0;
svg {
height: 350px;
width: 560px;
}
}
}
JS:
var path = anime.path('.race-track .track');
anime({
targets: '.race-track .ball',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 9490, // fastest lap on course
loop: true
});

I guess I am too late to be useful for you but:
tl;dr
The whole problem is that transform origin is kind of broken in SVGs and anime.js is a simple tool. To fix this you have to place the animating object (the circle) to cx="0" cy="0" and remove any transforms on the path.
More info
Really helpful article on SVG transform is here on CSS Tricks. The important think from there is: transform of all elements inside svg element has transform origin in upper left corner of the svg element.
If you inspect the transforms that anime.js creates on the animated element you will see exactly the values from the path's d attribute. Those values are number of pixels from origin (again upper left corner of the svg element) however when there is transform applied to the element it will not match.
Try Removing transforms in SVG files

SVG Clock - Transform origin not working on the lancets

I am trying to reproduce something that I saw a while ago which is animating an SVG clock. Everything works fine but I can't get around the transform-origin which seems not to be working... is the way the path is made?
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>
Thanks

Looks like you've assumed that the transform-box is the fill-box, it's not by default it's the view-box. Setting transform-box: fill-box; seems to make things work better.
// Real time clock animation
let sec = document.querySelector('.seconds-lancet');
let min = document.querySelector('.minutes-lancet');
let hour = document.querySelector('.hours-lancet');
setInterval(function() {
let d = new Date();
function r(el, deg) {
el.setAttribute('transform', 'rotate('+ deg +')');
}
r(sec, 6*d.getSeconds());
r(min, 6*d.getMinutes());
r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
}, 1000);
.seconds-lancet,
.minutes-lancet,
.hours-lancet {
transform-origin: bottom center !important;
transform-box: fill-box;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 621.07 768">
<g id="clock">
<circle cx="70.64" cy="107.54" r="41.2" fill="#cdcfd0" opacity=".81" transform="rotate(-80.78 70.641 107.542)"/>
<path fill="#034732" d="M112.62 99.31c0-19-14.55-34.39-32.5-34.39s-32.5 15.4-32.5 34.39v8.42l64.45 1.21z"/>
<path fill="#034732" d="M116.79 114l-74.17-1.39v-13.3c0-21.72 16.83-39.39 37.5-39.39s37.5 17.67 37.5 39.39v.28zm-64.17-11.18l54.74 1 .26-4.68c-.07-16.14-12.38-29.22-27.5-29.22s-27.5 13.18-27.5 29.39z"/>
<circle cx="80.29" cy="107.1" r="34.38" fill="#fff"/>
<path fill="#008048" d="M80.29 145a37.93 37.93 0 1 1 37.93-37.93A38 38 0 0 1 80.29 145zm0-68.77a30.84 30.84 0 1 0 30.84 30.84 30.88 30.88 0 0 0-30.84-30.81z"/>
<path fill="#ffffff" d="M80.29 138.14a31.07 31.07 0 1 1 12.09-59.7A31.18 31.18 0 0 1 108.92 95a31 31 0 0 1-6.66 34 31.2 31.2 0 0 1-9.88 6.66 30.87 30.87 0 0 1-12.09 2.48z"/>
<path fill="#034732" d="M77.29 84.72l-.67.2h-.21a.5.5 0 0 1-.12-1l1-.32a2.14 2.14 0 0 1 .56-.1.56.56 0 0 1 .57.57v5.51a.57.57 0 1 1-1.14 0zM80 89.05l2-1.71c.89-.75 1.22-1.17 1.22-1.76a1 1 0 0 0-1-1 1.61 1.61 0 0 0-1.29.72.49.49 0 0 1-.4.18A.52.52 0 0 1 80 85a.63.63 0 0 1 .13-.36 2.53 2.53 0 0 1 2.16-1 2 2 0 0 1 2.15 1.95c0 1-.54 1.58-1.69 2.52l-1.34 1.12H84a.5.5 0 0 1 0 1h-3.7a.55.55 0 0 1-.61-.54.68.68 0 0 1 .31-.64zM99.72 109.68a.59.59 0 0 1 .8-.86 2.12 2.12 0 0 0 1.59.66 1.09 1.09 0 0 0 1.21-1c0-.68-.63-1.06-1.61-1.06h-.25a.53.53 0 0 1-.53-.52.66.66 0 0 1 .26-.49l1.64-1.73h-2.54a.53.53 0 0 1-.54-.52.54.54 0 0 1 .54-.53h3.58a.55.55 0 0 1 .6.53.86.86 0 0 1-.35.66l-1.64 1.68c1.06.13 2 .66 2 1.93a2.21 2.21 0 0 1-2.44 2.18 3.31 3.31 0 0 1-2.32-.93zM78.51 129.87a3.16 3.16 0 0 1-.79-2.48c0-2 .94-3.53 2.78-3.53a2.83 2.83 0 0 1 1.63.46.55.55 0 0 1 .28.49.54.54 0 0 1-.54.53.55.55 0 0 1-.29-.08 1.94 1.94 0 0 0-1.12-.36c-1 0-1.5.87-1.56 2.06a2.26 2.26 0 0 1 3.83 1.39 2.26 2.26 0 0 1-2.41 2.21 2.39 2.39 0 0 1-1.81-.69zm3.08-1.48a1.34 1.34 0 0 0-2.65 0 1.22 1.22 0 0 0 1.35 1.16 1.17 1.17 0 0 0 1.3-1.16zM57.16 109.89a.53.53 0 0 1-.26-.47.52.52 0 0 1 .54-.52.63.63 0 0 1 .31.09 1.94 1.94 0 0 0 1.19.4c1 0 1.53-.84 1.57-2A1.93 1.93 0 0 1 59 108a2.06 2.06 0 0 1-2.3-2.06 2.26 2.26 0 0 1 2.42-2.25 2.4 2.4 0 0 1 1.81.69 3.3 3.3 0 0 1 .78 2.48c0 2.08-1 3.53-2.79 3.53a2.94 2.94 0 0 1-1.76-.5zm3.31-4a1.23 1.23 0 0 0-1.35-1.19 1.19 1.19 0 0 0-1.29 1.2 1.18 1.18 0 0 0 1.32 1.16 1.2 1.2 0 0 0 1.32-1.15z"/>
<rect width="2.32" height=".98" x="51.17" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M80.91 80c0 .24-.17.36-.41.36h-.2a.33.33 0 0 1-.37-.36v-1.51c0-.23.13-.49.37-.49h.2a.47.47 0 0 1 .41.49z"/>
<rect width="2.32" height=".98" x="106.97" y="106.63" fill="#008048" rx=".43" ry=".43"/>
<rect width=".98" height="2.32" x="79.93" y="133.68" fill="#008048" rx=".43" ry=".43"/>
<path fill="#008048" d="M65.73 131.33a.4.4 0 0 0 .11.53.38.38 0 0 0 .53-.11l.63-1a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.11zM55.6 120.8a.39.39 0 0 0-.15.52.39.39 0 0 0 .52.15l1-.56a.39.39 0 0 0 .15-.52.39.39 0 0 0-.53-.15zM56 92.41a.38.38 0 0 0-.53.11.4.4 0 0 0 .11.53l1 .63a.39.39 0 0 0 .53-.11.37.37 0 0 0-.11-.53zM66.49 82.28a.37.37 0 0 0-.52-.15.38.38 0 0 0-.14.52l.55 1a.38.38 0 0 0 .52.15.37.37 0 0 0 .15-.52zM94.86 82.79a.38.38 0 0 0-.11-.53.38.38 0 0 0-.53.1l-.63 1a.37.37 0 0 0 .11.53.38.38 0 0 0 .53-.11zM105 93.32a.39.39 0 0 0 .15-.52.37.37 0 0 0-.52-.15l-1 .56a.38.38 0 0 0-.14.52.38.38 0 0 0 .52.14zM104.63 121.58a.38.38 0 0 0 .53-.11.39.39 0 0 0-.11-.53l-1-.63a.37.37 0 0 0-.53.11.38.38 0 0 0 .11.53zM94.1 131.71a.39.39 0 0 0 .52.15.39.39 0 0 0 .15-.52l-.56-1a.38.38 0 0 0-.52-.14.37.37 0 0 0-.15.52z"/>
<g id="hands">
<path class="minutes-lancet" fill="#2e2c2b" d="M81.26 107h-1.93l.3-30.58c0-.23.25-.42.56-.42.31 0 .56.19.56.42z"/>
<path class="hours-lancet" fill="#2e2c2b" d="M81.48 107h-2.3l.35-22.69c0-.17.31-.31.67-.31.37 0 .67.14.67.31z"/>
<path class="seconds-lancet" fill="#008048" d="M81.06 109H79.6l.23-32.55a.44.44 0 0 1 .42-.45.45.45 0 0 1 .43.45z"/>
<circle cx="80.28" cy="107" r="2" fill="#034732"/>
</g>
</g>
</svg>

Bitmap to svg path

I don't know how to make this algorithm in JavaScript/Node.js that converts bitmaps into svg paths pixel by pixel:
// input
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
0 0 1 1 1 1 1 1 0 0
0 0 1 1 1 1 1 1 0 0
0 1 1 1 0 0 1 1 1 0
0 1 1 1 0 0 1 1 1 0
0 0 1 1 1 1 1 1 0 0
0 0 1 1 1 1 1 1 0 0
0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0
// output
<path d="M2 2 h6 v2 h1 v2 h-1 v2 h-6 v-2 h-1 v-2 h1 v-2 M4 4 v2 h2 v-2 z">
Does anyone know how the algorithm should work?
Any pseudocode would help.
Tools does the similar approach:
https://github.com/59naga/pixel-to-svg
https://github.com/brainshave/sharpvg
https://codepen.io/shshaw/pen/XbxvNj
http://drububu.com/tutorial/bitmap-to-vector.html

You can converts pixels to SVG path string like this.
Using this algorithm, I made script coverts pixel art to SVG.
http://defghi1977.html.xdomain.jp/tech/img2svg3/dot2svg3.htm
(Sorry this page is written in Japanese.)

We Keep Coding

JavaScript is the programming language of the Web.

Showing and not showing the shopping cart item count - javascript

Related

How to select all elements except the one hovered using Vanilla Javascript?

Cannot interact with button using javascript

AnimeJS Motion Path - Make element follow SVG path giving undesirable result

SVG Clock - Transform origin not working on the lancets

Bitmap to svg path

Categories

Resources