<div class="kz-photo">
<svg class="kz-photo-line" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="227px" height="224px">
	<circle class="line circle" cx="114" cy="112" r="107"/>
	<path class="line torso" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M208.359,164.118
		l-5.216-2.414c0,0-1.651-2.129-2.616-2.49c-2.08-0.779-9.845-3.479-11.272-4.287l-8.114-3.369c0,0-12.777-5.741-16.036-5.148
		c-3.26,0.593-11.556,5.148-11.556,5.148h-17.776c0,0-39.999,40.479-44.294,42.553c-4.296,2.074,0.864-37.628,0.864-37.628
		l0.188-7.07l-0.364-9.914l-0.753-2.408l0.683,5.02l0.526,3.876l-0.28,10.496l-16.564,2.518c-3.185,1.005-5.981,2.54-8.814,4.295
		c-2.02,1.251-3.112,2.638-4.247,4.65c-1.338,2.375-2.482,4.82-3.667,7.274l-1.73,5.624l-1.73,5.193l-4.76,8.651l-1.553,3.625"/>
	<path class="line hair" fill="none" stroke="#000000" stroke-miterlimit="10" d="M181.811,151.482c0,0,1.287-11.487,0.979-13.902
		c-1.268-9.869-5.378-18.948-9.014-28.107c-2.22-5.594-4.354-11.223-6.506-16.843c-0.668-1.745-1.335-3.491-2.003-5.237
		c-2.372-6.86-4.611-13.782-7.109-20.596c-1.75-4.771-4.079-9.325-6.63-13.714c-1.271-2.186-2.604-4.334-3.98-6.454
		c-1.992-3.067-3.563-4.99-6.496-7.091c-1.836-1.315-3.602-2.727-5.421-4.063c-3.468-1.926-6.706-3.45-10.406-4.865
		c-2.573-0.984-4.284-1.957-7.064-2.303c-6.865-0.855-13.721-0.541-20.53,0.595c-6.408,1.068-12.995,2.411-18.582,5.902
		c-2.334,1.459-4.738,2.932-6.358,5.211c-3.304,4.646-4.24,8.99-4.985,14.496l0.433,3.678l-1.081,5.841l-0.434,4.11
		c-0.161,0.968,0.118,1.937-0.042,2.905c-0.26,1.584-1.185,2.903-1.463,4.454c-0.516,2.872,0.114,4.839,1.289,7.351
		c0.505,1.299,1.494,2.908,1.512,4.306c0.023,1.818-1.053,3.504-1.5,5.219c-1.188,4.559-0.808,11.307-0.649,12.745
		s1.07,3.906,1.07,3.906c-0.73,5.474-0.886,10.79-0.866,16.301c0.011,2.922,0.064,5.843,0.118,8.764
		c0.053,2.821,0.16,5.6,0.902,8.338c1.033,3.811,1.848,7.387,4.122,10.655c1.4,2.014,2.856,4.267,4.665,5.917"/>
	<path class="line face" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M149.146,86.429
		c0,1.567-0.039,3.07-0.434,4.586c-0.508,1.952-1.282,3.799-1.857,5.709c-0.396,1.318-1.132,2.403-1.916,3.514
		c-0.752,1.065-2.104,1.785-3.126,2.565c-0.986,0.755-2.221,1.326-3.389,1.821c0,0-1.233,1.806-1.611,3.219
		s-2.133,10.777-2.133,10.777c0.149-2.157,0.197-5.215,0.758-7.934c0.642-3.107,1.795-5.75,1.795-5.75
		c-0.903,0.122-1.887,0.026-2.626-0.314c-0.382-0.175-0.771-0.441-0.959-0.829c-0.146-0.299,0.006-0.881-0.334-1.01
		c-0.667-0.251-1.359,1.534-1.605,1.922c-0.986,1.561-1.944,3.14-2.919,4.708c-1.488,2.395-2.998,4.781-4.614,7.092
		c-1.3,1.857-2.653,3.8-4.361,5.31c-2.241,1.981-12.333,9-14.11,9.888c-2.827,1.415-5.181,3.799-8.262,4.701
		c-1.499,0.438-3.14,0.42-4.686,0.566c-1.513,0.142-3.234,0.419-4.72-0.04c-1.275-0.395-4.818-2.283-8.11-5.449
		c-4.16-4.001-7.723-9.683-8.666-11.766c-1.659-3.668-4.422-10.691-4.422-10.691s-0.911-2.467-1.07-3.906s-0.539-8.187,0.649-12.745
		c0.447-1.714,1.523-3.401,1.5-5.219c-0.018-1.398-1.007-3.007-1.512-4.306c-1.174-2.512-1.805-4.479-1.289-7.351
		c0.278-1.55,1.204-2.87,1.463-4.454c0.159-0.969-0.12-1.937,0.042-2.905l0.434-4.11l1.081-5.841c0,0,1.347-2.592,4.235-6.813
		c2.889-4.222,17.555-7.778,19.777-8.444c2.222-0.667,7.555-4,7.555-4s2.666,4.667,3.667,4.778
		c0.999,0.111,10.666,2.667,11.665,3.889c1.001,1.222,9.444,13.777,11.445,22.666"/>
</svg>
  <img src="http://www.kristenzirkler.com/wp-content/uploads/2014/08/kz-photo.jpg"  />
</div>
$line-weight: 1px;
$circle-weight: 3px;

.kz-photo {
  width: 227px;
  height: 227px;
  position: absolute;
  margin: auto;
  top: 0; bottom: 0;
  right: 0; left: 0;
}
img {
  position: absolute;
  top: 3px; left: 5px;
  border-radius: 50%;
  overflow: hidden;
  border: $circle-weight solid #fff;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 4s forwards;
}
.kz-photo-line {
  z-index: 2;
  position: relative;
}
.line {
  fill: none;
  stroke: #fff;
  stroke-width: $line-weight;

  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: line-ani 5.5s forwards;
}
.circle {
  stroke-width: $circle-weight;

  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: line-ani 3s forwards;
}

/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  } 
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* Style Demo */
body {
  background: #2c3e50;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.