<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
	 height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="LF">
	<path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M169.45,184.609
		c3.559,12.371-4.462,34.083-6.978,46.701c-5.561,27.894-13.652,54.307-23.186,81.067c-6.326,17.757-10.535,35.107-18.629,52.155
		c-5.208,10.968-14.614,31.739-27.557,35.748c-10.107-13.752,21.252-60.657,34.632-69.041c15.797-9.898,39.496-9.059,57.091-15.354
		c34.331-12.283,56.844-33.65,77.51-63.615c11.277-16.351,25.751-39.765,28.548-59.841c0.779,12.964-10.916,27.837-15.854,39.272
		c-8.564,19.83-16.367,39.97-24.915,59.779c-12.901,29.896-28.278,59.335-40.384,89.418c-1.004-21.556,10.883-41.257,18.116-61
		c11.057-30.183,26.122-64.916,29.582-97.115c18.486,13.266,46.467,11.605,67.643,8.935c26.476-3.338,67.288-12.529,83.707-35.874"
		/>
<g id="LF-shadow">
	<path transform="translate(-4,-3)" fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" d="M169.45,184.609
		c3.559,12.371-4.462,34.083-6.978,46.701c-5.561,27.894-13.652,54.307-23.186,81.067c-6.326,17.757-10.535,35.107-18.629,52.155
		c-5.208,10.968-14.614,31.739-27.557,35.748c-10.107-13.752,21.252-60.657,34.632-69.041c15.797-9.898,39.496-9.059,57.091-15.354
		c34.331-12.283,56.844-33.65,77.51-63.615c11.277-16.351,25.751-39.765,28.548-59.841c0.779,12.964-10.916,27.837-15.854,39.272
		c-8.564,19.83-16.367,39.97-24.915,59.779c-12.901,29.896-28.278,59.335-40.384,89.418c-1.004-21.556,10.883-41.257,18.116-61
		c11.057-30.183,26.122-64.916,29.582-97.115c18.486,13.266,46.467,11.605,67.643,8.935c26.476-3.338,67.288-12.529,83.707-35.874"
		/>
</g>
<g id="enton">
	<path fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" d="M288.55,348.654
		c25.201-0.838,71.954-12.326,87.022-32.938c-8.776-14.609-30.465-3.893-40.787,1.685c-7.714,4.169-70.017,34.391-59.295,49.659
		c8.711,12.406,61.504-4.354,69.004-7.055c15.159-5.458,64.57-22.607,64.309-44.817c0.045,19.903-29.428,43.708-42.257,56.554
		c9.719-10.223,23.992-19.52,35.903-26.758c6.517-3.96,60.75-35.445,69.531-23.511c9.396,12.77-13.433,36.227-13.996,49.688
		c67.204-48.875,132.995-109.914,130.557-198.284c1.831,39.172-19.704,78.407-31.846,114.45
		c-12.257,36.385-18.549,77.946-34.578,113.017c-0.712-15.997,13.932-29.774,24.066-40.059c7.023-7.128,41.806-44.604,56.368-37.92
		c22.822,10.475-11.099,57.401-28.501,56.769c-8.211-29.525,54.985-63.868,78.694-58.869c31.259,6.591,2.351,55.679,5.963,75.372
		c27.07-3.469,57.494-23.296,82.182-32.875c27.206-10.555,63.324-15.732,88.794-30.244c-6.543-2.772-13.336-4.76-20.38-5.963
		c-71.336-15.392-157.544-8.857-228.684-8.106c-131.981,1.394-263.896,8.973-395.659,16.233
		c121.682-3.692,243.232-39.428,359.909-70.122c76.951-20.609,153.69-41.979,230.217-64.112c1.659-0.454,38.137-11.163,44.925-10.22
		"/>
</g>
<g id="enton-shadow">
	<path transform="translate(-4,-3)" fill="none" stroke="#ffffff" stroke-width="5" stroke-miterlimit="10" d="M288.55,348.654
		c25.201-0.838,71.954-12.326,87.022-32.938c-8.776-14.609-30.465-3.893-40.787,1.685c-7.714,4.169-70.017,34.391-59.295,49.659
		c8.711,12.406,61.504-4.354,69.004-7.055c15.159-5.458,64.57-22.607,64.309-44.817c0.045,19.903-29.428,43.708-42.257,56.554
		c9.719-10.223,23.992-19.52,35.903-26.758c6.517-3.96,60.75-35.445,69.531-23.511c9.396,12.77-13.433,36.227-13.996,49.688
		c67.204-48.875,132.995-109.914,130.557-198.284c1.831,39.172-19.704,78.407-31.846,114.45
		c-12.257,36.385-18.549,77.946-34.578,113.017c-0.712-15.997,13.932-29.774,24.066-40.059c7.023-7.128,41.806-44.604,56.368-37.92
		c22.822,10.475-11.099,57.401-28.501,56.769c-8.211-29.525,54.985-63.868,78.694-58.869c31.259,6.591,2.351,55.679,5.963,75.372
		c27.07-3.469,57.494-23.296,82.182-32.875c27.206-10.555,63.324-15.732,88.794-30.244c-6.543-2.772-13.336-4.76-20.38-5.963
		c-71.336-15.392-157.544-8.857-228.684-8.106c-131.981,1.394-263.896,8.973-395.659,16.233
		c121.682-3.692,243.232-39.428,359.909-70.122c76.951-20.609,153.69-41.979,230.217-64.112c1.659-0.454,38.137-11.163,44.925-10.22
		"/>
</g>
</svg>
body {
  background-color: #414141;
}
svg {
  margin: 0 auto;
  display: block;
  max-width: 100vw;
}
function animatePath(pathname, animation) {
  var path = document.querySelector(pathname);
  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 =
    animation;
  // Go!
  path.style.strokeDashoffset = '0';
}

animatePath('#LF path', 'stroke-dashoffset 1s ease-in-out');
animatePath('#LF-shadow path', 'stroke-dashoffset 1s ease-in-out');
animatePath('#enton path', 'stroke-dashoffset 2s 1s ease-in-out');
animatePath('#enton-shadow path', 'stroke-dashoffset 2s 1s ease-in-out');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.