teach/public/js/widgets/coloring-scenes-middle.js
Ramon 6a08cee75c
All checks were successful
dev - build & deploy naar test / build-and-deploy (push) Successful in 39s
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
2026-07-29 15:44:38 +02:00

197 lines
17 KiB
JavaScript

/* 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)
)}