JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<svg width="720" height="720" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720">
  <path class="st-0" d="M 90 219 L 115 219 L 224 76 A 125 147 6 0 1 379 62 C 345 119 246 237 289 300 Q 446 289 465 380 Q 542 278 482 153 L 685 216" />
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="107" y="209"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="137" y="173"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="164" y="137"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="190" y="102"></image>

  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="245" y="45"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="276" y="32"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="307" y="30"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="338" y="34"></image>

  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="341" y="100"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="310" y="147"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="286" y="195"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="270" y="242"></image>

  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="325" y="290"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="360" y="293"></image>
  <image xlink:href="https://variabet.com/images/step-circle.svg" width="16" height="16" x="396" y="304"></image>
  <image...

CSS

svg {
  width: 720px;
  background-image: url('https://variabet.com/images/terrain-football.jpg');
  /*background-image: url('http://2.bp.blogspot.com/-QH0ZqosU4iY/U7uaDE-Gw_I/AAAAAAAABPY/QYaG7sqLSOY/s1600/aperçu+parrainage.jpg');*/
  background-position: 0 0;
  background-repeat: no-repeat;
}

.st-0 {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-dasharray: 1, 10;
  stroke-linecap: round;
}