Search code examples
htmlcsssvgsvg-animate

SVG border animation

I've found this cool SVG border animation and i tried to apply this to my website, however my website contains images that are of different sizes and thus animation is limited by the width and height.

Is there any way to edit the code so that i can use this animation for all image sizes?

Sorry for my poor english :) 

<svg width="200" height="200">
      <line class="top" x1="0" y1="0" x2="600" y2="0"/>
      <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
      <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
      <line class="right" x1="200" y1="0" x2="200" y2="600"/>
  </svg>
Solution

  • You could use simple CSS and gradient and not mind about the size of the container or img : DEMO

    div, img {
  margin:1em;
  display:inline-block;
  padding:0.5em;
  vertical-align:top;
  border-radius:10px;
  background:linear-gradient(to left,black 33.33%,transparent 40% ,transparent 50%,black 66.66%) 0 0 repeat-x, linear-gradient(to right,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 100%  repeat-x, linear-gradient(to top,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 0 100% repeat-y, linear-gradient(to bottom,black 33.33%,transparent 40% ,transparent 50%, black 66.66%) 100% 0 repeat-y, linear-gradient(to bottom right,turquoise,white,lime) center no-repeat ;
  background-color:gray;
  background-size:300% 5px,300% 5px,5px 300%,5px 300%,100% 100%;
  transition:1.5s linear; 
  }
div:hover { background-position:100% 0 ,0% 100%, 0 0 , 100% 100%, 0 0 ;}

    Possible markup 

    <div>
  <h1> border transition</h1>
  <p>text</p>
</div>
<img src="http://lorempixel.com/200/150/"/>