how to use calc() in svg stroke-dasharray

Question

I'm doing this effect(see the url), but in my project the width and height is not fixed. https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/

I don't know how to calculate stroke-dasharray automatically.

Thanks!!

 .box-wrap{height: 200px;margin-top: 100px;text-align: center;} .box{background: #ffffff; width: 30%; margin-right: 10px;height: 200px;position: relative;} .box svg { position: absolute; top: 0; left: 0; } .box svg line { stroke-width: 3; stroke: #000000; fill: none; transition: all .8s ease-in-out; } .box-wrap .even-news-content:hover svg line{transition-delay: 0.1s;} .box svg line.top, .box svg line.bottom { stroke-dasharray: calc(100% + 30px) calc(100% - 60px);} .box svg line.left,.box svg line.right {stroke-dasharray: calc(100% + 30px) calc(100% - 60px); } .box:hover svg line.top { transform: translateX(-200%); } .box:hover svg line.bottom {transform: translateX(200%);} .box:hover svg line.left {transform: translateY(200%);} .box:hover svg line.right {transform: translateY(-200%); } 

 <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class=" d-flex justify-content-around box-wrap"> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="300%" y2="0"/> <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/> <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/> <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/> </svg> </div> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="300%" y2="0"/> <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/> <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/> <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/> </svg> </div> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="300%" y2="0"/> <line class="left" x1="0" y1="100%" x2="0" y2="-200%"/> <line class="bottom" x1="100%" y1="100%" x2="-200%" y2="100%"/> <line class="right" x1="100%" y1="0" x2="100%" y2="300%"/> </svg> </div> </div> 

Answer 1

This is my solution, but I'm not using calc . I don't need to. I'm using paths instead of lines, and I'm using transition to animate the stroke-dashoffset from 0 to twice as long as the line. The stroke-dasharray is set to be as long as the path.

UPDATE

In a second SVG I'm using lines as you intended

 .box{width:30%; border:1px solid red; position:relative; display:inline-block;} .box p{position:absolute;width:100%;height:1em;text-align:center;margin:auto;top:0;bottom:0;} .box:hover .top, .box:hover .bottom{stroke-dashoffset:200} .box:hover .left, .box:hover .right{stroke-dashoffset:200} path,line{stroke:black; fill:none;stroke-linecap: round;} .top,.bottom{stroke-dasharray:100;stroke-dashoffset:0;} .left,.right{stroke-dasharray:50;stroke-dashoffset:0} path,line{transition: stroke-dashoffset 1.5s;} 

 <div class="box"><p>PATHS</p> <svg viewBox="-5 -5 110 60"> <path class="top" d="M100,0H0" /> <path class="left" d="M0,0V50"/> <path class="bottom" d="M0,50H100"/> <path class="right" d="M100,50V0"/> </svg> </div> <div class="box"><p>LINES</p> <svg viewBox="-5 -5 110 60"> <line class="top" x1="100" /> <line class="left" y2="50"/> <line class="bottom" y1="50" x2="100" y2="50"/> <line class="right" x1="100" y1="50" x2="100"/> </svg> </div>