detect mouse position and if it collides with object display text - javascript

I am trying to display some text every time the mouse collides with the animating svg, when the mouse isn't over the svg i don't want the text to display , i made a codepen if anyone could help me. Thank you :)
https://codepen.io/o-sewell/pen/mBOPzR
var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');
var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;
var transY = 0;
var transX = 0;
var flyPos;
function drawFrame() {
window.requestAnimationFrame(drawFrame);
transX = Math.sin(angleX) * range;
transY = Math.sin(angleY) * range;
fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
angleX += xspeed;
angleY += yspeed;
flyPos = fly.getBoundingClientRect();
}
fly.addEventListener('mousemove', function(e) {
var x = e.offsetX;
var y = e.offsetY;
/* if the mouse x position collides with the fly i want to display the
message */
if (x > flyPos.left && x < flyPos.right || y > flyPos.top && y <
flyPos.bottom) {
text.style.display = "block";
} else {
text.style.display = "none";
}
});
window.requestAnimationFrame(drawFrame);

Record your mouse position changes in your mousemove handler. Then move your collision test to the drawFrame() function, so it gets tested every time the fly moves.
var mouseX = 0;
var mouseY = 0;
function drawFrame() {
window.requestAnimationFrame(drawFrame);
...
/* if the mouse x position collides with the fly i want to display the message */
flyPos = fly.getBoundingClientRect();
if (mouseX > flyPos.left && mouseX < flyPos.right && mouseY > flyPos.top && mouseY < flyPos.bottom) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
...
svgContainer.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');
var svgContainer = document.getElementById('svg-container');
var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;
var transY = 0;
var transX = 0;
var flyPos;
var mouseX = 0;
var mouseY = 0;
function drawFrame() {
window.requestAnimationFrame(drawFrame);
transX = Math.sin(angleX) * range;
transY = Math.sin(angleY) * range;
fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
angleX += xspeed;
angleY += yspeed;
/* if the mouse x position collides with the fly i want to display the message */
flyPos = fly.getBoundingClientRect();
if (mouseX > flyPos.left && mouseX < flyPos.right && mouseY > flyPos.top && mouseY < flyPos.bottom) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
window.requestAnimationFrame(drawFrame);
svgContainer.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTAiIGhlaWdodD0iMTEwIiB2aWV3Qm94PSIwIDAgMTA0LjM4IDE3MS4yMyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtpc29sYXRpb246aXNvbGF0ZTt9LmNscy0yLC5jbHMtMywuY2xzLTR7ZmlsbDpub25lO30uY2xzLTIsLmNscy00LC5jbHMtNXtzdHJva2U6IzA3OGVhZDt9LmNscy0yLC5jbHMtMywuY2xzLTQsLmNscy01e3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTJ7c3Ryb2tlLXdpZHRoOjAuNzVweDt9LmNscy0ze3N0cm9rZTojMDAwO30uY2xzLTQsLmNscy01e3N0cm9rZS13aWR0aDowLjVweDt9LmNscy01e2ZpbGw6IzA1N2ZhMDt9LmNscy02e2ZpbGw6IzA2MGY3YztvcGFjaXR5OjAuMzk7bWl4LWJsZW5kLW1vZGU6bXVsdGlwbHk7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5mbHlzd2F0PC90aXRsZT48ZyBjbGFzcz0iY2xzLTEiPjxnIGlkPSJ0b3AiPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMTg1LjUiIHk9IjMyLjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI3MiIgcng9IjEyIiByeT0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQuNTQgNzUuMjkpIHJvdGF0ZSgtMjYuMTQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjQxLjQ0LDk1Ljg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMzIuNTkgODMuMjYgMS4zMSAyMy42MyA0OS45OSAxLjYzIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNC4zMSIgeTE9IjE5LjYzIiB4Mj0iMzYuNiIgeTI9IjgzLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iOC4zMSIgeTE9IjE3LjYzIiB4Mj0iNDAuNiIgeTI9IjgxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuMzEiIHkxPSIxNS42MyIgeDI9IjQ0LjYiIHkyPSI3OS4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iMTMuNjMiIHgyPSI0OC42IiB5Mj0iNzcuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMC4zMSIgeTE9IjExLjYzIiB4Mj0iNTIuNiIgeTI9Ijc1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjMuMzEiIHkxPSI5LjYzIiB4Mj0iNTUuNiIgeTI9IjczLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjcuMzEiIHkxPSI3LjYzIiB4Mj0iNTkuNiIgeTI9IjcxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzEuMzEiIHkxPSI1LjYzIiB4Mj0iNjMuNiIgeTI9IjY5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzUuMzEiIHkxPSIzLjYzIiB4Mj0iNjcuNiIgeTI9IjY3LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzkuMzEiIHkxPSIxLjYzIiB4Mj0iNzEuNiIgeTI9IjY1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNDMuNiIgeTE9IjAuMzQiIHgyPSI3NS42IiB5Mj0iNjIuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3Ny41MyIgeTE9IjU3LjM0IiB4Mj0iNDguNiIgeTI9IjEuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIwLjM5IiB5MT0iMjguNjgiIHgyPSI1My42OSIgeTI9IjQuNDQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyOS44NyIgeTE9IjgyLjczIiB4Mj0iNzcuNiIgeTI9IjU5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjUuNjUiIHkxPSI4MC4zOCIgeDI9Ijc3LjgyIiB5Mj0iNTUuNjciLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMy4xIiB5MT0iNzcuODQiIHgyPSI3Ny4xNSIgeTI9IjUyLjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjEuNjMiIHkxPSI3NC4zMyIgeDI9Ijc1Ljg4IiB5Mj0iNDguNyIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE5LjkxIiB5MT0iNzAuODQiIHgyPSI3NC4zMSIgeTI9IjQ1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTguMiIgeTE9IjY3LjM0IiB4Mj0iNzIuODEiIHkyPSI0Mi40NSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iNjMuNSIgeDI9IjcwLjg2IiB5Mj0iMzguNDYiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIxNC42NyIgeTE9IjYwLjE1IiB4Mj0iNjkuNCIgeTI9IjM1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuODMiIHkxPSI1Ni40IiB4Mj0iNjcuNiIgeTI9IjMxLjgyIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTAuOTEiIHkxPSI1Mi40OSIgeDI9IjY2LjA2IiB5Mj0iMjguNjgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI5LjA1IiB5MT0iNDguNyIgeDI9IjY0LjE5IiB5Mj0iMjQuODgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3LjQ3IiB5MT0iNDUuNDkiIHgyPSI2Mi42NSIgeTI9IjIxLjc0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNS42OCIgeTE9IjQxLjg0IiB4Mj0iNjAuOTQiIHkyPSIxOC4yNSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjQuMDIiIHkxPSIzOC40NiIgeDI9IjU5LjYiIHkyPSIxNC41MSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjIuNTYiIHkxPSIzNS40OSIgeDI9IjU4LjEiIHkyPSIxMS42MyIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTE3Ni43OSw1OC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3Ni40IC0yNi42NikiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI1Ni4xIiB5MT0iNy44NCIgeDI9IjEuMSIgeTI9IjMxLjg0Ii8+PC9nPjxnIGlkPSJoYW5kbGUiPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTIyNy41LDEwMi41bDQ0LDk0czUsNCw5LTNsLTQzLTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjwvZz48ZyBpZD0ic2hhZG93cyI+PHBvbHlnb24gY2xhc3M9ImNscy02IiBwb2ludHM9IjYxLjEgNzAuODQgNTguMSA3Mi44NCAxMDIuMSAxNjguODQgMTA0LjEgMTY2Ljg0IDYxLjEgNzAuODQiLz48L2c+PC9nPjwvc3ZnPg=='),auto;
}
.svg-container {
display: flex;
flex-direction: column;
text-align: center;
}
#svg {
width: 7em;
height: auto;
padding: 8em;
margin: auto;
}
#back_wing {
animation: backwing .2s linear reverse infinite;
}
#forward_wing {
animation: frontwing .2s linear reverse infinite;
}
#keyframes backwing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(12deg);
}
}
#keyframes frontwing {
0% {
transform: rotate(0);
}
50% {
transform: rotate(7deg);
}
}
h1 {
text-align: center;
}
#text {
display: none;
color: red;
}
<h1> Flies have feelings </h1>
<div id="svg-container" class="svg-container">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.32 126.08"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#f4f4f4;}.cls-11,.cls-12,.cls-2,.cls-5,.cls-7{stroke:#000;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-17,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-18,.cls-19,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;}.cls-3,.cls-4{stroke:#73e4ef;}.cls-10,.cls-17,.cls-18,.cls-3,.cls-6{stroke-width:0.25px;}.cls-5{stroke-width:2px;}.cls-6{stroke:#189cb2;}.cls-12,.cls-17,.cls-8{fill:#4d727b;}.cls-9{fill:#d40000;}.cls-10{fill:#5a9761;}.cls-10,.cls-13,.cls-17,.cls-18,.cls-19{stroke:#000202;}.cls-11{fill:#0b8e9b;}.cls-11,.cls-12,.cls-13{stroke-width:0.5px;}.cls-13{fill:#3d595e;}.cls-14{fill:#0f1c59;opacity:0.4;mix-blend-mode:multiply;}.cls-15,.cls-16{fill:#f2f970;}.cls-16{opacity:0.5;mix-blend-mode:overlay;}.cls-19{stroke-width:0.75px;}.cls-20{fill:#fff;}</style></defs><title>fly</title><g id="fly" class="cls-1"><g id="back_wing"><path class="cls-2" d="M94.49 57.12s14.44-78 39-50.92-33 49.66-33 49.66z"/><g id="back_wing_pattern"><path class="cls-3" d="M113.33 49.67l-12.41-17.56M117.06 2.74l-8.77 39.81M113.33 22.65l23.93 6.16"/></g></g><g id="legs"><path class="cls-5" d="M105.73 105.18l-9.79 9.21 3.94 11.36"/><path class="cls-5" d="M114.69 121.74l-11.63-11.75 7.82-13.71 17.9 3.66 6.98 20.26"/><path class="cls-5" d="M110.21 100.47l14.34 5.82 4.74 10.98"/></g><g id="forward_wing"><path class="cls-2" d="M97.31 64.03S53.63 11.71 23.67 11.39s-32 38.31.4 46 66.74 8.92 66.74 8.92z"/><g id="forward_wing_pattern"><path class="cls-3" d="M61.82 63.86l10.39-25.59M17.79 11.89l16.14 47.62M19.12 15.83l45.44 41.29"/></g></g><g id="body"><path class="cls-8" d="M156.12 79.68a30.58 30.58 0 0 1-23.22 11.85h-2.76l-5.3-6.38c2.47-3.76 3.52-9.29 2.71-15.25a31.51 31.51 0 0 0-.84-4.06c-3-10.85-11.12-18.14-18.42-16.69a30.85 30.85 0 0 1 22.23-10.62 32.18 32.18 0 0 1 11.86 1.67c-5.88 3.41-8.42 13-5.67 23 3.08 11.18 11.62 18.58 19.08 16.53z"/><path class="cls-9" d="M163.71 55.81c3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-10-.21-19.61 5.67-23a9.33 9.33 0 0 1 2.25-1c7.46-2.02 16 5.38 19.08 16.56z"/><path class="cls-8" d="M124.84 85.13l5.3 6.38a31.52 31.52 0 0 1-10.26-2.11 11 11 0 0 0 4.96-4.27z"/><path class="cls-9" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25l-24.33-29.27c1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06z"/><path class="cls-9" d="M100.51 55.86l24.33 29.27a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39z"/><path class="cls-8" d="M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13 28.08 28.08 0 0 1-10.26 14.78 27.86 27.86 0 0 1-16.66 5.5L79.04 69.53a28 28 0 0 1 21.46-13.67c-2.13 4.58-2.58 10.91-.79 17.39 3.08 11.18 11.62 18.58 19.08 16.53a8.27 8.27 0 0 0 1.09-.38zM79.04 69.53l24.17 42.27a28 28 0 0 1-24.17-42.27z"/><path class="cls-8" d="M103.21 111.8s-22.55 1.78-42.87-5.51 18.7-36.76 18.7-36.76a28 28 0 0 0 24.17 42.27z"/><path class="cls-7" d="M79.04 69.53s-39 29.47-18.71 36.76 42.88 5.51 42.88 5.51M119.88 106.29a28.08 28.08 0 0 0 10.26-14.76M100.5 55.86a28 28 0 1 0 19.36 50.44M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13h2.76a30.58 30.58 0 0 0 23.22-11.82M108.29 49.12a30.85 30.85 0 0 1 22.23-10.59 32.18 32.18 0 0 1 11.86 1.67M119.88 106.29"/><path class="cls-7" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39 1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06M142.38 40.23a9.33 9.33 0 0 1 2.25-1c7.46-2 16 5.35 19.08 16.53 3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-9.93-.21-19.56 5.67-22.97zM127.55 69.88"/><circle class="cls-10" cx="121.08" cy="97.99" r="1.21"/><circle class="cls-10" cx="121.68" cy="94.89" r=".61"/><circle class="cls-10" cx="123.98" cy="95.89" r=".39"/></g><g id="nose"><path class="cls-12" d="M158.21 88.14s-15-7.48-14.14-8.46-1.66 1.52-1.66 1.52c4 .33 11.67 12.18 11.67 12.18"/><ellipse class="cls-13" cx="292.91" cy="122.23" rx="3.34" ry="1.89" transform="rotate(-51.71 192.082 247.63)"/></g><g id="shadows"><path class="cls-14" d="M119.88 89.4s-34.89-1.12-38.22 12.32c0 0 12.9 17.58 37.35 5.2 0 0 10.56-9.67 11.13-15.4 0 .01-10.93-.87-10.26-2.12z"/><path class="cls-14" d="M81.66 101.72s-31.43 1.67-21.34 4.57 32.93 7.11 37 5.51c-.01 0-15.29-6.73-15.66-10.08z"/></g><g id="lights"><path class="cls-16" d="M128.98 38.85s-15 1-20.69 10.27c0 0 15.28-10.05 20.69-10.27zM100.5 55.86S83.77 57.3 76.21 76.04c0 0 13.58-16.85 24.29-20.18zM78.58 69.88S57.78 87 56.14 93.53"/></g><g id="hair"><path class="cls-17" d="M134.75 117.27l1.01-3.74M133.46 113.53l-3.32-1.54M131.85 108.87l1.61-2.58"/><path class="cls-18" d="M112.68 119.71l.53-2.44M107.12 117.27h3.09v-3.74M127.55 115.4h-2.21M126.45 110.67l1.1-3.09M99.27 124.01l1.65-2.27M94.49 119.71h2.83M96.94 117.27l2.33-1.87"/><path class="cls-19" d="M113.32 36.79c9.36-2.93 13.12 8.68 13.12 8.68M127 42.55l-.55-6.85"/></g><g id="eyes"><ellipse cx="253.34" cy="111.51" rx="8.43" ry="10.34" transform="rotate(-22.59 106.112 438.183)"/><ellipse cx="290.34" cy="101" rx="8.43" ry="10.34" transform="rotate(-22.59 143.093 427.685)"/><ellipse class="cls-20" cx="256.2" cy="105.15" rx="1.31" ry="2.26" transform="rotate(-45 149.82 254.532)"/><ellipse class="cls-20" cx="293.63" cy="94.75" rx="1.31" ry="2.26" transform="rotate(-45 187.25 244.128)"/><circle class="cls-20" cx="118.24" cy="75.68" r=".4"/><circle class="cls-20" cx="156.12" cy="65.55" r=".4"/></g></g></svg>
<div id="text">
<h1> ouch </h1>
</div>
</div>

