I'm attempting to transform this shining button from a codepen I discovered into a svelte component, but for some reason the sparkles don't appear. I'm unsure if it's relevant, but I'm also utilizing Tailwind CSS, so my style tag has the attribute lang="postcss". Here's the codepen where I sourced these from: https://codepen.io/jh3y/pen/LYJMPBL. These elements constitute the button:
HTML:
<div class="sparkle-button">
<button>
<span class="spark"></span>
<!-- <span class="spark"></span> -->
<span class="backdrop"></span>
<svg class="sparkle" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.187 8.096L15 5.25L15.813 8.096C16.0231 8.83114 16.4171 9.50062 16.9577 10.0413C17.4984 10.5819 18.1679 10.9759 18.903 11.186L21.75 12L18.904 12.813C18.1689 13.0231 17.4994 13.4171 16.9587 13.9577C16.4181 14.4984 16.0241 15.1679 15.814 15.903L15 18.75L14.187 15.904C13.9769 15.168...
</svg>
<span class="text">Generate Site</span>
</button>
<div class="bodydrop"></div>
<span aria-hidden="true" class="particle-pen">
...
</span>
</div>
CSS:
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--transition: 0.25s;
...
}
button svg {
inline-size: 1.25em;
translate: -25% -5%;
}
JS:
// JavaScript used to set randomness for particles.
// Could be done via SSR
const RANDOM = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
const PARTICLES = document.querySelectorAll('.particle')
PARTICLES.forEach(P => {
P.setAttribute('style', `
--x: ${RANDOM(20, 80)};
--y: ${RANDOM(20, 80)};
--duration: ${RANDOM(6, 20)};
--delay: ${RANDOM(1, 10)};
--alpha: ${RANDOM(40, 90) / 100};
--origin-x: ${Math.random() > 0.5 ? RANDOM(300, 800) * -1 : RANDOM(300, 800)}%;
--origin-y: ${Math.random() > 0.5 ? RANDOM(300, 800) * -1 : RANDOM(300, 800)}%;
--size: ${RANDOM(40, 90) / 100};
`)
})