teach/public/js/widgets/coloring-scenes-advanced.js
Ramon f3c30b5d8b
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 35s
fix: hals van giraffe en zebra echt laten toelopen, sauropode poten (v0.4.83-beta)
- Halzen van giraffe en zebra tekenden als een rechte koker met vrijwel
  gelijke breedte overal ("paal met een hoofd erop"); ze lopen nu duidelijk
  toe van brede schouder naar smalle kop, met een vloeiende overgang
- Snuit van de zebra zat als losse donkere wig tegen de kop geplakt ("muis
  met een puntmuts"); kop en snuit zijn nu één doorlopende vorm
- Boomstam-textuurlijnen bij de savanneplaat staken onder de nieuwe
  zebrakop uit; ingekort tot ruim boven het dier
- Sauropode-poten waren nog rechte rechthoeken; nu getapte poten in dezelfde
  stijl als giraffe/zebra, met genoeg tussenruimte om niet aan het oog
  onttrokken te raken door de poot ervoor
- Oogpitje van de sauropode stond net als eerder bij kikker/libelle/
  giraffe/zebra in de niveau-2-detailgroep, dus geen gezicht op niveau 1;
  nu altijd zichtbaar
- Kikker en konijn beoordeeld en in orde bevonden: kop-op-romp zonder
  zichtbare hals is bij die dieren een geldige, al werkende opbouw

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011YErxhic5w9K57zmt8Q1uS
2026-07-31 00:00:30 +02:00

363 lines
26 KiB
JavaScript

/* teach — kleurplaten voor groep 7-8
De rijkste platen: veel vakken, fijnere vormen en composities waarin voor- en
achtergrond echt meedoen. Alles van achter naar voren getekend. */
"use strict";
function plateSeasons(){
/* vier eigen boompjes naast elkaar - één per seizoen - in plaats van één
cirkel in kwarten: dat las als een bal met een kruis erdoorheen. Zo
draagt elke boom zijn eigen seizoen (bloesem, blad, herfstkleur, kale
takken met sneeuw) en is de volgorde meteen duidelijk. */
const cy=200;
const seasonCrown=(cx)=>{
const n=coloringRound;
return `M ${n(cx)} ${n(cy-64)} C ${n(cx+34)} ${n(cy-64)} ${n(cx+60)} ${n(cy-42)} ${n(cx+62)} ${n(cy-11)}`+
` C ${n(cx+83)} ${n(cy-4)} ${n(cx+81)} ${n(cy+26)} ${n(cx+59)} ${n(cy+38)}`+
` C ${n(cx+64)} ${n(cy+60)} ${n(cx+38)} ${n(cy+72)} ${n(cx+11)} ${n(cy+64)}`+
` C ${n(cx+4)} ${n(cy+75)} ${n(cx-19)} ${n(cy+75)} ${n(cx-29)} ${n(cy+64)}`+
` C ${n(cx-53)} ${n(cy+69)} ${n(cx-75)} ${n(cy+53)} ${n(cx-71)} ${n(cy+26)}`+
` C ${n(cx-86)} ${n(cy+15)} ${n(cx-83)} ${n(cy-15)} ${n(cx-60)} ${n(cy-23)}`+
` C ${n(cx-53)} ${n(cy-49)} ${n(cx-26)} ${n(cy-64)} ${n(cx)} ${n(cy-64)} Z`;
};
const trunk=(cx)=>`M ${cx-16} 452 C ${cx-14} 400 ${cx-12} 340 ${cx-10} 270 L ${cx+10} 270 C ${cx+12} 340 ${cx+14} 400 ${cx+16} 452 Z`;
return coloringScene("four-seasons",
coloringBackdrop("sky","#3b7dd8")+
coloringFlat("ground-spring","M 4 452 C 54 446 100 448 200 452 L 200 596 L 4 596 Z","#3fae6a")+
coloringFlat("ground-summer","M 200 452 C 250 448 350 448 400 452 L 400 596 L 200 596 Z","#f7c948")+
coloringFlat("ground-autumn","M 400 452 C 450 448 550 448 600 452 L 600 596 L 400 596 Z","#f28c3c")+
coloringFlat("ground-winter","M 600 452 C 650 448 746 448 796 452 L 796 596 L 600 596 Z","#ffffff")+
coloringGroup("spring-tree",
coloringContour("spring-trunk",trunk(102),"#8b5a3c")+
coloringContour("spring-crown",seasonCrown(102),"#d85aa5")+
coloringGroup("spring-detail",
coloringCircle("spring-leaf-a",70,190,16,"#3fae6a")+
coloringCircle("spring-leaf-b",130,165,13,"#3fae6a")+
coloringCircle("spring-leaf-c",100,235,12,"#3fae6a"),2)+
coloringGroup("spring-ground",
coloringFlat("spring-flower-stem","M 46 486 C 44 470 44 456 46 444 L 54 444 C 56 456 56 470 54 486 Z","#3fae6a")+
coloringCircle("spring-flower-heart",50,432,12,"#f7c948")+
coloringCircle("spring-petal-a",50,414,9,"#d85aa5")+coloringCircle("spring-petal-b",66,432,9,"#d85aa5")+
coloringCircle("spring-petal-c",50,450,9,"#d85aa5")+coloringCircle("spring-petal-d",34,432,9,"#d85aa5"),2))+
coloringGroup("summer-tree",
coloringContour("summer-trunk",trunk(300),"#8b5a3c")+
coloringContour("summer-crown",seasonCrown(300),"#3fae6a")+
coloringGroup("summer-detail",
coloringCircle("summer-leaf-a",270,182,17,"#2fb7a8")+
coloringCircle("summer-leaf-b",332,168,14,"#2fb7a8")+
coloringCircle("summer-leaf-c",300,230,13,"#2fb7a8")+
coloringCircle("summer-fruit-a",256,222,8,"#e0554d")+coloringCircle("summer-fruit-b",320,205,8,"#e0554d"),2)+
coloringGroup("summer-ground",
coloringLine("M 244 486 C 240 462 244 444 254 428 M 260 490 C 258 464 262 446 272 430 M 276 486 C 274 462 280 446 290 432")+
coloringCircle("summer-tuft-a",258,470,10,"#3fae6a")+coloringCircle("summer-tuft-b",274,478,9,"#3fae6a"),2))+
coloringGroup("autumn-tree",
coloringContour("autumn-trunk",trunk(500),"#8b5a3c")+
coloringContour("autumn-crown",seasonCrown(500),"#f28c3c")+
coloringGroup("autumn-detail",
coloringCircle("autumn-leaf-a",470,186,17,"#e0554d")+
coloringCircle("autumn-leaf-b",532,170,14,"#f7c948")+
coloringCircle("autumn-leaf-c",500,232,13,"#e0554d"),2)+
coloringGroup("autumn-ground",
coloringFlat("autumn-leaf-drop-a","M 444 470 C 456 460 472 462 478 474 C 466 486 450 486 444 470 Z","#e0554d")+
coloringFlat("autumn-leaf-drop-b","M 466 494 C 478 486 492 488 496 500 C 486 510 472 510 466 494 Z","#f7c948"),2))+
coloringGroup("winter-tree",
coloringContour("winter-trunk",trunk(698),"#8b5a3c")+
/* geen bladerkroon: drie echte, gevulde takken (geen dunne lijnen die
vanuit één punt uitwaaieren - dat las als vuurwerk) met dunne twijgjes
en sneeuwklompjes op de uiteinden */
coloringFlat("winter-branch-left",coloringPetalPath(698,278,-130,85,14),"#8b5a3c")+
coloringFlat("winter-branch-mid",coloringPetalPath(698,278,-90,95,13),"#8b5a3c")+
coloringFlat("winter-branch-right",coloringPetalPath(698,278,-50,85,14),"#8b5a3c")+
coloringLine("M 643 213 L 613 196 M 643 213 L 637 179 M 698 183 L 685 147 M 698 183 L 711 147"+
" M 753 213 L 759 179 M 753 213 L 783 196")+
coloringGroup("winter-snow",
coloringCircle("snow-tip-a",613,196,11,"#ffffff")+coloringCircle("snow-tip-b",637,179,10,"#ffffff")+
coloringCircle("snow-tip-c",685,147,11,"#ffffff")+coloringCircle("snow-tip-d",711,147,10,"#ffffff")+
coloringCircle("snow-tip-e",759,179,11,"#ffffff")+coloringCircle("snow-tip-f",783,196,10,"#ffffff")+
coloringCircle("snow-crook",698,278,10,"#ffffff"))+
coloringLine("M 690 230 C 694 246 696 262 698 278 M 706 230 C 704 246 702 262 700 278",3)+
coloringGroup("winter-ground",
coloringCircle("snowman-body",668,478,20,"#ffffff")+
coloringCircle("snowman-head",668,448,14,"#ffffff")+
coloringDot(663,444,3)+coloringDot(673,444,3),2))
);
}
function plateEcoCity(){
return coloringScene("eco-city",
coloringBackdrop("sky","#3b7dd8")+
coloringCircle("sun",112,104,48,"#f7c948","coloring-contour")+
coloringFlat("cloud",coloringCloudPath(520,52,180,54),"#ffffff")+
coloringFlat("far-hills","M 4 328 C 120 282 220 322 320 296 C 410 272 480 308 560 292 C 650 274 720 306 796 292 L 796 372 L 4 372 Z","#2fb7a8")+
coloringFlat("street","M 4 492 L 796 492 L 796 596 L 4 596 Z","#26344a")+
coloringFlat("park","M 4 372 L 796 372 L 796 492 L 4 492 Z","#3fae6a")+
/* drie wieken precies 120 graden uit elkaar: eerder stonden ze scheef
(twee dicht bij elkaar, één ver weg), waardoor het geen molen leek */
coloringGroup("turbines",
coloringFlat("turbine-mast","M 128 372 L 148 372 L 142 176 L 134 176 Z","#ffffff")+
coloringFlat("turbine-blade-a",coloringPetalPath(138,176,-50,112,15),"#ffffff")+
coloringFlat("turbine-blade-b",coloringPetalPath(138,176,70,112,15),"#ffffff")+
coloringFlat("turbine-blade-c",coloringPetalPath(138,176,190,112,15),"#ffffff")+
coloringCircle("turbine-hub",138,176,13,"#26344a","coloring-contour"))+
coloringGroup("tower-block",
coloringContour("tower","M 296 492 L 296 196 L 412 196 L 412 492 Z","#f2b38f")+
coloringFlat("tower-roof","M 288 196 L 420 196 L 420 176 L 288 176 Z","#e0554d")+
coloringGroup("tower-windows",
coloringFlat("tower-window-a","M 316 224 L 350 224 L 350 260 L 316 260 Z","#f7c948")+
coloringFlat("tower-window-b","M 360 224 L 394 224 L 394 260 L 360 260 Z","#f7c948")+
coloringFlat("tower-window-c","M 316 284 L 350 284 L 350 320 L 316 320 Z","#f7c948")+
coloringFlat("tower-window-d","M 360 284 L 394 284 L 394 320 L 360 320 Z","#f7c948")+
coloringFlat("tower-window-e","M 316 344 L 350 344 L 350 380 L 316 380 Z","#f7c948")+
coloringFlat("tower-window-f","M 360 344 L 394 344 L 394 380 L 360 380 Z","#f7c948")+
coloringFlat("tower-door","M 336 492 L 376 492 L 376 428 C 368 416 344 416 336 428 Z","#8b5a3c"),2)+
coloringLine("M 296 404 L 412 404",3))+
coloringGroup("solar-house",
coloringContour("house","M 468 492 L 468 336 L 604 336 L 604 492 Z","#f2b38f")+
coloringFlat("roof","M 452 336 L 536 268 L 620 336 Z","#e0554d")+
coloringFlat("solar-panel","M 546 280 L 610 332 L 566 332 L 512 288 Z","#3b7dd8")+
coloringGroup("house-detail",
coloringFlat("house-window-left","M 492 368 L 528 368 L 528 404 L 492 404 Z","#f7c948")+
coloringFlat("house-window-right","M 548 368 L 584 368 L 584 404 L 548 404 Z","#f7c948")+
coloringFlat("house-door","M 516 492 L 556 492 L 556 428 C 548 418 524 418 516 428 Z","#8b5a3c")+
coloringLine("M 520 288 L 578 332 M 528 282 L 592 332",2))+
coloringLine("M 468 440 L 604 440",3))+
coloringGroup("small-house",
coloringContour("shop","M 644 492 L 644 384 L 756 384 L 756 492 Z","#f7c948")+
coloringFlat("shop-roof","M 632 384 L 700 330 L 768 384 Z","#8b5a3c")+
coloringGroup("shop-detail",
coloringFlat("shop-window","M 664 412 L 728 412 L 728 456 L 664 456 Z","#2fb7a8")+
coloringFlat("shop-awning","M 656 412 L 736 412 L 744 392 L 648 392 Z","#e0554d"),2))+
coloringGroup("tram",
coloringContour("tram-body","M 104 492 L 104 404 C 104 394 112 388 124 388 L 268 388 C 280 388 288 394 288 404 L 288 492 Z","#e0554d")+
coloringGroup("tram-detail",
coloringFlat("tram-window-a","M 122 408 L 168 408 L 168 444 L 122 444 Z","#2fb7a8")+
coloringFlat("tram-window-b","M 180 408 L 226 408 L 226 444 L 180 444 Z","#2fb7a8")+
coloringFlat("tram-window-c","M 238 408 L 276 408 L 276 444 L 238 444 Z","#2fb7a8")+
coloringCircle("tram-wheel-left",148,500,20,"#26344a")+
coloringCircle("tram-wheel-right",244,500,20,"#26344a"),2)+
coloringLine("M 104 464 L 288 464 M 196 388 L 196 336",3))+
coloringGroup("trees",
coloringFlat("city-tree-trunk-a","M 424 492 L 424 452 L 444 452 L 444 492 Z","#8b5a3c")+
coloringCircle("city-tree-crown-a",434,414,42,"#3fae6a","coloring-contour")+
coloringGroup("city-tree-b",
coloringFlat("city-tree-trunk-b","M 620 492 L 620 456 L 636 456 L 636 492 Z","#8b5a3c")+
coloringCircle("city-tree-crown-b",628,426,34,"#3fae6a","coloring-contour"),2))+
coloringGroup("street-detail",
coloringLine("M 40 544 L 128 544 M 176 544 L 264 544 M 312 544 L 400 544 M 448 544 L 536 544 M 584 544 L 672 544 M 720 544 L 780 544",2),2)
);
}
function plateMandala(){
const centreX=400,centreY=300;
const ring=(prefix,count,inner,outer,wide,hint,cls)=>{
let out="";
for(let index=0;index<count;index++){
const angle=-90+index*360/count,rad=angle*Math.PI/180;
const x=centreX+Math.cos(rad)*inner,y=centreY+Math.sin(rad)*inner;
out+=coloringRegion("path",`${prefix}-${index}`,`d="${coloringPetalPath(x,y,angle,outer-inner,wide)}"`,hint,cls);
}
return out;
};
const studs=(prefix,count,radius,size,hint)=>{
let out="";
for(let index=0;index<count;index++){
const angle=(-90+180/count+index*360/count)*Math.PI/180;
out+=coloringCircle(`${prefix}-${index}`,coloringRound(centreX+Math.cos(angle)*radius),coloringRound(centreY+Math.sin(angle)*radius),size,hint);
}
return out;
};
const spokes=count=>{
let out="";
for(let index=0;index<count;index++){
const rad=(-90+index*360/count)*Math.PI/180;
out+=`M ${coloringRound(centreX+Math.cos(rad)*54)} ${coloringRound(centreY+Math.sin(rad)*54)} L ${coloringRound(centreX+Math.cos(rad)*272)} ${coloringRound(centreY+Math.sin(rad)*272)} `;
}
return out;
};
return coloringScene("mandala",
coloringBackdrop("mandala-paper","#f2b38f")+
coloringGroup("ring-outer",ring("petal-outer",16,182,274,30,"#7557c8","coloring-contour"))+
coloringGroup("ring-mid",ring("petal-mid",12,112,182,30,"#3b7dd8","coloring-contour"))+
coloringGroup("ring-inner",ring("petal-inner",8,46,112,26,"#2fb7a8","coloring-flat"),2)+
coloringGroup("ring-studs",studs("stud-outer",16,196,15,"#f7c948")+studs("stud-mid",12,126,13,"#e0554d"),2)+
coloringCircle("mandala-core",centreX,centreY,46,"#f7c948","coloring-contour")+
coloringGroup("mandala-heart",
coloringCircle("mandala-heart-ring",centreX,centreY,28,"#d85aa5")+
coloringCircle("mandala-heart-dot",centreX,centreY,13,"#e0554d"),2)+
coloringGroup("mandala-lines",coloringLine(spokes(24),3),3)
);
}
function plateEcosystem(){
return coloringScene("ecosystem",
coloringBackdrop("sky","#3b7dd8")+
coloringCircle("sun",130,116,50,"#f7c948","coloring-contour")+
coloringFlat("cloud",coloringCloudPath(486,74,196,58),"#ffffff")+
coloringGroup("swallows",
coloringLine("M 268 148 C 282 136 294 136 306 146 C 318 136 330 136 344 148"+
" M 330 206 C 342 196 352 196 362 204 C 372 196 382 196 394 206",2)+
coloringLine("M 196 216 C 208 206 218 206 228 214 C 238 206 248 206 260 216",3),2)+
coloringFlat("far-bank","M 4 300 C 130 268 250 296 370 280 C 480 266 580 292 690 278 C 740 272 776 280 796 292 L 796 356 L 4 356 Z","#3fae6a")+
coloringFlat("pond","M 4 356 L 796 356 L 796 500 L 4 500 Z","#2fb7a8")+
coloringFlat("near-bank","M 4 500 C 160 484 340 494 490 506 C 610 516 700 512 796 498 L 796 596 L 4 596 Z","#8b5a3c")+
coloringGroup("reeds",
coloringFlat("reed-left-a","M 68 500 C 62 440 66 386 78 340 L 96 344 C 86 388 84 442 90 500 Z","#3fae6a")+
coloringFlat("reed-left-b","M 112 500 C 108 452 114 408 126 372 L 142 378 C 132 410 128 454 132 500 Z","#3fae6a")+
coloringFlat("reed-head-a","M 78 340 C 70 314 76 292 92 284 C 104 296 106 320 96 344 Z","#8b5a3c")+
coloringGroup("reeds-extra",
coloringFlat("reed-right-a","M 712 500 C 706 444 710 394 722 350 L 740 354 C 730 396 728 446 734 500 Z","#3fae6a")+
coloringFlat("reed-right-b","M 756 500 C 752 456 758 414 770 380 L 786 386 C 776 416 772 458 776 500 Z","#3fae6a")+
coloringFlat("reed-head-b","M 722 350 C 714 324 720 302 736 294 C 748 306 750 330 740 354 Z","#8b5a3c"),2))+
coloringGroup("lilies",
coloringFlat("lily-pad-a","M 200 452 C 200 428 236 412 276 412 C 316 412 348 428 348 452 C 348 474 316 486 274 486 C 234 486 200 474 200 452 Z","#3fae6a")+
coloringFlat("lily-pad-b","M 520 470 C 520 450 550 436 584 436 C 618 436 646 450 646 470 C 646 488 618 500 582 500 C 548 500 520 488 520 470 Z","#3fae6a")+
coloringGroup("lily-flower",
coloringFlat("lily-petal-a",coloringPetalPath(636,424,-90,44,18),"#d85aa5")+
coloringFlat("lily-petal-b",coloringPetalPath(636,424,-140,40,17),"#d85aa5")+
coloringFlat("lily-petal-c",coloringPetalPath(636,424,-40,40,17),"#d85aa5")+
coloringCircle("lily-heart",636,424,16,"#f7c948"),2)+
coloringLine("M 274 418 L 274 452 M 226 444 L 348 452 M 634 440 L 634 466",3))+
coloringGroup("fish",
coloringFlat("pond-fish-tail","M 466 396 C 448 380 434 374 422 376 C 426 392 426 408 422 424 C 436 424 452 414 466 400 Z","#f28c3c")+
coloringContour("pond-fish-body","M 462 400 C 474 372 500 356 530 356 C 562 356 586 374 596 400 C 586 426 562 442 530 442 C 500 442 474 426 462 400 Z","#f28c3c")+
coloringGroup("pond-fish-detail",
coloringCircle("pond-fish-eye",570,388,11,"#ffffff")+
coloringDot(571,388,5)+
coloringLine("M 500 380 C 514 376 528 374 542 374 M 500 418 C 514 422 528 424 542 424",2)))+
coloringGroup("frog",
/* een zittende kikker heeft brede achterpoten opzij en twee kleine
voorvoeten vooraan onder de buik - twee identieke dunne armen aan
weerszijden lazen als een teddybeer in plaats van een kikker */
coloringFlat("frog-hind-leg-left","M 262 468 C 212 466 174 490 164 526 C 160 546 176 564 200 562 C 224 560 246 540 252 514 C 254 498 258 482 262 468 Z","#3fae6a")+
coloringFlat("frog-hind-leg-right","M 406 468 C 456 466 494 490 504 526 C 508 546 492 564 468 562 C 444 560 422 540 416 514 C 414 498 410 482 406 468 Z","#3fae6a")+
coloringContour("frog-body","M 244 496 C 244 448 284 418 334 418 C 384 418 424 448 424 496 C 424 532 384 548 334 548 C 284 548 244 532 244 496 Z","#3fae6a")+
coloringContour("frog-head","M 262 434 C 262 398 294 376 334 376 C 374 376 406 398 406 434 C 406 458 374 470 334 470 C 294 470 262 458 262 434 Z","#3fae6a")+
coloringCircle("frog-foot-left",194,556,20,"#3fae6a")+
coloringCircle("frog-foot-right",474,556,20,"#3fae6a")+
coloringCircle("frog-front-foot-left",296,558,18,"#3fae6a")+
coloringCircle("frog-front-foot-right",372,558,18,"#3fae6a")+
/* de oogpitjes staan buiten de tier-2 detailgroep, en ná die groep in
de tekenvolgorde: zo blijft er op niveau 1 een gezicht te zien (de
oogvakken zelf horen nog wel bij het invulwerk van niveau 2) en
verdwijnen de pitjes op niveau 2 niet onder het witte oogvak */
coloringGroup("frog-detail",
coloringCircle("frog-eye-left",302,388,22,"#f7c948")+
coloringCircle("frog-eye-right",366,388,22,"#f7c948")+
coloringFlat("frog-belly","M 266 496 C 282 526 302 540 334 542 C 366 540 388 526 402 496 C 400 532 372 548 334 548 C 296 548 268 532 266 496 Z","#f7c948"),2)+
coloringDot(302,388,9)+coloringDot(366,388,9)+
coloringLine("M 306 448 C 320 458 348 458 362 448",2)+
coloringLine("M 274 480 C 296 490 372 490 394 480 M 260 524 C 284 536 384 536 408 524",3)+
coloringLine("M 186 566 L 178 578 M 194 570 L 194 582 M 202 566 L 210 578"+
" M 466 566 L 458 578 M 474 570 L 474 582 M 482 566 L 490 578"+
" M 288 570 L 282 580 M 296 572 L 296 584 M 304 570 L 310 580"+
" M 364 570 L 358 580 M 372 572 L 372 584 M 380 570 L 386 580",2))+
/* vier vleugels symmetrisch aan weerszijden van het lijf in plaats van
twee dunne slierten aan één kant - dat las niet als vleugels */
coloringGroup("dragonfly",
coloringFlat("dragonfly-wing-front-right",coloringPetalPath(600,250,-15,95,26),"#2fb7a8")+
coloringFlat("dragonfly-wing-back-right",coloringPetalPath(600,250,25,85,24),"#2fb7a8")+
coloringFlat("dragonfly-wing-front-left",coloringPetalPath(600,250,195,95,26),"#2fb7a8")+
coloringFlat("dragonfly-wing-back-left",coloringPetalPath(600,250,155,85,24),"#2fb7a8")+
coloringContour("dragonfly-body","M 588 232 C 588 224 596 220 600 220 C 604 220 612 224 612 232 C 616 260 614 300 606 336 C 604 342 596 342 594 336 C 586 300 584 260 588 232 Z","#7557c8")+
coloringCircle("dragonfly-head",600,200,19,"#7557c8","coloring-contour")+
coloringDot(592,196,5)+coloringDot(608,196,5)+
coloringGroup("dragonfly-detail",
coloringLine("M 590 250 L 610 250 M 592 275 L 608 275 M 594 300 L 606 300",2)))+
coloringGroup("front-reeds",
coloringLine("M 90 590 C 98 556 102 534 100 512 M 120 594 C 130 562 134 542 134 520 M 640 588 C 648 556 652 534 650 514",2),2)
);
}
function plateSavanna(){
return coloringScene("savanna-web",
coloringBackdrop("sky","#f2b38f")+
coloringCircle("sun",654,124,64,"#f28c3c","coloring-contour")+
coloringFlat("far-plain","M 4 316 C 140 288 280 306 420 320 C 550 332 680 326 796 306 L 796 396 L 4 396 Z","#f7c948")+
coloringFlat("plain","M 4 396 L 796 396 L 796 596 L 4 596 Z","#f7c948")+
coloringFlat("waterhole","M 116 552 C 116 522 188 504 270 504 C 352 504 416 522 416 552 C 416 578 352 590 268 590 C 186 590 116 578 116 552 Z","#2fb7a8")+
coloringGroup("acacia",
/* de rechterkant van de stam smalt naar beneden toe in plaats van te
verbreden, zodat de zebra ernaast kan staan zonder dat kop en stam
door elkaar heen lopen */
coloringContour("acacia-trunk","M 116 396 C 132 344 146 288 150 224 L 200 224 C 196 288 182 344 170 396 Z","#8b5a3c")+
coloringFlat("acacia-branch-left","M 150 236 C 116 226 84 214 56 200 L 62 182 C 92 196 124 208 156 216 Z","#8b5a3c")+
coloringFlat("acacia-branch-right","M 200 236 C 234 226 266 214 294 200 L 288 182 C 258 196 226 208 194 216 Z","#8b5a3c")+
coloringContour("acacia-canopy","M 30 196 C 12 168 40 138 84 138 C 106 112 168 106 202 130 C 254 122 304 146 306 180 C 308 198 288 208 254 206 L 80 206 C 50 206 34 202 30 196 Z","#3fae6a")+
coloringGroup("acacia-detail",
coloringFlat("acacia-cluster-a","M 72 174 C 72 156 90 144 112 146 C 136 148 152 160 150 178 C 148 196 128 206 106 204 C 84 202 72 192 72 174 Z","#2fb7a8")+
coloringFlat("acacia-cluster-b","M 184 166 C 184 148 202 136 224 138 C 248 140 264 152 262 170 C 260 188 240 198 218 196 C 196 194 184 184 184 166 Z","#2fb7a8")+
/* een derde pluk hoger in het midden: twee symmetrische plukken lazen
als een paar ogen in de kroon */
coloringFlat("acacia-cluster-c","M 148 136 C 148 120 164 110 184 112 C 204 114 218 124 216 140 C 214 156 196 164 176 162 C 158 160 148 152 148 136 Z","#3fae6a")+
coloringLine("M 166 232 C 164 250 164 264 166 276 M 186 232 C 185 250 186 264 188 276",2))+
coloringLine("M 80 206 C 120 202 240 202 280 206 M 100 154 C 130 148 200 148 240 154",3))+
coloringGroup("giraffe",
/* getapte poten met een lichte knik ipv rechte kokers, en een hoef
die uit de poot zelf voortkomt; de nek loopt breed uit in de
schouder in plaats van als losse balk op het lichaam te staan */
coloringFlat("giraffe-hind-leg-far",coloringLegPath(663,462,566,30,15,26,5),"#f7c948")+
coloringFlat("giraffe-fore-leg-far",coloringLegPath(554,458,566,28,14,24,-4),"#f7c948")+
coloringFlat("giraffe-tail","M 686 424 C 706 442 718 466 720 492 C 706 488 692 472 682 450 Z","#f7c948")+
coloringContour("giraffe-body","M 502 448 C 500 402 540 378 596 378 C 654 378 692 402 694 448 C 696 486 652 502 594 502 C 536 502 504 486 502 448 Z","#f7c948")+
/* de hals smalt nu duidelijk toe van schouder naar kop in plaats van
een rechte koker met vrijwel gelijke breedte overal - dat las als
een paal met een hoofd erop in plaats van een hals */
coloringContour("giraffe-neck","M 496 424 C 484 356 480 276 502 198 L 538 192 C 546 268 552 344 568 412 C 548 430 516 434 496 424 Z","#f7c948")+
coloringFlat("giraffe-hind-leg-near",coloringLegPath(629,468,578,32,16,28,7),"#f7c948")+
coloringFlat("giraffe-fore-leg-near",coloringLegPath(523,464,578,32,15,28,-6),"#f7c948")+
coloringContour("giraffe-head","M 476 204 C 460 176 474 146 504 140 C 536 134 560 154 562 182 C 546 206 506 216 476 204 Z","#f7c948")+
coloringFlat("giraffe-muzzle","M 478 174 C 452 166 432 176 426 194 C 442 210 466 214 486 206 Z","#f2b38f")+
coloringGroup("giraffe-detail",
coloringCircle("giraffe-spot-a",548,412,18,"#8b5a3c")+
coloringCircle("giraffe-spot-b",606,404,20,"#8b5a3c")+
coloringCircle("giraffe-spot-c",660,414,17,"#8b5a3c")+
coloringCircle("giraffe-spot-d",620,458,16,"#8b5a3c")+
coloringCircle("giraffe-spot-e",512,268,15,"#8b5a3c")+
coloringCircle("giraffe-spot-f",528,340,14,"#8b5a3c")+
coloringCircle("giraffe-spot-g",500,216,12,"#8b5a3c")+
coloringFlat("giraffe-horn-left","M 494 142 C 490 122 496 108 508 102 C 516 116 512 132 506 144 Z","#8b5a3c")+
coloringFlat("giraffe-horn-right","M 534 140 C 534 120 542 106 554 102 C 558 118 552 132 544 144 Z","#8b5a3c")+
coloringFlat("giraffe-ear","M 560 170 C 582 158 604 160 614 174 C 598 188 574 188 560 182 Z","#f2b38f")+
/* elke poot krijgt een eigen hoef: eerder hadden alleen de
achterpoten er een, waardoor de voorpoten wegvielen en het dier op
twee poten leek te staan */
coloringFlat("giraffe-hoof-hind-far","M 646 556 L 688 556 L 686 570 L 656 574 Z","#8b5a3c")+
coloringFlat("giraffe-hoof-hind-near","M 608 564 L 656 564 L 654 580 L 618 584 Z","#8b5a3c")+
coloringFlat("giraffe-hoof-fore-far","M 540 566 L 580 566 L 578 580 L 548 584 Z","#8b5a3c")+
coloringFlat("giraffe-hoof-fore-near","M 504 574 L 550 574 L 548 590 L 512 594 Z","#8b5a3c"),2)+
coloringDot(506,170,6)+
coloringLine("M 434 190 C 438 200 446 206 456 208 M 682 450 C 692 462 700 476 704 490",2)+
coloringLine("M 512 444 C 548 458 630 462 684 452 M 494 256 C 510 262 526 270 536 276 M 548 520 C 560 526 574 526 584 522",3))+
coloringGroup("zebra",
/* hals en kop als één doorlopende, getapte vorm (smal bij de kop, breed
bij de schouder) met de snuit erin verwerkt, in plaats van een
rechte kokerhals met een los aangeplakte snuitflap - dat las als een
cirkel op een koker in plaats van een dier */
coloringFlat("zebra-hind-leg-far",coloringLegPath(411,458,560,28,14,24,5),"#ffffff")+
coloringFlat("zebra-fore-leg-far",coloringLegPath(312,456,560,26,13,22,-4),"#ffffff")+
coloringFlat("zebra-tail","M 429 428 C 449 442 461 462 465 486 C 451 482 437 468 427 448 Z","#ffffff")+
coloringContour("zebra-body","M 267 446 C 265 404 303 380 351 380 C 401 380 437 404 439 446 C 441 480 401 496 351 496 C 299 496 269 480 267 446 Z","#ffffff")+
coloringContour("zebra-neck","M 267 428 C 259 392 253 348 255 308 L 298 278 C 306 336 320 384 335 420 C 315 438 285 440 267 428 Z","#ffffff")+
coloringFlat("zebra-hind-leg-near",coloringLegPath(382,464,570,30,15,26,6),"#ffffff")+
coloringFlat("zebra-fore-leg-near",coloringLegPath(284,462,570,30,14,26,-5),"#ffffff")+
coloringContour("zebra-head","M 255 322 C 238 316 188 308 165 294 C 152 286 153 268 172 258 C 195 248 226 250 255 262 C 285 256 309 276 311 304 C 293 326 268 332 255 322 Z","#ffffff")+
coloringGroup("zebra-stripes",
coloringFlat("stripe-a","M 297 392 C 303 420 303 454 297 490 L 319 492 C 325 454 325 420 319 390 Z","#26344a")+
coloringFlat("stripe-b","M 343 382 C 349 412 349 450 343 494 L 365 494 C 371 450 371 412 365 382 Z","#26344a")+
coloringFlat("stripe-c","M 389 386 C 395 414 395 450 389 490 L 409 486 C 415 448 415 414 409 386 Z","#26344a")+
coloringFlat("stripe-mane","M 300 280 C 306 320 316 362 328 400 L 340 396 C 328 358 318 318 312 280 Z","#26344a")+
coloringFlat("zebra-ear","M 262 248 C 282 232 306 232 316 248 C 302 264 278 266 262 258 Z","#ffffff")+
coloringFlat("zebra-hoof-hind-far","M 393 548 L 433 548 L 431 562 L 403 566 Z","#26344a")+
coloringFlat("zebra-hoof-hind-near","M 361 556 L 405 556 L 403 570 L 371 574 Z","#26344a")+
coloringFlat("zebra-hoof-fore-far","M 309 566 L 353 566 L 351 580 L 319 584 Z","#26344a")+
coloringFlat("zebra-hoof-fore-near","M 285 574 L 335 574 L 333 590 L 295 594 Z","#26344a"),2)+
coloringDot(272,270,6)+
coloringLine("M 172 292 C 178 300 186 306 196 308 M 427 450 C 437 462 445 474 449 486",2)+
coloringLine("M 277 442 C 313 456 389 460 435 450 M 268 340 C 275 350 283 358 292 364 M 303 512 C 315 518 329 518 339 514",3))+
coloringGroup("grass-front",
coloringFlat("grass-tuft-a","M 430 566 C 432 540 438 518 448 498 C 452 522 454 544 452 566 C 458 542 466 522 478 506 C 476 532 472 552 466 566 Z","#3fae6a")+
coloringGroup("grass-extra",
coloringFlat("grass-tuft-b","M 728 570 C 730 544 736 522 746 502 C 750 526 752 548 750 570 C 756 546 764 526 776 510 C 774 536 770 556 764 570 Z","#3fae6a"),2)+
coloringLine("M 500 586 C 508 556 512 536 510 516 M 530 590 C 540 560 544 540 544 520 M 692 584 C 700 554 704 534 702 514",3))
);
}