<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.5 351.5" class="fm-logo" aria-labelledby="fm-title" aria-describedby="fm-description" role="img"><title id="fm-title">Faithmade</title><desc id="fm-description">Church websites made easy</desc><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M477.4,75.3C367,45.6,254.6,9,165,9c-68,0-103,37.2-103,76.5c0,61.2,68.9,77.6,96.2,50.3"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M322.2,34.1C227,129.3,223.3,342.5,72.9,342.5c-90.2,0-75.4-110.5-14.1-110.5c32.8,0,42.6,24.6,42.6,24.6"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M324.3,107.4c0,0-62.8,10.8-79.4-5.8"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M368.1,143.8c-69.1,0-103.5,115.6-33.5,115.6C383.9,259.4,422.7,143.8,368.1,143.8z"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M418.8,140.2c0,0-71.1,119.2-13.1,119.2c23,0,36.7-27,36.7-27"/><circle fill="none" cx="510.2" cy="84.4" r="11.5"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M483.7,135.8c0,0-78,123.5-16.4,123.5c31.2,0,39.4-27.3,39.4-27.3"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M585,9c55.9,55.9-151.3,250.4-49.9,250.4c25.1,0,47-42.9,47-42.9"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M564.6,259.4c0,0,77.8-214.3,155.6-214.3c31.8,0,21,52.4-49.2,56.5c-46.9,2.7-76.8,2.2-129.4-10.2"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M710.9,232c0,0-14,28.4-38.2,28.4c-69.6,0,41-117-28.3-117c-27.7,0-37.9,21.9-37.9,21.9"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M737.4,135.1c26.2,26.2-49.6,94-18.9,124.6"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M731.8,183.9c0,0,18.4-40.5,48.9-40.5c61.7,0-30.2,89.7-3.9,115.9"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M891.3,232c0,0-10.7,28.4-38.2,28.4c-69.5,0,54.3-117-13-117c-27.7,0-37.9,21.9-37.9,21.9"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M958.5,143.5c-64.5,0-97.5,115.9-32.4,115.9C975.4,259.4,1013.1,143.5,958.5,143.5z"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1010.3,140.2c0,0-71.1,119.2-13.1,119.2c23,0,36.7-27,36.7-27"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1100.6,143.8c-68,0-88.6,115.6-32.4,115.6C1117.5,259.4,1155.3,143.8,1100.6,143.8z"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1183,9c55.2,55.2-135.2,250.4-44.8,250.4c30,0,40.9-27.3,40.9-27.3"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1215.4,192.6c-36.1,0-31.2-48.9,8.2-48.9c14.8,0,22.7,7.8,22.7,7.8"/><path fill="none" stroke="#E0D252" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M1242.7,198.7c0,0-9.1-6.2-26.8-6.2c-44.9,0-50.8,66.8,4.3,66.8c57.9,0,74.1-37.7,121.9-37.7c65.8,0,61.9,91.7,3.9,91.7
c-35.4,0-42.4-25.4-42.4-25.4"/></svg>

// Not Required
// =========================================================================

html,body{height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#313940;}


// Required
// =========================================================================

.fm-logo {
  $fm-logo-size: 300px;
  $fm-stroke-gap: 1000;
  height: auto;
  max-width: 100%;
  stroke-dasharray: $fm-stroke-gap;
  stroke-dashoffset: $fm-stroke-gap;
  width: $fm-logo-size;
  path {
    visibility: hidden;
  }
}

var fm_opts     = { delay: 0.5 },
    fm_fromOpts = { drawSVG: '0' },
    fm_toOpts   = { drawSVG: '100% 0', 'visibility': 'visible' },
		fmtl        = new TimelineMax(fm_opts),
    fm_path     = document.querySelectorAll('.fm-logo path'),
    fm_circle   = document.querySelectorAll('.fm-logo circle');

fmtl.staggerFromTo(fm_path, 0.375, fm_fromOpts, fm_toOpts, 0.375)
    .to(fm_circle, 1, { fill: '#E0D252' });