<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.27 125">
  
  <defs>
    <clipPath id="clipping-solid">
      <circle id="clip-circle-solid" cx="-60" cy="-60" r="60"></circle>
    </clipPath>
    <clipPath id="clipping-sketch">
      <circle id="clip-circle-sketch" cx="60" cy="60" r="60"></circle>
    </clipPath>
  </defs>
  
  <g class="sketch-logo" clip-path="url(#clipping-sketch)">
    <path class="cls-1" d="M33.38,57.42s.68-.44.7-.4c.21.37-3.57,7.83-3.33,8.24s9-5.59,9.15-5.29"/><path class="cls-1" d="M50.8,40.6c.27.47,8.33-5.51,8.63-5,.7,1.21-22.94,17.75-22.16,19.11.57,1,23.7-15.15,24.34-14.05s-19.44,15-18.82,16.11c.51.88,17.62-11.24,18.09-10.44"/><path class="cls-1" d="M67.32,34.78s.68-.44.7-.4c.21.37-3.57,7.83-3.33,8.24s9-5.58,9.15-5.28c.3.52-8.17,9.24-7.86,9.78s11.06-7,11.34-6.55-6.44,8.54-6.17,9,8.19-5.59,8.57-4.95-7.77,9.94-7.44,10.51S86,46.36,86.36,47s-8,9.88-7.7,10.39,8.41-5.69,8.77-5.06"/><path class="cls-1" d="M37.22,72.26c.29.5,8.78-5.81,9.1-5.25s-8.44,10.35-8.08,11,15-9.47,15.32-8.85S43.39,79.41,43.76,80s13-8.24,13.28-7.67-6.45,8.54-6.17,9,7.65-5.24,8-4.62S51.7,86.4,52,86.94c.2.35,8.32-5.26,8.52-4.92s-1.4,6.39-1.25,6.66c0,.08,1.55-1,1.6-.92"/><path class="cls-1" d="M71.27,72.26c.29.5,8.78-5.81,9.1-5.26.52.91-16.29,14.36-15.7,15.38S87,68.11,87.63,69.13,65.27,85.67,66,86.89,90.46,71.23,91.12,72.37"/><path class="cls-1" d="M54.26,60.87c.29.5,8.77-5.8,9.09-5.25S54.78,66,55.15,66.67s15.1-9.56,15.46-8.93-10.32,10.35-9.95,11S73.76,60.4,74.09,61"/><path class="cls-1" d="M68.8,22.36C69.55,23.67,94.07,5.84,94.9,7.29S71.31,24.54,72.08,25.87c.86,1.5,23.62-15.39,24.38-14.08S74.53,28.25,75.19,29.4c.81,1.4,27.12-17.51,27.92-16.12S78,31.81,78.68,33.06c.81,1.41,24.11-15.69,24.88-14.36S78.44,37.24,79.23,38.6c.68,1.17,31.56-20,32.34-18.67s-25.75,18.57-25,19.83S107.86,25.7,108.62,27c.59,1-19.61,16.06-19,17.2s21.81-14.21,22.51-13c.48.82-13.48,12.29-13,13,.58,1,21.38-13.8,22-12.71S101,47.5,101.73,48.7c.51.88,13.51-9,14-8.09s-14.61,12.95-14.15,13.74c.58,1,21.09-13.43,21.64-12.49.7,1.22-21.63,16.86-20.89,18.15.66,1.14,15.34-10.35,16-9.23.5.86-14.58,12.92-14.07,13.79.69,1.2,22.83-14.74,23.51-13.57s-24.14,18.34-23.3,19.79c.61,1.06,18.42-12,19-11"/><path class="cls-1" d="M26,15.45c.46.79,14.55-9.56,15.05-8.69.9,1.55-30.48,21.59-29.48,23.33C12.81,32.27,59.48-.78,60.86,1.62,62.39,4.27,6.94,34.34,8.52,37.09c1.8,3.12,59-37.82,60.6-35C71,5.33,6.59,39.47,8.4,42.61c2,3.42,64.1-42,66.27-38.26,2.05,3.56-74.16,44-72,47.76C5.19,56.41,81.07,1.22,83.51,5.45S1.29,53.81,3.48,57.6c2.43,4.21,79.75-52,82.32-47.53C88.26,14.35-1.12,60.15,1.56,64.79,2.26,66,26.29,49.06,26.92,50.15S5.78,66,6.45,67.21,22,56.67,22.7,57.83c.55,1-16.69,14-16.09,15s19.45-12.7,20.09-11.6S7,77.31,7.61,78.4s18-11.74,18.62-10.75C26.9,68.82,3.85,85,4.58,86.29c.53.91,18.05-11.66,18.59-10.73S7.07,89.37,7.58,90.27,26.6,78,27.15,79c.46.79-12.43,12.12-12,12.83.59,1,15.37-10.33,16-9.24S14.31,97,14.84,97.9C15.57,99.16,40.3,81.52,41,82.78s-20.76,15.87-20.08,17,25.3-16.23,26-15-23.77,17.25-23,18.65S43.74,90.38,44.46,91.64c.59,1-16.25,14.34-15.66,15.37.76,1.32,24.19-15.72,25-14.41s-21,16.59-20.36,17.75c.79,1.38,26-16.89,26.83-15.49s-28,19.93-27.14,21.49S62.31,97.66,63.1,99c.65,1.13-21.55,16.66-20.91,17.77,2.6,4.51,77.26-50.18,79.67-46,2.56,4.44-81.1,47-78.85,50.87,2,3.42,74.25-48.1,76.51-44.17,2,3.4-69.79,41.66-67.67,45.34,1.75,3,64.9-42.09,66.9-38.62,1.77,3.07-59.71,35.93-57.85,39.15,1.62,2.8,54.64-34.8,56-32.36,1.29,2.23-45.18,28.66-43.73,31.17.93,1.61,32.93-21,33.81-19.52"/><path class="cls-1" d="M86.61,62.15c.22.38,6.51-4.32,6.76-3.9s-4.17,8.14-3.92,8.58c.07.13,6-3.66,6.1-3.52"/>
  </g>

  <g class="solid-logo" clip-path="url(#clipping-solid)">
    <polygon class="cls-1" points="29.3 54.71 29.3 65.39 37.28 60.05 29.3 54.71"/><polygon class="cls-1" points="56.86 46.96 56.86 32.07 31.86 48.74 43.02 56.21 56.86 46.96"/><polygon class="cls-1" points="88.24 48.74 63.24 32.07 63.24 46.96 77.07 56.21 88.24 48.74"/><polygon class="cls-1" points="31.86 71.36 56.86 88.02 56.86 73.14 43.02 63.89 31.86 71.36"/><polygon class="cls-1" points="63.24 73.14 63.24 88.02 88.24 71.36 77.07 63.89 63.24 73.14"/><polygon class="cls-1" points="60.05 52.5 48.76 60.05 60.05 67.6 71.33 60.05 60.05 52.5"/><path class="cls-1" d="M60,0a60,60,0,1,0,60,60A60,60,0,0,0,60,0ZM97.17,71.36a3.15,3.15,0,0,1,0,.42l0,.14c0,.09,0,.18-.06.27s0,.1,0,.15-.05.16-.08.23l-.07.15-.11.21-.09.15-.13.19-.11.14-.16.17-.13.13-.18.15-.14.11-.05,0L61.82,96.64a3.18,3.18,0,0,1-3.54,0L24.34,74l-.05,0-.14-.11L24,73.71l-.13-.12-.16-.17-.11-.14-.13-.19-.09-.15-.11-.21-.07-.15c0-.08-.06-.16-.08-.23l0-.15c0-.09,0-.18-.06-.27s0-.09,0-.14a3.15,3.15,0,0,1,0-.42V48.74a3.1,3.1,0,0,1,0-.42s0-.09,0-.14,0-.18.06-.27l0-.15c0-.08.05-.16.08-.23l.07-.16.11-.21.09-.15.13-.19.11-.14.16-.17.13-.12.18-.15.14-.11.05,0L58.28,23.46a3.19,3.19,0,0,1,3.54,0L95.75,46.08l.05,0,.14.11.18.15.13.13.16.17.11.14.13.19.09.15.11.21.07.16c0,.08.06.15.08.23s0,.1,0,.15,0,.18.06.27l0,.14a3.1,3.1,0,0,1,0,.42Z"/><polygon class="cls-1" points="90.79 65.39 90.79 54.71 82.81 60.05 90.79 65.39"/>
  </g>
  
</svg>
svg {
  display: block;
  max-width: 400px;
  margin: 1rem auto;
}

.sketch-logo path {
  fill: none;
  stroke: #231f20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.solid-logo {
/*   display: none; */
}
.solid-logo path,
.solid-logo polygon {
  fill: #231f20;
}
var tl = new TimelineMax();

tl.set(["path"], {drawSVG: "0%"});
tl.staggerTo(["path"], 3, {drawSVG: "100%"});
tl.to(["#clip-circle-solid"], 2, {
  attr: {
    cx: 60,
    cy: 60
  }
}, "-=2");
tl.to(["#clip-circle-sketch"], 2, {
  attr: {
     cx: -200,
     cy: -200
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js