Tekeningen programmeren met SVG (2023–2024)

CoderDojo Waregem

CoderDojo

Kijk eens goed naar de afbeelding hiernaast. Wat zie je?

Wil je uitleggen hoe een computer dit moet tekenen? Deze handleiding leert hoe dat kan met SVG. Een makkelijke taal om afbeeldingen op te bouwen uit verschillende vormen. Want kijk nog eens goed. Het logo is niet meer dan een grote witte cirkel, een zwarte vorm die bestaat uit drie halve cirkels en de cijfers 0 en 1.

<svg width="600" height="600" viewBox="-300 -300 600 600">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="black"
    d="M0,-300 A150,150,0,0,1,0,0 A150,150,0,0,0,0,300 A300,300,0,0,0,0,-300" />
  <text x="0" y="-150" fill="black">0</text>
  <text x="0" y="150" fill="white">1</text>
</svg>

Dit is een vertaling en bewerking van de SVG Tutorial van Hunor Márton Borbély. Je kunt ook een samenvatting bekijken in deze video.

Je bent niet geregistreerd voor deze cursus.

Registreren

Oefeningenreeksen

Titel Voortgang groep Status
Paden
Transformaties
Afbeeldingselementen hergebruiken
Afbeeldingselementen herschalen
Bijknippen
Kleurovergangen
Voorbeelden met complexere vormen
Titel Voortgang groep Status
Kwadratische Bézierkrommen
Kubische Bézierkrommen
Zo teken je een klok
Zo teken je een strikje
Zo teken je een beer
Bogen
Zo teken je het CoderDojo-logo
Voorbeelden met kromme lijnen
Titel Voortgang groep Status
Animatie langs een pad
Animatie bij zweven
Zo animeer je sneeuw