I think elementFromPoint is what you're really looking for isn't it? This will return what the mouse is over. At the moment you're matching on the entire bounding box including parts where the fly is not drawn.
As for the rest I've incorporated Paul LeBau's fixes in my answer. I.e check for collision in the drawFrame.
var svg = document.getElementById('svg');
var fly = document.getElementById('fly');
var text = document.getElementById('text');
var svgContainer = document.getElementById('svg-container');
var angleX = 0;
var angleY = 0;
var range = 100;
var xspeed = 0.06;
var yspeed = 0.08;
var transY = 0;
var transX = 0;
var mouseX = 0;
var mouseY = 0;
function drawFrame() {
window.requestAnimationFrame(drawFrame);
transX = Math.sin(angleX) * range;
transY = Math.sin(angleY) * range;
fly.style.transform = `translate3d(${transX}px,${transY}px,0)`
angleX += xspeed;
angleY += yspeed;
/* if the mouse x position collides with the fly i want to display the message */
var e = document.elementFromPoint(mouseX, mouseY);
if (e instanceof SVGElement && !(e instanceof SVGSVGElement)) {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
window.requestAnimationFrame(drawFrame);
svgContainer.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTAiIGhlaWdodD0iMTEwIiB2aWV3Qm94PSIwIDAgMTA0LjM4IDE3MS4yMyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtpc29sYXRpb246aXNvbGF0ZTt9LmNscy0yLC5jbHMtMywuY2xzLTR7ZmlsbDpub25lO30uY2xzLTIsLmNscy00LC5jbHMtNXtzdHJva2U6IzA3OGVhZDt9LmNscy0yLC5jbHMtMywuY2xzLTQsLmNscy01e3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTJ7c3Ryb2tlLXdpZHRoOjAuNzVweDt9LmNscy0ze3N0cm9rZTojMDAwO30uY2xzLTQsLmNscy01e3N0cm9rZS13aWR0aDowLjVweDt9LmNscy01e2ZpbGw6IzA1N2ZhMDt9LmNscy02e2ZpbGw6IzA2MGY3YztvcGFjaXR5OjAuMzk7bWl4LWJsZW5kLW1vZGU6bXVsdGlwbHk7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5mbHlzd2F0PC90aXRsZT48ZyBjbGFzcz0iY2xzLTEiPjxnIGlkPSJ0b3AiPjxyZWN0IGNsYXNzPSJjbHMtMiIgeD0iMTg1LjUiIHk9IjMyLjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI3MiIgcng9IjEyIiByeT0iMTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODQuNTQgNzUuMjkpIHJvdGF0ZSgtMjYuMTQpIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjQxLjQ0LDk1Ljg3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTQiIHBvaW50cz0iMzIuNTkgODMuMjYgMS4zMSAyMy42MyA0OS45OSAxLjYzIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNC4zMSIgeTE9IjE5LjYzIiB4Mj0iMzYuNiIgeTI9IjgzLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iOC4zMSIgeTE9IjE3LjYzIiB4Mj0iNDAuNiIgeTI9IjgxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuMzEiIHkxPSIxNS42MyIgeDI9IjQ0LjYiIHkyPSI3OS4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iMTMuNjMiIHgyPSI0OC42IiB5Mj0iNzcuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMC4zMSIgeTE9IjExLjYzIiB4Mj0iNTIuNiIgeTI9Ijc1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjMuMzEiIHkxPSI5LjYzIiB4Mj0iNTUuNiIgeTI9IjczLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjcuMzEiIHkxPSI3LjYzIiB4Mj0iNTkuNiIgeTI9IjcxLjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzEuMzEiIHkxPSI1LjYzIiB4Mj0iNjMuNiIgeTI9IjY5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzUuMzEiIHkxPSIzLjYzIiB4Mj0iNjcuNiIgeTI9IjY3LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMzkuMzEiIHkxPSIxLjYzIiB4Mj0iNzEuNiIgeTI9IjY1LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNDMuNiIgeTE9IjAuMzQiIHgyPSI3NS42IiB5Mj0iNjIuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3Ny41MyIgeTE9IjU3LjM0IiB4Mj0iNDguNiIgeTI9IjEuMzQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIwLjM5IiB5MT0iMjguNjgiIHgyPSI1My42OSIgeTI9IjQuNDQiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyOS44NyIgeTE9IjgyLjczIiB4Mj0iNzcuNiIgeTI9IjU5LjM0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjUuNjUiIHkxPSI4MC4zOCIgeDI9Ijc3LjgyIiB5Mj0iNTUuNjciLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIyMy4xIiB5MT0iNzcuODQiIHgyPSI3Ny4xNSIgeTI9IjUyLjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMjEuNjMiIHkxPSI3NC4zMyIgeDI9Ijc1Ljg4IiB5Mj0iNDguNyIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE5LjkxIiB5MT0iNzAuODQiIHgyPSI3NC4zMSIgeTI9IjQ1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTguMiIgeTE9IjY3LjM0IiB4Mj0iNzIuODEiIHkyPSI0Mi40NSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjE2LjMxIiB5MT0iNjMuNSIgeDI9IjcwLjg2IiB5Mj0iMzguNDYiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSIxNC42NyIgeTE9IjYwLjE1IiB4Mj0iNjkuNCIgeTI9IjM1LjQ5Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTIuODMiIHkxPSI1Ni40IiB4Mj0iNjcuNiIgeTI9IjMxLjgyIi8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iMTAuOTEiIHkxPSI1Mi40OSIgeDI9IjY2LjA2IiB5Mj0iMjguNjgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI5LjA1IiB5MT0iNDguNyIgeDI9IjY0LjE5IiB5Mj0iMjQuODgiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI3LjQ3IiB5MT0iNDUuNDkiIHgyPSI2Mi42NSIgeTI9IjIxLjc0Ii8+PGxpbmUgY2xhc3M9ImNscy00IiB4MT0iNS42OCIgeTE9IjQxLjg0IiB4Mj0iNjAuOTQiIHkyPSIxOC4yNSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjQuMDIiIHkxPSIzOC40NiIgeDI9IjU5LjYiIHkyPSIxNC41MSIvPjxsaW5lIGNsYXNzPSJjbHMtNCIgeDE9IjIuNTYiIHkxPSIzNS40OSIgeDI9IjU4LjEiIHkyPSIxMS42MyIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTE3Ni43OSw1OC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3Ni40IC0yNi42NikiLz48bGluZSBjbGFzcz0iY2xzLTQiIHgxPSI1Ni4xIiB5MT0iNy44NCIgeDI9IjEuMSIgeTI9IjMxLjg0Ii8+PC9nPjxnIGlkPSJoYW5kbGUiPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTIyNy41LDEwMi41bDQ0LDk0czUsNCw5LTNsLTQzLTk2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc2LjQgLTI2LjY2KSIvPjwvZz48ZyBpZD0ic2hhZG93cyI+PHBvbHlnb24gY2xhc3M9ImNscy02IiBwb2ludHM9IjYxLjEgNzAuODQgNTguMSA3Mi44NCAxMDIuMSAxNjguODQgMTA0LjEgMTY2Ljg0IDYxLjEgNzAuODQiLz48L2c+PC9nPjwvc3ZnPg=='),auto;
}
.svg-container {
display: flex;
flex-direction: column;
text-align: center;
}
#svg {
width: 7em;
height: auto;
padding: 8em;
margin: auto;
}
#back_wing {
animation: backwing .2s linear reverse infinite;
}
#forward_wing {
animation: frontwing .2s linear reverse infinite;
}
#keyframes backwing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(12deg);
}
}
#keyframes frontwing {
0% {
transform: rotate(0);
}
50% {
transform: rotate(7deg);
}
}
h1 {
text-align: center;
}
#text {
display: none;
color: red;
}
<h1> Flies have feelings </h1>
<div id="svg-container" class="svg-container">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.32 126.08"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#f4f4f4;}.cls-11,.cls-12,.cls-2,.cls-5,.cls-7{stroke:#000;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-17,.cls-18,.cls-19,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{stroke-miterlimit:10;}.cls-18,.cls-19,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7{fill:none;}.cls-3,.cls-4{stroke:#73e4ef;}.cls-10,.cls-17,.cls-18,.cls-3,.cls-6{stroke-width:0.25px;}.cls-5{stroke-width:2px;}.cls-6{stroke:#189cb2;}.cls-12,.cls-17,.cls-8{fill:#4d727b;}.cls-9{fill:#d40000;}.cls-10{fill:#5a9761;}.cls-10,.cls-13,.cls-17,.cls-18,.cls-19{stroke:#000202;}.cls-11{fill:#0b8e9b;}.cls-11,.cls-12,.cls-13{stroke-width:0.5px;}.cls-13{fill:#3d595e;}.cls-14{fill:#0f1c59;opacity:0.4;mix-blend-mode:multiply;}.cls-15,.cls-16{fill:#f2f970;}.cls-16{opacity:0.5;mix-blend-mode:overlay;}.cls-19{stroke-width:0.75px;}.cls-20{fill:#fff;}</style></defs><title>fly</title><g id="fly" class="cls-1"><g id="back_wing"><path class="cls-2" d="M94.49 57.12s14.44-78 39-50.92-33 49.66-33 49.66z"/><g id="back_wing_pattern"><path class="cls-3" d="M113.33 49.67l-12.41-17.56M117.06 2.74l-8.77 39.81M113.33 22.65l23.93 6.16"/></g></g><g id="legs"><path class="cls-5" d="M105.73 105.18l-9.79 9.21 3.94 11.36"/><path class="cls-5" d="M114.69 121.74l-11.63-11.75 7.82-13.71 17.9 3.66 6.98 20.26"/><path class="cls-5" d="M110.21 100.47l14.34 5.82 4.74 10.98"/></g><g id="forward_wing"><path class="cls-2" d="M97.31 64.03S53.63 11.71 23.67 11.39s-32 38.31.4 46 66.74 8.92 66.74 8.92z"/><g id="forward_wing_pattern"><path class="cls-3" d="M61.82 63.86l10.39-25.59M17.79 11.89l16.14 47.62M19.12 15.83l45.44 41.29"/></g></g><g id="body"><path class="cls-8" d="M156.12 79.68a30.58 30.58 0 0 1-23.22 11.85h-2.76l-5.3-6.38c2.47-3.76 3.52-9.29 2.71-15.25a31.51 31.51 0 0 0-.84-4.06c-3-10.85-11.12-18.14-18.42-16.69a30.85 30.85 0 0 1 22.23-10.62 32.18 32.18 0 0 1 11.86 1.67c-5.88 3.41-8.42 13-5.67 23 3.08 11.18 11.62 18.58 19.08 16.53z"/><path class="cls-9" d="M163.71 55.81c3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-10-.21-19.61 5.67-23a9.33 9.33 0 0 1 2.25-1c7.46-2.02 16 5.38 19.08 16.56z"/><path class="cls-8" d="M124.84 85.13l5.3 6.38a31.52 31.52 0 0 1-10.26-2.11 11 11 0 0 0 4.96-4.27z"/><path class="cls-9" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25l-24.33-29.27c1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06z"/><path class="cls-9" d="M100.51 55.86l24.33 29.27a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39z"/><path class="cls-8" d="M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13 28.08 28.08 0 0 1-10.26 14.78 27.86 27.86 0 0 1-16.66 5.5L79.04 69.53a28 28 0 0 1 21.46-13.67c-2.13 4.58-2.58 10.91-.79 17.39 3.08 11.18 11.62 18.58 19.08 16.53a8.27 8.27 0 0 0 1.09-.38zM79.04 69.53l24.17 42.27a28 28 0 0 1-24.17-42.27z"/><path class="cls-8" d="M103.21 111.8s-22.55 1.78-42.87-5.51 18.7-36.76 18.7-36.76a28 28 0 0 0 24.17 42.27z"/><path class="cls-7" d="M79.04 69.53s-39 29.47-18.71 36.76 42.88 5.51 42.88 5.51M119.88 106.29a28.08 28.08 0 0 0 10.26-14.76M100.5 55.86a28 28 0 1 0 19.36 50.44M119.88 89.4a31.52 31.52 0 0 0 10.26 2.13h2.76a30.58 30.58 0 0 0 23.22-11.82M108.29 49.12a30.85 30.85 0 0 1 22.23-10.59 32.18 32.18 0 0 1 11.86 1.67M119.88 106.29"/><path class="cls-7" d="M127.55 69.88c.81 6-.24 11.49-2.71 15.25a11 11 0 0 1-5 4.27 8.27 8.27 0 0 1-1.09.38c-7.46 2-16-5.35-19.08-16.53-1.79-6.48-1.34-12.81.79-17.39 1.55-3.32 4-5.71 7.12-6.58l.66-.16c7.3-1.45 15.43 5.84 18.42 16.69a31.51 31.51 0 0 1 .84 4.06M142.38 40.23a9.33 9.33 0 0 1 2.25-1c7.46-2 16 5.35 19.08 16.53 3 11-.37 21.59-7.59 23.87l-.33.1c-7.46 2-16-5.35-19.08-16.53-2.75-9.93-.21-19.56 5.67-22.97zM127.55 69.88"/><circle class="cls-10" cx="121.08" cy="97.99" r="1.21"/><circle class="cls-10" cx="121.68" cy="94.89" r=".61"/><circle class="cls-10" cx="123.98" cy="95.89" r=".39"/></g><g id="nose"><path class="cls-12" d="M158.21 88.14s-15-7.48-14.14-8.46-1.66 1.52-1.66 1.52c4 .33 11.67 12.18 11.67 12.18"/><ellipse class="cls-13" cx="292.91" cy="122.23" rx="3.34" ry="1.89" transform="rotate(-51.71 192.082 247.63)"/></g><g id="shadows"><path class="cls-14" d="M119.88 89.4s-34.89-1.12-38.22 12.32c0 0 12.9 17.58 37.35 5.2 0 0 10.56-9.67 11.13-15.4 0 .01-10.93-.87-10.26-2.12z"/><path class="cls-14" d="M81.66 101.72s-31.43 1.67-21.34 4.57 32.93 7.11 37 5.51c-.01 0-15.29-6.73-15.66-10.08z"/></g><g id="lights"><path class="cls-16" d="M128.98 38.85s-15 1-20.69 10.27c0 0 15.28-10.05 20.69-10.27zM100.5 55.86S83.77 57.3 76.21 76.04c0 0 13.58-16.85 24.29-20.18zM78.58 69.88S57.78 87 56.14 93.53"/></g><g id="hair"><path class="cls-17" d="M134.75 117.27l1.01-3.74M133.46 113.53l-3.32-1.54M131.85 108.87l1.61-2.58"/><path class="cls-18" d="M112.68 119.71l.53-2.44M107.12 117.27h3.09v-3.74M127.55 115.4h-2.21M126.45 110.67l1.1-3.09M99.27 124.01l1.65-2.27M94.49 119.71h2.83M96.94 117.27l2.33-1.87"/><path class="cls-19" d="M113.32 36.79c9.36-2.93 13.12 8.68 13.12 8.68M127 42.55l-.55-6.85"/></g><g id="eyes"><ellipse cx="253.34" cy="111.51" rx="8.43" ry="10.34" transform="rotate(-22.59 106.112 438.183)"/><ellipse cx="290.34" cy="101" rx="8.43" ry="10.34" transform="rotate(-22.59 143.093 427.685)"/><ellipse class="cls-20" cx="256.2" cy="105.15" rx="1.31" ry="2.26" transform="rotate(-45 149.82 254.532)"/><ellipse class="cls-20" cx="293.63" cy="94.75" rx="1.31" ry="2.26" transform="rotate(-45 187.25 244.128)"/><circle class="cls-20" cx="118.24" cy="75.68" r=".4"/><circle class="cls-20" cx="156.12" cy="65.55" r=".4"/></g></g></svg>
<div id="text">
<h1> ouch </h1>
</div>
</div>

