A Pen by samuel garcia on CodePen.
Created
November 9, 2020 02:41
-
-
Save polychroma-tv/7b9eaf86a69952c391a2cb184ba4c91c to your computer and use it in GitHub Desktop.
SVG Stroke animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="main.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="398.832" height="126.264" viewBox="0 0 398.832 126.264"> | |
<defs> | |
<style> | |
.cls-1 { | |
fill: #fff; | |
stroke: #fff; | |
stroke-width: 1px; | |
} | |
</style> | |
</defs> | |
<g id="Group_1844" data-name="Group 1844" transform="translate(16517.512 69.5)"> | |
<g id="Group_1843" data-name="Group 1843"> | |
<g id="Group_1842" data-name="Group 1842" transform="translate(-17001 -429)"> | |
<g id="Group_1840" data-name="Group 1840"> | |
<g id="Group_1839" data-name="Group 1839"> | |
<g id="Group_1838" data-name="Group 1838"> | |
<g id="Group_1837" data-name="Group 1837"> | |
<g id="Group_1836" data-name="Group 1836"> | |
<g id="Group_1835" data-name="Group 1835"> | |
<g id="Group_1834" data-name="Group 1834"> | |
<g id="Group_1759" data-name="Group 1759" transform="translate(461 329)"> | |
<path id="Path_1" data-name="Path 1" class="cls-1" d="M54.9,71.537,61.993,11.6H77.066L69.8,71.537Z" transform="translate(66.454 40.971)"/> | |
<path id="Path_2" data-name="Path 2" class="cls-1" d="M59.2,14.364,61.151,0H76.578L74.628,14.364Z" transform="translate(69.779 32)"/> | |
<path id="Path_3" data-name="Path 3" class="cls-1" d="M158.4,14.364,160.351,0h15.427l-1.951,14.364Z" transform="translate(146.489 32)"/> | |
<path id="Path_4" data-name="Path 4" class="cls-1" d="M108.717,14.364l-8.157,66.321H84.6l8.157-66.321H71.3L73.073,0h58.873l-1.773,14.364H108.717Z" transform="translate(79.135 32)"/> | |
<path id="Path_5" data-name="Path 5" class="cls-1" d="M108.237,46.666c-.887,7.8,3.192,13.3,11.526,13.3,6.561,0,8.689-2.66,12.945-6.561l10.817,5.32c-6.916,9.753-14.718,13.832-25.535,13.832-14.186,0-26.954-6.384-24.117-30.678C96.179,22.372,108.237,11.2,123.665,11.2c16.669,0,22.521,11.349,22.521,27.663,0,3.192-.532,7.625-.532,7.625H108.237ZM131.645,29.82c-1.241-3.547-4.256-6.207-9.221-6.207a12.161,12.161,0,0,0-10.817,6.207,15.135,15.135,0,0,0-2.128,6.384h22.875A25.178,25.178,0,0,0,131.645,29.82Z" transform="translate(96.283 40.66)"/> | |
<path id="Path_6" data-name="Path 6" class="cls-1" d="M158.9,71.615,150.033,53.7,136.91,71.615H119l24.471-30.678L127.157,11.5h17.91l7.98,17.2,12.236-17.2h17.91L159.786,41.114l17.024,30.678H158.9Z" transform="translate(116.022 40.892)"/> | |
<path id="Path_7" data-name="Path 7" class="cls-1" d="M153.9,71.537,161.171,11.6h14.9L168.8,71.537Z" transform="translate(143.01 40.971)"/> | |
<path id="Path_8" data-name="Path 8" class="cls-1" d="M190.432,72.556c-11.881,0-26.067-6.384-23.053-30.678C170.216,17.584,186,11.2,197.88,11.2c8.335,0,14.9,1.951,20.216,9.221L205.5,29.288c-2.66-3.369-5.142-4.788-9.044-4.788a11.828,11.828,0,0,0-9.044,3.9c-2.66,2.837-4.256,6.916-4.965,13.3s-.177,10.462,1.773,13.3a9.085,9.085,0,0,0,7.98,3.9c3.9,0,6.739-1.419,10.285-4.788L212.6,62.98C206.746,70.251,198.766,72.556,190.432,72.556Z" transform="translate(153.115 40.66)"/> | |
<path id="Path_9" data-name="Path 9" class="cls-1" d="M235.64,65.208a27.845,27.845,0,0,1-19.506,7.448c-8.866,0-14.363-3.369-17.733-7.448-4.788-5.675-5.32-12.413-3.9-23.407,1.241-10.817,3.547-17.556,9.576-23.23,4.079-3.9,10.64-7.27,19.506-7.27s14.541,3.369,17.733,7.27c4.788,5.675,5.32,12.413,4.079,23.23C243.975,52.8,241.67,59.534,235.64,65.208ZM228.547,27.26a8.433,8.433,0,0,0-6.739-2.66,10.205,10.205,0,0,0-7.27,2.66c-3.547,3.192-4.433,8.334-5.142,14.541s-1.064,11.526,1.773,14.541A8.052,8.052,0,0,0,217.73,59a9.918,9.918,0,0,0,7.27-2.66c3.547-3.192,4.433-8.334,5.142-14.541C231.03,35.594,231.207,30.452,228.547,27.26Z" transform="translate(173.873 40.739)"/> | |
<path id="Path_10" data-name="Path 10" class="cls-1" d="M0,7.122S.887,29.111,8.689,71.67H44.51s-3.369-11.7-3.369-13.654c0,0-25.713-37.948-30.323-43.091C6.384,9.428,1.064,4.462,0,7.122Z" transform="translate(24 36.937)"/> | |
<path id="Path_11" data-name="Path 11" class="cls-1" d="M.6,6.877S2.551,3.508,15.5,21.241s36.53,51.6,42.736,60.115,21.457,27.309,24.294,31.033,5.5,6.916,11.349,7.625c5.852.887,17.733,3.369,34.757-.709,0,0-6.916-3.015-15.073-11.881-7.98-8.866-24.649-30.678-39.544-51.957S40.322,9.537,39.258,8.119a10.367,10.367,0,0,0-6.916-4.788C28.441,2.444,10.176.493.6,6.877Z" transform="translate(24.464 33.811)"/> | |
<path id="Path_12" data-name="Path 12" class="cls-1" d="M65.2,70.711s9.221,9.753,16.314,11.526c0,0,14.364-2.66,29.437-33.161L81.692,48.9A93.917,93.917,0,0,1,65.2,70.711Z" transform="translate(74.419 69.814)"/> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</svg> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
text-align: center; | |
background-color: #138ADE; | |
background-size: cover; | |
height: 100vh; | |
display: table; | |
} | |
.wrapper { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
width: 30%; | |
} | |
path { | |
stroke: #fff; | |
fill: #fff; | |
stroke-dasharray: 1800; | |
opacity: 10; | |
animation: animate 3s cubic-bezier(.38,0,.71,1); | |
} | |
@keyframes animate { | |
0% { | |
opacity: 0%; | |
fill: none; | |
stroke-dashoffset: 1800; | |
} | |
30% { | |
opacity: 10; | |
fill: none; | |
stroke-dashoffset: 1800; | |
} | |
50% { | |
fill: rgba(255, 255, 255,0); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment