.arrow-1 {
    width:100px;
    height:30px;
    display: flex;
  }
  .arrow-1:before {
    content: "";
    background: currentColor;
    width:15px;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a1 1.5s infinite linear;
  }
  @keyframes a1 {
    90%,100%{flex-grow: 1}
  }
  
  .arrow-2 {
    width: 50px;
    height: 26px;
    display: flex;
    justify-content: center;
  }
  .arrow-2:before,
  .arrow-2:after {
    content: "";
    background: currentColor;
    width: 5px;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a2 2s infinite linear;
  }
  
  .arrow-2:before {
    transform: scaleX(-1);
  }
  @keyframes a2 {
    90%,100%{flex-grow: .5}
  }
  
  .arrow-3 {
    width:100px;
    height:30px;
    display: flex;
  }
  .arrow-3:before,
  .arrow-3:after {
    content: "";
    flex: 1;
    margin: 0 5px;
    background: currentColor;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a3 .5s infinite alternate;
  }
  
  .arrow-3:after {
    --s:-1;
  }
  @keyframes a3 {
    0%  {transform: scaleX(var(--s,1)) translate(-4px)}
    100%{transform: scaleX(var(--s,1)) translate( 4px)}
  }
  
  .arrow-4 {
    width:40px;
    height:30px;
    display:grid;
  }
  .arrow-4:before,
  .arrow-4:after {
    content: "";
    grid-area: 1/1;
    background: currentColor;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a4 .5s infinite alternate;
  }
  
  .arrow-4:after {
    --s:-1;
  }
  @keyframes a4 {
    0%  {transform: scale(var(--s,1)) translate(12px,-6px) translate(4px)}
    100%{transform: scale(var(--s,1)) translate(12px,-6px) translate(-4px)}
  }
  
  .arrow-5 {
    width:50px;
    height:30px;
    display: grid;
    overflow: hidden;
  }
  .arrow-5:before,
  .arrow-5:after {
    content: "";
    grid-area: 1/1;
    background: currentColor;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
    animation: a5 1s infinite;
    transform: translate(calc(0% + var(--s,0%)));
  }
  
  .arrow-5:after {
    --s:-100%;
  }
  
  @keyframes a5 {
    80%,100%{transform: translate(calc(100% + var(--s,0%)))}
  }
  
  .arrow-6 {
    width:50px;
    height:60px;
    display: grid;
  }
  .arrow-6:before,
  .arrow-6:after {
    content: "";
    background:
      linear-gradient(90deg,currentColor calc(100% - 15px),#0000 0) 0 50%/100% 10px,
      conic-gradient(from -136deg at 15px 50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) 35px 0/100% 100%;
    background-repeat: repeat-x;
    animation: a6 1s infinite;
  }
  .arrow-6:after {
    transform: scaleX(-1);
  }
  
  @keyframes a6 {
    80%,100%{background-position: 50px 50%,85px 0}
  }
  
  .arrow-7 {
    width:110px;
    height:30px;
    display: flex;
    background: 
      linear-gradient(currentColor 0 0) left /30px 10px,
      linear-gradient(currentColor 0 0) right/30px 10px,
      conic-gradient(from -136deg at             15px  50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) 30px              0/100% 100%,
      conic-gradient(from   44deg at calc(100% - 15px) 50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) calc(100% - 30px) 0/100% 100%;
    background-repeat: no-repeat;
    animation: a7 .5s infinite alternate;
  }
  .arrow-7:before {
    content: "";
    flex: 1;
    background: inherit;
    transform: rotate(90deg);
  }
  
  @keyframes a7 {
    90%,100%{width:93px}
  }
  
  .arrow-8 {
    width:30px;
    height:30px;
    display: flex;
    background: 
      linear-gradient(currentColor 0 0) center/calc(100% - 30px) 10px,
      conic-gradient(from -136deg at right,#0000 ,currentColor 1deg 90deg,#0000 91deg) right/15px 100%,
      conic-gradient(from   44deg at left ,#0000 ,currentColor 1deg 90deg,#0000 91deg) left /15px 100%;
    background-repeat: no-repeat;
    animation: a8 .5s infinite alternate;
  }
  .arrow-8:before {
    content: "";
    flex: 1;
    background: inherit;
    transform: rotate(90deg);
  }
  
  @keyframes a8 {
    90%,100%{width:80px}
  }
  
  .arrow-9 {
    width:60px;
    height:30px;
    display: flex;
    background: 
      linear-gradient(currentColor 0 0) center/calc(100% - 30px) 10px,
      conic-gradient(from -136deg at right,#0000 ,currentColor 1deg 90deg,#0000 91deg) right/15px 100%,
      conic-gradient(from   44deg at left ,#0000 ,currentColor 1deg 90deg,#0000 91deg) left /15px 100%;
    background-repeat: no-repeat;
    animation: a9 .5s infinite linear alternate;
  }
  
  @keyframes a9 {
    0%   {transform: translate(-30px)}
    100% {transform: translate( 30px)}
  }
  
  .arrow-10 {
    width:30px;
    height:60px;
    padding-top: 60px;
    display: grid;
    background: 
      linear-gradient(currentColor 0 0) bottom/10px calc(100% - 15px),
      conic-gradient(from 134deg at top,#0000 ,currentColor 1deg 90deg,#0000 91deg) top/100% 15px;
    background-origin: content-box;
    background-repeat: no-repeat;
    animation: a10-0 2s infinite;
  }
  .arrow-10:before,
  .arrow-10:after {
    content: "";
    grid-area: 1/1;
    background:inherit;
    background-size: 10px calc(100% - 25px),100% 25px;
    animation: a10-1 2s infinite;
  }
  .arrow-10:after {
    background-size: 10px calc(100% - 30px),100% 30px;
    animation: a10-2 2s infinite;
  }
  @keyframes a10-0 {
    25%,100% {padding-top:0px}
  }
  
  @keyframes a10-1 {
    0%,25%   {margin:60px -10px 0}
    50%,100% {margin:8px  -10px 0}
  }
  @keyframes a10-2 {
    0%,50%   {margin:60px -15px 0}
    75%,100% {margin:20px -15px 0}
  }