div8.svg
1.45 KB
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="transparent" width="400" height="300" class="dv-border-svg-container">
<defs>
<path id="border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" d="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" fill="transparent"></path>
<radialGradient id="border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
<mask id="border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5">
<circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-d017f380de6f4b6da8ef829d8d549ca5)">
<animateMotion dur="3s" path="M2.5, 2.5 L397.5, 2.5 L397.5, 297.5 L2.5, 297.5 L2.5, 2.5" rotate="auto" repeatCount="indefinite"></animateMotion>
</circle>
</mask>
</defs>
<polygon fill="transparent" points="5, 5 395, 5 395 295 5, 295"></polygon>
<use stroke-width="1" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" stroke="#83bff6"></use>
<use stroke-width="3" xlink:href="#border-box-8-path-d017f380de6f4b6da8ef829d8d549ca5" mask="url(#border-box-8-mask-d017f380de6f4b6da8ef829d8d549ca5)" stroke="#00CED1">
<animate attributeName="stroke-dasharray" from="0, 1390" to="1390, 0" dur="3s" repeatCount="indefinite"></animate>
</use>
</svg>