Looking for direction on particular effect
If you go to https://www.leagueoflegends.com/en-us/ and go to the "Choose Your Champion" section, you'll see that there are animated lines on the border of the circle. I'm curious how to go about achieving this effect?
I tried looking through the devtools and asking chatgpt for some guidance but wasn't really able to find anything.
2 Replies
it's a canvas animation
if you open the debugger and search all files for
drawCircle
you'll find how they do it
it doesn't look like it's a library they used, but luckily they're serving their webpack sourcemaps along with the code. Here's one of the functions in src/lib/components/hex-outline/hex-canvas/index.ts
:
Thanks Jochem! I never used canvas so this will be a good learning opportunity.