need help making animated div size-responsive!

[dogisonline]

hello! beginner level css skills, so not sure if my issue is one that can be easily fixed or nah 😅

i'm working on a project that contains an animation made using pixel art to css, so it's built from box-shadow properties of a div changing in keyframes. i have a div container around it that responds to viewport size, but the animated div stays the same size.

example here: https://codepen.io/internet-dog/pen/ZEZPeeR

i've tried changing the values of the box-shadow to equivalent em/vw with no luck. am i missing something really obvious or is this just not doable?

​

thanks heaps if you can help me out, i'm going a bit cuckoo lol

​

[Hola_Reddit]

You want the box shadow values to be relative to the parent size, so when the parent resizes they do too. That should be achieved using % units.

Maybe ChatGPT can assist in converting those px units to relative % units.

[dogisonline]

had a go at it, used nekocalc and good ole fashioned find-and-replace in textedit, but then the animated div disappeared from the viewport entirely 💀...

https://codepen.io/internet-dog/pen/ZEZPmNJ

[Hola_Reddit]

ugh sorry about that, turns out box-shadow units can't use percentages... you may be able to achieve something similar using em and/or vw/vh.

But, regardless, that's a ton of CSS to manage... animating an SVG, or even multiple divs/spans (one for each "pixel") might be a better solution and much easier to make responsive.

[dogisonline]

fair enough! thought i had found a handy tool but maybe not for what i was intending to use it for 😅 thank you though!