<div class="container">
<svg id="Logo_BG" data-name="Logo BG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 88.56"><defs></defs><title>DesignTLC-Logo1</title><rect class="cls-1" width="88.56" height="88.56"/><path class="cls-2" d="M0,59.3V48.13a8.48,8.48,0,0,1,1.62-.79,8.94,8.94,0,0,1,3.29-.64,8.23,8.23,0,0,1,3.36.72,8.42,8.42,0,0,1,3,2.38,8.38,8.38,0,0,1,1.82,3.42,8.25,8.25,0,0,1,.12,3.43,8.92,8.92,0,0,1-1.2,3.13,10.25,10.25,0,0,1-2.14,2.49L5.52,66M0,56.67l5.86,7,2.68-2.25a8.76,8.76,0,0,0,2.22-2.66,7.13,7.13,0,0,0,.82-2.78,6.56,6.56,0,0,0-.36-2.65,7.41,7.41,0,0,0-3.36-4,6.54,6.54,0,0,0-2.55-.81,7.13,7.13,0,0,0-2.87.32A5.58,5.58,0,0,0,0,50.13" transform="translate(0 0)"/>
<path class="cls-2" d="M20.15,51.64l7.1-6,1,1.2L19.81,54,8.68,40.71l8.22-6.9,1,1.2L11,40.78l3.82,4.55,6.42-5.39,1,1.2-6.42,5.39Z" transform="translate(0 0)"/>
<path class="cls-2" d="M28.23,27.94a4.22,4.22,0,0,0-1.91,0,4.41,4.41,0,0,0-1.94,1,4.54,4.54,0,0,0-.87,1A3.76,3.76,0,0,0,23,31.12a3.08,3.08,0,0,0,0,1.33,3,3,0,0,0,.67,1.32,2.66,2.66,0,0,0,1.12.85,3,3,0,0,0,1.23.16,4.88,4.88,0,0,0,1.32-.29L28.7,34q0.88-.36,1.8-0.68a6.53,6.53,0,0,1,1.83-.37,4.31,4.31,0,0,1,1.81.3,4.4,4.4,0,0,1,1.73,1.34,4.74,4.74,0,0,1,1.06,2,4.69,4.69,0,0,1,0,2,5.33,5.33,0,0,1-.8,1.85A7.24,7.24,0,0,1,34.78,42a7.88,7.88,0,0,1-1.3.88,7.19,7.19,0,0,1-1.45.59,6,6,0,0,1-1.53.23A5.79,5.79,0,0,1,29,43.52l0.44-1.84a4.62,4.62,0,0,0,2.21.18,4.47,4.47,0,0,0,2.23-1.05,4.64,4.64,0,0,0,.9-1,3.79,3.79,0,0,0,.54-1.28,3.5,3.5,0,0,0,0-1.39,3.26,3.26,0,0,0-1.9-2.27A3.14,3.14,0,0,0,32,34.69a5.78,5.78,0,0,0-1.46.35L29,35.65q-0.83.35-1.68,0.62a5.72,5.72,0,0,1-1.72.27,4.18,4.18,0,0,1-1.69-.36,4.41,4.41,0,0,1-1.58-1.26,4.36,4.36,0,0,1-1-2,4.51,4.51,0,0,1,0-2,5.5,5.5,0,0,1,.82-1.8,7.26,7.26,0,0,1,1.31-1.45,6.66,6.66,0,0,1,2.7-1.46,5.16,5.16,0,0,1,2.39-.08Z" transform="translate(0 0)"/><path class="cls-2" d="M43.06,34.47L41.71,35.6,30.58,22.34l1.35-1.13Z" transform="translate(0 0)"/><path class="cls-2" d="M47.69,12.07a6.31,6.31,0,0,0-2.6.25,7.31,7.31,0,0,0-2.53,1.44,7.09,7.09,0,0,0-1.9,2.39A6.78,6.78,0,0,0,40,18.86a7.39,7.39,0,0,0,.45,2.76A8.54,8.54,0,0,0,44.14,26a7.23,7.23,0,0,0,2.63.91,6.87,6.87,0,0,0,2.78-.2,7.11,7.11,0,0,0,2.69-1.46,10.71,10.71,0,0,0,1.86-2,6.78,6.78,0,0,0,1-1.89l-3.38-4L48.63,20l-1-1.2,4.44-3.72,5,6A11.24,11.24,0,0,1,55.56,24a13.72,13.72,0,0,1-2.33,2.5A9.43,9.43,0,0,1,50,28.31a8.46,8.46,0,0,1-6.69-.61,9.63,9.63,0,0,1-2.86-2.36,9.47,9.47,0,0,1-1.82-3.23,8.59,8.59,0,0,1,.58-6.71,9.27,9.27,0,0,1,2.3-2.83,9.63,9.63,0,0,1,3.17-1.85,7.78,7.78,0,0,1,3.13-.38Z" transform="translate(0 0)"/>
<path class="cls-2" d="M69.18,9.19l0,0L61.58,0H64l8.18,10-1.69,1.41L53.24,6.48l0,0,9.57,11.41L61.43,19,50.3,5.79,52,4.37Z" transform="translate(0 0)"/>
<polyline class="cls-3" points="41.86 87.71 45.68 84.46 29.75 65.46 36.26 59.99 29.95 52.47 7.99 70.89 14.31 78.42 20.83 72.94 33.17 87.8"/>
<polygon class="cls-3" points="54.91 76.72 72.7 61.78 66.26 54.1 57.46 61.49 41.65 42.65 32.66 50.19 54.91 76.72"/>
<path class="cls-3" d="M88.23,34.87l-2.66-.48a7.32,7.32,0,0,1-.49,3A6.79,6.79,0,0,1,83,40.21a7.1,7.1,0,0,1-2.39,1.33,6.44,6.44,0,0,1-2.66.29A7.35,7.35,0,0,1,75.27,41a7.86,7.86,0,0,1-2.39-2,8.54,8.54,0,0,1-1.58-2.73,6.9,6.9,0,0,1-.38-2.77A6.45,6.45,0,0,1,71.65,31a7.27,7.27,0,0,1,1.77-2.15,7.89,7.89,0,0,1,2.94-1.6,6.29,6.29,0,0,1,3.11-.09L79.4,15.94a17.55,17.55,0,0,0-6.82,1.16A22,22,0,0,0,65.95,21a20.75,20.75,0,0,0-4.8,5.72,17.73,17.73,0,0,0-2.22,6.68,17.31,17.31,0,0,0,.64,7,18.7,18.7,0,0,0,3.72,6.71,18.41,18.41,0,0,0,5.92,4.77A17.63,17.63,0,0,0,76,53.71a17.83,17.83,0,0,0,7-1,14.25,14.25,0,0,0,5-2.42" transform="translate(0 0)"/><path class="cls-4" d="M32.66,87.26L20.83,72.95l-6.52,5.47L8,70.89l22-18.42L36.27,60l-6.52,5.47,15.94,19-3.85,3.38m-1,.72" transform="translate(0 0)"/>
<path class="cls-4" d="M32.68,50.17l9-7.54L57.48,61.47l8.8-7.39,6.44,7.68L54.94,76.69Z" transform="translate(0 0)"/>
<path class="cls-4" d="M86.79,50.92A19.71,19.71,0,0,1,83,52.71a17.49,17.49,0,0,1-13.77-.86,18.38,18.38,0,0,1-5.92-4.77,18.72,18.72,0,0,1-3.72-6.71,17.32,17.32,0,0,1-.64-7,17.74,17.74,0,0,1,2.22-6.68A20.74,20.74,0,0,1,66,21a22,22,0,0,1,6.64-3.88,17.52,17.52,0,0,1,6.82-1.16l0.06,11.18a6.3,6.3,0,0,0-3.11.09,7.9,7.9,0,0,0-2.93,1.6A7.27,7.27,0,0,0,71.66,31a6.47,6.47,0,0,0-.75,2.57,7,7,0,0,0,.38,2.78A8.56,8.56,0,0,0,72.88,39a7.85,7.85,0,0,0,2.4,2,7.3,7.3,0,0,0,2.65.8,6.42,6.42,0,0,0,2.66-.29A7.1,7.1,0,0,0,83,40.2a6.79,6.79,0,0,0,2.11-2.85,7.31,7.31,0,0,0,.48-3L87,34.64" transform="translate(0 0)"/><polygon class="cls-4" points="88.53 51.01 85.69 51.1 85.69 33.97 88.53 33.93 88.53 51.01"/>
<polygon class="cls-4" points="42.49 88.49 32.42 88.46 32.49 86.46 42.49 86.46 42.49 88.49"/>
<path class="cls-5 ring" d="M62.07,31.89a4.75,4.75,0,0,0-3.4-.41A4.44,4.44,0,0,0,55.3,35.1a3.42,3.42,0,0,0-2-1.6,4.79,4.79,0,0,0-2.63-.1,4.63,4.63,0,0,0-2.94,2,4.31,4.31,0,0,0-.54,3.48,5.83,5.83,0,0,0,2.18,3.29l3.11,2.12a6.16,6.16,0,0,1,2.22,3.45,9.26,9.26,0,0,1,.24,1.72,38.18,38.18,0,0,0,6.57-6.62q3.58-4.78,2.72-8.35a3.9,3.9,0,0,0-2.12-2.64" transform="translate(0 0)"/>
<path class="cls-6 draw" d="M62.07,31.89a4.75,4.75,0,0,0-3.4-.41A4.44,4.44,0,0,0,55.3,35.1a3.42,3.42,0,0,0-2-1.6,4.79,4.79,0,0,0-2.63-.1,4.63,4.63,0,0,0-2.94,2,4.31,4.31,0,0,0-.54,3.48,5.83,5.83,0,0,0,2.18,3.29l3.11,2.12a6.16,6.16,0,0,1,2.22,3.45,9.26,9.26,0,0,1,.24,1.72,38.18,38.18,0,0,0,6.57-6.62q3.58-4.78,2.72-8.35A3.9,3.9,0,0,0,62.07,31.89Z" transform="translate(0 0)"/>
</svg>
</div>.container {
width: 100%;
text-align: center;
margin-top: 50px;
}
.cls-1 {
fill: #414042;
}
.cls-2 {
fill: #fff;
}
.cls-3,
.cls-6 {
fill: none;
}
.cls-3 {
stroke: #8dc63f;
stroke-miterlimit: 5.75;
stroke-width: 2px;
}
.cls-4 {
fill: #8dc63f;
}
.cls-5 {
fill: #d51f51;
}
.cls-6 {
stroke: #fff;
stroke-width: 1px;
miterlimit: 0;
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
animation-name: draw;
animation-duration: 3s;
animation-fill-mode: none; // Stay on the last frame
animation-iteration-count: 1; // Run only once
animation-timing-function: linear;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
// @-webkit-keyframes ring {
// 50% {
// -webkit-transform: translateX(3px) rotate(2deg);
// transform: translateX(3px) rotate(2deg);
// }
// 100% {
// -webkit-transform: translateX(-3px) rotate(-2deg);
// transform: translateX(-3px) rotate(-2deg);
// }
// }
// @keyframes ring {
// 50% {
// -webkit-transform: translateX(3px) rotate(2deg);
// -ms-transform: translateX(3px) rotate(2deg);
// transform: translateX(3px) rotate(2deg);
// }
// 100% {
// -webkit-transform: translateX(-3px) rotate(-2deg);
// -ms-transform: translateX(-3px) rotate(-2deg);
// transform: translateX(-3px) rotate(-2deg);
// }
// }
// .ring {
// display: inline-block;
// -webkit-transform: translateZ(0);
// -ms-transform: translateZ(0);
// transform: translateZ(0);
// box-shadow: 0 0 1px rgba(0, 0, 0, 0);
// -webkit-animation-name: ring;
// animation-name: ring;
// -webkit-animation-duration: .2s;
// animation-duration: .2s;
// -webkit-animation-timing-function: linear;
// animation-timing-function: linear;
// -webkit-animation-iteration-count: 1;
// animation-iteration-count: 1;
// }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.