Related

Transition Glitch in firefox while tracking mouse position

It's kind of long but recently I was working on a smile face whose eyes track mouse position and I succeeded doing it because I use chrome browser!
but when I tested this in firefox, there was an issue -
so the mouse enters the smile yellow ball from a position let say a and the eyes have x-y position with respect to 'a' now when next time the mouse enters or exits the yellow smile ball the eyes glitches with the last position of interaction!
see in video
https://drive.google.com/file/d/1wx5Lz2Z6h6ZZpeH7AYboGTOP-rSHLS_9/view?usp=sharing
const eyeBalls = document.querySelectorAll("[data-eye-ball]")
const cursor = document.querySelector("#cursor")
function test(eyeball) {
const eyeballRect = eyeball.getBoundingClientRect()
window.addEventListener("mousemove", (e) => {
cursor.style.left = e.pageX + "px"
cursor.style.top = e.pageY + "px"
let mouseP = e.y - (eyeballRect.y + eyeballRect.height / 2)
let mouseB = e.x - (eyeballRect.x + eyeballRect.width / 2)
let mouseH = Math.hypot(mouseP, mouseB)
let eyeBallH = 3
let eyeBallSize = 1
if (e.target.closest(".eye")) {
eyeBallH = 0
eyeBallSize = 1.25
}
let eyeBallP = (mouseP / mouseH) * eyeBallH
let eyeBallB = (mouseB / mouseH) * eyeBallH
eyeball.style.transform = `translate(${eyeBallB}vmin, ${eyeBallP}vmin) scale(${eyeBallSize})`
})
}
test(eyeBalls[0])
test(eyeBalls[1])
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-color: hsl(240, 5%, 10%);
--eye-ball-bg: hsl(240, 5%, 25%);
--accent: hsl(40, 90%, 50%);
--mid-color: hsl(240, 5%, 65%);
--mouth-bg: hsl(40, 80%, 40%);
--light-color: hsl(0, 0%, 97%);
--red: hsl(10, 80%, 40%);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
body {
width: 100%;
height: 100vh;
background-color: var(--dark-color);
color: var(--light-color);
cursor: none;
}
.smile-box {
width: 100vmin;
height: 100vmin;
flex-grow: 0;
flex-shrink: 0;
}
.smile-circle {
width: 75vmin;
height: 75vmin;
background-color: var(--accent);
border-radius: 50%;
position: relative;
}
/* eyes */
.eye {
width: 16vmin;
height: 16vmin;
border-radius: 50%;
background-color: var(--light-color);
position: absolute;
top: 32%;
}
.left-eye {
left: 30%;
transform: translate(-50%, -50%);
}
.right-eye {
right: 30%;
transform: translate(50%, -50%);
}
.eye-ball {
width: 8vmin;
height: 8vmin;
background-color: var(--eye-ball-bg);
border-radius: 50%;
transition: transform 100ms ease;
}
/* mouth */
.mouth-wraper {
height: 20vmin;
width: 40vmin;
border-radius: 0vmin 0vmin 20vmin 20vmin;
background-color: var(--mouth-bg);
transition: border-radius 250ms ease, height 250ms ease, width 250ms ease;
position: absolute;
left: 50%;
bottom: 30%;
transform: translate(-50%, 50%);
}
.smile-circle:hover .mouth-wraper {
width: 35vmin;
height: 10vmin;
border-radius: 5rem;
}
/* cursor */
#cursor {
width: 3rem;
height: 3rem;
border-radius: 50%;
pointer-events: none;
position: fixed;
transform: translate(-50%, -50%);
left: 5%;
top: 5%;
display: flex;
align-items: center;
justify-content: center;
}
#cursor svg {
transition: fill 100ms ease;
}
.smile-circle:hover #cursor svg {
fill: hsl(240, 100%, 65%);
}
<body class="flex-center">
<div class="smile-box flex-center">
<div class="smile-circle">
<div class="eye left-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="eye right-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="mouth-wraper"></div>
<div id="cursor">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
width="48"
fill="#ffffff"
>
<path
d="M17 25.5Q17.65 25.5 18.075 25.05Q18.5 24.6 18.5 24Q18.5 23.4 18.075 22.95Q17.65 22.5 17 22.5Q16.4 22.5 15.95 22.95Q15.5 23.4 15.5 24Q15.5 24.6 15.95 25.05Q16.4 25.5 17 25.5ZM27.5 19.5Q28.15 19.5 28.575 19.05Q29 18.6 29 18Q29 17.4 28.575 16.95Q28.15 16.5 27.5 16.5Q26.9 16.5 26.45 16.95Q26 17.4 26 18Q26 18.6 26.45 19.05Q26.9 19.5 27.5 19.5ZM20.5 19.5Q21.1 19.5 21.55 19.05Q22 18.6 22 18Q22 17.4 21.55 16.95Q21.1 16.5 20.5 16.5Q19.9 16.5 19.45 16.95Q19 17.4 19 18Q19 18.6 19.45 19.05Q19.9 19.5 20.5 19.5ZM20.5 31.5Q21.1 31.5 21.55 31.05Q22 30.6 22 30Q22 29.4 21.55 28.95Q21.1 28.5 20.5 28.5Q19.9 28.5 19.45 28.95Q19 29.4 19 30Q19 30.6 19.45 31.05Q19.9 31.5 20.5 31.5ZM22.5 44Q22.1 44 21.8 43.7Q21.5 43.4 21.5 43Q21.5 42.6 21.8 42.3Q22.1 42 22.5 42H23V37.45Q20.75 37.2 18.75 36.375Q16.75 35.55 15.15 34.2L11.95 37.4L12.35 37.8Q12.6 38.05 12.675 38.425Q12.75 38.8 12.35 39.2Q12.05 39.5 11.65 39.5Q11.25 39.5 10.95 39.2L8.8 37.1Q8.5 36.8 8.5 36.4Q8.5 36 8.8 35.65Q9.1 35.35 9.475 35.35Q9.85 35.35 10.25 35.7L10.55 36L13.75 32.8Q12.45 31.15 11.625 29.2Q10.8 27.25 10.55 25H6V25.5Q6 25.9 5.7 26.2Q5.4 26.5 5 26.5Q4.6 26.5 4.3 26.2Q4 25.9 4 25.5V22.5Q4 22.1 4.3 21.8Q4.6 21.5 5 21.5Q5.4 21.5 5.7 21.8Q6 22.1 6 22.5V23H10.55Q10.8 20.75 11.625 18.8Q12.45 16.85 13.75 15.2L10.55 12L10.2 12.35Q9.9 12.65 9.5 12.65Q9.1 12.65 8.8 12.35Q8.5 12.05 8.5 11.625Q8.5 11.2 8.8 10.9L10.9 8.8Q11.2 8.5 11.625 8.5Q12.05 8.5 12.35 8.8Q12.65 9.05 12.65 9.475Q12.65 9.9 12.35 10.15L11.95 10.55L15.15 13.75Q16.8 12.45 18.75 11.625Q20.7 10.8 22.95 10.55V6H22.5Q22.1 6 21.8 5.7Q21.5 5.4 21.5 5Q21.5 4.6 21.8 4.3Q22.1 4 22.5 4H25.5Q25.9 4 26.2 4.3Q26.5 4.6 26.5 5Q26.5 5.4 26.2 5.7Q25.9 6 25.5 6H25V10.55Q27.25 10.8 29.2 11.625Q31.15 12.45 32.8 13.75L36 10.55L35.7 10.25Q35.35 9.95 35.325 9.55Q35.3 9.15 35.65 8.8Q35.95 8.5 36.35 8.5Q36.75 8.5 37.05 8.8L39.25 11Q39.55 11.3 39.525 11.675Q39.5 12.05 39.2 12.35Q38.9 12.65 38.5 12.6Q38.1 12.55 37.75 12.25L37.45 11.95L34.25 15.15Q35.55 16.8 36.375 18.775Q37.2 20.75 37.45 23H42V22.5Q42 22.1 42.3 21.8Q42.6 21.5 43 21.5Q43.4 21.5 43.7 21.8Q44 22.1 44 22.5V25.5Q44 25.9 43.7 26.2Q43.4 26.5 43 26.5Q42.6 26.5 42.3 26.2Q42 25.9 42 25.5V25H37.45Q37.2 27.25 36.375 29.225Q35.55 31.2 34.25 32.85L37.45 36.05L37.8 35.7Q38.1 35.4 38.5 35.375Q38.9 35.35 39.2 35.65Q39.5 35.95 39.5 36.375Q39.5 36.8 39.2 37.1L37.1 39.2Q36.8 39.5 36.375 39.5Q35.95 39.5 35.65 39.2Q35.3 38.85 35.35 38.475Q35.4 38.1 35.6 37.85L36 37.45L32.8 34.25Q31.15 35.55 29.2 36.4Q27.25 37.25 25 37.5V42H25.5Q25.9 42 26.2 42.3Q26.5 42.6 26.5 43Q26.5 43.4 26.2 43.7Q25.9 44 25.5 44ZM24 34.5Q28.4 34.5 31.45 31.425Q34.5 28.35 34.5 24Q34.5 19.6 31.45 16.55Q28.4 13.5 24 13.5Q19.65 13.5 16.575 16.55Q13.5 19.6 13.5 24Q13.5 28.35 16.575 31.425Q19.65 34.5 24 34.5ZM24 25.5Q24.6 25.5 25.05 25.05Q25.5 24.6 25.5 24Q25.5 23.4 25.05 22.95Q24.6 22.5 24 22.5Q23.4 22.5 22.95 22.95Q22.5 23.4 22.5 24Q22.5 24.6 22.95 25.05Q23.4 25.5 24 25.5ZM31 25.5Q31.65 25.5 32.075 25.05Q32.5 24.6 32.5 24Q32.5 23.4 32.075 22.95Q31.65 22.5 31 22.5Q30.4 22.5 29.95 22.95Q29.5 23.4 29.5 24Q29.5 24.6 29.95 25.05Q30.4 25.5 31 25.5ZM27.5 31.5Q28.15 31.5 28.575 31.05Q29 30.6 29 30Q29 29.4 28.575 28.95Q28.15 28.5 27.5 28.5Q26.9 28.5 26.45 28.95Q26 29.4 26 30Q26 30.6 26.45 31.05Q26.9 31.5 27.5 31.5ZM24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Z"
/>
</svg>
</div>
</div>
</div>
</body>
PLEASE HELB

