enter image description here

Is it possible to make such a border in svg, how best to do it, hunt to still make the animation spinning?

  • 2
    Eldar, look at the site css-tricks , for this link example number 5 is likely to have what you need. - Sergey Glazirin
  • Can I have a direct link? - Eldar Gucherenko
  • This is a direct link to the article, it is just formatted, an example is on this page, below - Sergey Glazirin

1 answer 1

<style> #r1 { background: linear-gradient(45deg, #F7F3F7, #C5DDE8); } </style> <div id="r1"> <svg width="100%" height="100%" viewBox="0 0 400 400" > <rect x="10" y="10" width="200" height="350" stroke-width="3" stroke-dashoffset="5" stroke-dasharray="10 10" fill="none" stroke="#7D7798" /> </svg> </div>

SVG Animation

 <style> #r1 { background: linear-gradient(45deg, #F7F3F7, #C5DDE8); } </style> <div id="r1"> <svg width="100%" height="100%" viewBox="0 0 400 400" > <rect x="10" y="10" width="200" height="350" stroke-width="3" stroke-dashoffset="5" stroke-dasharray="10 10" fill="none" stroke="#7D7798" > <animate attributeName="stroke-dashoffset" values="550;0;550" dur="8s" fill="freeze" /> </rect> </svg> </div>

CSS animation

  .container{ width:300; height:350; background: linear-gradient(90deg, #F7F3F7, #C5DDE8); } #r1:hover { fill:#C4DCF0; stroke:#7D7798; stroke-dasharray: 1150; stroke-dashoffset: 1150; -webkit-animation: draw1 3s ease-in-out forwards; animation: draw1 3s ease-in-out forwards; } #r1 { fill:#DCE7F0; stroke:#C0C2DB; } @keyframes draw1 { 0% { stroke-dasharray:20 10; stroke-dashoffset:1150;} 100% { stroke-dasharray:20 10; stroke-dashoffset:550;} } 
 <div class="container" > <svg width="100%" height="100%" viewBox="0 0 400 400" > <g id="r1"> <rect x="10" y="10" width="200" height="350" stroke-width="3" /> <text font-size="36" font-family="sans-serif" x="35" y="120" stroke="#7D7798" font-weight="500">Over me</text> </g> </svg> </div>

  • @Eldar Gucherenko if the answer was useful to you, please check it with a checkbox as the right decision - Alexandr_TT