<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 20.7L12.06 2l1.59 2.65L4.16 20.7H1zm9.35 0l1.57-2.65 6.37-.01-3.16-5.42 1.57-2.65 4.72 8.06L23 20.7H10.35z"/>
</svg>
<!-- <svg viewBox="0 0 226 200">
<g id="icon-group" fill="none" stroke="#FF3C00" stroke-width="10">
<path d="M113,5.08219117 L4.28393801,197.5 L221.716062,197.5 L113,5.08219117 Z"></path>
</g>
</svg>
-->
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
svg {
width: 50px;
height: 50px;
transform-origin: 50% 50%;
}
svg > path {
fill: none;
stroke: #ff3c00;
stroke-width: 1px;
stroke-dasharray: 30;
/* stroke-dasharray: 60; */
stroke-linecap: round; /* butt (default), square (longer than default) */
animation: dash 2400ms cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 60;
/* stroke-dashoffset: 120; */
}
}
svg > path > g {
stroke-linecap: round;
}
#icon-group {
animation: strokedash 1s ease-in-out both infinite;
}
@keyframes strokedash {
0% {
stroke-dasharray: 0 226;
}
80%, 100% {
stroke-dasharray: 659 226;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.