矢印・方向性装飾グラフィックセット

<div class="arrows07-08-10">
          <span class="arr straight"><span class="line"></span><span class="head"></span></span>
          <svg class="arr curved" viewBox="0 0 80 60">
            <path d="M4,50 C10,15 50,5 70,20"></path>
            <path class="ahead" d="M70,20 L58,16 M70,20 L64,32"></path>
          </svg>
          <span class="chevrons">
            <span class="chev"></span>
            <span class="chev"></span>
            <span class="chev"></span>
          </span>
          <svg class="arr circular" viewBox="0 0 70 70">
            <path d="M60,35 A25,25 0 1 1 44,12"></path>
            <path class="chead" d="M44,12 L34,10 M44,12 L40,22"></path>
          </svg>
        </div>

.d07-08-10 .arrows07-08-10{
          position:relative;
          width:220px;
          height:200px;
        }
        .d07-08-10 .arr{
          position:absolute;
        }
        .d07-08-10 .straight{
          top:14px;
          left:10px;
          display:flex;
          align-items:center;
        }
        .d07-08-10 .straight .line{
          width:70px;
          height:5px;
          background:#2563eb;
          display:inline-block;
        }
        .d07-08-10 .straight .head{
          width:0;
          height:0;
          border-top:9px solid transparent;
          border-bottom:9px solid transparent;
          border-left:14px solid #2563eb;
          display:inline-block;
        }
        .d07-08-10 .curved{
          top:10px;
          right:6px;
          width:80px;
          height:60px;
        }
        .d07-08-10 .curved path{
          fill:none;
          stroke:#f59e0b;
          stroke-width:4;
          stroke-linecap:round;
        }
        .d07-08-10 .chevrons{
          bottom:60px;
          left:20px;
          display:flex;
          gap:6px;
        }
        .d07-08-10 .chev{
          width:16px;
          height:16px;
          border-top:5px solid #10b981;
          border-right:5px solid #10b981;
          transform:rotate(45deg);
          display:inline-block;
        }
        .d07-08-10 .circular{
          bottom:0;
          right:16px;
          width:70px;
          height:70px;
        }
        .d07-08-10 .circular path{
          fill:none;
          stroke:#8b5cf6;
          stroke-width:4;
          stroke-linecap:round;
        }