dashed arrays

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

svg {border: 1px solid red;}

.spiral { transform: translate(25%)}

.rotate {
      animation: rotate 5s linear infinite;
      transform-box: fill-box;
      transform-origin: center;
    }

@keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

.dashed-line  {
      stroke-dasharray: 50;
    }

@keyframes dash-animation {
      to {
        stroke-dashoffset: 1000;
      }
    }

.dash-move {
      animation: dash-animation 20s infinite linear;
    }
  </style>
</head>

<path style="filter:url(#dropshadow)" class="dashed-line dash-move" fill="none" stroke="red" stroke-width="4" stroke-linejoin="round" stroke-miterlimit="10" d="M23.742,10.709
                                                                                                                       c-2.305,23.611-8.81,46.563-9.021,70.829c-0.252,28.966,22.237,43.666,47.06,55.482c23.642,11.255,42.368,15.766,68.461,16.631
                                                                                                                       c19.993,0.663,40.08,2.97,59.853-1.723c23.301-5.531,45.542-17.598,66.978-27.933c19.248-9.281,38.831-21.86,41.946-45.201
                                                                                                                       c5.539-41.51-54.993-47.073-81.885-42.17C159.05,47.212,89.37,104.633,77.387,164.629c-5.896,29.522-4.312,60.884,12.703,86.354
                                                                                                                       c19.17,28.697,49.512,49.927,78.596,67.591"/>
    </g>
  </svg>
  <script>
    const size = 400;

var svg = d3.select("svg")
    .attr("width", size)
    .attr("height", size)

</script>
</body>

https://d3js.org/d3.v4.min.js