Jeu randonnée photo animaux

[@lucard]

voilà un petit test qui parlera plus !

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

 width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xmlpace="preserve">



  <path class="path" fill="NONE" stroke="blue" stroke-width="4" stroke-miterlimit="10" 

d="M 125,57.2 C 127,54 128,50 131,51.7 134,53.5 144,60.4 145,61.8 146,63.3 148,65.2 

150,73.3 152,81.5 159,86.8 163,88.3 168,89.9 168,90.3 170,93.5 172,96.7 176,99.4 

181,99 186,98.7 189,99.4 190,101 192,102 194,102 196,101 198,101 202,101 204,106 

206,111 207,112 208,114 208,117 207,119 212,118 216,116 217,116 217,123 218,129 

217,131 224,136 231,140 232,143 234,142 236,142 238,143 238,144 239,145 240,146

242,146 244,145 244,139 247,143 249,146 255,156 255,148 256,139 256,144 259,148

261,151 265,153 263,158 261,163 263,167 257,168 251,169 243,168 240,170 236,173

236,171 233,172 229,173 231,176 226,177 221,178 219,181 216,179 212,177 213,174

209,173 206,172 187,160 184,161 182,161 179,162 179,168 178,175 180,197 172,187

163,178 154,170 152,165 149,161 133,136 131,131 130,126 129,118 129,113 129,109

128,102 129,98.3 130,94.7 133,93.1 134,89.7 134,86.3 135,79.1 132,78.7 129,78.3 

125,83.1 126,89.2 128,95.2 131,96.4 127,101 124,105 116,109 112,116 108,123 103,135

106,142 109,149 106,171 105,175 102,183 103,177 96.6,176 89.8,175 83.5,183 80.9,191

78.4,199 76.9,199 75.8,208 74.6,217 73,215 71.7,222 70.5,228 71.8,225 68.8,232 65.8,240

63.8,242 59.6,241 55.4,241 52.7,242 49.1,246 45.6,249 41.5,254 35.4,252 29.2,249 27.3,241

 29,236 30.8,232 31.7,232 34,232 36.2,232 38.6,230 40,226 41.4,223 41.5,219 46,221 50.4,223

50.6,220 51.8,215 52.9,211 55.1,213 55.1,208 55.1,202 59,192 60.4,188 61.7,184 66.3,175

 62.3,176 58.2,176 56.3,171 60.1,170 63.9,170 66,171 65.8,168 65.5,166 64,166 68.9,163

73.9,161 85.2,153 83.8,149 82.5,145 77.2,138 79.2,125 81.2,113 83,108 92.3,98.9 102,89.9

 103,82.2 108,78.2 113,74.2 114,76.6 117,70.1 121,63.7 125,57.2 125,57.2 z"/>

  

</svg>

.path {

  stroke-dasharray: 1000;

  stroke-dashoffset: 0;

  animation: dash 20s linear ;

}



@keyframes dash {

  from {

    stroke-dashoffset: 00;

  }

  to {

    stroke-dashoffset: -1000;

  }

}

svg{

  background-image:url('http://www.lansenvercors.com/images/prestataires/itineraires-de-randonnee-les-gorges-du-bruyant-194.jpg');

  background-size:cover;

}

Test live