<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 40 40' preserveAspectRatio='none'>
<style>
rect, path {
fill: none;
stroke: #000;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
stroke-dasharray: 4px;
animation: stroke 0.2s linear infinite;
shape-rendering: geometricPrecision;
stroke-dashoffset: 8px;
}
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
</style>
<path d='M 20,20 L 40,40'/>
<path d='M 20,20 L 00,40'/>
<path d='M 20,20 L 40,0'/>
<path d='M 20,20 L 0,0'/>
<rect width='40' height='40'/>
</svg>
svg {
display: block;
width: 50vw;
height: 50vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: visible;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.