Tekeningen programmeren met SVG (2024–2025)

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.

You are not a member of this course.

Register

Exercise series

Title Class progress Status
Paths
Transformations
Reuse image elements
Scale image elements
Clipping
Gradients
Examples with complex shapes
Title Class progress Status
Quadratic Bézier curves
Cubic Bézier curves
How to draw a bell
How to draw a ribbon
How to draw a bear
Arcs
How to draw the CoderDojo logo
Examples with curves
Text along a path
Title Class progress Status
Animation along a path
Animation on hover
How to animate snow