SVG images formatting issues in CSS

I'm trying to achieve a similar effect to Lando Norris' website where his achievements scroll horizontally. I tried recreating that by creating svg images and then formatting them with the help of css. It doesn't seem to work on most web browsers though. Should I change my approach at recreating this horizontal banner or is there a way to make the images display properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PawelosFPV achievements</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
position: relative;
}
:root {
font-family: "PT Sans", sans-serif;
font-size: 20px;
}
body {
background-color: #EFF1ED;
min-height: 100vh;
}
h1 {
color: #161032;
font-family: "Baloo Tamma", sans-serif;
font-size: 1.5rem;
}
h1::after {
background-color: #00A8E8;
bottom: 0;
content: "";
display: block;
height: 0.25rem;
position: absolute;
width: 1rem;
}
p {
color: rgba(0, 0, 0, 0.8);
}
.container {
margin: 0 auto 2rem;
max-width: 900px;
padding: 0 1.5rem;
}
.sample-item {
width: auto;
height: 125px;
vertical-align: middle;
padding-right: 20px;
}
.horizontal-scrolling-banner {
overflow: hidden;
}
.horizontal-scrolling-banner__helper-wrapper {
align-items: center;
display: flex;
left: 0;
transform: translateZ(0);
transition-property: left;
transition-timing-function: linear;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
</div>
<div class="horizontal-scrolling-banner">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">
</div>
</div>
<!-- partial -->
<script>
(function horizontalScrollingBanner() {
var banners = document.getElementsByClassName('horizontal-scrolling-banner');
if (!banners || banners.length === 0) {
return;
}
var pxPerSecond = 25;
setUpElements();
scrollTheBanners();
window.addEventListener('resize', setUpElements);
function setUpElements() {
for (var i = 0; i < banners.length; i++) {
var currentBanner = banners[i];
var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
if (currentHelperWrapper) {
var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
Array.prototype.forEach.call(clones, function(clone) {
clone.remove();
});
var childrenCount = currentHelperWrapper.children.length;
for (var i = 0; i < childrenCount; i++) {
currentBanner.appendChild(currentHelperWrapper.children[0]);
}
currentHelperWrapper.remove();
}
var children = currentBanner.children;
var bannerWidth = currentBanner.getBoundingClientRect().width;
var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
return r + child.getBoundingClientRect().width;
}, 0);
var currentWidth = childrenWidth;
do {
Array.prototype.forEach.call(children, function(child) {
var clone = child.cloneNode();
clone.setAttribute('aria-hidden', true);
clone.dataset.clone = true;
currentBanner.appendChild(clone);
});
currentWidth += childrenWidth;
} while (currentWidth < minWidthToCoverBanner);
var transitionHelperWrapper = document.createElement('div');
transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
var childrenCount = children.length;
for (var i = 0; i < childrenCount; i++) {
transitionHelperWrapper.appendChild(children[0]);
}
currentBanner.appendChild(transitionHelperWrapper);
transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
}
}
function scrollTheBanners() {
for (var i = 0; i < banners.length; i++) {
var helperWrapper = banners[i].firstElementChild;
var childrenWidth = helperWrapper.dataset.childrenWidth;
var offsetLeft = helperWrapper.offsetLeft;
if (offsetLeft <= (childrenWidth * -1)) {
helperWrapper.style.transitionDuration = '0s';
helperWrapper.style.left = '0px';
helperWrapper.style.removeProperty('transition-duration');
} else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
setTimeout(function() {
helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
helperWrapper.style.left = (childrenWidth * -1) + 'px';
}, 0);
}
}
requestAnimationFrame(scrollTheBanners);
}
})();
</script>
</body>
</html>
Fonts are are not automatically embedded
Locally installed fonts used in svg are not available for users of your website/app unless they happen to have this particular font installed.
Besides firefox usually rejects local font file usage due to security policies (could be changed in settings as described here: "Custom (System installed) fonts in Firefox?")
Some options:
Open your svg in Illustrator and convert text to (path) outlines before saving as svg via convert text to outlines selcting all elements by CTRLa and CTRLshiftO should do the trick
embed the font via #font-face using a data URL. A tool like transfonter can help
You should also concider using an open source alternative to your font like the SIL OFL v1.1 licensed "D-Din" available on font squirrel
Still weird letter spacing?
Illustrator often splits text elements into seperate <text>or <tspan> elements. This is usually caused by customized spacing/kerning values.
<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>
Unfortunately markup will only work for this particular font. So you might need to simplify your structure like so:
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
Example: embedded vs not embedded font
img,
svg{
height:200px
}
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#700" rel="stylesheet">
<p>Font embedded</p>
<img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
<img src="https://svgshare.com/i/iY4.svg" class="sample-item">
<p>Inline SVG - using Webfont (Roboto)</p>
<svg id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
<defs>
<style>
text {
font-family: 'Roboto Condensed', sans-serif;
font-size: 32px;
font-weight: bold;
}
</style>
</defs>
<path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
<use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
</use>
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
</svg>
Inline svg (appended to your html body) could use webfonts loaded via #font-face. Unfortunately your carousel script apparenty only support single elements (without nested child nodes).

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

