feat: herteken kleurplaten als illustraties (v0.4.73-beta)

- vervang alle 28 kleurplaten door samenhangende scènes met organische contouren en leeftijdsgerichte detaillering
- houd buiten- en binnenlijnen zichtbaar boven kwastwerk en sluit verfemmerkleuren zonder witte rand aan
- borg gesloten kleurvakken, anatomische laagvolgorde en scene-opbouw met uitgebreide regressietests

VERSION

@@ -1 +1 @@
-0.4.72-beta
+0.4.73-beta

public/css/coloring.css

@@ -27,18 +27,20 @@
 .coloring-art svg,.coloring-ink svg{width:100%;height:100%;display:block}.coloring-art svg{background:#fff}.coloring-ink svg{position:absolute;inset:0;overflow:visible}
 .coloring-art [hidden],.coloring-ink [hidden]{display:none}
 .coloring-svg-lines{shape-rendering:geometricPrecision}
-.coloring-svg-lines .coloring-region{paint-order:fill stroke;stroke-width:5.6;stroke-opacity:.98}
+.coloring-svg-lines .coloring-region{paint-order:fill stroke;stroke-width:4.8;stroke-opacity:1}
-.coloring-svg-lines .coloring-region[data-role="backdrop"]{stroke-width:3.2}
+.coloring-svg-lines .coloring-region[data-role="backdrop"]{stroke-width:2.8}
-.coloring-svg-lines .coloring-region[data-level="2"]{stroke-width:5.1}
+.coloring-svg-lines .coloring-region[data-level="2"]{stroke-width:4.4}
-.coloring-svg-lines .coloring-region[data-level="3"]{stroke-width:4.55}
+.coloring-svg-lines .coloring-region[data-level="3"]{stroke-width:4}
-.coloring-svg-lines .coloring-detail{stroke:var(--coloring-detail);stroke-width:2.9;stroke-opacity:.94;pointer-events:none}
+.coloring-svg-lines .coloring-detail{stroke:var(--coloring-detail);stroke-width:2.4;stroke-opacity:.94;pointer-events:none}
-.coloring-svg-lines .coloring-detail[data-level="3"]{stroke-width:2.45;stroke-opacity:.88}
+.coloring-svg-lines .coloring-detail[data-level="3"]{stroke-width:2.05;stroke-opacity:.9}
 .coloring-svg-lines .coloring-recognition{display:none}
 .coloring-ink-overlay{pointer-events:none;shape-rendering:geometricPrecision;mix-blend-mode:multiply}
-.coloring-ink-svg .coloring-region{fill:#fff!important;stroke:var(--coloring-ink);stroke-width:5.6;stroke-opacity:1}
+.coloring-ink-svg .coloring-region{fill:#fff!important;stroke:var(--coloring-ink);stroke-width:4.8;stroke-opacity:1;paint-order:fill stroke}
-.coloring-ink-svg .coloring-region[data-role="backdrop"]{stroke-width:3.2}
+.coloring-ink-svg .coloring-region[data-role="backdrop"]{stroke-width:2.8}
-.coloring-ink-svg .coloring-region[data-level="2"]{stroke-width:5.1}
+.coloring-ink-svg .coloring-region[data-level="2"]{stroke-width:4.4}
-.coloring-ink-svg .coloring-region[data-level="3"]{stroke-width:4.55}
+.coloring-ink-svg .coloring-region[data-level="3"]{stroke-width:4}
+.coloring-ink-svg .coloring-detail{stroke:var(--coloring-detail);stroke-width:2.4;stroke-opacity:.94}
+.coloring-ink-svg .coloring-detail[data-level="3"]{stroke-width:2.05;stroke-opacity:.9}
 .coloring-paper canvas{touch-action:none;cursor:crosshair}
 .coloring-app[data-tool="brush"] .coloring-paper canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='25' font-size='24'%3E%F0%9F%96%8C%EF%B8%8F%3C/text%3E%3C/svg%3E") 5 25,crosshair}
 .coloring-app[data-tool="bucket"] .coloring-paper canvas{pointer-events:none}

public/index.html

@@ -50,7 +50,10 @@
 <script src="js/widgets/sentence.js?v=__V__" defer></script>
 <script src="js/widgets/learning.js?v=__V__" defer></script>
 <script src="js/widgets/world.js?v=__V__" defer></script>
-<script src="js/widgets/coloring-scenes-extra.js?v=__V__" defer></script>
+<script src="js/widgets/coloring-scenes-junior.js?v=__V__" defer></script>
+<script src="js/widgets/coloring-scenes-middle.js?v=__V__" defer></script>
+<script src="js/widgets/coloring-scenes-senior.js?v=__V__" defer></script>
+<script src="js/widgets/coloring-scenes-advanced.js?v=__V__" defer></script>
 <script src="js/widgets/coloring.js?v=__V__" defer></script>
 <script src="js/board.js?v=__V__" defer></script>
 <script src="js/pupil.js?v=__V__" defer></script>

public/js/core.js

@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.72-beta";
+const VERSION = "0.4.73-beta";
 /* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte
    achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk
    zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en

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

@@ -0,0 +1,224 @@
+/* teach - professionele kleurboekillustraties voor groep 7-8 */
+"use strict";
+
+function proFourSeasons(){return coloringScene(
+  coloringPart("rect","seasons-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","seasons-ground",'d="M 4 466 C 151 423 284 446 403 479 C 535 516 660 479 796 438 L 796 596 L 4 596 Z"')+
+  coloringFigure("four-seasons-tree",
+    coloringPart("path","seasons-trunk",'d="M 307 536 C 338 465 353 391 350 314 C 347 259 327 212 298 172 C 339 190 368 221 387 260 C 389 203 378 157 354 119 C 394 139 423 174 436 219 C 460 181 493 155 536 145 C 499 185 477 231 470 280 C 495 245 525 225 562 220 C 524 264 496 313 488 368 C 481 429 495 486 526 536 C 462 520 371 521 307 536 Z"')+
+    coloringPart("path","spring-crown",'d="M 96 247 C 82 203 111 166 151 164 C 160 119 208 99 243 126 C 273 91 326 102 342 145 C 381 155 394 200 369 230 C 341 254 305 252 280 232 C 245 264 194 254 176 215 C 142 235 112 231 96 247 Z"')+
+    coloringPart("path","summer-crown",'d="M 342 144 C 349 100 389 76 428 91 C 450 50 503 51 526 92 C 568 71 614 101 616 147 C 649 169 640 213 606 229 C 581 264 529 264 503 230 C 461 254 414 232 407 191 C 376 194 349 178 342 144 Z"',2)+
+    coloringPart("path","autumn-crown",'d="M 96 264 C 68 281 69 324 102 344 C 92 384 128 414 165 401 C 191 437 242 433 265 395 C 305 409 341 381 332 341 C 359 312 339 270 302 264 C 284 229 235 224 211 255 C 174 230 125 237 96 264 Z"',2)+
+    coloringPart("path","winter-crown",'d="M 402 248 C 378 272 389 313 421 324 C 409 359 439 391 474 384 C 496 417 544 413 563 377 C 599 390 631 362 622 326 C 651 302 638 262 604 251 C 591 215 543 204 516 232 C 483 211 432 217 402 248 Z"',3)+
+    coloringLine("path",'d="M 350 314 C 333 273 315 231 298 172 M 387 260 C 366 225 347 194 330 168 M 436 219 C 419 266 409 319 411 373 M 470 280 C 447 312 432 345 425 386 M 488 368 C 462 393 446 424 442 466" fill="none"',2)
+  )+
+  coloringFigure("season-symbols",
+    coloringFlower(188,173,"spring-blossom",.58,2)+
+    coloringPart("circle","summer-fruit-a",'cx="494" cy="137" r="21"',2)+
+    coloringPart("circle","summer-fruit-b",'cx="550" cy="177" r="18"',3)+
+    coloringLeaf("autumn-leaf-a",145,321,-24,.62,2)+coloringLeaf("autumn-leaf-b",256,355,31,.58,3)+
+    coloringLine("path",'d="M 510 276 V 354 M 476 296 L 544 334 M 476 334 L 544 296 M 510 276 L 500 289 M 510 276 L 520 289 M 510 354 L 500 341 M 510 354 L 520 341 M 476 296 L 493 298 M 476 296 L 484 311 M 544 334 L 527 332 M 544 334 L 536 319 M 476 334 L 493 332 M 476 334 L 484 319 M 544 296 L 527 298 M 544 296 L 536 311" fill="none"',3)+
+    coloringLine("path",'d="M 494 115 q 2 -20 18 -27 M 550 159 q 4 -17 17 -22" fill="none"',3)
+  )+
+  coloringPart("path","season-path",'d="M 340 536 H 500 L 575 596 H 263 Z"',3)
+)}
+
+function proEcoCity(){return coloringScene(
+  coloringPart("rect","eco-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","eco-park",'d="M 4 426 C 152 389 280 412 400 444 C 535 481 658 441 796 407 L 796 596 L 4 596 Z"')+
+  coloringFigure("eco-buildings",
+    coloringPart("path","eco-building-left",'d="M 74 200 H 252 V 481 H 74 Z"')+
+    coloringPart("path","eco-building-center",'d="M 290 274 L 400 188 L 510 274 V 481 H 290 Z"')+
+    coloringPart("path","eco-building-right",'d="M 548 154 H 721 V 481 H 548 Z"',2)+
+    coloringPart("path","solar-panel-left",'d="M 58 197 L 92 126 H 247 L 260 197 Z"')+
+    coloringPart("path","solar-panel-right",'d="M 531 151 L 560 83 H 720 L 736 151 Z"',2)+
+    coloringPart("path","eco-door-center",'d="M 365 394 C 365 368 380 354 400 354 C 420 354 435 368 435 394 V 481 H 365 Z"')+
+    coloringPart("path","eco-door-left",'d="M 137 397 C 137 372 150 359 167 359 C 184 359 197 372 197 397 V 481 H 137 Z"',2)+
+    coloringPart("path","eco-door-right",'d="M 607 397 C 607 372 620 359 637 359 C 654 359 667 372 667 397 V 481 H 607 Z"',2)+
+    coloringLine("path",'d="M 80 162 H 253 M 121 126 L 101 197 M 169 126 L 155 197 M 217 126 L 209 197 M 550 117 H 728 M 590 83 L 570 151 M 642 83 L 626 151 M 694 83 L 682 151 M 102 245 H 145 V 303 H 102 Z M 180 245 H 223 V 303 H 180 Z M 102 319 H 145 V 365 H 102 Z M 180 319 H 223 V 365 H 180 Z M 577 203 H 620 V 261 H 577 Z M 649 203 H 692 V 261 H 649 Z M 577 281 H 620 V 339 H 577 Z M 649 281 H 692 V 339 H 649 Z M 326 294 H 370 V 344 H 326 Z M 430 294 H 474 V 344 H 430 Z" fill="none"',2)
+  )+
+  coloringFigure("wind-turbine",
+    coloringPart("path","turbine-mast",'d="M 735 174 L 752 174 L 771 501 H 716 Z"',2)+
+    coloringPart("path","turbine-blade-a",'d="M 744 174 C 706 139 681 102 687 70 C 720 82 739 124 754 169 Z"',2)+
+    coloringPart("path","turbine-blade-b",'d="M 752 174 C 793 163 824 166 842 184 C 813 204 781 196 754 183 Z"',3)+
+    coloringPart("path","turbine-blade-c",'d="M 747 182 C 731 225 707 256 676 264 C 669 230 701 198 741 176 Z"',3)+
+    coloringPart("circle","turbine-hub",'cx="749" cy="177" r="19"',2)
+  ,'transform="translate(-44 0)"')+
+  coloringFigure("eco-bicycle",
+    coloringPart("circle","bike-wheel-a",'cx="211" cy="530" r="42"',3)+
+    coloringPart("circle","bike-wheel-b",'cx="342" cy="530" r="42"',3)+
+    coloringLine("path",'d="M 211 530 L 260 463 L 302 530 H 211 L 260 530 L 285 476 H 331 M 260 463 H 236 M 302 530 L 342 530 M 327 471 l 18 -18 M 280 476 h 35" fill="none"',2)
+  )+
+  coloringFigure("eco-trees",
+    coloringPart("path","eco-tree-left-trunk",'d="M 29 396 H 57 V 510 H 29 Z"',3)+
+    coloringPart("path","eco-tree-left-crown",'d="M 5 378 C 7 337 38 316 72 329 C 96 311 129 329 130 361 C 126 393 99 405 70 396 C 46 414 13 403 5 378 Z"',2)+
+    coloringPart("path","eco-tree-mid-trunk",'d="M 518 406 H 544 V 501 H 518 Z"',3)+
+    coloringPart("path","eco-tree-mid-crown",'d="M 482 389 C 482 356 509 335 539 343 C 562 325 594 342 598 372 C 598 400 570 414 545 406 C 520 422 488 414 482 389 Z"',3)
+  )
+)}
+
+function proMandala(){
+  const outer=[0,30,60,90,120,150,180,210,240,270,300,330].map((angle,index)=>
+    coloringPart("path",`mandala-outer-${index}`,'d="M 400 74 C 364 118 356 158 400 191 C 444 158 436 118 400 74 Z" transform="rotate('+angle+' 400 300)"',index%3===0?2:3)
+  ).join("");
+  const middle=[0,45,90,135,180,225,270,315].map((angle,index)=>
+    coloringPart("path",`mandala-middle-${index}`,'d="M 400 173 C 368 209 369 247 400 271 C 431 247 432 209 400 173 Z" transform="rotate('+angle+' 400 300)"',index%2?3:2)
+  ).join("");
+  const inner=[0,60,120,180,240,300].map((angle,index)=>
+    coloringPart("path",`mandala-inner-${index}`,'d="M 400 241 C 379 264 380 291 400 307 C 420 291 421 264 400 241 Z" transform="rotate('+angle+' 400 300)"',2)
+  ).join("");
+  return coloringScene(
+    coloringPart("rect","mandala-paper",'x="4" y="4" width="792" height="592" rx="28"')+
+    coloringFigure("botanical-mandala",
+      outer+middle+inner+
+      coloringLine("circle",'cx="400" cy="300" r="242" fill="none"',3)+
+      coloringLine("circle",'cx="400" cy="300" r="145" fill="none"',2)+
+      coloringPart("circle","mandala-center",'cx="400" cy="300" r="58"')+
+      coloringPart("path","mandala-star",'d="M 400 257 L 412 286 L 444 300 L 412 314 L 400 343 L 388 314 L 356 300 L 388 286 Z"',2)+
+      coloringLine("path",'d="M 400 58 V 74 M 400 526 V 542 M 158 300 H 174 M 626 300 H 642 M 229 129 L 241 141 M 559 459 L 571 471 M 229 471 L 241 459 M 559 141 L 571 129" fill="none"',3)
+    )
+  )
+}
+
+function proEcosystem(){return coloringScene(
+  coloringPart("rect","pond-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","pond-bank",'d="M 4 383 C 140 344 273 371 395 401 C 534 435 660 399 796 363 L 796 596 L 4 596 Z"')+
+  coloringPart("path","pond-water",'d="M 54 454 C 101 390 234 376 400 389 C 574 402 704 402 751 468 C 712 542 577 575 399 571 C 220 568 89 541 54 454 Z"',2)+
+  coloringFigure("pond-reeds",
+    coloringPart("path","reed-left-a",'d="M 89 423 C 71 358 76 288 100 229 C 120 291 119 358 108 425 Z"')+
+    coloringPart("path","reed-left-b",'d="M 125 426 C 109 353 120 285 147 241 C 164 301 158 365 147 430 Z"',2)+
+    coloringPart("path","reed-right-a",'d="M 675 427 C 663 355 672 286 700 232 C 718 294 710 365 699 431 Z"',2)+
+    coloringPart("path","reed-right-b",'d="M 717 432 C 706 367 722 312 747 276 C 759 329 752 382 741 435 Z"',3)+
+    coloringLine("path",'d="M 99 229 C 73 202 74 164 101 151 C 126 168 126 208 99 229 M 700 232 C 676 204 678 166 704 153 C 728 171 727 211 700 232" fill="none"',2)
+  )+
+  coloringFigure("pond-frog",
+    coloringPart("path","frog-leg-a",'d="M 269 436 C 227 435 193 459 183 493 C 218 510 264 490 292 462 Z"')+
+    coloringPart("path","frog-leg-b",'d="M 525 438 C 567 436 601 460 611 494 C 575 510 532 492 503 464 Z"',2)+
+    coloringPart("path","frog-body",'d="M 259 390 C 271 338 325 308 390 313 C 455 318 505 351 512 405 C 518 458 470 494 399 496 C 329 497 248 454 259 390 Z"')+
+    coloringPart("path","frog-head",'d="M 289 343 C 295 286 345 254 405 258 C 466 261 508 301 504 356 C 500 410 452 437 391 432 C 330 427 284 398 289 343 Z"')+
+    coloringPart("path","frog-eye-a",'d="M 314 291 C 305 259 326 234 355 238 C 384 243 394 276 375 301 Z"',2)+
+    coloringPart("path","frog-eye-b",'d="M 425 291 C 418 257 442 234 470 241 C 497 248 504 281 484 303 Z"',2)+
+    coloringPart("path","frog-belly",'d="M 331 400 C 358 375 435 376 462 404 C 452 457 357 467 331 400 Z"',3)+
+    coloringDot(351,270,5)+coloringDot(465,273,5)+
+    coloringLine("path",'d="M 352 356 Q 397 386 449 354 M 374 381 Q 399 398 425 380 M 208 491 L 184 519 M 236 486 L 222 524 M 584 492 L 611 519 M 555 487 L 568 526" fill="none"',2)
+  )+
+  coloringFigure("lily-life",
+    coloringPart("path","lily-pad-left",'d="M 83 486 C 122 450 201 447 239 487 L 188 499 C 207 516 211 541 194 558 C 142 565 90 542 83 486 Z"',2)+
+    coloringPart("path","lily-pad-right",'d="M 554 515 C 600 480 679 486 711 529 L 661 538 C 679 557 675 578 659 586 C 610 586 568 562 554 515 Z"',3)+
+    coloringFlower(629,492,"pond-lily",.64,3)+
+    coloringPart("path","pond-fish",'d="M 317 531 C 354 498 415 500 451 534 C 414 564 354 564 317 531 Z"',3)+
+    coloringPart("path","pond-fish-tail",'d="M 317 531 L 279 506 L 286 555 Z"',3)+
+    coloringDot(423,531,4,3)
+  )+
+  coloringFigure("dragonfly",
+    coloringPart("path","dragonfly-wing-a",'d="M 542 189 C 500 153 455 155 444 184 C 467 212 506 216 545 205 Z"',3)+
+    coloringPart("path","dragonfly-wing-b",'d="M 552 191 C 582 148 623 140 642 166 C 628 200 590 214 553 208 Z"',3)+
+    coloringPart("path","dragonfly-body",'d="M 539 180 C 550 163 566 164 575 181 L 568 284 C 559 304 547 300 541 281 Z"',2)+
+    coloringPart("circle","dragonfly-head",'cx="557" cy="162" r="17"',3)
+  )
+)}
+
+function proSolarObservatory(){return coloringScene(
+  coloringPart("rect","observatory-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringFigure("observatory-mountains",
+    coloringPart("path","observatory-mountain-a",'d="M 4 431 L 174 202 L 337 431 Z"')+
+    coloringPart("path","observatory-mountain-b",'d="M 468 431 L 643 211 L 796 431 Z"',2)+
+    coloringPart("path","observatory-snow-a",'d="M 128 265 L 174 202 L 222 269 L 198 255 L 175 282 L 152 253 Z"',2)+
+    coloringPart("path","observatory-snow-b",'d="M 600 267 L 643 211 L 686 271 L 665 259 L 644 283 L 622 257 Z"',3)
+  )+
+  coloringPart("path","observatory-hill",'d="M 4 431 C 145 394 280 417 399 449 C 532 485 660 449 796 411 L 796 596 L 4 596 Z"')+
+  coloringFigure("observatory-building",
+    coloringPart("path","observatory-base",'d="M 174 381 H 573 C 603 381 623 401 623 431 V 540 H 174 Z"')+
+    coloringPart("path","observatory-dome",'d="M 198 381 C 210 269 286 214 389 215 C 493 216 567 272 579 381 Z"')+
+    coloringPart("path","dome-slot",'d="M 366 216 C 381 214 396 214 411 217 L 421 381 H 352 Z"',2)+
+    coloringPart("path","observatory-door",'d="M 513 446 C 513 419 527 405 546 405 C 565 405 579 419 579 446 V 540 H 513 Z"',2)+
+    coloringPart("path","observatory-panel",'d="M 216 436 H 326 V 500 H 216 Z"',3)+
+    coloringLine("path",'d="M 190 381 H 608 M 228 458 H 314 M 228 478 H 314 M 228 498 H 314" fill="none"',2)
+  )+
+  coloringFigure("observatory-telescope",
+    coloringPart("path","scope-mount",'d="M 353 368 L 390 286 L 429 368 Z"',2)+
+    coloringPart("path","scope-barrel",'d="M 386 289 L 560 174 L 594 214 L 420 329 Z"')+
+    coloringPart("path","scope-lens",'d="M 554 169 C 573 148 608 166 614 191 C 612 219 587 231 566 216 C 551 204 547 185 554 169 Z"',2)+
+    coloringPart("path","scope-brace",'d="M 383 322 L 355 452 H 381 L 413 326 Z"',3)+
+    coloringPart("circle","scope-pivot",'cx="405" cy="307" r="22"',2)+
+    coloringLine("path",'d="M 421 302 L 572 203 M 389 286 L 405 307" fill="none"',3)
+  )+
+  coloringFigure("star-map",
+    coloringPart("path","map-board",'d="M 648 433 H 770 V 526 H 648 Z"',3)+
+    coloringLine("path",'d="M 667 499 C 688 458 721 455 752 482 M 670 463 L 744 509 M 683 450 L 724 518" fill="none"',3)
+  )+
+  coloringStars([[80,92,13],[288,99,9],[675,86,16],[728,145,8]],"observatory-star",3)+
+  coloringPart("circle","observatory-moon",'cx="112" cy="156" r="42"',3)
+)}
+
+function proSavannaWeb(){return coloringScene(
+  coloringPart("rect","savanna-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","savanna-ground",'d="M 4 424 C 145 388 275 408 397 441 C 531 477 662 440 796 405 L 796 596 L 4 596 Z"')+
+  coloringFigure("acacia",
+    coloringPart("path","acacia-trunk",'d="M 58 455 C 91 382 108 309 106 236 C 104 190 91 153 72 122 C 106 135 130 159 146 192 C 164 155 191 131 229 121 C 204 159 192 198 194 242 C 197 319 217 389 252 455 Z"')+
+    coloringPart("path","acacia-crown",'d="M 21 154 C 25 108 65 84 107 98 C 130 55 184 51 211 91 C 253 71 305 99 310 144 C 348 166 337 211 301 224 H 71 C 31 216 11 189 21 154 Z"',2)
+  )+
+  coloringFigure("savanna-lion",
+    coloringPart("path","lion-tail",'d="M 320 384 C 283 355 248 361 238 394 C 234 427 258 456 287 454 C 307 452 317 431 306 416 C 298 404 283 408 280 421 C 270 401 282 388 311 397 L 344 418 Z"',2)+
+    [352,419,492,545].map((x,i)=>coloringPart("path",`lion-leg-${i}`,`d="M ${x} 438 C ${x-2} 475 ${x-5} 518 ${x+1} 551 C ${x+15} 557 ${x+35} 557 ${x+48} 550 L ${x+43} 533 C ${x+35} 497 ${x+37} 466 ${x+33} 432 Z"`,i>1?2:1)).join("")+
+    coloringPart("path","lion-body",'d="M 315 392 C 321 337 374 307 454 309 C 528 311 584 340 594 391 C 604 447 550 481 472 482 C 390 483 309 448 315 392 Z"')+
+    coloringPart("path","lion-mane",'d="M 578 229 C 598 207 628 211 641 235 C 671 229 691 250 687 278 C 714 292 717 322 697 341 C 710 368 692 393 665 397 C 654 424 623 432 601 414 C 573 429 544 413 540 385 C 514 373 508 343 526 321 C 510 297 524 269 550 263 C 551 244 563 232 578 229 Z"')+
+    coloringPart("path","lion-face",'d="M 556 286 C 575 258 626 252 653 276 C 681 301 681 349 654 377 C 628 404 577 400 554 371 C 533 345 535 310 556 286 Z"',2)+
+    coloringPart("path","lion-muzzle",'d="M 565 337 C 580 316 636 315 653 339 C 657 365 635 382 608 381 C 580 381 560 363 565 337 Z"',3)+
+    coloringDot(578,315,5)+coloringDot(635,315,5)+
+    coloringLine("path",'d="M 600 345 l 9 8 l 9 -8 M 584 364 Q 608 380 636 363 M 342 551 h 50 M 410 551 h 50 M 485 551 h 50 M 538 551 h 50" fill="none"',2)
+  ,'transform="translate(-95 110) scale(.70)"')+
+  coloringFigure("savanna-zebra",
+    coloringPart("path","zebra-tail",'d="M 523 433 C 493 410 472 422 477 452 C 485 480 508 491 530 471 L 548 448 Z"',3)+
+    [552,602,675,720].map((x,i)=>coloringPart("path",`zebra-leg-${i}`,`d="M ${x} 456 C ${x-2} 486 ${x-4} 525 ${x+1} 554 C ${x+13} 559 ${x+29} 559 ${x+41} 553 L ${x+37} 538 C ${x+29} 508 ${x+31} 482 ${x+27} 452 Z"`,3)).join("")+
+    coloringPart("path","zebra-body",'d="M 520 418 C 527 371 570 347 633 351 C 695 355 734 383 738 426 C 737 469 692 493 630 489 C 565 487 515 464 520 418 Z"',2)+
+    coloringPart("path","zebra-neck",'d="M 680 392 C 685 346 704 304 733 278 L 776 305 C 756 346 748 390 744 438 Z"',2)+
+    coloringPart("path","zebra-head",'d="M 716 274 C 741 246 781 240 808 266 C 829 288 822 326 795 346 C 768 366 729 357 711 330 C 697 309 701 289 716 274 Z"',2)+
+    coloringPart("path","zebra-muzzle",'d="M 768 309 C 790 295 821 304 830 326 C 814 347 783 351 765 333 Z"',3)+
+    coloringPart("path","zebra-ear-a",'d="M 729 270 L 722 229 L 753 260 Z"',3)+
+    coloringPart("path","zebra-ear-b",'d="M 765 252 L 786 219 L 793 263 Z"',3)+
+    coloringPart("path","zebra-mane",'d="M 704 294 C 684 326 680 364 688 408 L 708 393 C 700 353 709 320 731 285 Z"',3)+
+    coloringDot(780,280,4,3)+
+    coloringLine("path",'d="M 549 383 C 566 414 568 452 557 476 M 591 357 C 610 398 610 456 598 485 M 638 351 C 653 390 654 455 643 490 M 686 361 C 698 392 700 448 691 481 M 713 323 L 756 350 M 708 352 L 751 378 M 705 382 L 746 407 M 780 331 Q 794 340 808 329 M 548 554 h 43 M 598 554 h 43 M 671 554 h 43 M 716 554 h 43" fill="none"',3)
+  ,'transform="translate(210 105) scale(.68)"')+
+  coloringPart("circle","savanna-sun",'cx="682" cy="89" r="44"',3)
+)}
+
+function proJapaneseGarden(){return coloringScene(
+  coloringPart("rect","japanese-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","japanese-bank",'d="M 4 409 C 147 368 276 396 397 428 C 533 464 657 428 796 391 L 796 596 L 4 596 Z"')+
+  coloringPart("path","japanese-pond",'d="M 54 479 C 121 417 266 408 405 426 C 548 444 685 432 748 494 C 690 560 560 582 405 574 C 245 567 108 551 54 479 Z"',2)+
+  coloringFigure("japanese-pagoda",
+    coloringPart("path","pagoda-base",'d="M 551 312 H 711 V 470 H 551 Z"')+
+    coloringPart("path","pagoda-roof-low",'d="M 505 313 C 556 289 663 287 759 314 L 718 349 H 546 Z"')+
+    coloringPart("path","pagoda-upper",'d="M 577 217 H 686 V 293 H 577 Z"',2)+
+    coloringPart("path","pagoda-roof-high",'d="M 538 219 C 584 188 652 186 727 220 L 687 250 H 577 Z"',2)+
+    coloringPart("path","pagoda-top",'d="M 604 148 H 661 V 198 H 604 Z"',3)+
+    coloringPart("path","pagoda-roof-top",'d="M 575 150 C 607 125 652 125 691 151 L 662 175 H 605 Z"',3)+
+    coloringPart("path","pagoda-door",'d="M 610 389 C 610 365 620 352 632 352 C 644 352 654 365 654 389 V 470 H 610 Z"',2)+
+    coloringLine("path",'d="M 588 349 V 470 M 676 349 V 470 M 602 250 V 293 M 660 250 V 293 M 632 126 V 96 M 551 400 H 711" fill="none"',2)
+  )+
+  coloringFigure("arched-bridge",
+    coloringPart("path","bridge-deck",'d="M 75 472 C 139 381 280 361 385 444 L 385 493 C 276 421 151 438 86 521 Z"')+
+    coloringPart("path","bridge-rail",'d="M 76 450 C 151 354 284 346 391 426 L 385 450 C 282 379 154 392 83 481 Z"',2)+
+    coloringPart("path","bridge-post-a",'d="M 86 399 H 107 V 506 H 86 Z"',2)+
+    coloringPart("path","bridge-post-b",'d="M 349 384 H 370 V 485 H 349 Z"',3)+
+    coloringLine("path",'d="M 109 420 V 479 M 158 382 V 450 M 213 364 V 429 M 270 361 V 425 M 323 375 V 448" fill="none"',3)
+  )+
+  coloringFigure("cherry-tree",
+    coloringPart("path","cherry-trunk",'d="M 42 408 C 69 350 82 286 78 222 C 75 178 60 137 39 103 C 75 118 101 145 116 181 C 133 145 159 122 197 112 C 172 150 160 191 162 232 C 166 302 185 363 216 408 Z"')+
+    coloringPart("path","cherry-crown",'d="M 7 135 C 3 94 34 68 72 78 C 91 39 137 35 163 68 C 196 40 245 58 252 99 C 289 108 303 150 280 180 C 256 204 220 203 196 183 C 164 211 118 201 101 167 C 68 188 22 174 7 135 Z"')+
+    coloringFlower(75,102,"cherry-blossom-a",.55,2)+coloringFlower(145,76,"cherry-blossom-b",.52,3)+coloringFlower(212,121,"cherry-blossom-c",.5,3)+
+    coloringLine("path",'d="M 78 222 C 92 203 103 190 116 181 M 162 232 C 146 212 132 195 116 181" fill="none"',2)
+  )+
+  coloringFigure("pond-koi",
+    coloringPart("path","koi-body",'d="M 429 506 C 464 473 530 474 567 508 C 530 541 465 541 429 506 Z"',3)+
+    coloringPart("path","koi-tail",'d="M 429 506 L 390 478 L 397 537 Z"',3)+
+    coloringPart("path","koi-patch",'d="M 477 485 C 492 501 492 522 478 536 C 497 542 518 539 535 530 C 521 510 521 493 536 484 C 516 477 496 478 477 485 Z"',3)+
+    coloringDot(545,505,4,3)+
+    coloringLine("path",'d="M 414 550 C 452 534 500 542 538 557 M 236 534 C 275 516 322 520 359 540" fill="none"',3)
+  )+
+  coloringPart("path","stone-lantern",'d="M 445 406 L 483 351 L 521 406 L 506 426 H 460 Z"',3)+
+  coloringPart("path","lantern-post",'d="M 474 423 H 493 V 520 H 474 Z"',3)+
+  coloringPart("path","lantern-cap",'d="M 453 349 L 483 315 L 513 349 Z"',3)
+)}

public/js/widgets/coloring-scenes-extra.js

@@ -1,365 +0,0 @@
-/* teach - aanvullende, herkenbare SVG-kleurplaten */
-"use strict";
-
-function sceneFarmyard(){return coloringScene(
-  coloringPart("rect","farm-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","farm-grass",'d="M 4 410 Q 180 370 365 420 T 796 395 L 796 596 L 4 596 Z"')+
-  coloringPart("rect","barn",'x="65" y="245" width="250" height="235" rx="8"')+
-  coloringPart("path","barn-roof",'d="M 35 245 L 190 105 L 345 245 Z"')+
-  coloringPart("circle","barn-window",'cx="190" cy="210" r="42"',2)+
-  coloringPart("rect","barn-door-left",'x="115" y="330" width="75" height="150"')+
-  coloringPart("rect","barn-door-right",'x="190" y="330" width="75" height="150"')+
-  coloringPart("path","cow-tail",'d="M 410 355 C 360 350 335 390 350 438 C 358 465 375 480 392 462 C 402 450 390 430 377 435 C 365 402 382 385 420 388 Z"',2)+
-  [420,495,575,635].map((x,i)=>coloringPart("path",`cow-leg-${i}`,`d="M ${x} 420 C ${x-4} 462 ${x-8} 505 ${x-5} 545 Q ${x+12} 558 ${x+42} 548 L ${x+38} 532 C ${x+32} 495 ${x+35} 455 ${x+30} 420 Z"`,i>1?2:1)).join("")+
-  coloringPart("path","cow-body",'d="M 390 380 C 395 320 455 285 535 292 C 610 295 655 330 665 390 C 670 450 620 485 535 485 C 450 485 385 450 390 380 Z"')+
-  coloringPart("path","cow-ear-left",'d="M 645 330 Q 600 285 580 330 Q 610 360 650 355 Z"',2)+
-  coloringPart("path","cow-ear-right",'d="M 710 325 Q 750 280 775 325 Q 755 360 715 355 Z"',2)+
-  coloringPart("path","cow-horn-left",'d="M 648 322 Q 635 278 665 292 Q 680 315 663 338 Z"',2)+
-  coloringPart("path","cow-horn-right",'d="M 710 320 Q 728 278 748 298 Q 748 325 723 340 Z"',2)+
-  coloringPart("path","cow-head",'d="M 615 325 C 645 300 710 300 740 330 C 768 358 758 420 725 445 C 690 468 635 445 620 415 C 605 385 600 345 615 325 Z"')+
-  coloringPart("path","cow-snout",'d="M 645 390 C 660 365 720 365 742 392 C 755 415 733 442 700 445 C 665 445 638 420 645 390 Z"',2)+
-  coloringPart("ellipse","cow-udder",'cx="565" cy="458" rx="44" ry="25"',3)+
-  [[480,365,42,28],[555,420,35,25],[590,350,30,22]].map(([x,y,rx,ry],i)=>coloringPart("ellipse",`cow-spot-${i}`,`cx="${x}" cy="${y}" rx="${rx}" ry="${ry}"`,2)).join("")+
-  coloringPart("circle","farm-sun",'cx="690" cy="95" r="54"')+
-  coloringLine("path",'d="M 115 330 L 265 480 M 265 330 L 115 480 M 148 210 H 232 M 190 168 V 252" fill="none"')+
-  coloringLine("circle",'cx="675" cy="372" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="720" cy="372" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 688 405 q 12 12 24 0 M 650 425 Q 695 455 735 425 M 545 470 v 18 M 570 472 v 18 M 590 467 v 18" fill="none"',2)+
-  coloringLine("path",'d="M 420 550 h 35 M 500 550 h 35 M 575 550 h 35 M 640 550 h 35" fill="none"',2)+
-  coloringLine("path",'d="M 355 470 H 390 M 360 440 H 400 M 370 410 H 405" fill="none"',3)
-)}
-
-function sceneRainbowWeather(){return coloringScene(
-  coloringPart("rect","weather-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","weather-hill",'d="M 4 425 Q 180 370 355 430 T 796 400 L 796 596 L 4 596 Z"')+
-  coloringPart("path","cloud-left",'d="M 65 160 Q 75 100 135 115 Q 165 55 225 95 Q 285 80 300 145 Q 285 190 225 180 L 110 180 Q 70 185 65 160 Z"')+
-  coloringPart("path","cloud-right",'d="M 535 155 Q 550 95 605 115 Q 640 65 690 105 Q 750 95 765 155 Q 745 195 690 180 L 575 180 Q 540 190 535 155 Z"')+
-  coloringPart("path","rainbow-red",'d="M 120 410 Q 400 20 680 410 L 635 410 Q 400 90 165 410 Z"')+
-  coloringPart("path","rainbow-orange",'d="M 165 410 Q 400 90 635 410 L 595 410 Q 400 150 205 410 Z"')+
-  coloringPart("path","rainbow-yellow",'d="M 205 410 Q 400 150 595 410 L 555 410 Q 400 205 245 410 Z"',2)+
-  coloringPart("path","rainbow-green",'d="M 245 410 Q 400 205 555 410 L 515 410 Q 400 260 285 410 Z"',2)+
-  coloringPart("path","rainbow-blue",'d="M 285 410 Q 400 260 515 410 L 470 410 Q 400 320 330 410 Z"',3)+
-  coloringPart("path","umbrella-outer-left",'d="M 490 410 Q 520 315 635 285 Q 595 335 575 410 Q 535 382 490 410 Z"')+
-  coloringPart("path","umbrella-inner-left",'d="M 575 410 Q 595 335 635 285 V 410 Q 605 385 575 410 Z"',2)+
-  coloringPart("path","umbrella-inner-right",'d="M 635 285 Q 690 335 700 410 Q 670 385 635 410 Z"',2)+
-  coloringPart("path","umbrella-outer-right",'d="M 635 285 Q 745 315 780 410 Q 740 382 700 410 Q 690 335 635 285 Z"',2)+
-  coloringPart("path","boot-left",'d="M 520 470 V 545 H 610 Q 620 505 575 505 V 470 Z"')+
-  coloringPart("path","boot-right",'d="M 635 465 V 540 H 725 Q 735 500 690 500 V 465 Z"')+
-  [[105,245],[155,275],[225,230],[590,230],[670,255],[735,225]].map(([x,y],i)=>coloringPart("path",`raindrop-${i}`,`d="M ${x} ${y-20} Q ${x-22} ${y+12} ${x} ${y+26} Q ${x+22} ${y+12} ${x} ${y-20} Z"`,i>2?3:2)).join("")+
-  coloringLine("path",'d="M 635 410 V 505 Q 635 535 610 520" fill="none"')+
-  coloringLine("path",'d="M 490 410 Q 535 382 575 410 M 575 410 Q 605 385 635 410 M 635 410 Q 670 385 700 410 M 700 410 Q 740 382 780 410" fill="none"',2)+
-  coloringLine("path",'d="M 535 470 H 575 M 650 465 H 690" fill="none"',2)+
-  coloringLine("path",'d="M 92 145 Q 125 130 155 145 M 650 145 Q 680 125 715 145" fill="none"',3)
-)}
-
-function sceneConstruction(){return coloringScene(
-  coloringPart("rect","build-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","build-ground",'d="M 4 420 L 796 420 L 796 596 L 4 596 Z"')+
-  coloringPart("rect","digger-track",'x="150" y="450" width="360" height="90" rx="45"')+
-  coloringPart("rect","digger-track-inner",'x="195" y="475" width="270" height="40" rx="20"',2)+
-  coloringPart("path","digger-body",'d="M 205 450 L 240 325 H 475 L 525 450 Z"')+
-  coloringPart("path","digger-cab",'d="M 290 325 L 330 220 H 440 L 475 325 Z"')+
-  coloringPart("path","digger-window",'d="M 325 305 L 350 240 H 420 L 445 305 Z"',2)+
-  coloringPart("path","arm-upper",'d="M 455 335 L 555 175 L 600 195 L 510 365 Z"')+
-  coloringPart("path","arm-lower",'d="M 555 175 L 700 280 L 675 320 L 575 225 Z"',2)+
-  coloringPart("path","bucket",'d="M 665 300 Q 755 295 775 385 Q 720 435 650 390 Z"')+
-  coloringPart("path","bucket-tooth-a",'d="M 665 386 L 646 426 L 690 399 Z"',2)+
-  coloringPart("path","bucket-tooth-b",'d="M 705 404 L 700 442 L 735 414 Z"',2)+
-  coloringPart("path","bucket-tooth-c",'d="M 744 400 L 755 434 L 777 392 Z"',3)+
-  coloringPart("circle","digger-pivot",'cx="485" cy="350" r="28"',2)+
-  coloringPart("path","cone-left",'d="M 65 520 L 110 405 L 155 520 Z"')+
-  coloringPart("rect","cone-left-base",'x="45" y="515" width="130" height="30" rx="8"',2)+
-  coloringPart("path","cone-right",'d="M 590 535 L 625 445 L 660 535 Z"',2)+
-  coloringPart("rect","cone-right-base",'x="570" y="530" width="110" height="25" rx="8"',3)+
-  coloringPart("circle","build-sun",'cx="120" cy="100" r="55"')+
-  coloringLine("path",'d="M 220 495 H 440 M 250 470 V 520 M 310 470 V 520 M 370 470 V 520 M 430 470 V 520" fill="none"')+
-  coloringLine("path",'d="M 360 240 V 305 M 325 273 H 445" fill="none"',2)+
-  coloringLine("path",'d="M 575 205 L 675 295 M 495 330 L 570 205 M 520 315 L 585 215 M 650 390 Q 710 405 775 385" fill="none"',2)+
-  coloringLine("path",'d="M 80 480 H 140 M 600 500 H 650" fill="none"',3)+
-  coloringLine("path",'d="M 25 395 H 170 M 650 395 H 785" fill="none"',3)
-)}
-
-function sceneForestPicnic(){return coloringScene(
-  coloringPart("rect","picnic-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","picnic-grass",'d="M 4 390 Q 190 350 380 410 T 796 375 L 796 596 L 4 596 Z"')+
-  coloringPart("path","picnic-trunk",'d="M 85 460 Q 125 285 110 90 H 225 Q 200 290 245 460 Z"')+
-  coloringPart("circle","picnic-crown-a",'cx="120" cy="110" r="95"')+coloringPart("circle","picnic-crown-b",'cx="225" cy="135" r="105"')+
-  coloringPart("path","blanket",'d="M 250 455 L 610 420 L 720 570 L 315 580 Z"')+
-  coloringPart("path","blanket-panel-a",'d="M 250 455 L 430 438 L 480 505 L 285 520 Z"',2)+
-  coloringPart("path","blanket-panel-b",'d="M 430 438 L 610 420 L 665 490 L 480 505 Z"',2)+
-  coloringPart("path","basket",'d="M 330 390 Q 405 365 475 390 L 455 490 H 350 Z"')+
-  coloringPart("path","basket-handle",'d="M 350 390 Q 400 290 455 390 L 430 390 Q 400 335 375 390 Z"',2)+
-  coloringPart("circle","apple",'cx="520" cy="455" r="34"')+
-  coloringPart("path","sandwich",'d="M 560 520 L 650 455 L 705 535 Z"',2)+
-  coloringPart("path","rabbit-tail",'d="M 595 295 C 560 280 540 305 550 335 C 558 360 590 365 610 342 C 622 325 615 305 595 295 Z"',2)+
-  coloringPart("path","rabbit-ear-a",'d="M 665 218 C 640 175 635 92 662 78 C 692 88 695 170 684 222 Z"')+
-  coloringPart("path","rabbit-ear-b",'d="M 704 215 C 700 165 715 90 744 88 C 767 110 745 188 724 226 Z"')+
-  coloringPart("path","rabbit-body",'d="M 575 330 C 580 280 620 255 668 268 C 720 278 750 315 738 360 C 725 405 675 430 625 412 C 590 400 570 368 575 330 Z"')+
-  coloringPart("path","rabbit-hind-leg",'d="M 620 365 C 650 345 700 360 710 398 C 688 430 630 432 600 402 C 598 385 605 373 620 365 Z"',2)+
-  coloringPart("path","rabbit-head",'d="M 645 245 C 645 205 670 180 705 185 C 745 190 765 225 752 262 C 742 298 700 315 668 292 C 652 280 645 264 645 245 Z"')+
-  coloringLine("path",'d="M 135 150 Q 170 190 205 150 M 150 235 Q 180 265 210 235" fill="none"',2)+
-  coloringLine("path",'d="M 365 410 H 450 M 380 440 H 445 M 395 470 H 440" fill="none"',3)+
-  coloringLine("circle",'cx="705" cy="235" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 715 260 q 15 12 28 0 M 690 265 l -45 5 M 690 275 l -45 20 M 735 270 l 45 -5 M 735 280 l 42 20" fill="none"',2)+
-  coloringLine("path",'d="M 520 420 q 8 -28 22 -35 M 585 495 H 670" fill="none"',3)
-)}
-
-function sceneDinosaurValley(){return coloringScene(
-  coloringPart("rect","dino-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","dino-ground",'d="M 4 430 Q 185 370 360 435 T 796 405 L 796 596 L 4 596 Z"')+
-  coloringPart("path","volcano",'d="M 35 430 L 175 145 L 320 430 Z"')+
-  coloringPart("path","lava",'d="M 135 225 L 175 145 L 220 235 L 205 320 L 170 275 L 145 335 Z"',2)+
-  coloringPart("circle","smoke-a",'cx="145" cy="105" r="45"',2)+coloringPart("circle","smoke-b",'cx="205" cy="75" r="55"',3)+
-  coloringPart("path","dino-tail",'d="M 365 348 C 300 310 225 280 205 315 C 235 355 285 405 375 425 Z"')+
-  [390,475,555,615].map((x,i)=>coloringPart("path",`dino-leg-${i}`,`d="M ${x} 410 C ${x-4} 452 ${x-12} 500 ${x-8} 540 L ${x+2} 552 L ${x+58} 552 C ${x+62} 538 ${x+50} 528 ${x+35} 530 C ${x+38} 485 ${x+44} 448 ${x+32} 412 Z"`,i>1?2:1)).join("")+
-  [[385,320],[440,290],[500,280],[555,295]].map(([x,y],i)=>coloringPart("path",`dino-plate-${i}`,`d="M ${x-25} ${y+20} L ${x} ${y-35} L ${x+25} ${y+20} Z"`,i>1?2:1)).join("")+
-  coloringPart("path","dino-body",'d="M 340 375 C 350 315 415 275 500 280 C 585 285 642 330 650 390 C 655 450 595 485 505 480 C 415 480 350 445 340 375 Z"')+
-  coloringPart("path","dino-neck",'d="M 570 365 C 590 285 600 205 650 165 C 690 130 745 145 755 190 C 758 220 730 245 690 242 C 670 240 660 255 658 290 C 655 345 640 395 620 420 Z"')+
-  coloringPart("path","dino-head",'d="M 650 170 C 675 140 735 140 765 170 C 785 195 765 228 730 240 C 690 250 650 228 645 198 C 642 187 645 178 650 170 Z"')+
-  coloringPart("circle","dino-sun",'cx="690" cy="85" r="42"')+
-  coloringLine("circle",'cx="725" cy="180" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 715 210 Q 735 225 755 208" fill="none"')+
-  coloringLine("path",'d="M 405 400 Q 500 440 590 395 M 435 345 q 20 20 40 0 M 520 335 q 20 20 40 0" fill="none"',2)+
-  coloringLine("path",'d="M 380 545 h 60 M 465 545 h 60 M 545 545 h 60 M 605 545 h 60" fill="none"',2)+
-  coloringLine("path",'d="M 90 450 q 25 -55 50 0 M 250 475 q 25 -65 50 0 M 720 455 q 25 -60 50 0" fill="none"',3)
-)}
-
-function sceneSpringNest(){return coloringScene(
-  coloringPart("rect","nest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","nest-hill",'d="M 4 465 Q 180 420 380 470 T 796 445 L 796 596 L 4 596 Z"')+
-  coloringPart("path","nest-branch",'d="M 45 410 Q 250 340 480 390 Q 620 420 755 345 L 770 405 Q 600 475 455 445 Q 220 405 50 475 Z"')+
-  coloringPart("path","nest-bowl",'d="M 250 350 Q 395 305 535 350 Q 500 470 390 475 Q 285 460 250 350 Z"')+
-  [315,390,465].map((x,i)=>coloringPart("ellipse",`nest-egg-${i}`,`cx="${x}" cy="350" rx="38" ry="55"`,i===2?2:1)).join("")+
-  coloringPart("path","bird-tail-a",'d="M 505 285 L 405 330 L 525 330 Z"',2)+coloringPart("path","bird-tail-b",'d="M 520 305 L 445 375 L 555 335 Z"',3)+
-  coloringPart("path","bird-body",'d="M 485 270 C 488 210 535 175 595 185 C 655 195 690 245 675 300 C 660 355 595 375 540 345 C 505 328 485 300 485 270 Z"')+
-  coloringPart("path","bird-wing",'d="M 520 245 C 555 205 625 220 630 280 C 612 325 555 340 520 300 C 508 282 508 260 520 245 Z"',2)+
-  coloringPart("path","bird-head",'d="M 610 190 C 610 145 640 118 680 125 C 720 132 740 175 725 210 C 712 245 670 258 640 235 C 620 223 610 207 610 190 Z"')+
-  coloringPart("path","bird-beak",'d="M 718 178 C 745 178 770 190 785 205 C 760 215 738 220 715 215 Z"')+
-  [[125,300,-20],[175,340,25],[665,390,-25],[705,350,20]].map(([x,y,a],i)=>coloringPart("path",`spring-leaf-${i}`,`d="M ${x-35} ${y} Q ${x} ${y-45} ${x+35} ${y} Q ${x} ${y+45} ${x-35} ${y} Z" transform="rotate(${a} ${x} ${y})"`,i>1?2:1)).join("")+
-  coloringPetals(135,165,"spring-nest-flower",3)+
-  coloringLine("circle",'cx="670" cy="175" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 645 205 Q 665 220 685 205" fill="none"',2)+
-  coloringLine("path",'d="M 535 250 Q 575 270 610 245 M 530 275 Q 575 300 615 275" fill="none"',2)+
-  coloringLine("path",'d="M 275 370 Q 390 330 515 370 M 285 400 Q 390 360 505 400 M 310 430 Q 390 395 480 430" fill="none"',3)+
-  coloringLine("path",'d="M 125 300 L 80 270 M 175 340 L 215 300 M 665 390 L 620 360 M 705 350 L 750 315" fill="none"',3)
-)}
-
-function sceneFireStation(){return coloringScene(
-  coloringPart("rect","fire-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","fire-road",'d="M 4 455 H 796 V 596 H 4 Z"')+
-  coloringPart("rect","station",'x="45" y="170" width="330" height="285" rx="8"')+
-  coloringPart("path","station-roof",'d="M 20 170 L 210 65 L 400 170 Z"')+
-  coloringPart("circle","station-badge",'cx="210" cy="145" r="42"',2)+
-  coloringPart("rect","station-door-a",'x="80" y="255" width="115" height="200" rx="8"')+
-  coloringPart("rect","station-door-b",'x="225" y="255" width="115" height="200" rx="8"')+
-  coloringPart("circle","engine-wheel-a",'cx="445" cy="500" r="55"')+coloringPart("circle","engine-wheel-b",'cx="665" cy="500" r="55"')+
-  coloringPart("path","engine-body",'d="M 360 350 H 630 C 672 350 705 378 730 415 C 738 430 738 465 730 500 H 720 C 715 465 695 445 665 445 C 635 445 615 465 610 500 H 500 C 495 465 475 445 445 445 C 415 445 395 465 390 500 H 355 V 385 C 355 370 355 358 360 350 Z"')+
-  coloringPart("path","engine-cab",'d="M 580 350 H 655 C 680 355 708 385 730 425 H 580 Z"')+
-  coloringPart("path","engine-window",'d="M 610 370 H 655 L 695 415 H 610 Z"',2)+
-  coloringPart("rect","engine-panel",'x="385" y="375" width="165" height="90" rx="12"',2)+
-  coloringPart("path","engine-ladder",'d="M 375 342 L 555 287 L 566 317 L 386 373 Z"',2)+
-  coloringPart("circle","engine-hose-reel",'cx="470" cy="420" r="34"',2)+
-  coloringPart("circle","engine-hose-hub",'cx="470" cy="420" r="12"',3)+
-  coloringPart("circle","engine-hub-a",'cx="445" cy="500" r="22"',2)+coloringPart("circle","engine-hub-b",'cx="665" cy="500" r="22"',2)+
-  coloringPart("rect","engine-light",'x="470" y="315" width="55" height="35" rx="16"',2)+
-  coloringPart("rect","hydrant",'x="755" y="420" width="30" height="90" rx="10"',3)+
-  coloringLine("path",'d="M 100 300 H 175 M 100 350 H 175 M 100 400 H 175 M 245 300 H 320 M 245 350 H 320 M 245 400 H 320" fill="none"')+
-  coloringLine("path",'d="M 390 338 L 400 368 M 430 325 L 440 355 M 470 313 L 480 343 M 510 300 L 520 330 M 550 290 L 560 320" fill="none"',2)+
-  coloringLine("path",'d="M 470 408 v 24 M 458 420 h 24 M 405 452 H 535" fill="none"',3)+
-  coloringLine("path",'d="M 210 112 V 178 M 177 145 H 243" fill="none"',2)+
-  coloringLine("path",'d="M 25 545 H 180 M 280 545 H 360 M 735 545 H 790" fill="none"',3)
-)}
-
-function sceneBeeMeadow(){return coloringScene(
-  coloringPart("rect","bee-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","bee-grass",'d="M 4 420 Q 180 385 355 430 T 796 405 L 796 596 L 4 596 Z"')+
-  coloringPart("path","bee-wing-a",'d="M 420 205 C 340 205 300 155 330 115 C 365 78 430 125 445 195 Z"')+
-  coloringPart("path","bee-wing-b",'d="M 430 195 C 445 115 510 82 540 125 C 565 165 515 210 445 210 Z"')+
-  coloringPart("path","bee-body",'d="M 292 250 C 300 185 355 155 430 165 C 500 172 545 205 550 250 C 545 300 500 330 430 335 C 355 340 300 315 292 250 Z"')+
-  coloringPart("path","bee-stripe-a",'d="M 350 188 Q 395 165 415 180 L 405 320 Q 365 315 335 285 Z"',2)+
-  coloringPart("path","bee-stripe-b",'d="M 445 170 Q 485 175 510 195 L 490 315 Q 455 328 430 320 Z"',2)+
-  coloringPart("path","bee-head",'d="M 500 235 C 500 195 525 168 563 168 C 602 168 630 198 628 238 C 625 278 595 305 558 302 C 520 300 498 273 500 235 Z"')+
-  coloringPart("path","hive",'d="M 610 385 Q 685 300 760 385 L 745 535 H 625 Z"')+
-  coloringPart("ellipse","hive-door",'cx="685" cy="475" rx="38" ry="52"',2)+
-  [[115,430],[220,460],[330,440]].map(([x,y],i)=>coloringPetals(x,y,`bee-flower-${i}`,i===2?3:2)).join("")+
-  [[620,400],[685,385],[745,410]].map(([x,y],i)=>coloringPart("path",`honey-cell-${i}`,`d="M ${x-22} ${y} L ${x-11} ${y-20} H ${x+11} L ${x+22} ${y} L ${x+11} ${y+20} H ${x-11} Z"`,3)).join("")+
-  coloringLine("circle",'cx="580" cy="220" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 575 255 Q 595 270 615 250 M 540 180 Q 520 135 495 125 M 580 175 Q 600 130 625 125" fill="none"')+
-  coloringLine("path",'d="M 380 320 L 350 365 M 425 325 L 415 375 M 470 315 L 490 360" fill="none"',2)+
-  coloringLine("path",'d="M 625 420 H 745 M 620 455 H 750 M 620 495 H 750" fill="none"',2)+
-  coloringLine("path",'d="M 115 455 V 545 M 220 485 V 550 M 330 465 V 545" fill="none"',3)
-)}
-
-function sceneCoralReef(){return coloringScene(
-  coloringPart("rect","reef-water",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","reef-sand",'d="M 4 475 Q 175 425 345 490 T 796 455 L 796 596 L 4 596 Z"')+
-  coloringPart("path","clownfish-tail",'d="M 215 255 C 170 230 130 190 95 170 C 110 225 110 295 95 350 C 135 325 175 295 215 270 Z"')+
-  coloringPart("path","clownfish-fin-top",'d="M 295 185 C 330 125 390 135 420 195 C 380 180 340 178 295 185 Z"',2)+
-  coloringPart("path","clownfish-fin-bottom",'d="M 315 332 C 350 385 410 370 432 315 C 390 332 355 338 315 332 Z"',3)+
-  coloringPart("path","clownfish-body",'d="M 195 260 C 240 175 365 145 465 205 C 515 235 515 280 470 310 C 370 375 240 345 195 260 Z"')+
-  coloringPart("path","clownfish-stripe-a",'d="M 290 188 Q 330 178 355 185 L 350 338 Q 315 345 285 328 Q 320 260 290 188 Z"',2)+
-  coloringPart("path","clownfish-stripe-b",'d="M 405 190 Q 445 205 470 235 L 460 300 Q 435 325 400 333 Q 430 260 405 190 Z"',2)+
-  coloringPart("circle","clownfish-eye",'cx="445" cy="235" r="16"')+
-  coloringPart("path","seahorse-fin",'d="M 610 285 Q 540 300 585 360 Q 620 345 625 315 Z"',2)+
-  coloringPart("path","seahorse-body",'d="M 610 225 C 625 185 680 172 712 202 C 730 222 715 250 682 258 C 655 265 648 285 658 322 C 670 360 705 400 675 435 C 650 465 590 452 585 415 C 582 390 615 380 635 397 C 650 370 625 345 612 318 C 595 285 595 252 610 225 Z"')+
-  coloringPart("circle","seahorse-eye",'cx="670" cy="220" r="13"',2)+
-  coloringPart("path","coral-red",'d="M 95 535 Q 82 480 108 435 L 88 400 Q 95 375 118 405 L 128 360 Q 145 342 150 375 L 145 430 L 175 395 Q 198 390 188 420 L 158 468 L 200 452 Q 225 458 200 480 L 165 505 L 170 540 Z"')+
-  coloringPart("path","coral-fan",'d="M 475 540 Q 455 485 472 430 Q 480 395 496 430 L 510 472 L 520 405 Q 535 378 543 420 L 540 478 L 565 430 Q 590 408 580 448 L 556 492 L 592 468 Q 615 470 593 495 L 548 530 L 550 545 Z"',2)+
-  coloringPart("ellipse","anemone-base",'cx="690" cy="505" rx="65" ry="28"',2)+
-  coloringPart("path","anemone-arm-a",'d="M 638 505 Q 620 445 650 400 Q 678 447 662 505 Z"',3)+
-  coloringPart("path","anemone-arm-b",'d="M 666 505 Q 650 430 678 390 Q 704 438 690 505 Z"',3)+
-  coloringPart("path","anemone-arm-c",'d="M 694 505 Q 688 430 710 398 Q 738 445 718 505 Z"',3)+
-  coloringPart("path","anemone-arm-d",'d="M 720 505 Q 722 452 748 420 Q 762 468 742 510 Z"',3)+
-  coloringPart("path","reef-starfish",'d="M 405 505 L 420 470 L 438 505 L 478 500 L 450 528 L 462 566 L 425 545 L 392 568 L 400 530 L 370 505 Z"',3)+
-  coloringPart("path","shell",'d="M 260 525 Q 320 445 380 525 Q 320 570 260 525 Z"',3)+
-  [[80,95,14],[125,130,9],[575,95,18],[730,115,12],[690,70,8]].map(([x,y,r],i)=>coloringPart("circle",`reef-bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>1?3:2)).join("")+
-  coloringLine("path",'d="M 455 270 Q 480 285 500 268 M 330 195 L 320 330 M 420 205 L 410 320" fill="none"')+
-  coloringLine("circle",'cx="447" cy="232" r="5" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="672" cy="217" r="4" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 620 400 Q 655 430 680 395 M 635 445 Q 680 465 700 430" fill="none"',2)+
-  coloringLine("path",'d="M 285 520 Q 320 490 355 520 M 300 535 Q 320 510 340 535 M 650 510 Q 690 525 730 510" fill="none"',3)+
-  coloringLine("path",'d="M 35 555 Q 110 530 185 555 M 590 550 Q 675 520 760 550" fill="none"',3)
-)}
-
-function sceneMountainCamp(){return coloringScene(
-  coloringPart("rect","camp-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","mountain-back",'d="M 5 400 L 210 115 L 400 400 Z"')+
-  coloringPart("path","mountain-front",'d="M 245 420 L 520 75 L 795 420 Z"')+
-  coloringPart("path","snow-back",'d="M 150 200 L 210 115 L 275 215 L 240 195 L 215 225 L 190 195 Z"',2)+
-  coloringPart("path","snow-front",'d="M 430 190 L 520 75 L 615 195 L 565 175 L 525 220 L 485 175 Z"',2)+
-  coloringPart("path","camp-ground",'d="M 4 395 Q 190 360 370 420 T 796 390 L 796 596 L 4 596 Z"')+
-  coloringPart("path","tent-left",'d="M 105 520 L 270 310 L 365 520 Z"')+
-  coloringPart("path","tent-right",'d="M 270 310 L 520 520 H 365 Z"',2)+
-  coloringPart("path","tent-door",'d="M 270 355 L 340 520 H 200 Z"',2)+
-  coloringPart("path","fire-outer",'d="M 545 515 Q 490 450 555 390 Q 545 455 600 425 Q 660 475 610 525 Z"')+
-  coloringPart("path","fire-inner",'d="M 555 505 Q 535 465 575 440 Q 570 475 605 465 Q 625 500 590 520 Z"',2)+
-  coloringPart("rect","log-a",'x="500" y="520" width="135" height="28" rx="14" transform="rotate(12 568 534)"',2)+
-  coloringPart("rect","log-b",'x="510" y="520" width="135" height="28" rx="14" transform="rotate(-12 578 534)"',2)+
-  coloringPart("path","pine-crown-a",'d="M 690 225 L 620 390 H 760 Z"')+
-  coloringPart("path","pine-crown-b",'d="M 690 300 L 595 485 H 785 Z"',2)+
-  coloringPart("rect","pine-trunk",'x="670" y="455" width="40" height="90"',3)+
-  coloringPart("circle","camp-moon",'cx="690" cy="95" r="48"')+
-  coloringLine("path",'d="M 270 310 V 535 M 105 520 H 520" fill="none"')+
-  coloringLine("path",'d="M 220 430 H 315 M 245 480 H 335" fill="none"',2)+
-  coloringLine("path",'d="M 520 534 H 635 M 555 390 Q 585 430 600 425" fill="none"',2)+
-  coloringLine("path",'d="M 620 390 H 760 M 610 435 H 770" fill="none"',3)+
-  coloringLine("path",'d="M 45 560 Q 110 535 175 560 M 355 565 Q 420 535 485 565" fill="none"',3)
-)}
-
-function sceneRobotWorkshop(){return coloringScene(
-  coloringPart("rect","robot-wall",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","robot-floor",'d="M 4 450 H 796 V 596 H 4 Z"')+
-  coloringPart("path","robot-arm-a",'d="M 270 285 C 220 292 175 310 140 335 L 165 402 C 210 390 245 375 280 355 Z"')+
-  coloringPart("path","robot-arm-b",'d="M 530 285 C 580 292 625 310 660 335 L 635 402 C 590 390 555 375 520 355 Z"')+
-  coloringPart("circle","robot-hand-a",'cx="135" cy="390" r="42"',2)+coloringPart("circle","robot-hand-b",'cx="665" cy="390" r="42"',2)+
-  coloringPart("path","robot-leg-a",'d="M 285 430 H 370 V 535 Q 350 558 305 548 Q 282 535 285 500 Z"')+coloringPart("path","robot-leg-b",'d="M 430 430 H 515 V 535 Q 495 558 450 548 Q 427 535 430 500 Z"')+
-  coloringPart("rect","robot-neck",'x="365" y="220" width="70" height="55" rx="16"',2)+
-  coloringPart("rect","robot-head",'x="285" y="95" width="230" height="145" rx="28"')+
-  coloringPart("rect","robot-face",'x="320" y="125" width="160" height="80" rx="18"',2)+
-  coloringPart("circle","robot-eye-a",'cx="360" cy="165" r="20"')+coloringPart("circle","robot-eye-b",'cx="440" cy="165" r="20"')+
-  coloringPart("rect","robot-body",'x="250" y="250" width="300" height="210" rx="25"')+
-  coloringPart("rect","robot-screen",'x="305" y="285" width="190" height="90" rx="15"',2)+
-  coloringPart("circle","robot-button-a",'cx="335" cy="415" r="18"',2)+coloringPart("circle","robot-button-b",'cx="400" cy="415" r="18"',2)+coloringPart("circle","robot-button-c",'cx="465" cy="415" r="18"',3)+
-  coloringPart("path","gear-a",'d="M 105 130 l 18 -28 l 28 18 l 30 -12 l 12 32 l 35 5 l -4 35 l 25 24 l -22 28 l 8 34 l -34 10 l -16 31 l -30 -18 l -33 12 l -11 -33 l -35 -6 l 5 -34 l -25 -25 l 22 -27 l -8 -35 l 34 -9 Z"',3)+
-  coloringPart("circle","gear-a-hole",'cx="145" cy="205" r="35"',3)+
-  coloringLine("path",'d="M 400 95 V 45 M 375 45 H 425" fill="none"')+
-  coloringLine("path",'d="M 355 165 H 365 M 435 165 H 445 M 365 205 Q 400 225 435 205" fill="none"')+
-  coloringLine("path",'d="M 330 325 L 365 350 L 400 310 L 435 340 L 470 300" fill="none"',2)+
-  coloringLine("path",'d="M 275 275 H 525 M 275 440 H 525 M 328 460 V 555 M 472 460 V 555" fill="none"',2)+
-  coloringLine("path",'d="M 20 500 H 160 M 640 500 H 780 M 75 550 H 220 M 580 550 H 725" fill="none"',3)
-)}
-
-function sceneCanalStreet(){return coloringScene(
-  coloringPart("rect","canal-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("rect","house-a",'x="55" y="190" width="175" height="260"')+
-  coloringPart("path","house-a-roof",'d="M 45 190 L 143 95 L 240 190 Z"')+
-  coloringPart("rect","house-b",'x="230" y="145" width="180" height="305"')+
-  coloringPart("path","house-b-roof",'d="M 230 145 Q 320 45 410 145 Z"')+
-  coloringPart("rect","house-c",'x="410" y="180" width="175" height="270"')+
-  coloringPart("path","house-c-roof",'d="M 400 180 L 585 180 L 550 105 L 435 105 Z"')+
-  [[95,235],[175,235],[95,320],[175,320],[270,210],[350,210],[270,300],[350,300],[450,230],[530,230],[450,320],[530,320]].map(([x,y],i)=>coloringPart("rect",`canal-window-${i}`,`x="${x-25}" y="${y-30}" width="50" height="60" rx="5"`,i>7?3:i>3?2:1)).join("")+
-  coloringPart("rect","canal-door-a",'x="115" y="365" width="58" height="85" rx="12"')+
-  coloringPart("rect","canal-door-b",'x="290" y="355" width="58" height="95" rx="12"',2)+
-  coloringPart("rect","canal-door-c",'x="470" y="360" width="58" height="90" rx="12"',2)+
-  coloringPart("path","canal-water",'d="M 4 455 Q 190 425 385 465 T 796 445 L 796 596 L 4 596 Z"')+
-  coloringPart("path","canal-bridge",'d="M 555 455 Q 665 325 795 455 L 795 505 Q 665 410 555 505 Z"',2)+
-  coloringPart("path","canal-boat",'d="M 250 525 H 470 Q 440 575 290 570 Z"',3)+
-  coloringPart("rect","boat-cabin",'x="325" y="470" width="95" height="55" rx="8"',3)+
-  coloringLine("path",'d="M 95 205 V 265 M 175 205 V 265 M 70 235 H 200 M 270 180 V 240 M 350 180 V 240 M 245 210 H 375" fill="none"')+
-  coloringLine("path",'d="M 450 200 V 260 M 530 200 V 260 M 425 230 H 555 M 450 290 V 350 M 530 290 V 350 M 425 320 H 555" fill="none"',2)+
-  coloringLine("path",'d="M 590 455 Q 665 370 760 455 M 625 455 Q 665 415 715 455" fill="none"',2)+
-  coloringLine("path",'d="M 35 535 Q 120 510 205 535 M 500 555 Q 610 520 750 550" fill="none"',3)+
-  coloringLine("path",'d="M 350 470 V 445 M 330 445 H 430 M 290 550 H 440" fill="none"',3)
-)}
-
-function sceneSolarObservatory(){return coloringScene(
-  coloringPart("rect","observatory-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","observatory-hill",'d="M 4 420 Q 185 350 360 425 T 796 385 L 796 596 L 4 596 Z"')+
-  coloringPart("path","observatory-dome",'d="M 85 400 Q 95 170 310 170 Q 520 180 535 400 Z"')+
-  coloringPart("rect","observatory-base",'x="105" y="390" width="410" height="145" rx="12"')+
-  coloringPart("path","dome-slit",'d="M 275 175 Q 330 175 365 205 L 335 390 H 245 Z"',2)+
-  coloringPart("path","telescope-tube",'d="M 300 275 L 575 125 L 620 190 L 350 340 Z"')+
-  coloringPart("ellipse","telescope-lens",'cx="600" cy="158" rx="35" ry="55" transform="rotate(-30 600 158)"',2)+
-  coloringPart("path","telescope-mount",'d="M 325 325 L 395 505 H 290 Z"',2)+
-  coloringPart("circle","planet-ringed",'cx="675" cy="305" r="48"')+
-  coloringPart("path","planet-ring",'d="M 600 295 Q 675 345 750 295 Q 680 380 600 295 Z"',2)+
-  coloringPart("circle","planet-small",'cx="110" cy="100" r="38"',2)+
-  coloringPart("circle","moon-small",'cx="175" cy="90" r="18"',3)+
-  coloringStars([[520,70,18],[710,75,14],[65,245,15],[750,205,12],[420,115,11]],"observatory-star",3)+
-  coloringPart("rect","control-panel",'x="570" y="425" width="155" height="95" rx="12"',3)+
-  coloringLine("path",'d="M 105 390 H 515 M 310 170 V 390" fill="none"')+
-  coloringLine("path",'d="M 335 340 L 575 205 M 360 325 L 600 190" fill="none"',2)+
-  coloringLine("path",'d="M 290 505 H 395 M 325 325 V 505" fill="none"',2)+
-  coloringLine("path",'d="M 595 450 H 700 M 595 475 H 650 M 670 475 H 700 M 595 500 H 625" fill="none"',3)+
-  coloringLine("path",'d="M 505 70 L 535 70 M 520 55 V 85 M 695 75 H 725 M 710 60 V 90" fill="none"',3)
-)}
-
-function sceneSavannaWeb(){return coloringScene(
-  coloringPart("rect","savanna-sky",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","savanna-ground",'d="M 4 415 Q 180 380 360 425 T 796 400 L 796 596 L 4 596 Z"')+
-  coloringPart("path","acacia-trunk",'d="M 95 450 Q 145 300 135 185 H 205 Q 190 310 235 450 Z"')+
-  coloringPart("path","acacia-crown",'d="M 35 210 Q 65 95 165 125 Q 250 70 320 155 Q 365 235 270 260 H 90 Q 30 260 35 210 Z"')+
-  coloringPart("path","lion-tail",'d="M 365 372 C 305 335 275 372 290 435 C 298 475 325 505 350 480 C 365 465 350 440 330 448 C 315 410 330 395 380 405 Z"',2)+
-  [390,470,540,590].map((x,i)=>coloringPart("path",`lion-leg-${i}`,`d="M ${x} 410 C ${x-4} 455 ${x-7} 505 ${x-2} 545 Q ${x+18} 558 ${x+48} 548 L ${x+43} 532 C ${x+35} 488 ${x+38} 448 ${x+30} 412 Z"`,i>1?2:1)).join("")+
-  coloringPart("path","lion-body",'d="M 340 385 C 348 330 405 302 485 305 C 565 308 625 340 632 392 C 635 445 580 475 500 475 C 415 478 342 448 340 385 Z"')+
-  coloringPart("path","lion-mane",'d="M 625 215 C 652 205 675 220 682 245 C 712 250 724 275 710 300 C 735 323 724 352 700 365 C 708 395 680 420 650 415 C 630 440 600 438 582 415 C 552 422 532 395 540 366 C 515 352 515 322 538 300 C 525 272 545 248 570 245 C 578 220 600 208 625 215 Z"')+
-  coloringPart("circle","lion-face",'cx="625" cy="325" r="68"',2)+
-  coloringPart("ellipse","lion-muzzle",'cx="625" cy="350" rx="45" ry="30"',2)+
-  coloringPart("path","zebra-tail",'d="M 100 455 Q 55 425 70 505 Q 90 528 105 500 Q 82 468 120 470 Z"',3)+
-  [125,175,230,280].map((x,i)=>coloringPart("path",`zebra-leg-${i}`,`d="M ${x} 490 C ${x-3} 520 ${x-5} 552 ${x} 578 H ${x+34} C ${x+38} 565 ${x+30} 558 ${x+25} 552 L ${x+25} 492 Z"`,3)).join("")+
-  coloringPart("path","zebra-body",'d="M 85 470 C 95 425 135 400 205 405 C 270 408 315 440 318 480 C 315 525 265 545 198 540 C 130 538 82 515 85 470 Z"',2)+
-  coloringPart("path","zebra-neck",'d="M 270 450 Q 280 390 315 350 L 350 382 L 330 490 Z"',2)+
-  coloringPart("path","zebra-head",'d="M 295 350 C 320 325 360 318 388 342 C 405 360 405 390 385 410 C 365 430 330 428 307 410 C 288 395 282 368 295 350 Z"',2)+
-  coloringPart("ellipse","zebra-muzzle",'cx="372" cy="390" rx="42" ry="27"',3)+
-  coloringPart("path","zebra-ear-a",'d="M 312 352 L 305 310 L 338 343 Z"',3)+coloringPart("path","zebra-ear-b",'d="M 350 340 L 370 305 L 378 350 Z"',3)+
-  coloringPart("path","zebra-mane",'d="M 292 360 Q 268 395 282 455 L 306 445 Q 292 402 320 365 Z"',3)+
-  coloringPart("circle","savanna-sun",'cx="690" cy="95" r="58"')+
-  coloringLine("circle",'cx="605" cy="315" r="6" fill="#26344a" stroke="none"')+coloringLine("circle",'cx="645" cy="315" r="6" fill="#26344a" stroke="none"')+
-  coloringLine("path",'d="M 625 338 l -10 10 l 10 10 l 10 -10 Z M 595 365 Q 625 385 655 365" fill="none"')+
-  coloringLine("path",'d="M 420 350 Q 455 390 430 455 M 470 330 Q 505 380 485 460 M 520 340 Q 550 385 535 455" fill="none"',2)+
-  coloringLine("path",'d="M 112 442 l 32 55 M 155 420 l 38 105 M 205 412 l 35 118 M 250 425 l 30 80 M 290 405 l 35 50 M 310 370 l 35 42" fill="none"',3)+
-  coloringLine("circle",'cx="354" cy="362" r="5" fill="#26344a" stroke="none"',3)+
-  coloringLine("path",'d="M 365 395 Q 378 405 390 393 M 125 580 h 30 M 175 580 h 30 M 230 580 h 30 M 280 580 h 30" fill="none"',3)
-)}
-
-function sceneJapaneseGarden(){return coloringScene(
-  coloringPart("rect","garden-sky-jp",'x="4" y="4" width="792" height="592" rx="28"')+
-  coloringPart("path","garden-bank-jp",'d="M 4 405 Q 180 365 350 420 T 796 395 L 796 596 L 4 596 Z"')+
-  coloringPart("ellipse","garden-pond-jp",'cx="420" cy="500" rx="335" ry="85"')+
-  coloringPart("rect","pagoda-base",'x="520" y="310" width="175" height="140"')+
-  coloringPart("path","pagoda-roof-low",'d="M 475 310 Q 610 270 740 310 L 700 345 H 515 Z"')+
-  coloringPart("rect","pagoda-upper",'x="550" y="205" width="120" height="85"',2)+
-  coloringPart("path","pagoda-roof-high",'d="M 510 205 Q 610 160 710 205 L 670 235 H 550 Z"',2)+
-  coloringPart("path","bridge",'d="M 85 470 Q 230 300 385 470 L 385 520 Q 230 390 85 520 Z"')+
-  coloringPart("rect","bridge-post-a",'x="95" y="405" width="25" height="115"',2)+coloringPart("rect","bridge-post-b",'x="350" y="405" width="25" height="115"',2)+
-  coloringPart("path","cherry-trunk",'d="M 80 405 Q 135 260 115 95 H 205 Q 175 260 235 405 Z"')+
-  coloringPart("circle","cherry-crown-a",'cx="110" cy="120" r="85"')+coloringPart("circle","cherry-crown-b",'cx="205" cy="130" r="95"')+coloringPart("circle","cherry-crown-c",'cx="155" cy="70" r="70"',2)+
-  coloringPetals(95,95,"cherry-blossom-a",2)+coloringPetals(205,105,"cherry-blossom-b",3)+
-  coloringPart("path","koi-a",'d="M 430 500 Q 490 450 550 500 Q 490 550 430 500 Z"',2)+
-  coloringPart("path","koi-tail-a",'d="M 430 500 L 385 465 L 395 535 Z"',2)+
-  coloringPart("path","stone-lantern",'d="M 705 430 L 740 365 L 775 430 L 760 450 H 720 Z"',3)+
-  coloringPart("rect","lantern-post",'x="732" y="445" width="18" height="90"',3)+
-  coloringLine("path",'d="M 120 445 Q 230 335 350 445 M 120 475 Q 230 375 350 475" fill="none"')+
-  coloringLine("path",'d="M 150 405 V 470 M 220 360 V 435 M 290 380 V 455" fill="none"',2)+
-  coloringLine("path",'d="M 570 350 V 450 M 645 350 V 450 M 550 400 H 670 M 580 235 V 290 M 640 235 V 290" fill="none"',2)+
-  coloringLine("path",'d="M 455 500 Q 490 480 525 500 M 475 490 L 500 510 M 455 545 Q 500 525 555 545" fill="none"',3)+
-  coloringLine("path",'d="M 40 555 Q 140 525 240 555 M 565 555 Q 650 530 760 555" fill="none"',3)
-)}

public/js/widgets/coloring-scenes-junior.js

@@ -0,0 +1,191 @@
+/* teach - professionele kleurboekillustraties voor groep 1-2 */
+"use strict";
+
+function proButterfly(){return coloringScene(
+  coloringPart("rect","butterfly-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringCloud("butterfly-cloud",72,72,.72,2)+
+  coloringPart("path","butterfly-meadow",'d="M 4 452 C 120 415 220 438 315 465 C 430 500 560 438 796 424 L 796 596 L 4 596 Z"')+
+  coloringFigure("butterfly",
+    coloringPart("path","wing-left-back",'d="M 382 325 C 327 342 270 397 274 454 C 278 501 328 516 365 475 C 392 446 402 388 397 343 C 394 329 389 324 382 325 Z"')+
+    coloringPart("path","wing-right-back",'d="M 418 325 C 473 342 530 397 526 454 C 522 501 472 516 435 475 C 408 446 398 388 403 343 C 406 329 411 324 418 325 Z"')+
+    coloringPart("path","wing-left-top",'d="M 386 332 C 344 322 269 293 224 235 C 183 182 198 119 250 104 C 305 88 365 147 390 241 C 403 288 401 320 386 332 Z"')+
+    coloringPart("path","wing-right-top",'d="M 414 332 C 456 322 531 293 576 235 C 617 182 602 119 550 104 C 495 88 435 147 410 241 C 397 288 399 320 414 332 Z"')+
+    coloringPart("path","wing-left-mark",'d="M 344 222 C 315 164 270 142 244 166 C 218 191 250 242 350 278 C 357 260 354 240 344 222 Z"',2)+
+    coloringPart("path","wing-right-mark",'d="M 456 222 C 485 164 530 142 556 166 C 582 191 550 242 450 278 C 443 260 446 240 456 222 Z"',2)+
+    coloringPart("path","wing-left-eye",'d="M 349 395 C 324 369 300 381 301 410 C 302 440 332 458 357 438 C 371 427 367 414 349 395 Z"',3)+
+    coloringPart("path","wing-right-eye",'d="M 451 395 C 476 369 500 381 499 410 C 498 440 468 458 443 438 C 429 427 433 414 451 395 Z"',3)+
+    coloringPart("path","butterfly-abdomen",'d="M 383 280 C 379 334 380 411 400 470 C 420 411 421 334 417 280 C 409 263 391 263 383 280 Z"')+
+    coloringPart("path","butterfly-thorax",'d="M 376 238 C 376 208 386 190 400 190 C 414 190 424 208 424 238 C 424 269 414 287 400 287 C 386 287 376 269 376 238 Z"')+
+    coloringPart("path","butterfly-head",'d="M 373 174 C 373 142 385 124 400 124 C 415 124 427 142 427 174 C 427 199 415 213 400 213 C 385 213 373 199 373 174 Z"')+
+    coloringLine("path",'d="M 385 138 C 361 102 332 88 304 96 M 415 138 C 439 102 468 88 496 96 M 389 172 Q 400 184 411 172 M 391 313 Q 400 321 409 313 M 390 354 Q 400 362 410 354 M 394 398 Q 400 405 406 398" fill="none"')+
+    coloringDot(389,160,4)+coloringDot(411,160,4)
+  )+
+  coloringFigure("butterfly-flowers",
+    coloringLine("path",'d="M 112 534 C 112 501 111 480 113 451 M 683 536 C 682 506 685 480 684 452" fill="none"',2)+
+    coloringLeaf("flower-left-leaf",100,492,-38,.55,2)+coloringLeaf("flower-right-leaf",696,499,30,.55,2)+
+    coloringFlower(113,438,"butterfly-flower-left",.78,2)+coloringFlower(684,438,"butterfly-flower-right",.78,3)
+  )
+)}
+
+function proAutumn(){return coloringScene(
+  coloringPart("rect","autumn-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringCloud("autumn-cloud",566,75,.9,3)+
+  coloringPart("path","autumn-hill",'d="M 4 456 C 148 411 280 444 395 472 C 520 502 644 454 796 430 L 796 596 L 4 596 Z"')+
+  coloringFigure("autumn-tree",
+    coloringPart("path","tree-trunk",'d="M 307 526 C 329 477 345 414 348 346 C 350 303 337 265 320 229 C 346 238 366 260 382 285 C 383 236 372 199 352 166 C 381 181 401 207 413 239 C 431 207 455 184 488 172 C 461 204 448 241 447 286 C 466 259 489 243 518 237 C 491 274 470 316 467 361 C 463 424 478 483 502 526 C 456 514 354 514 307 526 Z"')+
+    coloringPart("path","crown-left",'d="M 105 247 C 87 199 119 158 164 157 C 165 107 207 78 251 101 C 278 61 336 65 359 107 C 395 113 411 145 397 177 C 417 214 390 254 350 252 C 328 285 281 288 255 260 C 216 283 169 265 159 228 C 136 231 117 222 105 247 Z"')+
+    coloringPart("path","crown-right",'d="M 393 173 C 381 135 411 101 447 103 C 461 60 514 50 543 84 C 579 60 623 83 629 126 C 674 129 695 174 675 210 C 696 248 664 286 624 279 C 602 317 549 317 524 283 C 484 303 437 278 437 237 C 407 226 390 204 393 173 Z"')+
+    coloringPart("path","crown-low",'d="M 211 275 C 205 234 237 204 276 213 C 301 180 348 183 369 218 C 405 199 451 215 456 255 C 491 265 499 307 477 331 C 454 357 414 351 393 328 C 363 356 316 346 302 311 C 263 329 221 311 211 275 Z"',2)+
+    coloringLine("path",'d="M 355 346 C 375 315 391 285 413 239 M 447 286 C 430 316 419 345 414 392 M 348 346 C 339 310 330 276 320 229 M 362 415 C 388 395 422 391 459 406" fill="none"',2)
+  )+
+  coloringLeaf("autumn-leaf-0",108,375,-26,.72,1)+coloringLeaf("autumn-leaf-1",180,510,18,.64,2)+
+  coloringLeaf("autumn-leaf-2",558,420,-12,.72,1)+coloringLeaf("autumn-leaf-3",676,505,33,.7,2)+
+  coloringLeaf("autumn-leaf-4",708,325,-38,.62,3)+coloringLeaf("autumn-leaf-5",84,300,40,.58,3)+
+  coloringLine("path",'d="M 82 301 l 25 0 M 680 506 l 26 0 M 547 420 l 25 0 M 170 510 l 24 0" fill="none"',3)
+)}
+
+function proCake(){return coloringScene(
+  coloringPart("rect","party-wall",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","party-table",'d="M 4 454 C 170 443 630 443 796 454 L 796 596 L 4 596 Z"')+
+  coloringFigure("cake-stand",
+    coloringPart("path","stand-foot",'d="M 278 548 C 315 527 485 527 522 548 L 512 572 H 288 Z"')+
+    coloringPart("path","stand-stem",'d="M 369 454 C 366 489 351 521 333 540 H 467 C 449 521 434 489 431 454 Z"',2)+
+    coloringPart("path","cake-platter",'d="M 173 431 C 205 415 595 415 627 431 C 616 456 576 467 400 467 C 224 467 184 456 173 431 Z"')
+  )+
+  coloringFigure("birthday-cake",
+    coloringPart("path","cake-bottom",'d="M 190 330 C 190 312 207 300 228 300 H 572 C 593 300 610 312 610 330 V 420 C 610 443 589 453 566 453 H 234 C 211 453 190 443 190 420 Z"')+
+    coloringPart("path","icing-bottom",'d="M 190 333 C 225 354 245 318 278 339 C 307 359 333 321 365 341 C 397 361 421 321 454 341 C 486 360 511 322 541 340 C 568 357 590 340 610 327 V 300 H 190 Z"',2)+
+    coloringPart("path","cake-middle",'d="M 257 221 C 257 204 273 194 292 194 H 508 C 527 194 543 204 543 221 V 302 H 257 Z"')+
+    coloringPart("path","icing-middle",'d="M 257 228 C 283 247 306 211 334 230 C 361 249 383 214 410 232 C 438 250 463 214 489 232 C 510 247 527 238 543 226 V 194 H 257 Z"',2)+
+    coloringPart("path","cake-top",'d="M 326 139 C 326 124 340 115 356 115 H 444 C 460 115 474 124 474 139 V 195 H 326 Z"')+
+    coloringPart("path","top-icing",'d="M 326 146 C 345 159 359 133 379 148 C 397 161 413 134 432 148 C 447 160 461 153 474 143 V 115 H 326 Z"',3)+
+    [-38,0,38].map((dx,index)=>coloringPart("path",`candle-${index}`,`d="M ${390+dx} 115 V 62 Q ${400+dx} 54 ${410+dx} 62 V 115 Z"`,index===1?1:2)).join("")+
+    [-38,0,38].map((dx,index)=>coloringPart("path",`flame-${index}`,`d="M ${400+dx} 58 C ${381+dx} 42 ${392+dx} 20 ${402+dx} 12 C ${416+dx} 31 ${418+dx} 49 ${400+dx} 58 Z"`,index===1?1:3)).join("")+
+    coloringLine("path",'d="M 238 384 C 291 398 340 381 400 392 C 457 402 511 382 564 394 M 300 267 C 335 278 371 264 406 275 C 441 285 475 266 510 276" fill="none"',2)
+  )+
+  coloringStars([[98,120,18],[705,102,16],[112,327,13],[681,304,13]],"cake-confetti",3)
+)}
+
+function proFarmyard(){return coloringScene(
+  coloringPart("rect","farm-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","farm-grass",'d="M 4 415 C 146 382 276 399 392 433 C 528 473 648 428 796 398 L 796 596 L 4 596 Z"')+
+  coloringFigure("barn",
+    coloringPart("path","barn",'d="M 48 469 V 254 L 190 121 L 332 254 V 469 Z"')+
+    coloringPart("path","barn-roof",'d="M 24 258 L 190 93 L 356 258 L 326 278 L 190 151 L 54 278 Z"')+
+    coloringPart("path","barn-door-left",'d="M 101 332 H 190 V 469 H 101 Z"')+
+    coloringPart("path","barn-door-right",'d="M 190 332 H 279 V 469 H 190 Z"',2)+
+    coloringPart("path","barn-window",'d="M 150 209 C 150 177 166 161 190 161 C 214 161 230 177 230 209 V 246 H 150 Z"',2)+
+    coloringLine("path",'d="M 101 332 L 190 469 M 190 332 L 101 469 M 190 332 L 279 469 M 279 332 L 190 469 M 150 205 H 230 M 190 161 V 246" fill="none"',2)
+  )+
+  coloringFigure("cow",
+    coloringPart("path","cow-tail",'d="M 414 343 C 372 329 348 350 349 389 C 350 425 371 451 397 443 C 414 438 419 419 408 409 C 398 400 386 405 387 418 C 373 398 374 376 396 373 L 430 380 Z"',2)+
+    [425,492,574,628].map((x,index)=>coloringPart("path",`cow-leg-${index}`,`d="M ${x} 422 C ${x-2} 462 ${x-7} 509 ${x-1} 548 C ${x+13} 555 ${x+34} 555 ${x+47} 547 L ${x+42} 529 C ${x+32} 493 ${x+37} 456 ${x+34} 420 Z"`,index>1?2:1)).join("")+
+    coloringPart("path","cow-udder",'d="M 522 452 C 530 431 581 428 595 452 C 601 476 587 493 559 493 C 532 493 517 477 522 452 Z"',3)+
+    coloringPart("path","cow-body",'d="M 387 376 C 392 314 449 282 541 286 C 617 289 671 322 680 377 C 688 437 631 477 537 478 C 446 480 380 441 387 376 Z"')+
+    coloringPart("path","cow-ear-left",'d="M 637 320 C 614 284 580 279 569 305 C 582 333 611 345 642 340 Z"',2)+
+    coloringPart("path","cow-ear-right",'d="M 713 320 C 737 284 771 283 781 310 C 766 338 741 346 710 339 Z"',2)+
+    coloringPart("path","cow-horn-left",'d="M 645 314 C 631 283 637 257 659 258 C 676 275 671 300 660 322 Z"',2)+
+    coloringPart("path","cow-horn-right",'d="M 704 312 C 718 280 715 257 695 258 C 677 273 680 301 689 321 Z"',2)+
+    coloringPart("path","cow-head",'d="M 623 318 C 651 293 707 292 737 319 C 767 346 764 400 737 432 C 710 464 654 462 625 432 C 598 404 599 343 623 318 Z"')+
+    coloringPart("path","cow-snout",'d="M 633 389 C 648 366 718 365 741 390 C 755 408 741 438 713 445 C 680 452 641 440 633 414 C 630 405 630 397 633 389 Z"',2)+
+    coloringPart("path","cow-spot-0",'d="M 439 330 C 465 310 501 317 509 347 C 501 376 466 389 441 370 C 424 356 424 341 439 330 Z"',2)+
+    coloringPart("path","cow-spot-1",'d="M 542 386 C 568 365 605 377 609 407 C 596 435 558 439 538 415 C 530 405 531 394 542 386 Z"',3)+
+    coloringDot(649,363,5)+coloringDot(714,363,5)+
+    coloringLine("path",'d="M 678 408 Q 687 419 696 408 M 649 427 Q 687 448 723 426 M 552 478 v 17 M 575 478 v 17 M 414 548 h 50 M 484 548 h 50 M 568 548 h 48 M 624 548 h 48" fill="none"')
+  )+
+  coloringPart("circle","farm-sun",'cx="690" cy="96" r="46"',2)
+)}
+
+function proRainbowWeather(){return coloringScene(
+  coloringPart("rect","weather-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","weather-hill",'d="M 4 450 C 152 406 286 429 409 461 C 548 498 664 455 796 425 L 796 596 L 4 596 Z"')+
+  coloringCloud("rain-cloud-left",45,76,.85,1)+coloringCloud("rain-cloud-right",570,66,.9,2)+
+  coloringFigure("rainbow",
+    coloringPart("path","rainbow-red",'d="M 65 416 C 120 184 302 54 492 100 C 567 118 628 163 674 224 L 632 254 C 592 202 542 168 480 152 C 317 112 169 223 119 430 Z"')+
+    coloringPart("path","rainbow-orange",'d="M 119 430 C 169 223 317 112 480 152 C 542 168 592 202 632 254 L 590 286 C 556 243 516 216 468 203 C 335 169 220 259 173 443 Z"',2)+
+    coloringPart("path","rainbow-yellow",'d="M 173 443 C 220 259 335 169 468 203 C 516 216 556 243 590 286 L 548 317 C 520 285 490 266 455 256 C 354 228 272 298 226 455 Z"',3)
+  )+
+  coloringFigure("raincoat-child",
+    coloringPart("path","boot-left",'d="M 427 500 C 422 523 418 546 421 566 H 490 C 494 548 482 536 458 538 L 462 497 Z"')+
+    coloringPart("path","boot-right",'d="M 512 495 L 518 561 H 587 C 590 542 576 531 551 534 L 548 492 Z"',2)+
+    coloringPart("path","raincoat-leg-left",'d="M 438 423 L 427 508 H 468 L 491 421 Z"',2)+
+    coloringPart("path","raincoat-leg-right",'d="M 491 421 L 513 504 H 552 L 540 420 Z"',2)+
+    coloringPart("path","coat-body",'d="M 420 319 C 438 296 520 292 546 320 C 555 352 557 407 568 458 C 527 476 446 476 402 455 C 416 408 413 356 420 319 Z"')+
+    coloringPart("path","coat-sleeve",'d="M 421 329 C 392 337 372 373 365 413 C 374 429 390 435 407 429 L 441 360 Z"',2)+
+    coloringPart("path","coat-hand",'d="M 365 405 C 352 410 349 429 360 440 C 372 449 390 441 393 425 C 390 410 378 403 365 405 Z"',3)+
+    coloringPart("path","child-head",'d="M 442 264 C 441 226 458 202 486 200 C 516 198 536 224 535 260 C 534 294 516 315 487 315 C 458 315 442 295 442 264 Z"')+
+    coloringPart("path","rain-hood",'d="M 430 255 C 425 210 450 179 487 177 C 528 176 553 209 546 257 L 527 248 C 523 221 508 207 486 208 C 466 209 452 225 451 253 Z"',2)+
+    coloringDot(475,258,4)+coloringDot(505,258,4)+
+    coloringLine("path",'d="M 476 280 Q 489 291 503 279 M 461 348 H 527 M 488 322 V 459 M 438 392 Q 484 411 545 391" fill="none"',2)
+  )+
+  coloringFigure("umbrella",
+    coloringPart("path","umbrella-left",'d="M 294 202 C 324 102 425 65 500 99 C 446 113 405 154 389 211 C 357 184 326 184 294 202 Z"')+
+    coloringPart("path","umbrella-middle",'d="M 389 211 C 405 154 446 113 500 99 C 516 144 516 183 505 219 C 466 190 427 190 389 211 Z"',2)+
+    coloringPart("path","umbrella-right",'d="M 500 99 C 588 86 675 143 695 231 C 654 202 621 206 588 233 C 566 204 536 199 505 219 C 516 183 516 144 500 99 Z"',2)+
+    coloringLine("path",'d="M 500 99 V 390 C 500 418 474 430 459 410" fill="none"')+
+    coloringPart("circle","umbrella-grip",'cx="500" cy="390" r="12"',3)
+  )+
+  [[110,250],[160,295],[675,300],[725,260]].map(([x,y],i)=>coloringPart("path",`raindrop-${i}`,`d="M ${x} ${y-18} C ${x-18} ${y+4} ${x-14} ${y+24} ${x} ${y+28} C ${x+14} ${y+24} ${x+18} ${y+4} ${x} ${y-18} Z"`,i>1?3:2)).join("")
+)}
+
+function proConstruction(){return coloringScene(
+  coloringPart("rect","build-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","build-ground",'d="M 4 430 C 172 409 620 408 796 430 L 796 596 L 4 596 Z"')+
+  coloringFigure("excavator",
+    coloringPart("path","digger-track",'d="M 103 476 C 113 437 146 416 190 416 H 462 C 507 416 540 442 546 483 C 540 528 506 552 460 552 H 185 C 135 552 102 528 103 476 Z"')+
+    coloringPart("path","digger-track-inner",'d="M 151 480 C 156 457 176 446 203 446 H 442 C 470 446 488 460 492 484 C 486 508 467 520 440 520 H 202 C 174 520 155 506 151 480 Z"',2)+
+    coloringPart("path","digger-body",'d="M 176 412 L 205 327 C 210 310 225 301 244 301 H 450 L 493 414 Z"')+
+    coloringPart("path","engine-cover",'d="M 172 365 C 180 337 202 321 233 321 H 313 V 414 H 155 Z"',2)+
+    coloringPart("path","digger-cab",'d="M 304 304 L 340 191 H 435 C 452 191 463 202 469 218 L 493 304 Z"')+
+    coloringPart("path","digger-window-front",'d="M 398 214 H 431 C 440 214 445 221 448 231 L 466 282 H 398 Z"',2)+
+    coloringPart("path","digger-window-side",'d="M 354 214 H 385 V 282 H 333 Z"',2)+
+    coloringPart("path","arm-upper",'d="M 447 307 C 480 238 520 166 565 111 L 609 135 C 579 205 540 274 493 337 Z"')+
+    coloringPart("path","arm-lower",'d="M 561 113 C 613 139 672 194 717 250 L 686 284 C 633 244 585 201 544 157 Z"',2)+
+    coloringPart("path","bucket",'d="M 686 250 C 742 245 777 282 780 341 C 758 385 715 410 659 398 L 640 335 C 677 340 711 326 731 299 Z"')+
+    coloringPart("path","bucket-tooth-a",'d="M 659 397 L 641 435 L 689 407 Z"',2)+
+    coloringPart("path","bucket-tooth-b",'d="M 710 407 L 705 446 L 744 415 Z"',3)+
+    coloringPart("circle","digger-pivot",'cx="472" cy="316" r="27"',2)+
+    coloringPart("circle","arm-pivot",'cx="575" cy="140" r="17"',3)+
+    coloringLine("path",'d="M 183 483 H 459 M 210 448 V 519 M 270 448 V 519 M 330 448 V 519 M 390 448 V 519 M 450 448 V 519 M 467 291 L 563 137 M 490 314 L 585 151 M 582 151 L 693 263" fill="none"',2)
+  )+
+  coloringFigure("work-cones",
+    coloringPart("path","cone-left",'d="M 38 535 L 78 429 L 118 535 Z"')+
+    coloringPart("path","cone-left-base",'d="M 24 530 H 132 L 140 558 H 16 Z"',2)+
+    coloringPart("path","cone-right",'d="M 596 545 L 630 453 L 664 545 Z"',2)+
+    coloringPart("path","cone-right-base",'d="M 584 540 H 678 L 685 565 H 577 Z"',3)+
+    coloringLine("path",'d="M 57 485 H 99 M 612 500 H 648" fill="none"',2)
+  )+
+  coloringPart("circle","build-sun",'cx="116" cy="105" r="45"',3)
+)}
+
+function proForestPicnic(){return coloringScene(
+  coloringPart("rect","picnic-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","picnic-grass",'d="M 4 409 C 152 370 286 398 398 431 C 530 470 656 427 796 394 L 796 596 L 4 596 Z"')+
+  coloringFigure("picnic-tree",
+    coloringPart("path","picnic-trunk",'d="M 73 480 C 104 405 115 324 111 246 C 108 200 91 157 70 121 C 107 135 132 166 147 204 C 164 160 193 130 235 116 C 205 161 192 207 194 257 C 199 338 218 413 258 480 Z"')+
+    coloringPart("path","picnic-crown",'d="M 34 185 C 18 140 47 102 89 100 C 96 54 145 34 180 65 C 215 32 269 52 278 98 C 322 99 346 143 326 182 C 345 221 312 257 271 248 C 246 283 195 282 171 248 C 132 274 83 253 76 211 C 55 213 40 201 34 185 Z"')+
+    coloringLine("path",'d="M 112 246 C 132 220 143 210 147 204 M 194 257 C 174 232 159 218 147 204 M 128 360 C 158 342 188 344 213 361" fill="none"',2)
+  )+
+  coloringFigure("picnic-setting",
+    coloringPart("path","blanket",'d="M 254 454 L 604 422 L 725 559 L 322 580 Z"')+
+    coloringPart("path","blanket-panel-a",'d="M 254 454 L 424 439 L 474 500 L 293 517 Z"',2)+
+    coloringPart("path","blanket-panel-b",'d="M 474 500 L 654 484 L 725 559 L 530 569 Z"',3)+
+    coloringPart("path","basket",'d="M 335 395 C 343 373 452 367 468 392 L 450 486 H 353 Z"')+
+    coloringPart("path","basket-handle",'d="M 365 393 C 364 339 434 321 452 386 L 430 390 C 420 354 388 356 384 394 Z"',2)+
+    coloringLine("path",'d="M 348 426 H 458 M 357 457 H 452 M 383 397 L 374 483 M 420 392 L 428 482" fill="none"',2)
+  )+
+  coloringFigure("rabbit",
+    coloringPart("path","rabbit-tail",'d="M 627 393 C 598 379 577 401 584 427 C 592 452 624 454 641 433 Z"',2)+
+    coloringPart("path","rabbit-hind-leg",'d="M 620 468 C 582 478 566 511 590 533 C 622 548 674 537 692 507 C 680 482 652 466 620 468 Z"')+
+    coloringPart("path","rabbit-ear-back",'d="M 666 262 C 657 203 666 144 697 126 C 719 158 710 226 687 279 Z"',2)+
+    coloringPart("path","rabbit-body",'d="M 606 389 C 618 342 657 316 704 323 C 750 331 775 372 766 419 C 757 467 719 496 670 489 C 622 482 595 438 606 389 Z"')+
+    coloringPart("path","rabbit-head",'d="M 640 304 C 642 264 670 240 708 244 C 747 247 770 278 765 316 C 759 355 730 376 691 370 C 652 365 637 340 640 304 Z"')+
+    coloringPart("path","rabbit-ear-front",'d="M 704 254 C 710 195 739 144 771 142 C 783 183 756 239 734 274 Z"')+
+    coloringPart("path","rabbit-chest",'d="M 651 371 C 630 399 633 441 662 461 C 687 447 698 411 685 376 Z"',3)+
+    coloringPart("path","rabbit-paw",'d="M 695 442 C 716 428 747 438 752 461 C 737 483 708 483 688 466 Z"',2)+
+    coloringDot(711,298,5)+
+    coloringLine("path",'d="M 738 319 l 14 7 l -14 8 M 744 327 H 779 M 737 335 L 772 349 M 673 283 C 680 266 693 258 707 260 M 614 511 H 695" fill="none"')
+  )+
+  coloringPart("circle","picnic-apple",'cx="508" cy="456" r="25"',3)+
+  coloringLine("path",'d="M 509 431 q 5 -15 17 -19" fill="none"',3)
+)}

public/js/widgets/coloring-scenes-middle.js

@@ -0,0 +1,197 @@
+/* teach - professionele kleurboekillustraties voor groep 3-4 */
+"use strict";
+
+function proOcean(){return coloringScene(
+  coloringPart("rect","ocean-water",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","ocean-sand",'d="M 4 474 C 112 438 220 469 316 492 C 438 522 578 463 796 448 L 796 596 L 4 596 Z"')+
+  coloringFigure("reef-fish",
+    coloringPart("path","fish-tail",'d="M 202 289 C 151 246 100 224 54 229 C 78 270 80 331 55 377 C 111 371 160 349 205 313 Z"')+
+    coloringPart("path","fish-top-fin",'d="M 286 230 C 309 181 354 164 394 199 C 364 215 337 236 320 259 Z"',2)+
+    coloringPart("path","fish-bottom-fin",'d="M 300 365 C 329 410 374 416 404 379 C 368 368 341 351 321 330 Z"',3)+
+    coloringPart("path","fish-body",'d="M 190 301 C 235 217 347 190 444 230 C 493 250 527 279 541 307 C 519 351 479 381 426 394 C 331 418 234 375 190 301 Z"')+
+    coloringPart("path","fish-face",'d="M 432 229 C 487 246 523 276 541 307 C 518 349 483 372 435 387 C 459 335 458 282 432 229 Z"',2)+
+    coloringPart("path","fish-stripe-a",'d="M 281 221 C 305 266 306 347 282 387 C 304 397 324 402 344 403 C 366 352 365 263 342 207 C 320 209 300 214 281 221 Z"',2)+
+    coloringPart("path","fish-stripe-b",'d="M 369 207 C 390 255 392 354 371 401 C 390 400 409 397 426 393 C 447 342 446 276 424 223 C 407 215 389 210 369 207 Z"',3)+
+    coloringPart("circle","fish-eye",'cx="481" cy="286" r="16"',2)+
+    coloringDot(485,283,5)+
+    coloringLine("path",'d="M 504 322 Q 519 333 531 320 M 222 284 Q 245 302 222 322" fill="none"')
+  )+
+  coloringFigure("sea-turtle",
+    coloringPart("path","turtle-tail",'d="M 538 421 L 503 405 L 515 444 Z"',3)+
+    coloringPart("path","turtle-back-flipper",'d="M 586 385 C 564 348 530 337 512 355 C 522 386 548 404 581 411 Z"',2)+
+    coloringPart("path","turtle-shell",'d="M 532 422 C 541 354 604 318 674 333 C 739 346 775 393 763 445 C 750 501 689 526 622 507 C 559 489 526 461 532 422 Z"')+
+    coloringPart("path","turtle-neck",'d="M 727 367 C 755 338 784 343 790 372 L 790 432 C 772 445 748 436 735 419 Z"',2)+
+    coloringPart("path","turtle-head",'d="M 734 373 C 747 345 774 340 789 360 C 795 381 784 408 771 421 C 749 432 730 416 734 373 Z"')+
+    coloringPart("path","turtle-front-flipper",'d="M 687 482 C 717 504 746 545 727 570 C 692 557 665 524 658 495 Z"',2)+
+    coloringPart("path","turtle-near-flipper",'d="M 572 466 C 543 477 519 512 531 535 C 563 533 589 511 601 482 Z"',3)+
+    coloringPart("path","shell-panel-center",'d="M 620 366 C 648 344 689 350 708 379 C 716 416 693 453 656 459 C 619 451 600 413 610 382 C 612 376 615 371 620 366 Z"',2)+
+    coloringLine("path",'d="M 610 382 L 558 380 M 610 413 L 542 425 M 656 459 L 646 505 M 708 379 L 748 367 M 699 448 L 744 475" fill="none"',3)+
+    coloringDot(782,382,4)
+  ,'transform="translate(-68 0)"')+
+  coloringFigure("ocean-plants",
+    coloringPart("path","seaweed-left",'d="M 83 543 C 57 500 67 451 90 423 C 99 466 110 498 126 534 Z"',2)+
+    coloringPart("path","seaweed-middle",'d="M 120 550 C 102 503 126 457 151 437 C 151 479 161 511 174 545 Z"',3)+
+    coloringPart("path","coral-small",'d="M 248 544 C 243 514 241 486 250 462 C 271 475 275 496 270 518 C 289 495 306 495 315 509 C 309 529 292 542 274 551 Z"',3)
+  )+
+  [[98,117,14],[132,82,9],[685,112,13],[720,74,8]].map(([x,y,r],i)=>coloringPart("circle",`ocean-bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>1?3:2)).join("")
+)}
+
+function proGarden(){return coloringScene(
+  coloringPart("rect","garden-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","garden-ground",'d="M 4 438 C 150 398 282 422 405 456 C 537 492 666 453 796 421 L 796 596 L 4 596 Z"')+
+  coloringFigure("snail",
+    coloringPart("path","snail-foot",'d="M 91 512 C 166 490 263 488 357 510 C 385 518 400 537 389 555 C 310 570 181 569 92 551 C 75 541 76 522 91 512 Z"')+
+    coloringPart("path","snail-body",'d="M 253 470 C 295 443 342 433 385 440 C 404 411 431 390 465 392 C 501 395 523 421 521 454 C 519 486 492 507 459 504 C 427 501 405 486 381 475 C 344 485 302 496 263 507 Z"')+
+    coloringPart("path","snail-shell",'d="M 89 417 C 96 350 151 311 220 319 C 286 327 325 378 314 437 C 302 495 246 526 181 514 C 116 503 83 468 89 417 Z"')+
+    coloringLine("path",'d="M 149 410 C 153 371 187 352 223 363 C 260 374 271 412 252 442 C 236 467 199 475 177 452 C 162 436 164 410 181 396 C 198 383 222 390 227 408 C 231 424 216 437 201 431" fill="none"',2)+
+    coloringPart("path","snail-cheek",'d="M 430 445 C 447 426 485 427 496 451 C 482 475 448 478 428 459 Z"',3)+
+    coloringDot(446,423,4)+coloringDot(488,424,4)+
+    coloringLine("path",'d="M 445 412 C 437 377 421 361 399 355 M 487 412 C 498 378 518 365 541 366 M 445 458 Q 463 472 482 457 M 399 355 l -9 -12 M 541 366 l 12 -8" fill="none"')
+  )+
+  coloringFigure("ladybird",
+    coloringPart("path","ladybird-leaf",'d="M 490 497 C 548 436 662 414 746 447 C 697 517 594 548 490 497 Z"')+
+    coloringPart("path","ladybird-body",'d="M 577 453 C 587 395 638 367 692 382 C 744 397 766 447 747 493 C 725 541 661 553 614 522 C 582 501 569 478 577 453 Z"')+
+    coloringPart("path","ladybird-head",'d="M 681 386 C 706 367 744 378 756 405 C 762 430 746 451 720 454 C 698 448 684 425 681 386 Z"',2)+
+    coloringPart("path","ladybird-wing-left",'d="M 623 403 C 592 427 585 468 610 505 C 628 529 654 539 677 532 L 679 391 C 660 389 640 394 623 403 Z"',2)+
+    coloringPart("path","ladybird-wing-right",'d="M 679 391 L 677 532 C 706 527 733 509 747 493 C 763 452 742 408 701 390 C 693 387 686 388 679 391 Z"',2)+
+    coloringDot(643,443,7,2)+coloringDot(629,487,7,3)+coloringDot(710,437,7,2)+coloringDot(719,483,7,3)+
+    coloringLine("path",'d="M 715 389 C 708 367 698 352 682 343 M 739 399 C 751 378 763 370 777 369 M 592 461 L 564 447 M 593 491 L 561 501 M 740 463 L 772 451 M 738 494 L 769 508 M 505 491 C 575 486 638 469 704 443" fill="none"',3)
+  )+
+  coloringLine("path",'d="M 116 405 V 296 M 341 435 V 315" fill="none"',2)+
+  coloringLeaf("garden-leaf-a",100,356,-38,.65,2)+coloringLeaf("garden-leaf-b",355,375,32,.65,3)+
+  coloringFlower(116,276,"garden-flower-a",.9,2)+coloringFlower(341,294,"garden-flower-b",.82,3)+
+  coloringPart("circle","garden-sun",'cx="690" cy="94" r="45"',3)
+)}
+
+function proWindmill(){return coloringScene(
+  coloringPart("rect","polder-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","polder-field-back",'d="M 4 390 C 150 354 274 373 398 405 C 536 441 666 403 796 374 L 796 596 L 4 596 Z"')+
+  coloringPart("path","polder-water",'d="M 4 505 C 169 478 303 512 425 527 C 554 543 665 508 796 493 L 796 596 L 4 596 Z"',2)+
+  coloringFigure("windmill",
+    coloringPart("path","mill-body",'d="M 303 505 C 320 435 330 360 331 272 C 333 224 350 191 400 186 C 450 191 467 224 469 272 C 470 360 480 435 497 505 Z"')+
+    coloringPart("path","mill-roof",'d="M 319 242 C 326 184 359 146 400 144 C 443 147 476 184 482 242 C 438 221 362 221 319 242 Z"')+
+    coloringPart("path","mill-door",'d="M 372 422 C 372 391 384 375 400 375 C 416 375 428 391 428 422 V 505 H 372 Z"')+
+    coloringPart("path","mill-window-a",'d="M 352 291 H 391 V 338 H 352 Z"',2)+
+    coloringPart("path","mill-window-b",'d="M 409 291 H 448 V 338 H 409 Z"',2)+
+    coloringPart("path","sail-north",'d="M 392 221 L 370 35 L 400 22 L 410 219 Z"')+
+    coloringPart("path","sail-east",'d="M 413 230 L 688 120 L 701 150 L 424 251 Z"',2)+
+    coloringPart("path","sail-south",'d="M 407 249 L 460 526 L 429 533 L 389 256 Z"',2)+
+    coloringPart("path","sail-west",'d="M 390 238 L 116 334 L 104 304 L 380 218 Z"',3)+
+    coloringPart("circle","mill-hub",'cx="401" cy="237" r="31"')+
+    coloringLine("path",'d="M 385 220 L 378 91 M 419 227 L 634 141 M 408 260 L 445 475 M 379 244 L 165 318 M 352 315 H 391 M 371 291 V 338 M 409 315 H 448 M 429 291 V 338" fill="none"',2)
+  )+
+  coloringFigure("polder-house",
+    coloringPart("path","polder-house-body",'d="M 77 378 H 242 V 491 H 77 Z"')+
+    coloringPart("path","polder-house-roof",'d="M 51 382 L 159 286 L 268 382 Z"')+
+    coloringPart("path","polder-house-door",'d="M 137 429 H 181 V 491 H 137 Z"',2)+
+    coloringPart("path","polder-house-window",'d="M 91 405 H 126 V 444 H 91 Z"',3)
+  )+
+  coloringCloud("polder-cloud",560,64,.95,3)+
+  coloringLine("path",'d="M 38 548 C 146 527 249 549 350 563 M 523 551 C 614 530 700 542 768 556" fill="none"',3)
+)}
+
+function proDinosaurValley(){return coloringScene(
+  coloringPart("rect","dino-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","dino-ground",'d="M 4 435 C 144 397 275 420 392 451 C 521 486 652 448 796 412 L 796 596 L 4 596 Z"')+
+  coloringFigure("volcano",
+    coloringPart("path","volcano",'d="M 34 433 L 147 214 L 265 433 Z"')+
+    coloringPart("path","volcano-snow",'d="M 112 280 L 147 214 L 185 285 L 166 272 L 149 294 L 132 271 Z"',2)+
+    coloringCloud("volcano-smoke-a",84,111,.52,2)+coloringCloud("volcano-smoke-b",144,70,.47,3)
+  )+
+  coloringFigure("sauropod",
+    [292,392,505,587].map((x,i)=>coloringPart("path",`dino-leg-${i}`,`d="M ${x} 427 C ${x-4} 470 ${x-9} 519 ${x-3} 554 C ${x+15} 561 ${x+39} 561 ${x+54} 552 L ${x+48} 534 C ${x+38} 494 ${x+42} 458 ${x+37} 421 Z"`,i>1?2:1)).join("")+
+    [0,1,2,3].map((i)=>coloringPart("path",`dino-plate-${i}`,`d="M ${420+i*53} ${351-i*2} L ${445+i*53} ${315-i*4} L ${467+i*53} ${356-i} Z"`,i>1?3:2)).join("")+
+    coloringPart("path","dino-body",'d="M 622 363 C 645 322 651 270 654 216 C 657 164 678 123 719 115 C 754 109 784 127 791 154 C 798 182 777 204 745 205 L 708 200 C 711 275 709 350 685 409 C 678 441 652 468 620 477 C 568 496 476 493 400 467 C 330 444 287 409 247 379 C 202 345 151 328 91 336 C 142 300 202 294 260 310 C 315 325 359 344 402 351 C 477 363 551 337 622 363 Z"')+
+    coloringPart("path","dino-belly",'d="M 374 413 C 444 444 553 451 624 420 C 608 463 557 480 484 478 C 430 477 390 457 374 413 Z"',2)+
+    coloringPart("path","dino-cheek",'d="M 708 151 C 729 130 766 137 775 160 C 763 187 728 192 706 174 Z"',3)+
+    coloringDot(748,153,5)+
+    coloringLine("path",'d="M 748 181 Q 762 190 777 179 M 676 227 C 685 263 684 309 675 344 M 271 379 C 311 382 347 399 374 413 M 283 554 h 62 M 383 554 h 62 M 496 554 h 62 M 578 554 h 62" fill="none"')
+  )+
+  coloringPart("circle","dino-sun",'cx="684" cy="72" r="38"',3)+
+  coloringLine("path",'d="M 80 541 q 18 -35 37 0 M 680 539 q 20 -38 40 0" fill="none"',3)
+)}
+
+function proSpringNest(){return coloringScene(
+  coloringPart("rect","spring-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","spring-hill",'d="M 4 458 C 132 420 276 438 401 470 C 542 505 667 465 796 431 L 796 596 L 4 596 Z"')+
+  coloringFigure("nest-branch",
+    coloringPart("path","nest-branch",'d="M 42 476 C 173 438 293 438 415 460 C 541 483 664 469 774 425 L 785 458 C 673 511 537 526 401 501 C 273 478 165 477 50 516 Z"')+
+    coloringLeaf("branch-leaf-a",133,447,-28,.78,2)+coloringLeaf("branch-leaf-b",684,454,22,.8,3)+
+    coloringLine("path",'d="M 108 458 L 73 425 M 690 458 L 730 419" fill="none"',2)
+  )+
+  coloringFigure("woven-nest",
+    coloringPart("path","nest-bowl",'d="M 231 406 C 270 375 493 374 538 408 C 526 485 461 522 383 520 C 303 518 242 480 231 406 Z"')+
+    coloringPart("path","nest-rim",'d="M 218 397 C 255 367 507 365 550 399 C 535 431 497 444 383 443 C 270 442 232 427 218 397 Z"',2)+
+    coloringLine("path",'d="M 252 430 C 321 452 451 452 519 428 M 270 465 C 338 485 432 486 497 464 M 304 500 C 354 510 411 512 459 501 M 285 413 L 342 507 M 350 430 L 386 518 M 418 429 L 423 514 M 484 414 L 459 500" fill="none"',2)
+  )+
+  coloringFigure("mother-bird",
+    coloringPart("path","bird-tail-a",'d="M 281 325 C 239 299 199 291 164 304 C 192 333 225 353 267 364 Z"',2)+
+    coloringPart("path","bird-tail-b",'d="M 286 344 C 245 343 211 356 190 381 C 230 385 267 375 300 355 Z"',3)+
+    coloringPart("path","bird-body",'d="M 277 343 C 286 284 337 247 394 254 C 455 262 488 312 478 367 C 468 421 417 451 360 440 C 304 429 269 398 277 343 Z"')+
+    coloringPart("path","bird-wing",'d="M 317 326 C 343 291 401 288 431 327 C 424 382 376 414 328 388 C 310 372 307 347 317 326 Z"',2)+
+    coloringPart("path","bird-head",'d="M 407 266 C 421 224 463 205 502 224 C 540 243 550 287 528 321 C 504 357 456 362 422 333 C 402 315 397 289 407 266 Z"')+
+    coloringPart("path","bird-beak",'d="M 521 267 C 552 259 579 269 594 289 C 566 300 540 298 518 286 Z"',2)+
+    coloringPart("path","bird-cheek",'d="M 451 286 C 465 270 493 272 503 291 C 490 309 462 309 449 296 Z"',3)+
+    coloringDot(486,260,5)+
+    coloringLine("path",'d="M 338 349 C 366 330 396 335 414 358 M 458 316 Q 477 330 496 314 M 361 440 L 352 462 M 417 438 L 427 460" fill="none"',2)
+  )+
+  coloringPart("path","nest-egg-a",'d="M 331 414 C 316 385 327 354 350 352 C 373 352 385 382 371 413 Z"',2)+
+  coloringPart("path","nest-egg-b",'d="M 389 417 C 377 383 391 354 415 356 C 438 359 446 391 430 418 Z"',3)+
+  coloringFlower(112,520,"spring-flower",.58,3)
+)}
+
+function proFireStation(){return coloringScene(
+  coloringPart("rect","fire-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","fire-road",'d="M 4 459 C 183 447 618 447 796 459 L 796 596 L 4 596 Z"')+
+  coloringFigure("fire-station",
+    coloringPart("path","station-body",'d="M 34 221 H 329 V 470 H 34 Z"')+
+    coloringPart("path","station-roof",'d="M 14 226 L 182 102 L 349 226 Z"')+
+    coloringPart("path","station-door-left",'d="M 60 287 H 175 V 470 H 60 Z"')+
+    coloringPart("path","station-door-right",'d="M 188 287 H 303 V 470 H 188 Z"',2)+
+    coloringPart("path","station-sign",'d="M 129 161 C 129 126 152 111 182 111 C 212 111 235 126 235 161 C 235 196 212 212 182 212 C 152 212 129 196 129 161 Z"',2)+
+    coloringLine("path",'d="M 182 130 V 192 M 151 161 H 213 M 78 337 H 157 M 78 385 H 157 M 206 337 H 285 M 206 385 H 285" fill="none"',2)
+  )+
+  coloringFigure("fire-engine",
+    coloringPart("path","engine-chassis",'d="M 258 454 H 711 C 733 454 748 469 748 490 V 520 H 240 V 478 C 240 465 247 457 258 454 Z"')+
+    coloringPart("path","engine-body",'d="M 259 346 H 500 V 469 H 259 Z"')+
+    coloringPart("path","engine-cab",'d="M 500 350 H 617 C 638 350 650 360 662 378 L 714 454 H 500 Z"')+
+    coloringPart("path","engine-window-front",'d="M 594 374 H 614 C 624 374 632 380 640 391 L 676 441 H 594 Z"',2)+
+    coloringPart("path","engine-window-side",'d="M 523 374 H 579 V 441 H 523 Z"',2)+
+    coloringPart("path","engine-tank",'d="M 287 370 H 457 V 446 H 287 Z"',2)+
+    coloringPart("path","engine-ladder",'d="M 288 327 L 594 267 L 601 302 L 296 361 Z"',2)+
+    coloringPart("circle","engine-wheel-a",'cx="336" cy="512" r="48"')+
+    coloringPart("circle","engine-wheel-b",'cx="641" cy="512" r="48"')+
+    coloringPart("circle","engine-hub-a",'cx="336" cy="512" r="19"',2)+
+    coloringPart("circle","engine-hub-b",'cx="641" cy="512" r="19"',2)+
+    coloringPart("circle","engine-hose-reel",'cx="407" cy="409" r="27"',3)+
+    coloringLine("path",'d="M 326 320 L 342 348 M 380 309 L 396 337 M 434 298 L 450 326 M 488 288 L 504 316 M 542 277 L 558 305 M 278 489 H 710 M 407 390 C 387 393 385 426 411 430 C 435 432 440 401 421 392" fill="none"',2)
+  )+
+  coloringPart("path","fire-hydrant",'d="M 746 474 V 426 H 779 V 474 L 791 485 V 535 H 732 V 485 Z"',3)+
+  coloringLine("path",'d="M 28 558 H 212 M 706 558 H 785" fill="none"',3)
+)}
+
+function proBeeMeadow(){return coloringScene(
+  coloringPart("rect","bee-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","bee-meadow",'d="M 4 438 C 146 396 275 420 397 453 C 530 489 660 452 796 416 L 796 596 L 4 596 Z"')+
+  coloringFigure("honey-bee",
+    coloringPart("path","bee-wing-back",'d="M 376 249 C 340 191 280 182 258 219 C 251 260 297 294 365 297 Z"',2)+
+    coloringPart("path","bee-wing-front",'d="M 397 248 C 420 183 481 158 514 194 C 529 234 487 281 414 299 Z"')+
+    coloringPart("path","bee-abdomen",'d="M 238 322 C 250 264 315 235 386 250 C 444 263 474 306 464 352 C 453 404 398 431 328 416 C 261 401 227 367 238 322 Z"')+
+    coloringPart("path","bee-stripe-a",'d="M 286 260 C 308 303 307 374 285 404 C 302 413 321 417 341 420 C 365 375 366 303 343 247 C 322 248 303 252 286 260 Z"',2)+
+    coloringPart("path","bee-stripe-b",'d="M 372 248 C 393 299 393 379 372 424 C 393 423 412 418 428 409 C 449 367 449 311 430 273 C 413 260 394 251 372 248 Z"',3)+
+    coloringPart("path","bee-thorax",'d="M 432 282 C 447 249 490 235 523 252 C 557 270 567 313 547 344 C 528 374 484 382 452 361 C 424 343 418 310 432 282 Z"')+
+    coloringPart("path","bee-head",'d="M 518 250 C 543 224 587 224 612 252 C 638 281 633 324 605 348 C 577 372 534 363 513 332 C 496 306 499 270 518 250 Z"')+
+    coloringPart("path","bee-cheek",'d="M 549 294 C 566 278 597 282 607 302 C 592 323 561 323 548 304 Z"',3)+
+    coloringDot(552,274,5)+coloringDot(590,277,5)+
+    coloringLine("path",'d="M 545 252 C 535 222 519 210 498 208 M 585 244 C 597 213 615 201 636 204 M 551 317 Q 572 335 595 315 M 465 354 L 486 385 M 446 365 L 453 402 M 322 418 L 303 447 M 369 425 L 370 458" fill="none"')
+  )+
+  coloringFigure("beehive",
+    coloringPart("path","hive-roof",'d="M 610 443 L 645 390 H 742 L 772 443 Z"')+
+    coloringPart("path","hive-box",'d="M 626 438 H 756 L 744 552 H 638 Z"')+
+    coloringPart("path","hive-door",'d="M 668 490 C 668 468 681 456 696 456 C 711 456 724 468 724 490 V 520 H 668 Z"',2)+
+    coloringLine("path",'d="M 632 464 H 751 M 630 500 H 748 M 636 532 H 745" fill="none"',2)
+  )+
+  coloringLine("path",'d="M 108 532 V 425 M 211 548 V 448 M 518 548 V 454" fill="none"',2)+
+  coloringFlower(108,405,"bee-flower-a",.85,1)+coloringFlower(211,429,"bee-flower-b",.72,2)+coloringFlower(518,435,"bee-flower-c",.68,3)+
+  coloringLeaf("bee-leaf-a",94,476,-35,.55,2)+coloringLeaf("bee-leaf-b",225,492,34,.55,3)
+)}

public/js/widgets/coloring-scenes-senior.js

@@ -0,0 +1,214 @@
+/* teach - professionele kleurboekillustraties voor groep 5-6 */
+"use strict";
+
+function proRocket(){return coloringScene(
+  coloringPart("rect","rocket-space",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringFigure("rocket",
+    coloringPart("path","flame-outer",'d="M 356 453 C 326 501 343 552 400 581 C 457 552 474 501 444 453 Z"')+
+    coloringPart("path","flame-inner",'d="M 378 451 C 365 491 377 523 400 543 C 423 523 435 491 422 451 Z"',2)+
+    coloringPart("path","rocket-left-fin",'d="M 353 360 C 306 385 274 427 265 480 C 301 469 333 454 365 423 Z"')+
+    coloringPart("path","rocket-right-fin",'d="M 447 360 C 494 385 526 427 535 480 C 499 469 467 454 435 423 Z"',2)+
+    coloringPart("path","rocket-body",'d="M 350 417 C 331 309 343 196 400 79 C 457 196 469 309 450 417 C 430 451 370 451 350 417 Z"')+
+    coloringPart("path","rocket-nose",'d="M 356 186 C 366 143 381 107 400 79 C 419 107 434 143 444 186 C 416 174 384 174 356 186 Z"',2)+
+    coloringPart("circle","rocket-window",'cx="400" cy="250" r="48"')+
+    coloringPart("circle","rocket-window-inner",'cx="400" cy="250" r="31"',2)+
+    coloringPart("path","rocket-band",'d="M 343 329 C 379 341 421 341 457 329 L 454 371 C 418 384 382 384 346 371 Z"',2)+
+    coloringPart("path","rocket-nozzle",'d="M 360 416 C 378 429 422 429 440 416 L 444 456 H 356 Z"',3)+
+    coloringLine("path",'d="M 376 294 H 424 M 365 351 C 388 359 412 359 435 351 M 400 108 V 176 M 383 250 H 417" fill="none"',2)+
+    coloringDot(370,400,5,3)+coloringDot(430,400,5,3)
+  )+
+  coloringFigure("ringed-planet",
+    coloringPart("circle","rocket-planet",'cx="645" cy="146" r="65"')+
+    coloringPart("path","rocket-planet-ring",'d="M 556 145 C 580 112 698 95 737 125 C 754 139 746 153 723 164 C 672 189 573 185 552 161 C 545 154 548 149 556 145 Z M 578 150 C 607 167 684 162 714 145 C 680 132 613 135 578 150 Z"',2)+
+    coloringLine("path",'d="M 613 102 C 628 127 660 139 691 133 M 604 176 C 630 158 674 155 704 167" fill="none"',3)
+  )+
+  coloringPart("path","rocket-moon",'d="M 95 444 C 124 405 174 398 210 428 C 183 420 161 437 160 463 C 159 489 181 507 209 499 C 179 530 127 525 98 488 C 85 471 85 456 95 444 Z"',3)+
+  coloringStars([[104,106,18],[198,176,13],[657,345,17],[710,449,11],[143,357,10]],"rocket-star",2)
+)}
+
+function proRainforest(){return coloringScene(
+  coloringPart("rect","forest-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringFigure("rainforest-trees",
+    coloringPart("path","forest-trunk-left",'d="M 34 596 C 61 497 70 397 66 292 C 64 214 43 145 20 85 C 67 107 98 151 116 205 C 139 151 178 114 231 97 C 194 149 174 210 174 279 C 173 391 194 499 232 596 Z"')+
+    coloringPart("path","forest-trunk-right",'d="M 608 596 C 633 509 645 415 641 319 C 638 249 621 187 596 132 C 635 151 664 183 683 226 C 702 188 728 160 765 143 C 744 195 730 252 731 316 C 732 416 745 511 775 596 Z"',2)+
+    coloringPart("path","forest-canopy-left",'d="M 12 143 C 6 95 39 61 83 67 C 99 22 153 13 183 48 C 218 18 270 39 277 86 C 320 93 338 139 315 176 C 286 203 246 202 218 179 C 179 205 129 193 109 157 C 73 180 31 169 12 143 Z"')+
+    coloringPart("path","forest-canopy-right",'d="M 510 123 C 515 80 553 55 593 68 C 615 27 667 25 692 65 C 733 44 779 73 783 118 C 810 143 794 185 758 191 C 730 220 680 216 656 183 C 614 205 565 183 559 142 C 539 144 520 137 510 123 Z"',2)
+  )+
+  coloringFigure("parrot-branch",
+    coloringPart("path","parrot-branch",'d="M 108 478 C 237 440 379 446 508 472 C 589 489 652 478 713 448 L 729 479 C 659 518 578 530 493 512 C 355 482 237 479 116 519 Z"')+
+    coloringLeaf("parrot-leaf-a",188,461,-30,.9,2)+coloringLeaf("parrot-leaf-b",588,481,27,.85,3)+
+    coloringLine("path",'d="M 167 468 L 132 421 M 602 484 L 640 440" fill="none"',2)
+  )+
+  coloringFigure("scarlet-parrot",
+    coloringPart("path","parrot-tail-long",'d="M 367 424 C 346 476 345 536 365 579 L 405 456 Z"',2)+
+    coloringPart("path","parrot-tail-short",'d="M 409 430 C 405 484 421 535 452 565 L 446 444 Z"',3)+
+    coloringPart("path","parrot-body",'d="M 319 335 C 329 274 383 237 438 248 C 493 259 524 310 513 365 C 503 420 453 454 395 445 C 338 436 309 391 319 335 Z"')+
+    coloringPart("path","parrot-wing",'d="M 349 324 C 379 279 450 280 480 331 C 469 390 421 423 369 395 C 345 379 337 349 349 324 Z"',2)+
+    coloringPart("path","parrot-head",'d="M 424 245 C 437 196 481 170 526 186 C 570 202 589 250 568 291 C 547 332 496 345 456 318 C 425 297 415 270 424 245 Z"')+
+    coloringPart("path","parrot-face-patch",'d="M 493 215 C 520 195 556 211 565 241 C 555 271 532 292 502 294 C 482 273 479 236 493 215 Z"',2)+
+    coloringPart("path","parrot-beak",'d="M 552 230 C 593 218 624 239 629 270 C 604 294 574 303 544 289 C 561 276 569 255 552 230 Z"')+
+    coloringPart("circle","parrot-eye",'cx="531" cy="226" r="12"',3)+
+    coloringDot(534,224,4)+
+    coloringLine("path",'d="M 368 337 C 398 320 431 327 453 351 M 388 373 C 414 358 443 365 461 384 M 368 444 L 358 472 M 414 446 L 423 472 M 347 472 l 20 10 l 18 -12 M 405 472 l 18 10 l 20 -12" fill="none"',2)
+  )+
+  coloringFigure("forest-plants",
+    coloringPart("path","fern-left",'d="M 44 558 C 50 505 78 470 117 451 C 103 486 94 522 96 561 Z"',2)+
+    coloringPart("path","fern-right",'d="M 695 559 C 688 513 711 478 753 457 C 743 494 739 528 743 561 Z"',3)+
+    coloringLine("path",'d="M 77 545 L 110 494 M 83 527 L 55 513 M 94 510 L 73 489 M 721 548 L 746 496 M 727 528 L 702 511 M 735 510 L 717 489" fill="none"',3)
+  )
+)}
+
+function proCastle(){return coloringScene(
+  coloringPart("rect","castle-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","castle-hill",'d="M 4 470 C 142 426 270 447 398 482 C 538 520 663 474 796 437 L 796 596 L 4 596 Z"')+
+  coloringFigure("stone-castle",
+    coloringPart("path","castle-wall",'d="M 175 271 H 625 V 516 H 175 Z"')+
+    coloringPart("path","tower-left",'d="M 82 189 H 245 V 517 H 82 Z"')+
+    coloringPart("path","tower-right",'d="M 555 189 H 718 V 517 H 555 Z"',2)+
+    coloringPart("path","tower-left-roof",'d="M 56 192 L 164 64 L 271 192 Z"')+
+    coloringPart("path","tower-right-roof",'d="M 529 192 L 636 64 L 744 192 Z"',2)+
+    coloringPart("path","castle-gate",'d="M 330 516 V 406 C 330 354 362 327 400 327 C 438 327 470 354 470 406 V 516 Z"')+
+    coloringPart("path","castle-door-left",'d="M 341 516 V 407 C 341 370 363 347 394 343 V 516 Z"',2)+
+    coloringPart("path","castle-door-right",'d="M 406 343 C 437 347 459 370 459 407 V 516 H 406 Z"',2)+
+    coloringPart("path","castle-window-left-a",'d="M 116 255 C 116 226 129 211 146 211 C 163 211 176 226 176 255 V 298 H 116 Z"',2)+
+    coloringPart("path","castle-window-left-b",'d="M 116 365 C 116 336 129 321 146 321 C 163 321 176 336 176 365 V 408 H 116 Z"',3)+
+    coloringPart("path","castle-window-right-a",'d="M 624 255 C 624 226 637 211 654 211 C 671 211 684 226 684 255 V 298 H 624 Z"',2)+
+    coloringPart("path","castle-window-right-b",'d="M 624 365 C 624 336 637 321 654 321 C 671 321 684 336 684 365 V 408 H 624 Z"',3)+
+    coloringPart("path","castle-banner",'d="M 363 178 H 437 V 286 L 400 265 L 363 286 Z"',3)+
+    coloringLine("path",'d="M 164 64 V 24 H 230 V 59 H 164 M 636 64 V 24 H 702 V 59 H 636 M 214 308 H 586 M 214 374 H 586 M 245 271 V 516 M 555 271 V 516 M 330 406 H 470 M 400 343 V 516" fill="none"',2)
+  )+
+  coloringFigure("castle-path",
+    coloringPart("path","castle-road",'d="M 345 516 H 455 L 552 596 H 248 Z"')+
+    coloringPart("path","castle-moat-left",'d="M 4 531 C 92 510 185 520 272 549 L 248 596 H 4 Z"',3)+
+    coloringPart("path","castle-moat-right",'d="M 528 550 C 615 520 707 510 796 531 V 596 H 552 Z"',3)
+  )+
+  coloringCloud("castle-cloud",52,86,.7,3)+coloringCloud("castle-cloud-b",580,94,.65,3)
+)}
+
+function proCoralReef(){return coloringScene(
+  coloringPart("rect","reef-water",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","reef-sand",'d="M 4 493 C 123 448 235 481 338 508 C 475 544 598 479 796 465 L 796 596 L 4 596 Z"')+
+  coloringFigure("clownfish",
+    coloringPart("path","clownfish-tail",'d="M 234 276 C 188 231 143 215 100 227 C 123 270 122 323 98 365 C 148 365 191 346 232 310 Z"')+
+    coloringPart("path","clownfish-fin-top",'d="M 319 222 C 350 171 404 163 438 204 C 396 213 362 231 338 255 Z"',2)+
+    coloringPart("path","clownfish-fin-bottom",'d="M 324 363 C 350 406 398 416 432 383 C 394 370 365 350 343 326 Z"',3)+
+    coloringPart("path","clownfish-body",'d="M 220 296 C 260 222 357 193 446 219 C 505 236 549 271 568 303 C 544 347 497 380 440 392 C 350 411 259 371 220 296 Z"')+
+    coloringPart("path","clownfish-head-band",'d="M 449 220 C 476 229 501 241 521 257 C 498 292 497 339 519 362 C 495 375 469 385 440 392 C 460 342 464 275 449 220 Z"',2)+
+    coloringPart("path","clownfish-mid-band",'d="M 326 208 C 347 260 348 352 329 395 C 349 402 370 405 391 404 C 411 350 410 264 389 204 C 368 202 347 204 326 208 Z"',2)+
+    coloringPart("circle","clownfish-eye",'cx="517" cy="284" r="14"',3)+
+    coloringDot(520,282,4)+
+    coloringLine("path",'d="M 541 319 Q 553 329 565 317 M 248 278 Q 269 298 248 320" fill="none"',2)
+  )+
+  coloringFigure("seahorse",
+    coloringPart("path","seahorse-fin",'d="M 626 318 C 594 292 570 301 566 329 C 580 352 602 361 628 357 Z"',2)+
+    coloringPart("path","seahorse-body",'d="M 640 197 C 658 161 707 148 738 178 C 764 204 751 248 717 259 C 694 267 682 284 686 311 C 691 348 726 366 738 402 C 752 445 725 489 687 501 C 649 513 610 492 604 457 C 600 426 618 401 646 395 C 668 390 682 410 674 429 C 667 444 647 447 638 433 C 638 461 676 473 697 448 C 719 421 699 393 675 376 C 646 356 626 326 628 293 C 629 269 641 247 656 232 C 638 228 628 213 640 197 Z"')+
+    coloringPart("path","seahorse-snout",'d="M 716 184 C 750 168 784 177 798 201 C 771 221 741 223 713 210 Z"',2)+
+    coloringPart("path","seahorse-belly",'d="M 654 273 C 670 285 677 316 672 345 C 668 363 657 374 644 372 C 636 337 639 301 654 273 Z"',3)+
+    coloringDot(706,192,5)+
+    coloringLine("path",'d="M 676 245 C 689 249 702 247 714 239 M 647 309 H 674 M 648 332 H 674 M 651 354 H 670" fill="none"',2)
+  )+
+  coloringFigure("living-coral",
+    coloringPart("path","coral-red",'d="M 77 554 C 76 516 82 476 105 443 C 128 463 126 492 116 515 C 143 490 164 489 177 506 C 166 531 148 545 124 558 Z"')+
+    coloringPart("path","coral-branch",'d="M 190 558 C 187 521 192 484 214 456 C 232 470 234 492 226 510 C 246 487 269 484 282 499 C 276 520 261 535 242 541 C 259 539 279 548 285 565 Z"',2)+
+    coloringPart("path","anemone-base",'d="M 346 548 C 366 519 452 517 477 548 C 462 574 367 576 346 548 Z"',2)+
+    [0,1,2,3,4].map((i)=>coloringPart("path",`anemone-arm-${i}`,`d="M ${366+i*21} 540 C ${349+i*21} ${502-(i%2)*14} ${369+i*21} ${468-(i%2)*10} ${387+i*18} ${456-(i%2)*8} C ${394+i*17} ${488-(i%2)*12} ${392+i*18} 518 ${387+i*17} 542 Z"`,i>2?3:2)).join("")+
+    coloringPart("path","reef-starfish",'d="M 548 536 L 565 500 L 582 536 L 622 525 L 594 555 L 618 585 L 578 570 L 557 594 L 551 563 L 518 548 Z"',3)
+  )+
+  [[92,110,12],[123,78,8],[679,90,14],[720,128,9]].map(([x,y,r],i)=>coloringPart("circle",`reef-bubble-${i}`,`cx="${x}" cy="${y}" r="${r}"`,i>1?3:2)).join("")
+)}
+
+function proMountainCamp(){return coloringScene(
+  coloringPart("rect","camp-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringFigure("mountain-range",
+    coloringPart("path","mountain-back",'d="M 4 426 L 180 168 L 334 376 L 462 218 L 645 431 Z"')+
+    coloringPart("path","mountain-front",'d="M 304 438 L 522 126 L 796 445 Z"',2)+
+    coloringPart("path","mountain-snow-left",'d="M 124 250 L 180 168 L 239 248 L 211 232 L 183 265 L 158 231 Z"',2)+
+    coloringPart("path","mountain-snow-right",'d="M 444 237 L 522 126 L 609 248 L 568 226 L 527 267 L 493 223 Z"',3)
+  )+
+  coloringPart("path","camp-ground",'d="M 4 438 C 151 400 286 424 402 455 C 532 490 660 455 796 417 L 796 596 L 4 596 Z"')+
+  coloringFigure("camp-tent",
+    coloringPart("path","tent-body",'d="M 98 549 L 284 305 L 471 549 Z"')+
+    coloringPart("path","tent-front",'d="M 284 305 L 471 549 H 284 Z"',2)+
+    coloringPart("path","tent-door",'d="M 284 358 L 386 549 H 284 Z"',3)+
+    coloringLine("path",'d="M 284 305 V 549 M 98 549 H 471 M 284 305 L 64 566 M 284 305 L 505 565" fill="none"',2)
+  )+
+  coloringFigure("camp-pine",
+    coloringPart("path","pine-trunk",'d="M 667 428 H 703 V 566 H 667 Z"',2)+
+    coloringPart("path","pine-crown-low",'d="M 574 448 L 686 254 L 791 448 Z"')+
+    coloringPart("path","pine-crown-mid",'d="M 596 368 L 686 191 L 771 368 Z"',2)+
+    coloringPart("path","pine-crown-top",'d="M 625 286 L 686 129 L 744 286 Z"',3)
+  )+
+  coloringFigure("campfire",
+    coloringPart("path","fire-log-a",'d="M 487 543 L 590 504 L 608 531 L 503 571 Z"',2)+
+    coloringPart("path","fire-log-b",'d="M 491 516 L 598 555 L 586 581 L 477 541 Z"',3)+
+    coloringPart("path","fire-outer",'d="M 539 526 C 501 487 523 447 551 416 C 557 450 589 460 578 493 C 603 476 612 508 592 536 Z"')+
+    coloringPart("path","fire-inner",'d="M 549 523 C 533 500 544 480 558 463 C 563 485 578 493 568 517 Z"',2)
+  )+
+  coloringPart("circle","camp-moon",'cx="698" cy="83" r="42"',3)+
+  coloringStars([[79,90,12],[252,106,10],[604,74,9]],"camp-star",3)
+)}
+
+function proRobotWorkshop(){return coloringScene(
+  coloringPart("rect","workshop-wall",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringPart("path","workshop-floor",'d="M 4 454 C 176 443 618 443 796 454 L 796 596 L 4 596 Z"')+
+  coloringFigure("friendly-robot",
+    coloringPart("path","robot-leg-left",'d="M 329 428 H 389 L 385 548 C 372 566 343 566 330 548 Z"')+
+    coloringPart("path","robot-leg-right",'d="M 411 428 H 471 L 470 548 C 457 566 428 566 415 548 Z"',2)+
+    coloringPart("path","robot-arm-left",'d="M 265 306 C 221 317 192 351 181 401 L 224 414 C 242 378 268 356 298 351 Z"',2)+
+    coloringPart("path","robot-forearm-left",'d="M 181 397 C 151 407 125 438 121 477 L 163 488 C 180 458 202 437 224 414 Z"',3)+
+    coloringPart("circle","robot-hand-left",'cx="136" cy="489" r="36"',2)+
+    coloringPart("path","robot-arm-right",'d="M 535 306 C 579 317 608 351 619 401 L 576 414 C 558 378 532 356 502 351 Z"',2)+
+    coloringPart("path","robot-forearm-right",'d="M 619 397 C 649 407 675 438 679 477 L 637 488 C 620 458 598 437 576 414 Z"',3)+
+    coloringPart("circle","robot-hand-right",'cx="664" cy="489" r="36"',2)+
+    coloringPart("path","robot-body",'d="M 284 266 C 307 244 493 244 516 266 V 435 C 494 458 306 458 284 435 Z"')+
+    coloringPart("path","robot-chest",'d="M 323 303 H 477 V 374 C 452 399 348 399 323 374 Z"',2)+
+    coloringPart("path","robot-neck",'d="M 372 212 H 428 V 260 H 372 Z"',3)+
+    coloringPart("path","robot-head",'d="M 313 103 C 334 80 466 80 487 103 V 211 C 467 233 333 233 313 211 Z"')+
+    coloringPart("path","robot-face",'d="M 341 129 H 459 V 190 C 441 208 359 208 341 190 Z"',2)+
+    coloringPart("circle","robot-eye-left",'cx="373" cy="160" r="14"',3)+
+    coloringPart("circle","robot-eye-right",'cx="427" cy="160" r="14"',3)+
+    coloringPart("circle","robot-button-a",'cx="356" cy="421" r="13"',2)+
+    coloringPart("circle","robot-button-b",'cx="400" cy="421" r="13"',3)+
+    coloringPart("circle","robot-button-c",'cx="444" cy="421" r="13"',3)+
+    coloringLine("path",'d="M 400 82 V 46 H 435 M 358 350 L 382 370 L 414 328 L 445 356 M 382 188 Q 400 198 418 188 M 335 548 H 384 M 416 548 H 469" fill="none"',2)+
+    coloringDot(373,160,4)+coloringDot(427,160,4)
+  )+
+  coloringFigure("workshop-gears",
+    coloringPart("path","gear-a",'d="M 95 184 L 85 153 L 108 137 L 104 107 L 132 101 L 143 73 L 171 83 L 193 62 L 214 84 L 245 77 L 254 106 L 283 114 L 276 143 L 297 164 L 276 186 L 284 216 L 254 225 L 246 254 L 216 247 L 195 269 L 173 249 L 144 258 L 133 229 L 104 221 L 111 192 Z"',2)+
+    coloringPart("circle","gear-a-center",'cx="191" cy="165" r="38"',2)+
+    coloringPart("path","gear-b",'d="M 598 219 L 586 193 L 605 176 L 600 150 L 626 143 L 635 118 L 660 127 L 681 108 L 699 129 L 727 124 L 734 151 L 759 160 L 749 185 L 766 207 L 743 224 L 744 252 L 717 256 L 703 280 L 680 266 L 656 280 L 640 258 L 613 257 L 612 230 Z"',3)+
+    coloringPart("circle","gear-b-center",'cx="677" cy="197" r="31"',3)
+  )+
+  coloringLine("path",'d="M 22 534 H 104 M 696 534 H 777" fill="none"',3)
+)}
+
+function proCanalStreet(){return coloringScene(
+  coloringPart("rect","canal-sky",'x="4" y="4" width="792" height="592" rx="28"')+
+  coloringFigure("canal-houses",
+    coloringPart("path","canal-house-a",'d="M 45 185 H 223 V 458 H 45 Z"')+
+    coloringPart("path","canal-roof-a",'d="M 26 190 L 134 75 L 242 190 Z"')+
+    coloringPart("path","canal-house-b",'d="M 223 139 H 417 V 458 H 223 Z"',2)+
+    coloringPart("path","canal-roof-b",'d="M 244 139 C 258 81 300 55 320 55 C 340 55 382 81 396 139 Z"',2)+
+    coloringPart("path","canal-house-c",'d="M 417 181 H 609 V 458 H 417 Z"')+
+    coloringPart("path","canal-roof-c",'d="M 400 184 L 438 112 H 588 L 625 184 Z"',2)+
+    coloringPart("path","canal-house-d",'d="M 609 217 H 769 V 458 H 609 Z"',3)+
+    coloringPart("path","canal-roof-d",'d="M 592 220 L 689 129 L 786 220 Z"',3)+
+    coloringPart("path","canal-door-a",'d="M 101 371 C 101 342 114 328 134 328 C 154 328 167 342 167 371 V 458 H 101 Z"')+
+    coloringPart("path","canal-door-b",'d="M 288 371 C 288 342 301 328 320 328 C 339 328 352 342 352 371 V 458 H 288 Z"',2)+
+    coloringPart("path","canal-door-c",'d="M 480 371 C 480 342 493 328 513 328 C 533 328 546 342 546 371 V 458 H 480 Z"',2)+
+    coloringPart("path","canal-door-d",'d="M 657 382 C 657 353 669 338 689 338 C 709 338 721 353 721 382 V 458 H 657 Z"',3)+
+    coloringLine("path",'d="M 74 230 H 116 V 289 H 74 Z M 151 230 H 193 V 289 H 151 Z M 74 302 H 116 V 353 H 74 Z M 151 302 H 193 V 353 H 151 Z M 251 178 H 299 V 245 H 251 Z M 341 178 H 389 V 245 H 341 Z M 251 264 H 299 V 324 H 251 Z M 341 264 H 389 V 324 H 341 Z M 446 224 H 494 V 286 H 446 Z M 532 224 H 580 V 286 H 532 Z M 446 303 H 494 V 351 H 446 Z M 532 303 H 580 V 351 H 532 Z M 636 260 H 676 V 312 H 636 Z M 704 260 H 744 V 312 H 704 Z" fill="none"',2)
+  )+
+  coloringPart("path","canal-quay",'d="M 4 458 H 796 V 505 C 661 491 547 516 417 521 C 269 527 139 490 4 510 Z"')+
+  coloringPart("path","canal-water",'d="M 4 505 C 135 487 269 527 417 521 C 547 516 661 491 796 505 V 596 H 4 Z"',2)+
+  coloringFigure("canal-bridge",
+    coloringPart("path","canal-bridge",'d="M 529 500 C 572 445 673 433 738 486 L 738 526 C 673 479 590 488 550 540 Z"',2)+
+    coloringLine("path",'d="M 551 508 C 599 461 681 457 727 495 M 575 486 V 520 M 614 465 V 503 M 655 457 V 494 M 696 466 V 500" fill="none"',3)
+  )+
+  coloringFigure("canal-boat",
+    coloringPart("path","canal-boat-hull",'d="M 103 536 H 329 C 314 572 286 583 215 583 C 151 583 121 570 103 536 Z"')+
+    coloringPart("path","canal-boat-cabin",'d="M 160 489 H 273 L 297 536 H 139 Z"',2)+
+    coloringPart("path","canal-boat-window",'d="M 180 502 H 247 L 261 528 H 167 Z"',3)
+  )+
+  coloringLine("path",'d="M 20 560 C 63 550 86 553 116 561 M 350 563 C 408 546 466 551 518 566" fill="none"',3)
+)}

public/js/widgets/coloring.js

@@ -19,11 +19,30 @@ function coloringLine(tag,attrs="",level=1){
 }
 function coloringScene(content){
   return `<svg class="coloring-sheet" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-    <g class="coloring-svg-lines" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke="#26344a" stroke-width="5.6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2">
+    <g class="coloring-svg-lines" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" stroke="#26344a" stroke-width="4.8" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2">
       ${content}
     </g>
   </svg>`;
 }
+function coloringFigure(id,content,attrs=""){
+  return `<g class="coloring-figure" data-figure="${id}"${attrs?` ${attrs}`:""}>${content}</g>`;
+}
+function coloringDot(cx,cy,r=5,level=1){
+  return coloringLine("circle",`cx="${cx}" cy="${cy}" r="${r}" fill="#26344a" stroke="none"`,level);
+}
+function coloringCloud(id,x,y,scale=1,level=1){
+  return coloringPart("path",id,`d="M 0 38 C 2 18 20 6 39 13 C 48 -8 82 -10 94 13 C 118 4 140 18 141 40 C 139 57 125 64 105 64 H 28 C 10 64 -1 55 0 38 Z" transform="translate(${x} ${y}) scale(${scale})"`,level);
+}
+function coloringLeaf(id,x,y,angle=0,scale=1,level=2){
+  return coloringPart("path",id,`d="M -27 0 C -12 -24 16 -25 30 0 C 14 24 -12 24 -27 0 Z" transform="translate(${x} ${y}) rotate(${angle}) scale(${scale})"`,level);
+}
+function coloringFlower(cx,cy,prefix,scale=1,level=2){
+  const petals=[-90,-18,54,126,198].map((angle,index)=>{
+    const rad=angle*Math.PI/180,x=cx+Math.cos(rad)*25*scale,y=cy+Math.sin(rad)*25*scale;
+    return coloringPart("path",`${prefix}-petal-${index}`,`d="M ${cx} ${cy} C ${(cx-17*scale).toFixed(1)} ${(cy-20*scale).toFixed(1)} ${(x-15*scale).toFixed(1)} ${(y-16*scale).toFixed(1)} ${x.toFixed(1)} ${y.toFixed(1)} C ${(x+15*scale).toFixed(1)} ${(y+16*scale).toFixed(1)} ${(cx+17*scale).toFixed(1)} ${(cy+20*scale).toFixed(1)} ${cx} ${cy} Z"`,level);
+  }).join("");
+  return petals+coloringPart("circle",`${prefix}-heart`,`cx="${cx}" cy="${cy}" r="${15*scale}"`,level);
+}
 function coloringPetals(cx,cy,prefix,level=2){
   return [0,60,120,180,240,300].map((angle,index)=>{
     const rad=angle*Math.PI/180,x=(cx+Math.cos(rad)*27).toFixed(1),y=(cy+Math.sin(rad)*27).toFixed(1);
@@ -312,39 +331,38 @@ const COLORING_REFINEMENTS=Object.freeze({
     coloringLine("path",'d="M 570 255 H 600 M 568 280 H 602 M 570 305 H 600 M 220 500 Q 405 540 585 500" fill="none"',3)
 });
 function coloringRefined(id,svg){
-  const details=COLORING_REFINEMENTS[id]||"";
+  return svg.replace('class="coloring-sheet"',`class="coloring-sheet" data-scene="${id}"`);
-  return svg.replace("\n    </g>\n  </svg>",`\n      <g class="coloring-recognition" data-scene="${id}">${details}</g>\n    </g>\n  </svg>`);
 }
 
 const COLORING_PAGES=Object.freeze([
-  {id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:coloringRefined("butterfly",sceneButterfly())},
+  {id:"butterfly",theme:"animals",years:[1,2],title:{nl:"Blije vlinder",en:"Happy butterfly"},svg:coloringRefined("butterfly",proButterfly())},
-  {id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:coloringRefined("autumn",sceneAutumn())},
+  {id:"autumn",theme:"seasons",years:[1,2],title:{nl:"Herfstboom",en:"Autumn tree"},svg:coloringRefined("autumn",proAutumn())},
-  {id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:coloringRefined("cake",sceneCake())},
+  {id:"cake",theme:"culture",years:[1,2],title:{nl:"Feesttaart",en:"Party cake"},svg:coloringRefined("cake",proCake())},
-  {id:"farmyard",theme:"animals",years:[1,2],title:{nl:"Boerderijvrienden",en:"Farmyard friends"},svg:coloringRefined("farmyard",sceneFarmyard())},
+  {id:"farmyard",theme:"animals",years:[1,2],title:{nl:"Boerderijvrienden",en:"Farmyard friends"},svg:coloringRefined("farmyard",proFarmyard())},
-  {id:"rainbow-weather",theme:"seasons",years:[1,2],title:{nl:"Regenboogweer",en:"Rainbow weather"},svg:coloringRefined("rainbow-weather",sceneRainbowWeather())},
+  {id:"rainbow-weather",theme:"seasons",years:[1,2],title:{nl:"Regenboogweer",en:"Rainbow weather"},svg:coloringRefined("rainbow-weather",proRainbowWeather())},
-  {id:"construction-site",theme:"science",years:[1,2],title:{nl:"Grote graafmachine",en:"Big excavator"},svg:coloringRefined("construction-site",sceneConstruction())},
+  {id:"construction-site",theme:"science",years:[1,2],title:{nl:"Grote graafmachine",en:"Big excavator"},svg:coloringRefined("construction-site",proConstruction())},
-  {id:"forest-picnic",theme:"nature",years:[1,2],title:{nl:"Picknick in het bos",en:"Forest picnic"},svg:coloringRefined("forest-picnic",sceneForestPicnic())},
+  {id:"forest-picnic",theme:"nature",years:[1,2],title:{nl:"Picknick in het bos",en:"Forest picnic"},svg:coloringRefined("forest-picnic",proForestPicnic())},
-  {id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:coloringRefined("ocean",sceneOcean())},
+  {id:"ocean",theme:"animals",years:[3,4],title:{nl:"Vrienden in zee",en:"Ocean friends"},svg:coloringRefined("ocean",proOcean())},
-  {id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:coloringRefined("garden",sceneGarden())},
+  {id:"garden",theme:"nature",years:[3,4],title:{nl:"Kleine tuindieren",en:"Little garden animals"},svg:coloringRefined("garden",proGarden())},
-  {id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:coloringRefined("windmill",sceneWindmill())},
+  {id:"windmill",theme:"culture",years:[3,4],title:{nl:"Molen in de polder",en:"Windmill in the polder"},svg:coloringRefined("windmill",proWindmill())},
-  {id:"dinosaur-valley",theme:"science",years:[3,4],title:{nl:"Dinosaurusvallei",en:"Dinosaur valley"},svg:coloringRefined("dinosaur-valley",sceneDinosaurValley())},
+  {id:"dinosaur-valley",theme:"science",years:[3,4],title:{nl:"Dinosaurusvallei",en:"Dinosaur valley"},svg:coloringRefined("dinosaur-valley",proDinosaurValley())},
-  {id:"spring-nest",theme:"seasons",years:[3,4],title:{nl:"Vogelnest in de lente",en:"Spring bird nest"},svg:coloringRefined("spring-nest",sceneSpringNest())},
+  {id:"spring-nest",theme:"seasons",years:[3,4],title:{nl:"Vogelnest in de lente",en:"Spring bird nest"},svg:coloringRefined("spring-nest",proSpringNest())},
-  {id:"fire-station",theme:"culture",years:[3,4],title:{nl:"Brandweerkazerne",en:"Fire station"},svg:coloringRefined("fire-station",sceneFireStation())},
+  {id:"fire-station",theme:"culture",years:[3,4],title:{nl:"Brandweerkazerne",en:"Fire station"},svg:coloringRefined("fire-station",proFireStation())},
-  {id:"bee-meadow",theme:"nature",years:[3,4],title:{nl:"Bijen in de bloemenwei",en:"Bees in the meadow"},svg:coloringRefined("bee-meadow",sceneBeeMeadow())},
+  {id:"bee-meadow",theme:"nature",years:[3,4],title:{nl:"Bijen in de bloemenwei",en:"Bees in the meadow"},svg:coloringRefined("bee-meadow",proBeeMeadow())},
-  {id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:coloringRefined("rocket",sceneRocket())},
+  {id:"rocket",theme:"science",years:[5,6],title:{nl:"Raket door de ruimte",en:"Rocket through space"},svg:coloringRefined("rocket",proRocket())},
-  {id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:coloringRefined("rainforest",sceneRainforest())},
+  {id:"rainforest",theme:"nature",years:[5,6],title:{nl:"Regenwoud",en:"Rainforest"},svg:coloringRefined("rainforest",proRainforest())},
-  {id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:coloringRefined("castle",sceneCastle())},
+  {id:"castle",theme:"culture",years:[5,6],title:{nl:"Kasteel en dorp",en:"Castle and village"},svg:coloringRefined("castle",proCastle())},
-  {id:"coral-reef",theme:"animals",years:[5,6],title:{nl:"Koraalrif",en:"Coral reef"},svg:coloringRefined("coral-reef",sceneCoralReef())},
+  {id:"coral-reef",theme:"animals",years:[5,6],title:{nl:"Koraalrif",en:"Coral reef"},svg:coloringRefined("coral-reef",proCoralReef())},
-  {id:"mountain-camp",theme:"seasons",years:[5,6],title:{nl:"Bergkamp",en:"Mountain camp"},svg:coloringRefined("mountain-camp",sceneMountainCamp())},
+  {id:"mountain-camp",theme:"seasons",years:[5,6],title:{nl:"Bergkamp",en:"Mountain camp"},svg:coloringRefined("mountain-camp",proMountainCamp())},
-  {id:"robot-workshop",theme:"science",years:[5,6],title:{nl:"Robotwerkplaats",en:"Robot workshop"},svg:coloringRefined("robot-workshop",sceneRobotWorkshop())},
+  {id:"robot-workshop",theme:"science",years:[5,6],title:{nl:"Robotwerkplaats",en:"Robot workshop"},svg:coloringRefined("robot-workshop",proRobotWorkshop())},
-  {id:"canal-street",theme:"culture",years:[5,6],title:{nl:"Straat langs de gracht",en:"Canal street"},svg:coloringRefined("canal-street",sceneCanalStreet())},
+  {id:"canal-street",theme:"culture",years:[5,6],title:{nl:"Straat langs de gracht",en:"Canal street"},svg:coloringRefined("canal-street",proCanalStreet())},
-  {id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:coloringRefined("four-seasons",sceneFourSeasons())},
+  {id:"four-seasons",theme:"seasons",years:[7,8],title:{nl:"Boom van vier seizoenen",en:"Four seasons tree"},svg:coloringRefined("four-seasons",proFourSeasons())},
-  {id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:coloringRefined("eco-city",sceneEcoCity())},
+  {id:"eco-city",theme:"science",years:[7,8],title:{nl:"Duurzame stad",en:"Sustainable city"},svg:coloringRefined("eco-city",proEcoCity())},
-  {id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:coloringRefined("mandala",sceneMandala())},
+  {id:"mandala",theme:"culture",years:[7,8],title:{nl:"Geometrische mandala",en:"Geometric mandala"},svg:coloringRefined("mandala",proMandala())},
-  {id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:coloringRefined("ecosystem",sceneEcosystem())},
+  {id:"ecosystem",theme:"nature",years:[7,8],title:{nl:"Leven rond de vijver",en:"Life around the pond"},svg:coloringRefined("ecosystem",proEcosystem())},
-  {id:"solar-observatory",theme:"science",years:[7,8],title:{nl:"Sterrenwacht",en:"Solar observatory"},svg:coloringRefined("solar-observatory",sceneSolarObservatory())},
+  {id:"solar-observatory",theme:"science",years:[7,8],title:{nl:"Sterrenwacht",en:"Solar observatory"},svg:coloringRefined("solar-observatory",proSolarObservatory())},
-  {id:"savanna-web",theme:"animals",years:[7,8],title:{nl:"Leven op de savanne",en:"Life on the savanna"},svg:coloringRefined("savanna-web",sceneSavannaWeb())},
+  {id:"savanna-web",theme:"animals",years:[7,8],title:{nl:"Leven op de savanne",en:"Life on the savanna"},svg:coloringRefined("savanna-web",proSavannaWeb())},
-  {id:"japanese-garden",theme:"culture",years:[7,8],title:{nl:"Japanse tuin",en:"Japanese garden"},svg:coloringRefined("japanese-garden",sceneJapaneseGarden())}
+  {id:"japanese-garden",theme:"culture",years:[7,8],title:{nl:"Japanse tuin",en:"Japanese garden"},svg:coloringRefined("japanese-garden",proJapaneseGarden())}
 ]);
 
 function coloringPagesFor(yearGroup,theme="all"){
@@ -360,7 +378,7 @@ function coloringSafeColor(value,fallback=COLORING_COLORS[1]){
 }
 function coloringInkOverlay(svg){
   const overlay=svg.cloneNode(true);overlay.setAttribute("class","coloring-ink-svg coloring-ink-overlay");
-  overlay.querySelectorAll(".coloring-detail,.coloring-recognition").forEach(node=>node.remove());
+  overlay.querySelectorAll(".coloring-recognition").forEach(node=>node.remove());
   overlay.querySelectorAll("[data-fillable]").forEach(node=>{
     node.removeAttribute("data-fillable");node.removeAttribute("data-part");node.setAttribute("fill","#fff");
   });

test/coloring.test.js

@@ -4,9 +4,12 @@ import {readFile} from 'node:fs/promises';
 import {runInNewContext} from 'node:vm';
 
 async function coloringContext(){
-  const [extra,widget]=await Promise.all([
+  const files=[
-    readFile('public/js/widgets/coloring-scenes-extra.js','utf8'),readFile('public/js/widgets/coloring.js','utf8')
+    'public/js/widgets/coloring-scenes-junior.js','public/js/widgets/coloring-scenes-middle.js',
-  ]),source=extra+'\n'+widget;
+    'public/js/widgets/coloring-scenes-senior.js','public/js/widgets/coloring-scenes-advanced.js',
+    'public/js/widgets/coloring.js'
+  ];
+  const source=(await Promise.all(files.map(file=>readFile(file,'utf8')))).join('\n');
   const context={};
   runInNewContext(source+`;
     globalThis.__coloring={
@@ -25,8 +28,10 @@ test('kleurplatenwidget laadt vóór het bord en is als creatieve leerlingwidget
     readFile('public/js/pupil.js','utf8'),readFile('public/js/cast.js','utf8'),
     readFile('public/js/core.js','utf8'),readFile('public/css/coloring.css','utf8')
   ]);
-  assert.ok(html.indexOf('js/widgets/coloring-scenes-extra.js')>0);
+  for(const name of ['junior','middle','senior','advanced']){
-  assert.ok(html.indexOf('js/widgets/coloring-scenes-extra.js')<html.indexOf('js/widgets/coloring.js'));
+    assert.ok(html.indexOf(`js/widgets/coloring-scenes-${name}.js`)>0);
+    assert.ok(html.indexOf(`js/widgets/coloring-scenes-${name}.js`)<html.indexOf('js/widgets/coloring.js'));
+  }
   assert.ok(html.indexOf('js/widgets/coloring.js')>0);
   assert.ok(html.indexOf('js/widgets/coloring.js')<html.indexOf('js/board.js'));
   assert.match(html,/css\/coloring\.css\?v=__V__/);
@@ -62,12 +67,14 @@ test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en d
     assert.ok(page.title.nl&&page.title.en,page.id+' heeft een tweetalige titel');
     const parts=[...page.svg.matchAll(/data-part="([^"]+)"/g)].map(match=>match[1]);
     const details=(page.svg.match(/class="coloring-detail"/g)||[]).length;
+    const figures=(page.svg.match(/class="coloring-figure"/g)||[]).length;
     const openFillablePaths=[...page.svg.matchAll(/<path\b[^>]*data-fillable="true"[^>]*data-part="([^"]+)"[^>]* d="([^"]+)"/g)]
       .filter(match=>!/[zZ]\s*$/.test(match[2])).map(match=>match[1]);
-    assert.ok(parts.length>=14,page.id+' heeft voldoende afzonderlijke kleurvakken');
+    assert.ok(parts.length>=12,page.id+' heeft voldoende afzonderlijke kleurvakken');
     assert.equal(new Set(parts).size,parts.length,page.id+' heeft unieke kleurvakken');
     assert.deepEqual(openFillablePaths,[],page.id+' heeft alleen gesloten aanklikbare paden');
-    assert.ok(details>=4,page.id+' heeft voldoende herkenbaar binnenlijnwerk');
+    assert.ok(details>=1,page.id+' heeft herkenbaar, begrensd binnenlijnwerk');
+    assert.ok(figures>=1,page.id+' groepeert onderdelen tot samenhangende figuren');
     assert.match(page.svg,/class="coloring-sheet"[^>]*preserveAspectRatio="xMidYMid meet"/);
     assert.match(page.svg,/data-role="backdrop"/,page.id+' heeft een subtiel buitenkader');
     assert.match(page.svg,new RegExp(`data-scene="${page.id}"`));
@@ -77,28 +84,28 @@ test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en d
   }
   const landmarks={
     farmyard:['barn','cow-body','cow-head','cow-horn-left','cow-tail'],
-    'rainbow-weather':['umbrella-outer-left','umbrella-inner-right','boot-left'],
+    'rainbow-weather':['umbrella-left','umbrella-middle','umbrella-right','boot-left'],
     'construction-site':['digger-body','bucket','bucket-tooth-a'],
     ocean:['fish-body','turtle-shell','turtle-tail'],
     rainforest:['forest-canopy-left','parrot-body','parrot-branch'],
-    'dinosaur-valley':['volcano','dino-body','dino-head','dino-tail'],
+    'dinosaur-valley':['volcano','dino-body','dino-leg-0','dino-plate-0'],
     'fire-station':['engine-body','engine-ladder','engine-hose-reel'],
     'coral-reef':['clownfish-body','coral-red','anemone-base','reef-starfish'],
     'savanna-web':['lion-mane','zebra-neck','zebra-muzzle','zebra-leg-0'],
-    'robot-workshop':['robot-head','robot-body','robot-arm-a','gear-a'],
+    'robot-workshop':['robot-head','robot-body','robot-arm-left','gear-a'],
-    'japanese-garden':['pagoda-base','bridge','cherry-trunk','koi-a']
+    'japanese-garden':['pagoda-base','bridge-deck','cherry-trunk','koi-body']
   };
   for(const [id,names] of Object.entries(landmarks)){
     const page=pages.find(item=>item.id===id);
     names.forEach(name=>assert.ok(page.svg.includes(`data-part="${name}"`),`${id} mist ${name}`));
   }
   const organicContours={
-    butterfly:['wing-left-top','body'],ocean:['fish-body','turtle-shell'],garden:['snail-body','ladybird'],
+    butterfly:['wing-left-top','butterfly-abdomen'],ocean:['fish-body','turtle-shell'],garden:['snail-body','ladybird-body'],
     farmyard:['cow-body','cow-head'],'forest-picnic':['rabbit-body','rabbit-head'],
-    'dinosaur-valley':['dino-body','dino-neck','dino-head'],'spring-nest':['bird-body','bird-head'],
+    'dinosaur-valley':['dino-body'],'spring-nest':['bird-body','bird-head'],
-    'bee-meadow':['bee-body','bee-head'],'coral-reef':['clownfish-body','seahorse-body'],
+    'bee-meadow':['bee-abdomen','bee-head'],'coral-reef':['clownfish-body','seahorse-body'],
     'savanna-web':['lion-body','lion-mane','zebra-body','zebra-head'],rainforest:['parrot-body','parrot-head'],
-    ecosystem:['frog-body'],rocket:['rocket-body'],'fire-station':['engine-body']
+    ecosystem:['frog-body'],rocket:['rocket-body'],'fire-station':['engine-chassis']
   };
   for(const [id,names] of Object.entries(organicContours)){
     const page=pages.find(item=>item.id===id);
@@ -110,19 +117,19 @@ test('elk leerjaar heeft zeven herkenbare kleurplaten met diverse thema’s en d
   }
   const paintOrder={
     farmyard:['cow-tail','cow-leg-0','cow-body','cow-head','cow-snout'],
-    'forest-picnic':['rabbit-tail','rabbit-ear-a','rabbit-body','rabbit-hind-leg','rabbit-head'],
+    'forest-picnic':['rabbit-tail','rabbit-hind-leg','rabbit-ear-back','rabbit-body','rabbit-head'],
-    'dinosaur-valley':['dino-tail','dino-leg-0','dino-plate-0','dino-body','dino-neck','dino-head'],
+    'dinosaur-valley':['dino-leg-0','dino-plate-0','dino-body','dino-belly'],
     'spring-nest':['bird-tail-a','bird-body','bird-wing','bird-head','bird-beak'],
-    ocean:['fish-tail','fish-top-fin','fish-body','turtle-tail','flipper-0','turtle-shell','turtle-head'],
+    ocean:['fish-tail','fish-top-fin','fish-body','turtle-tail','turtle-back-flipper','turtle-shell','turtle-head'],
-    'bee-meadow':['bee-wing-a','bee-body','bee-stripe-a','bee-head'],
+    'bee-meadow':['bee-wing-back','bee-abdomen','bee-stripe-a','bee-head'],
     'coral-reef':['clownfish-tail','clownfish-fin-top','clownfish-body','seahorse-fin','seahorse-body'],
     'savanna-web':['lion-tail','lion-leg-0','lion-body','lion-mane','zebra-tail','zebra-leg-0','zebra-body','zebra-neck','zebra-head'],
-    rainforest:['parrot-branch','parrot-tail','parrot-body','parrot-wing','parrot-head','parrot-beak'],
+    rainforest:['parrot-branch','parrot-tail-long','parrot-body','parrot-wing','parrot-head','parrot-beak'],
     ecosystem:['frog-leg-a','frog-body','frog-eye-a'],
     rocket:['flame-outer','rocket-left-fin','rocket-body','rocket-window'],
-    'fire-station':['engine-wheel-a','engine-body','engine-cab','engine-hub-a'],
+    'fire-station':['engine-chassis','engine-body','engine-cab','engine-ladder','engine-wheel-a','engine-hub-a'],
-    'robot-workshop':['robot-arm-a','robot-leg-a','robot-neck','robot-head','robot-body'],
+    'robot-workshop':['robot-leg-left','robot-arm-left','robot-body','robot-neck','robot-head'],
-    windmill:['mill-body','mill-roof','sail-0','mill-hub']
+    windmill:['mill-body','mill-roof','sail-north','mill-hub']
   };
   for(const [id,names] of Object.entries(paintOrder)){
     const page=pages.find(item=>item.id===id),positions=names.map(name=>page.svg.indexOf(`data-part="${name}"`));
@@ -147,21 +154,23 @@ test('kwast reageert op pendruk en één gemaskeerde contourlaag houdt alleen bu
   assert.match(source,/class="coloring-art"><\/div><canvas[^>]+><\/canvas><div class="coloring-ink" aria-hidden="true"><\/div>/);
   assert.match(source,/coloringInkOverlay\(svg\)/);
   assert.match(source,/const overlay=svg\.cloneNode\(true\)/);
-  assert.match(source,/overlay\.querySelectorAll\("\.coloring-detail,\.coloring-recognition"\)\.forEach\(node=>node\.remove\(\)\)/);
+  assert.match(source,/overlay\.querySelectorAll\("\.coloring-recognition"\)\.forEach\(node=>node\.remove\(\)\)/);
+  assert.doesNotMatch(source,/overlay\.querySelectorAll\("\.coloring-detail/);
   assert.match(source,/node\.removeAttribute\("data-fillable"\)/);
   assert.match(source,/node\.setAttribute\("fill","#fff"\)/);
   assert.match(source,/inkHost\.replaceChildren\(coloringInkOverlay\(svg\)\)/);
   assert.doesNotMatch(source,/coloring-ink-halo|feMorphology|feColorMatrix/);
   assert.match(source,/class="coloring-region" data-fillable="true"/);
   assert.match(source,/class="coloring-sheet"[^>]*preserveAspectRatio="xMidYMid meet"/);
-  assert.match(source,/fill-rule="evenodd" clip-rule="evenodd"[^>]*stroke-width="5\.6"[^>]*stroke-miterlimit="2"/);
+  assert.match(source,/fill-rule="evenodd" clip-rule="evenodd"[^>]*stroke-width="4\.8"[^>]*stroke-miterlimit="2"/);
   assert.match(css,/\.coloring-svg-lines\{shape-rendering:geometricPrecision\}/);
-  assert.match(css,/\.coloring-region\[data-role="backdrop"\]\{stroke-width:3\.2\}/);
+  assert.match(css,/\.coloring-region\[data-role="backdrop"\]\{stroke-width:2\.8\}/);
   assert.match(css,/\.coloring-art\{z-index:1\}\.coloring-paper canvas\{z-index:2\}\.coloring-ink\{z-index:3;pointer-events:none\}/);
   assert.match(css,/\.coloring-svg-lines \.coloring-recognition\{display:none\}/);
   assert.match(css,/\.coloring-ink-overlay\{pointer-events:none;shape-rendering:geometricPrecision;mix-blend-mode:multiply\}/);
-  assert.match(css,/\.coloring-ink-svg \.coloring-region\{fill:#fff!important;stroke:var\(--coloring-ink\);stroke-width:5\.6;stroke-opacity:1\}/);
+  assert.match(css,/\.coloring-ink-svg \.coloring-region\{fill:#fff!important;stroke:var\(--coloring-ink\);stroke-width:4\.8;stroke-opacity:1;paint-order:fill stroke\}/);
-  assert.doesNotMatch(css,/coloring-ink-halo|\.coloring-ink-svg \.coloring-detail/);
+  assert.match(css,/\.coloring-ink-svg \.coloring-detail\{stroke:var\(--coloring-detail\);stroke-width:2\.4/);
+  assert.doesNotMatch(css,/coloring-ink-halo/);
   assert.match(css,/\.coloring-app\[data-tool="bucket"\] \.coloring-paper canvas\{pointer-events:none\}/);
   assert.match(source,/canvas\.style\.pointerEvents=tool==="bucket"\?"none":"auto";art\.style\.pointerEvents=tool==="bucket"\?"auto":"none"/);
   assert.match(source,/className="coloring-tool-label"/);