Skip to content

Instantly share code, notes, and snippets.

@dvigne
Created October 16, 2021 05:24
Show Gist options
  • Save dvigne/7099695fd9a3ddb61bbb7d6e35b889fd to your computer and use it in GitHub Desktop.
Save dvigne/7099695fd9a3ddb61bbb7d6e35b889fd to your computer and use it in GitHub Desktop.
Selina Animated SVG
Display the source blob
Display the rendered blob
Raw
<div style="width: 100px;" class="img-fluid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><style>.cls-1{clip-path:url(#clip-path);}path{stroke: white !important;stroke-dasharray: 1000; stroke-dashoffset: 1000;animation: dash 4s linear forwards;}@keyframes dash {0% {stroke-dashoffset: 1000;} 50% { fill: rgba(255, 255, 255, 0); } 60% { fill: rgba(255, 255, 255, 1); } 100% {stroke-dashoffset: 0; fill: rgba(255, 255, 255, 1);}</style><path class="cls-1" d="M60.77,7.23a.63.63,0,0,0-.63.62V61.18l-.29-.65L49.41,36.85l-.12-.22h7.09a.63.63,0,1,0,0-1.26H48.81l-.32-.75L37,8.64s12,1.18,12.17,13.18v.58a.58.58,0,0,0,.59.66.6.6,0,0,0,.66-.58s.47-10.29-9.1-14H56.94a.64.64,0,0,0,.63-.63.6.6,0,0,0-.63-.63h-21c-12.35.84-14.3,11.5-14.3,11.5L11.7,7.43a.63.63,0,0,0-1.1.41V64.16a.62.62,0,0,0,.5.61l.13,0a.62.62,0,0,0,.57-.38l7-16H35.3v15l-.78-.11a16.65,16.65,0,0,1-5-1.75c-4.31-2.38-6.64-6.42-6.92-12a.63.63,0,1,0-1.25.06c.71,14.46,14,15.09,14.6,15.13H60.77a.63.63,0,0,0,.63-.63V7.85A.63.63,0,0,0,60.77,7.23ZM35,8.64l-7.5,16.78-4.89-5.56S24.5,9.23,35,8.64ZM27.89,27.73l6.24,7.1a15.42,15.42,0,0,1-7.43-4.41Zm-5.51-6.27L27,26.69l-1.27,2.89S21.83,26.11,22.38,21.46ZM11.86,61.17V9.5l9.42,10.71c-1.19,6.52,3.9,10.58,3.9,10.58Zm23.44-14h-16l6.9-15.56a22.85,22.85,0,0,0,9.14,5.13Zm0-12.94-6.85-7.8L35.3,10.83ZM53.36,48.91l5.19,11.78-8.13-9.23a.29.29,0,0,1-.07-.22,16.41,16.41,0,0,0,.1-2.79h2.72ZM47.94,36.63l.15.32,4.29,9.74.19.51H50.35c-1.41-8.52-10.84-10.57-10.84-10.57h8.43Zm.67,11.82h.57a13.15,13.15,0,0,1,0,1.59l-1.39-1.59ZM47.47,47.2h-.8l-8.42-9.56c10.58,2.63,10.83,9.56,10.83,9.56ZM36.57,10.85,47.12,34.76l.27.62H36.56Zm0,26.73L45,47.2H36.56Zm0,26V48.45h9.56l2,2.28.82.94c-.19,7.19-6,10.21-9.11,11.31A9.85,9.85,0,0,1,36.56,63.53Zm6.32,0h-1s7.9-2.28,8.24-10.64L58.91,63l.47.53Z" style="fill:none"/></svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment