<div>
  <svg version="1.1" viewBox="0 0 1581 1581" preserveAspectRatio="xMidYMid meet">
    <path 
          d="M790.5,50 C381.537289,50 50,381.5059 50,790.4688 C50,1199.4315 381.537289,1530.9688 790.5,1530.9688 C1199.46271,1530.9688 1531,1199.4315 1531,790.4688 C1531,381.5059 1199.46271,50 790.5,50 L790.5,50 Z M681.84375,436.4688 C899.27892,436.4688 1128.05147,481.196 1295.15625,579.3438 C1317.68017,592.101 1333.3125,611.3351 1333.3125,646.5938 C1333.3125,686.9601 1300.86751,715.9688 1263.46875,715.9688 C1248.39213,715.9688 1239.44678,712.3006 1225.3125,704.5625 C1091.27852,624.1936 883.28221,579.9375 682.125,579.9375 C581.71284,579.9375 479.72875,590.149 386.3125,615.5 C375.553393,618.2077 361.95619,623.5938 348.34375,623.5938 C308.84161,623.5938 278.53125,592.3426 278.53125,552.8438 C278.53125,512.6019 303.471634,490.012 330.375,482.0625 C435.93239,450.9648 553.75882,436.4688 681.84375,436.4688 L681.84375,436.4688 Z M666.75,690.9062 C860.57587,690.9062 1048.0823,739.1802 1195.5,827.4062 C1220.21404,841.5777 1229.3125,859.5739 1229.3125,885.9375 C1229.3125,918.0013 1203.78575,943.9062 1171.59375,943.9062 C1155.52639,943.9062 1145.41939,937.4137 1134.5,931.0625 C1014.04456,859.5796 847.09794,812.0938 664.28125,812.0938 C570.51641,812.0938 489.58383,825.2233 422.59375,843.0625 C408.16071,847.0347 400.069277,851.3125 386.5625,851.3125 C354.715051,851.3125 328.71875,825.3604 328.71875,793.25 C328.71875,761.7616 343.990823,740.0802 374.78125,731.4062 C458.022112,708.5449 543.02591,690.9062 666.75,690.9062 L666.75,690.9062 Z M676.90625,932.7188 C838.94616,932.7188 983.36116,969.8917 1107.625,1044.375 C1126.11991,1055.1729 1136.96875,1066.207 1136.96875,1093.5938 C1136.96875,1120.2886 1115.25921,1139.9062 1090.90625,1139.9062 C1078.9309,1139.9062 1070.76089,1135.7519 1059.5625,1128.9375 C952.24216,1064.0078 818.42854,1029.875 676.40625,1029.875 C597.17278,1029.875 517.42732,1040.0366 442.84375,1055.5625 C430.715893,1058.1917 415.45393,1062.875 406.34375,1062.875 C378.222936,1062.875 359.46875,1040.5378 359.46875,1016.3438 C359.46875,985.2278 377.421679,969.7343 399.75,965.4688 C491.21135,944.6253 582.29857,932.7188 676.90625,932.7188 L676.90625,932.7188 Z">
    </path>
  </svg>
</div>

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    display: table;
    background: #337bc5;
}

svg {
  width: 360px;
  height: 360px;
  margin: 0 auto;
  display: block;
}

path {
  fill: none;
  stroke: #fff;
  stroke-width: 10px;
  /*set dashoffset to 0 so that if JS is off the image will still appear => Progressive Enhancement*/
  stroke-dashoffset: 0;
}

div {
  display: table-cell; 
  text-align: center;
  vertical-align: middle;
}

window.onload = function() {
  var path = document.querySelector('path');
  var length = path.getTotalLength();

  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition =
    'none';

  // Set up the starting positions
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;

  // Trigger a layout so styles are calculated & the browser 
  // picks up the starting position before animating
  path.getBoundingClientRect();

  // Define our transition
  path.style.transition = path.style.WebkitTransition =
    'stroke-dashoffset 7s ease-in-out';

  // Go!
  path.style.strokeDashoffset = '0';
};