Skip to content

Instantly share code, notes, and snippets.

@polychroma-tv

polychroma-tv/index.html

Created November 9, 2020 02:41
Show Gist options
  • Save polychroma-tv/7b9eaf86a69952c391a2cb184ba4c91c to your computer and use it in GitHub Desktop.
Save polychroma-tv/7b9eaf86a69952c391a2cb184ba4c91c to your computer and use it in GitHub Desktop.
Download ZIP
SVG Stroke animation
Raw
index.html
<!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>
Raw
style.css
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