SVG border animation

Question

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>

score 0 · Answer 1 · answered May 16 '14 at 06:04

0

how about:

<svg class="img">

css:

svg.img {
    hight: auto;
}

answered May 16 '14 at 06:04

MilkyTech

1,919
2
15
39

score 0 · Accepted Answer · answered May 16 '14 at 12:47

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/"/>

SVG border animation

2 Answers2