teach/public/js/widgets/coloring-scenes-advanced.js

/* 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 C 70 442 140 448 200 456 L 200 596 L 4 596 Z","#3fae6a")+
    coloringFlat("ground-summer","M 200 456 C 260 462 340 456 400 448 L 400 596 L 200 596 Z","#f7c948")+
    coloringFlat("ground-autumn","M 400 448 C 460 440 540 446 600 454 L 600 596 L 400 596 Z","#f28c3c")+
    coloringFlat("ground-winter","M 600 454 C 660 460 730 454 796 446 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")+
        /* plukken op de rand van de kroon, zodat de cirkel als bladerdek leest
           in plaats van als een bal */
        coloringCircle("lobe-summer",294,104,36,"#3fae6a")+
        coloringCircle("lobe-autumn",506,104,36,"#f28c3c")+
        coloringCircle("lobe-spring",294,316,32,"#d85aa5")+
        coloringCircle("lobe-winter",506,316,32,"#2fb7a8"),2)+
      coloringLine("M 376 392 C 394 384 410 384 426 392 M 372 424 C 390 416 408 416 424 424",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")+
    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",
      /* echte poten met een knik en een voet: de lensvormen die er stonden
         lazen als blaadjes naast de kikker */
      coloringFlat("frog-far-leg","M 244 494 C 212 494 186 508 174 530 L 174 552 C 174 562 200 562 200 552 L 200 540 C 212 528 230 520 250 516 Z","#3fae6a")+
      coloringFlat("frog-near-leg","M 424 494 C 456 494 482 508 494 530 L 494 552 C 494 562 468 562 468 552 L 468 540 C 456 528 438 520 418 516 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 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 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 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))
  );
}