<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;
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.