Animate a circle with the growth of <path> on scroll

Question updated
This what I have done so far.
It works fine but I want to do an animation which is little much complicated for me.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
// What % down is it?
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
myline.style.strokeDashoffset = length - draw;
}
body {
height: 2000px;
background: #f1f1f1;
}
#mySVG {
position: fixed;
top: 15%;
width: 100vw;
height: 100vh;
margin-left: -50px;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: red;
stroke-width: 5;
stroke-miterlimit: 10;
stroke-dasharray: 20;
}
<h2>Scroll down this window to draw my path.</h2>
<p>Scroll back up to reverse the drawing.</p>
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible">
<path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG.
</svg>
what I want is to animate a <circle> with the growth of the <path> like
I know the path is growing using the strokeDasharray. But still, is there a way to attain what am looking for.? if no then please do suggest another way. thank you..!
Use getPointAtLength()
Looks like another answer already suggested this :)
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
// What % down is it?
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
myline.style.strokeDashoffset = length - draw;
//get point at length
endPoint = myline.getPointAtLength(draw);
circle.setAttribute("cx", endPoint.x);
circle.setAttribute("cy", endPoint.y);
}
body {
height: 2000px;
background: #f1f1f1;
}
#circle{
fill:red;
}
#mySVG {
position: fixed;
top: 15%;
width: 100vw;
height: 100vh;
margin-left: -50px;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: red;
stroke-width: 5;
stroke-miterlimit: 10;
stroke-dasharray: 20;
}
<h2>Scroll down this window to draw my path.</h2>
<p>Scroll back up to reverse the drawing.</p>
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible">
<circle id="circle" cx="10" cy="10" r="10"/>
<path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG.
</svg>
I'm not sure if you want to just draw a circle or a circle at the end of the line, but maybe getPointAtLength() could help you.
You can get the point at the end the line with myline.getPointAtLength(draw) you can use this to draw a circle at that point
I've added the code to console.log(myline.getPointAtLength(draw)).
My lunch break is just about over, otherwise I'd draw the circle for you too.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
// What % down is it?
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Length to offset the dashes
var draw = length * scrollpercent;
console.log(myline.getPointAtLength(draw));
// Reverse the drawing (when scrolling upwards)
myline.style.strokeDashoffset = length - draw;
}
body {
height: 2000px;
background: #f1f1f1;
}
#mySVG {
position: fixed;
top: 15%;
width: 100vw;
height: 100vh;
margin-left: -50px;
}
.st0 {
fill: none;
stroke-dashoffset: 3px;
stroke: red;
stroke-width: 5;
stroke-miterlimit: 10;
stroke-dasharray: 20;
}
<h2>Scroll down this window to draw my path.</h2>
<p>Scroll back up to reverse the drawing.</p>
<svg id="mySVG" viewBox="0 0 60 55" preserveAspectRatio="xMidYMin slice" style="width: 6%; padding-bottom: 42%; height: 1px; overflow: visible">
<path id="myline" class="st0" stroke-dasharray="10,9" d="M 20 0 v 20 a 30 30 0 0 0 30 30 h 600 a 40 40 0 0 1 0 80 h -140 a 30 30 0 0 0 0 60 h 200 a 40 40 0 0 1 0 80 h -100 a 30 30 0 0 0 -30 30 v 20" /> Sorry, your browser does not support inline SVG.
</svg>

Categories