[Python] CSS-Html glow ray bend on top left

below is the design where the animation moves around the card, the issue is when the light reaches to the top left corner it disapears because the corner is having radious 80px can anyone tell me how i can bring the animation travel on the box border so that it will remain visible on the top right corner:

def display_animated_box(width: int = 450, height: int = 480):
"""
Displays an animated box with a card-like shape, featuring customizable dimensions in a Streamlit app.

Args:
width (int): The width of the animated box in pixels.
height (int): The height of the animated box in pixels.
"""
html_content = f"""
<div class="holder" style="width: {width}px; height: {height}px; position: relative;">
<div class="bar left"></div>
<div class="bar top"></div>
<div class="bar right"></div>
<div class="bar bottom"></div>
</div>

<style>
.holder {{
position: relative;
width: {width}px;
height: {height}px;
background: var(--clr);
border-radius: 10px;
border-top-left-radius: 80px;
overflow: hidden;
}}
.bar {{
background: #d0f0dd;
box-shadow: 0px 0px 0 #40ff22,
0px 0px 4px #30ff1f,
0px 0px 8px #20ff1b,
0px 0px 16px #10ff18;
position: absolute;
}}
.left {{
width: 4px;
animation: left 10s linear infinite;
}}
@keyframes left {{
0% {{height: 0; top: {height - 4}px; left: 0;}}
20% {{height: {height}px; top: 0; left: 0;}}
40% {{height: 0; top: 0; left: 0;}}
}}
.top {{
height: 4px;
animation: top 10s linear infinite;
}}
@keyframes top {{
0% {{width: 0; top: 0; left: 0;}}
20% {{width: 0; top: 0; left: 0;}}
40% {{width: {width}px; top: 0; left: 0;}}
60% {{width: 0; top: 0; left: {width}px;}}
}}
.right {{
width: 4px;
animation: right 10s linear infinite;
}}
@keyframes right {{
0% {{height: 0; top: 0; left: {width - 4}px;}}
40% {{height: 0; top: 0; left: {width - 4}px;}}
60% {{height: {height}px; top: 0; left: {width - 4}px;}}
80% {{height: 0; top: {height}px;left: {width - 4}px;}}
}}
.bottom {{
height: 4px;
animation: bottom 10s linear infinite;
}}
@keyframes bottom {{
0% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
60% {{width: 0; top: {height - 4}px; left: {width - 4}px;}}
80% {{width: {width}px; top: {height - 4}px; left: 0;}}
100% {{width: 0; top: {height - 4}px; left: 0;}}
}}
</style>
"""
st.html(html_content)


display_animated_box()enter code here

Continue reading...