Nadat we hebben geleerd over kwadratische Bézierkrommen en kubische Bézierkrommen, doen we nog een oefenrondje waarbij we beide soorten krommen gebruiken om dit strikje te tekenen.

We beginnen voor de rechterkant van het strikje met een kwadratische Bézierkromme. De stip stelt opnieuw het controlepunt voor.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#B73A3B" d="
    M0,-20
    Q28,-40,56,-45"
  />
</svg>

Daarna gaan we verder met een kubische Bézier.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#B73A3B" d="
    M0,-20
    Q28,-40,56,-45
    C96,-48,96,48,56,45"
  />
</svg>

En we eindigen met nog een kwadratische kubische Bézierkromme die het spiegelbeeld is van de eerste.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#B73A3B" d="
    M0,-20
    Q28,-40,56,-45
    C96,-48,96,48,56,45
    Q28,40,0,20"
  />
</svg>

Dan kunnen we de volledige vorm verplaatsen naar een herbruikbare component en die voor beide kanten van het strikje gebruiken. Merk op dat we negatieve schaling gebruiken om naar de linkerkant te spiegelen.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <defs>
      <path fill="#B73A3B" id="strikje" d="
        M0,-20 Q28,-40,56,-45 C96,-48,96,48,56,45 Q28,40,0,20" 
      />
  </defs>

  <use href="#strikje" />
  <use href="#strikje" transform="scale(-1)" />
</svg>

We maken de afbeelding af door een ellipse element in het midden toe te voegen en een kromme lijn voor het touwtje.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <defs>
      <path fill="#B73A3B" id="strikje" d="
        M0,-20 Q28,-40,56,-45 C96,-48,96,48,56,45 Q28,40,0,20" 
      />
  </defs>

  <use href="#strikje" />
  <use href="#strikje" transform="scale(-1)" />
  <ellipse cx="0" cy="0" rx="20" ry="24" fill="#9C2D2A" />
  <path fill="none" stroke="#B73A3B" stroke-width="3" d="
    M0,20 Q40,40,30,60 Q20,80,40,90 
    M0,20 Q-30,30,-20,60 Q-10,90,-50,100"
  />
</svg>