<svg id="inner_circle_focus" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" transform="scale(0.6)" >
<g id="outer_circle_focus_outlines_position" transform="translate(60,60)" >
<g id="outer_circle_focus_outlines_rotation" transform="rotate(0)" >
<g id="outer_circle_focus_outlines_scale_x" transform="scale(1.42353, 1)" >
<g id="outer_circle_focus_outlines_scale_y" transform="scale(1, 1.42353)" >
<g id="outer_circle_focus_outlines_pivot" transform="translate(-42.5,-42.5)" >
<g id="outer_circle_focus_outlines" opacity="0" >
<g id="group_1_transform" transform="translate(42.5,42.5)" >
<g id="group_1" >
<path id="path_1" d="M 0.0,40.0 c 22.091003418,0.0 40.0,-17.908996582 40.0,-40.0 c 0.0,-22.091003418 -17.908996582,-40.0 -40.0,-40.0 c -22.091003418,0.0 -40.0,17.908996582 -40.0,40.0 c 0.0,22.091003418 17.908996582,40.0 40.0,40.0 Z" stroke="var(--secondary-color)" stroke-width="2" fill="none" />
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="inner_circle_focus_outlines_position" transform="translate(60,60)" >
<g id="inner_circle_focus_outlines_rotation" transform="rotate(0)" >
<g id="inner_circle_focus_outlines_scale_x" transform="scale(0.37324, 1)" >
<g id="inner_circle_focus_outlines_scale_y" transform="scale(1, 0.35973)" >
<g id="inner_circle_focus_outlines_pivot" transform="translate(-37,-37)" >
<g id="inner_circle_focus_outlines" opacity="0" >
<g id="group_1_transform_0" transform="translate(37.5,37.5)" >
<g id="group_2" >
<path id="path_2" d="M -32.5,-0.5 c 0.0,17.6730041504 14.3269958496,32.0 32.0,32.0 c 17.6730041504,0.0 32.0,-14.3269958496 32.0,-32.0 c 0.0,-17.6730041504 -14.3269958496,-32.0 -32.0,-32.0 c -17.6730041504,0.0 -32.0,14.3269958496 -32.0,32.0 Z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<style>
@keyframes outer_circle_focus_outlines_scale_x_animation {
0% {
transform: scale(1.42353, 1);
animation-timing-function: cubic-bezier(0.174606606667, 0.0997861131319, 0.593112952494, 0.780748340468);
}
60% {
transform: scale(0.97887, 1);
animation-timing-function: cubic-bezier(0.351379547454, 2.65658848267, 0.698426429671, 1.0);
}
100% {
transform: scale(1.0, 1);
}
}
#outer_circle_focus_outlines_scale_x {
animation: .29s forwards outer_circle_focus_outlines_scale_x_animation;
}
@keyframes outer_circle_focus_outlines_scale_y_animation {
0% {
transform: scale(1, 1.42353);
animation-timing-function: cubic-bezier(0.174606606667, 0.0997861131319, 0.593112952494, 0.780748340468);
}
60% {
transform: scale(1, 0.97887);
animation-timing-function: cubic-bezier(0.351379547454, 2.65658848267, 0.698426429671, 1.0);
}
100% {
transform: scale(1, 1.0);
}
}
#outer_circle_focus_outlines_scale_y {
animation: .29s forwards outer_circle_focus_outlines_scale_y_animation;
}
@keyframes outer_circle_focus_outlines_animation {
0% {
opacity: 0;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
54.54545454550001% {
opacity: 1;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
100% {
opacity: 0;
}
}
#outer_circle_focus_outlines {
animation: 1.09s forwards outer_circle_focus_outlines_animation;
}
@keyframes inner_circle_focus_outlines_scale_x_animation {
0% {
transform: scale(0.37324, 1);
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
100% {
transform: scale(1.22973, 1);
}
}
#inner_circle_focus_outlines_scale_x {
animation: .29s forwards inner_circle_focus_outlines_scale_x_animation;
}
@keyframes inner_circle_focus_outlines_scale_y_animation {
0% {
transform: scale(1, 0.35973);
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
100% {
transform: scale(1, 1.22973);
}
}
#inner_circle_focus_outlines_scale_y {
animation: .29s forwards inner_circle_focus_outlines_scale_y_animation;
}
@keyframes inner_circle_focus_outlines_animation {
0% {
opacity: 0;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
50% {
opacity: 0.8;
animation-timing-function: cubic-bezier(0.0, 0.0, 0.66666667, 1.0);
}
100% {
opacity: 0;
}
}
#inner_circle_focus_outlines {
animation: .58s forwards inner_circle_focus_outlines_animation;
}
</style>
</svg>