All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 34s
Kwast en verfemmer werkten al, maar het resultaat was onzichtbaar: de contourlaag zette fill="#fff" op elk vak en vertrouwde op mix-blend-mode:multiply om dat onschadelijk te maken. Doordat .coloring-ink zelf een stacking context is (position+z-index), vormt die een geisoleerde blendgroep zonder achtergrond, en werd het wit gewoon dekkend over de hele tekening gelegd. Live nagemeten met headless Chromium. - Tekenmodel omgezet naar een echte schildersvolgorde in een enkele SVG: elk vak wordt uitgeklapt naar vak -> verflaag -> contour, zodat verf zichtbaar blijft en latere vakken de verf en contour van eerdere vakken afdekken. Daarmee kijk je ook niet meer door figuren heen. - Canvas vervangen door SVG-streken: geen opschalingsonscherpte meer en geen donkere naden (dekking staat per streek op de groep, niet per segment). - Kwast blijft binnen de lijnen als hulp, gestuurd door niveau: groep 1-4 op niveau 1 en 2, groep 5-8 op niveau 1, daarboven vrij schilderen. - Verfemmer dekt een vak volledig; de gum pelt de bovenste laag af (eerst de vulling, daarna de streken eronder). - Kleurwijzer toegevoegd: op niveau 1 laat een stip per vak de voorgestelde kleur zien, op niveau 2 op te vragen met een knop, op niveau 3 uit. - Niveau sloopt de tekening niet meer: data-tier staat alleen op groepen en detaillijnen, dus een rekwisiet verdwijnt als geheel en de plaat is op elk niveau een complete tekening. Niveau 3 voegt alleen fijn lijnwerk toe. - Atlas hertekend naar 20 platen, 5 per groepenband en 1 per thema. Twee lijndiktes, vakken op maat van de band, geen evenodd-gaten, en composities met voor-, midden- en achtergrond. - partBelow/elementFromPoint en het omzetten van pointer-events vervallen: aanwijzen gebeurt meetkundig met isPointInFill/isPointInStroke. - langchange-listener ruimt zichzelf op na demontage. - Staat bewaart nu streken in plaats van een PNG; oud werk met een ink-PNG blijft zichtbaar. - Tests: asserties die de bug vastzetten verwijderd en vervangen door een regressietest die verbiedt dat CSS een fill op een kleurvak zet, plus controles op gesloten vakken, geen transform, tier-regels, vakaantallen per niveau en de clip-matrix. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011YErxhic5w9K57zmt8Q1uS
275 lines
20 KiB
JavaScript
275 lines
20 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(){
|
|
/* één boom, vier seizoenen: de kroon is in vier kwarten verdeeld en de grond
|
|
eronder loopt mee, van links (lente) naar rechts (winter) */
|
|
/* de kroon is een cirkel in vier kwarten: linksonder lente, linksboven zomer,
|
|
rechtsboven herfst, rechtsonder winter. De grond eronder loopt in vier
|
|
banen mee, dus de plaat leest van links naar rechts als een jaar. */
|
|
return coloringScene("four-seasons",
|
|
coloringBackdrop("sky","#3b7dd8")+
|
|
coloringFlat("ground-spring","M 4 452 L 200 452 L 200 596 L 4 596 Z","#3fae6a")+
|
|
coloringFlat("ground-summer","M 200 452 L 400 452 L 400 596 L 200 596 Z","#f7c948")+
|
|
coloringFlat("ground-autumn","M 400 452 L 600 452 L 600 596 L 400 596 Z","#f28c3c")+
|
|
coloringFlat("ground-winter","M 600 452 L 796 452 L 796 596 L 600 596 Z","#ffffff")+
|
|
coloringGroup("tree",
|
|
coloringContour("trunk","M 344 452 C 356 400 364 340 366 250 L 434 250 C 436 340 444 400 456 452 Z","#8b5a3c")+
|
|
coloringContour("crown-summer","M 400 210 L 250 210 A 150 150 0 0 1 400 60 Z","#3fae6a")+
|
|
coloringContour("crown-autumn","M 400 210 L 400 60 A 150 150 0 0 1 550 210 Z","#f28c3c")+
|
|
coloringContour("crown-spring","M 400 210 L 400 360 A 150 150 0 0 1 250 210 Z","#d85aa5")+
|
|
coloringContour("crown-winter","M 400 210 L 550 210 A 150 150 0 0 1 400 360 Z","#2fb7a8")+
|
|
coloringGroup("tree-detail",
|
|
coloringFlat("blossom-a","M 296 260 C 310 244 334 244 348 260 C 334 278 310 278 296 260 Z","#ffffff")+
|
|
coloringFlat("blossom-b","M 320 306 C 334 290 358 290 372 306 C 358 324 334 324 320 306 Z","#ffffff")+
|
|
coloringFlat("leaf-a","M 300 152 C 314 136 338 136 352 152 C 338 170 314 170 300 152 Z","#f7c948")+
|
|
coloringFlat("leaf-b","M 452 152 C 466 136 490 136 504 152 C 490 170 466 170 452 152 Z","#e0554d")+
|
|
coloringFlat("snow-clump","M 452 262 C 466 246 490 246 504 262 C 490 280 466 280 452 262 Z","#ffffff")+
|
|
coloringFlat("trunk-knot","M 384 372 C 396 362 412 362 420 372 C 412 386 396 386 384 372 Z","#f2b38f")+
|
|
coloringFlat("hollow","M 386 418 C 396 406 410 406 418 418 C 410 434 396 434 386 418 Z","#26344a"),2)+
|
|
coloringLine("M 372 300 C 392 292 412 292 430 300 M 376 392 C 394 384 410 384 426 392",2)+
|
|
coloringLine("M 400 60 L 400 360 M 250 210 L 550 210 M 296 106 L 504 314 M 504 106 L 296 314",3))+
|
|
coloringGroup("season-props",
|
|
coloringContour("tulip-cup","M 78 448 C 78 424 90 408 108 408 C 126 408 138 424 138 448 C 122 458 94 458 78 448 Z","#e0554d")+
|
|
coloringFlat("tulip-stem","M 100 526 C 96 500 96 474 100 448 L 116 448 C 112 474 112 500 116 526 Z","#3fae6a")+
|
|
coloringFlat("sunflower-petal-a",coloringPetalPath(268,486,-90,48,20),"#f7c948")+
|
|
coloringFlat("sunflower-petal-b",coloringPetalPath(268,486,-18,48,20),"#f7c948")+
|
|
coloringFlat("sunflower-petal-c",coloringPetalPath(268,486,54,48,20),"#f7c948")+
|
|
coloringFlat("sunflower-petal-d",coloringPetalPath(268,486,126,48,20),"#f7c948")+
|
|
coloringFlat("sunflower-petal-e",coloringPetalPath(268,486,198,48,20),"#f7c948")+
|
|
coloringCircle("sunflower-core",268,486,26,"#8b5a3c","coloring-contour")+
|
|
coloringFlat("pumpkin","M 484 552 C 484 518 508 498 540 498 C 572 498 596 518 596 552 C 596 578 572 590 540 590 C 508 590 484 578 484 552 Z","#f28c3c")+
|
|
coloringGroup("season-props-detail",
|
|
coloringFlat("pumpkin-stem","M 532 498 C 532 484 536 474 546 468 C 552 480 550 492 546 500 Z","#3fae6a")+
|
|
coloringLine("M 512 506 C 506 528 506 566 512 584 M 568 506 C 574 528 574 566 568 584",2)+
|
|
coloringFlat("snowman-body","M 668 552 C 668 526 686 508 710 508 C 734 508 752 526 752 552 C 752 576 734 588 710 588 C 686 588 668 576 668 552 Z","#ffffff")+
|
|
coloringCircle("snowman-head",710,478,32,"#ffffff")+
|
|
coloringDot(700,472,5)+coloringDot(720,472,5),2)+
|
|
coloringLine("M 108 526 C 128 508 148 500 166 498 M 268 512 C 264 542 264 566 268 586",3))
|
|
);
|
|
}
|
|
|
|
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")+
|
|
coloringGroup("turbines",
|
|
coloringFlat("turbine-mast","M 128 372 L 148 372 L 142 176 L 134 176 Z","#ffffff")+
|
|
coloringFlat("turbine-blade-a","M 138 176 L 146 168 L 236 108 L 240 124 Z","#ffffff")+
|
|
coloringFlat("turbine-blade-b","M 138 176 L 130 170 L 60 244 L 74 252 Z","#ffffff")+
|
|
coloringFlat("turbine-blade-c","M 138 176 L 146 182 L 168 284 L 152 286 Z","#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")+
|
|
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(584,432,-90,42,17),"#d85aa5")+
|
|
coloringFlat("lily-petal-b",coloringPetalPath(584,432,-138,38,16),"#d85aa5")+
|
|
coloringFlat("lily-petal-c",coloringPetalPath(584,432,-42,38,16),"#d85aa5")+
|
|
coloringCircle("lily-heart",584,432,15,"#f7c948"),2)+
|
|
coloringLine("M 274 418 L 274 452 M 226 444 L 348 452 M 582 442 L 582 470",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",
|
|
coloringFlat("frog-far-leg","M 240 512 C 208 508 182 518 166 538 C 190 550 224 548 248 534 Z","#3fae6a")+
|
|
coloringFlat("frog-near-leg","M 372 514 C 404 510 432 520 448 540 C 424 552 390 550 366 536 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")+
|
|
coloringGroup("frog-detail",
|
|
coloringCircle("frog-eye-left",302,388,22,"#f7c948")+
|
|
coloringCircle("frog-eye-right",366,388,22,"#f7c948")+
|
|
coloringDot(302,388,9)+coloringDot(366,388,9)+
|
|
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)+
|
|
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))+
|
|
coloringGroup("dragonfly",
|
|
coloringFlat("dragonfly-wing-upper","M 596 236 C 636 214 690 212 720 226 C 690 250 638 256 600 248 Z","#2fb7a8")+
|
|
coloringFlat("dragonfly-wing-lower","M 596 252 C 636 268 686 276 714 290 C 682 302 632 292 598 268 Z","#2fb7a8")+
|
|
coloringContour("dragonfly-body","M 566 232 C 578 226 592 226 600 234 C 602 262 598 296 588 322 C 578 300 570 266 566 232 Z","#7557c8")+
|
|
coloringCircle("dragonfly-head",582,220,20,"#7557c8","coloring-contour")+
|
|
coloringGroup("dragonfly-detail",
|
|
coloringDot(574,214,5)+coloringDot(590,214,5)+
|
|
coloringLine("M 572 254 L 596 254 M 574 274 L 594 274 M 578 294 L 592 294",2)))+
|
|
coloringGroup("front-reeds",
|
|
coloringLine("M 160 590 C 168 556 172 534 170 512 M 190 594 C 200 562 204 542 204 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 96 552 C 96 522 168 504 250 504 C 332 504 396 522 396 552 C 396 578 332 590 248 590 C 166 590 96 578 96 552 Z","#2fb7a8")+
|
|
coloringGroup("acacia",
|
|
coloringContour("acacia-trunk","M 116 396 C 132 344 146 288 150 224 L 200 224 C 204 288 218 344 234 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 74 172 C 94 154 128 154 146 172 C 126 192 94 192 74 172 Z","#2fb7a8")+
|
|
coloringFlat("acacia-cluster-b","M 186 164 C 206 146 240 146 258 164 C 238 184 206 184 186 164 Z","#2fb7a8")+
|
|
coloringLine("M 166 232 C 162 288 164 344 172 392 M 186 232 C 182 288 186 344 194 392",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",
|
|
coloringFlat("giraffe-far-leg","M 606 470 L 606 566 C 606 580 640 580 640 566 L 640 470 Z","#f7c948")+
|
|
coloringFlat("giraffe-near-leg","M 542 476 L 542 572 C 542 588 580 588 580 572 L 580 476 Z","#f7c948")+
|
|
coloringFlat("giraffe-tail","M 654 448 C 674 464 686 486 688 510 C 676 506 664 492 654 472 Z","#f7c948")+
|
|
coloringContour("giraffe-body","M 522 452 C 522 408 564 384 614 384 C 662 384 692 408 692 452 C 692 486 662 502 610 502 C 560 502 522 486 522 452 Z","#f7c948")+
|
|
coloringContour("giraffe-neck","M 520 430 C 512 360 502 292 498 236 L 560 224 C 572 288 582 358 592 424 C 570 442 538 444 520 430 Z","#f7c948")+
|
|
coloringContour("giraffe-head","M 484 240 C 470 212 484 184 512 178 C 542 172 566 190 568 218 C 552 240 514 250 484 240 Z","#f7c948")+
|
|
coloringFlat("giraffe-muzzle","M 484 208 C 460 202 442 210 436 226 C 450 240 472 244 490 238 Z","#f2b38f")+
|
|
coloringGroup("giraffe-detail",
|
|
coloringCircle("giraffe-spot-a",556,414,18,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-b",610,408,20,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-c",660,420,17,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-d",624,464,16,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-e",524,304,15,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-f",540,364,14,"#8b5a3c")+
|
|
coloringCircle("giraffe-spot-g",512,252,12,"#8b5a3c")+
|
|
coloringFlat("giraffe-horn-left","M 502 178 C 498 158 504 144 516 138 C 524 152 520 168 514 180 Z","#8b5a3c")+
|
|
coloringFlat("giraffe-horn-right","M 540 176 C 540 156 548 142 560 138 C 564 154 558 168 550 180 Z","#8b5a3c")+
|
|
coloringFlat("giraffe-ear","M 566 206 C 588 194 610 196 620 210 C 604 224 580 224 566 218 Z","#f2b38f")+
|
|
coloringDot(516,206,6),2)+
|
|
coloringLine("M 444 222 C 448 232 456 238 466 240",2)+
|
|
coloringLine("M 532 448 C 566 462 634 466 682 456 M 512 292 C 528 298 544 306 554 312",3))+
|
|
coloringGroup("zebra",
|
|
coloringFlat("zebra-far-leg","M 318 470 L 318 558 C 318 572 348 572 348 558 L 348 470 Z","#ffffff")+
|
|
coloringFlat("zebra-near-leg","M 254 474 L 254 566 C 254 580 288 580 288 566 L 288 474 Z","#ffffff")+
|
|
coloringFlat("zebra-tail","M 362 438 C 382 450 394 468 398 490 C 386 486 372 474 362 456 Z","#ffffff")+
|
|
coloringContour("zebra-body","M 234 450 C 234 410 272 386 318 386 C 364 386 396 410 396 450 C 396 480 364 496 316 496 C 268 496 234 480 234 450 Z","#ffffff")+
|
|
coloringContour("zebra-neck","M 232 434 C 224 392 214 356 208 328 L 256 312 C 268 352 280 392 290 428 C 272 444 248 446 232 434 Z","#ffffff")+
|
|
coloringContour("zebra-head","M 194 330 C 178 304 190 276 216 270 C 244 264 266 282 268 308 C 252 330 220 340 194 330 Z","#ffffff")+
|
|
coloringFlat("zebra-muzzle","M 194 298 C 172 292 154 300 148 316 C 162 330 182 334 200 328 Z","#26344a")+
|
|
coloringGroup("zebra-stripes",
|
|
coloringFlat("stripe-a","M 264 398 C 270 424 270 456 264 490 L 284 492 C 290 456 290 424 284 396 Z","#26344a")+
|
|
coloringFlat("stripe-b","M 306 388 C 312 416 312 452 306 494 L 326 494 C 332 452 332 416 326 388 Z","#26344a")+
|
|
coloringFlat("stripe-c","M 348 392 C 354 418 354 452 348 488 L 366 484 C 372 450 372 418 366 392 Z","#26344a")+
|
|
coloringFlat("stripe-mane","M 216 272 C 228 304 242 342 254 376 L 274 368 C 262 334 248 298 236 268 Z","#26344a")+
|
|
coloringFlat("zebra-ear","M 266 292 C 288 280 310 282 320 296 C 304 310 280 310 266 304 Z","#ffffff")+
|
|
coloringDot(220,296,6),2)+
|
|
coloringLine("M 156 312 C 160 322 168 328 178 330",2)+
|
|
coloringLine("M 244 448 C 278 462 348 466 392 456 M 220 340 C 234 348 246 356 254 362",3))+
|
|
coloringGroup("grass-front",
|
|
coloringFlat("grass-tuft-a","M 440 566 C 434 534 442 508 460 490 C 470 514 468 544 456 566 Z","#3fae6a")+
|
|
coloringGroup("grass-extra",
|
|
coloringFlat("grass-tuft-b","M 738 570 C 732 540 740 514 758 496 C 768 520 766 548 754 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))
|
|
);
|
|
}
|