JSFiddle - React, Tailwind, and code Playground
by Milan Gladiš
HTML
<style>
.arBadge {
position: fixed;
z-index: 10;
top: 20px;
right: 20px;
transition: all 0.3s ease;
pointer-events: none;
width: 74px;
height: 74px;
}
</style>
<svg class="arBadge" width="74" height="74" viewBox="0 0 74 74" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6" filter="url(#filter0_d)">
<circle cx="37" cy="34" r="30" fill="white"/>
</g>
<g opacity="0.6">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M41.1874 20.8472C41.0659 20.8472 40.9419 20.8159 40.8282 20.7501L37.0244 18.5485L33.2072 20.7507C32.8634 20.9488 32.425 20.8312 32.2269 20.4874C32.0288 20.1436 32.147 19.7039 32.4908 19.5058L36.6672 17.0965C36.8889 16.9681 37.1618 16.9681 37.3849 17.0971L41.5471 19.5065C41.891 19.7052 42.0079 20.1442 41.8098 20.4881C41.6762 20.7181 41.4353 20.8472 41.1874 20.8472Z"
fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M37.0243 39.7814C36.6281 39.7814 36.3066 39.4599 36.3066 39.0631V34.2444C36.3066 33.8476 36.6281 33.5261 37.0243 33.5261C37.4205 33.5261 37.742 33.8476 37.742 34.2444V39.0631C37.742 39.4599 37.4205 39.7814 37.0243 39.7814Z"
fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22.718 31.5104C22.3224 31.5104 22.001 31.189 22.001 30.7921V25.9754C22.001 25.5785 22.3224 25.2571 22.718 25.2571C23.1142 25.2571 23.4357 25.5785 23.4357 25.9754V30.7921C23.4357 31.189 23.1142 31.5104 22.718 31.5104Z"
fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M51.316 31.5104C50.9197 31.5104 50.5983 31.189 50.5983 30.7921L50.5977 25.9754C50.5977 25.5792 50.9191 25.2571 51.3153 25.2571C51.7109 25.2571 52.0324 25.5785 52.0324 25.9754L52.033 30.7921C52.033 31.189 51.7116 31.5104 51.316 31.5104Z"
fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M51.3172 43.2323C50.921 43.2323...