The repo for Purrform's main BigCommerce store.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: update grimace scale page name and replace SVGs with images

+25 -184
+1 -1
config.json
··· 1 1 { 2 - "name": "grimace scale page - attribution", 2 + "name": "grimace scale page - new images", 3 3 "version": "6.10.0", 4 4 "template_engine": "handlebars_v4", 5 5 "meta": {
+24 -183
templates/pages/custom/page/feline-grimace-scale.html
··· 253 253 margin-bottom: 12px; 254 254 } 255 255 256 + .cat-illustration img { 257 + width: 100%; 258 + height: 100%; 259 + object-fit: contain; 260 + display: block; 261 + mix-blend-mode: multiply; 262 + } 263 + 256 264 .option-label { 257 265 font-size: 0.8rem; 258 266 font-weight: 600; ··· 563 571 options: [ 564 572 { 565 573 score: 0, label: 'Ears facing forward', sublabel: 'Absent', 566 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 567 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 568 - <polygon points="32,36 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 569 - <polygon points="78,36 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 570 - <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 571 - <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 572 - <path d="M47 66 Q55 72 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 573 - <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 574 - <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 575 - <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 576 - <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 577 - </svg>` 574 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-0.jpg?t=1771863537" alt="Ear position - absent" loading="lazy">` 578 575 }, 579 576 { 580 577 score: 1, label: 'Ears slightly pulled apart', sublabel: 'Moderately present or uncertain', 581 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 582 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 583 - <polygon points="32,36 16,18 40,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 584 - <polygon points="78,36 94,18 70,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 585 - <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 586 - <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 587 - <path d="M47 66 Q55 71 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 588 - <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 589 - <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 590 - <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 591 - <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 592 - </svg>` 578 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-1.jpg?t=1771863537" alt="Ear position - moderately present" loading="lazy">` 593 579 }, 594 580 { 595 581 score: 2, label: 'Ears rotated outwards', sublabel: 'Markedly present', 596 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 597 - <ellipse cx="55" cy="55" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 598 - <polygon points="30,38 10,30 36,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 599 - <polygon points="80,38 100,30 74,34" fill="#edf1ec" stroke="#546052" stroke-width="1.5" stroke-linejoin="round"/> 600 - <circle cx="44" cy="53" r="5" fill="#546052" opacity="0.7"/> 601 - <circle cx="66" cy="53" r="5" fill="#546052" opacity="0.7"/> 602 - <path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 603 - <line x1="38" y1="56" x2="24" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 604 - <line x1="38" y1="59" x2="23" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 605 - <line x1="72" y1="56" x2="86" y2="52" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 606 - <line x1="72" y1="59" x2="87" y2="59" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 607 - </svg>` 582 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-a-ear-position-2.jpg?t=1771863538" alt="Ear position - markedly present" loading="lazy">` 608 583 } 609 584 ] 610 585 }, ··· 614 589 options: [ 615 590 { 616 591 score: 0, label: 'Eyes opened', sublabel: 'Absent', 617 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 618 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 619 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 620 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 621 - <ellipse cx="42" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/> 622 - <ellipse cx="68" cy="50" rx="8" ry="8" fill="white" stroke="#546052" stroke-width="1.5"/> 623 - <circle cx="42" cy="50" r="4" fill="#2a3329"/> 624 - <circle cx="68" cy="50" r="4" fill="#2a3329"/> 625 - <circle cx="44" cy="48" r="1.5" fill="white"/> 626 - <circle cx="70" cy="48" r="1.5" fill="white"/> 627 - <path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 628 - </svg>` 592 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-0.jpg?t=1771863539" alt="Orbital tightening - absent" loading="lazy">` 629 593 }, 630 594 { 631 595 score: 1, label: 'Partially closed eyes', sublabel: 'Moderately present or uncertain', 632 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 633 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 634 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 635 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 636 - <ellipse cx="42" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/> 637 - <ellipse cx="68" cy="50" rx="8" ry="5.5" fill="white" stroke="#546052" stroke-width="1.5"/> 638 - <circle cx="42" cy="51" r="3.5" fill="#2a3329"/> 639 - <circle cx="68" cy="51" r="3.5" fill="#2a3329"/> 640 - <line x1="34" y1="45" x2="50" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/> 641 - <line x1="60" y1="45" x2="76" y2="45" stroke="#546052" stroke-width="1.8" stroke-linecap="round"/> 642 - <path d="M47 65 Q55 70 63 65" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 643 - </svg>` 596 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-1.jpg?t=1771863539" alt="Orbital tightening - moderately present" loading="lazy">` 644 597 }, 645 598 { 646 599 score: 2, label: 'Squinted eyes', sublabel: 'Markedly present', 647 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 648 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 649 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 650 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 651 - <ellipse cx="42" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/> 652 - <ellipse cx="68" cy="52" rx="8" ry="3" fill="white" stroke="#546052" stroke-width="1.5"/> 653 - <circle cx="42" cy="52" r="2" fill="#2a3329"/> 654 - <circle cx="68" cy="52" r="2" fill="#2a3329"/> 655 - <line x1="34" y1="49" x2="50" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/> 656 - <line x1="60" y1="49" x2="76" y2="49" stroke="#546052" stroke-width="2" stroke-linecap="round"/> 657 - <path d="M47 66 Q55 70 63 66" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 658 - </svg>` 600 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-b-orbital-tightening-2.jpg?t=1771863540" alt="Orbital tightening - markedly present" loading="lazy">` 659 601 } 660 602 ] 661 603 }, ··· 665 607 options: [ 666 608 { 667 609 score: 0, label: 'Relaxed (round shape)', sublabel: 'Absent', 668 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 669 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 670 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 671 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 672 - <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 673 - <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 674 - <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 675 - <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 676 - <path d="M 41,61 A 7,7 0 1,0 55,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 677 - <path d="M 55,61 A 7,7 0 1,0 69,61" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 678 - </svg>` 610 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-0.jpg?t=1771863541" alt="Muzzle tension - absent" loading="lazy">` 679 611 }, 680 612 { 681 613 score: 1, label: 'Mild tension', sublabel: 'Moderately present or uncertain', 682 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 683 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 684 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 685 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 686 - <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 687 - <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 688 - <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 689 - <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 690 - <path d="M 40,62 A 9,6 0 1,0 52,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 691 - <path d="M 58,62 A 9,6 0 1,0 70,62" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 692 - </svg>` 614 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-1.jpg?t=1771863542" alt="Muzzle tension - moderately present" loading="lazy">` 693 615 }, 694 616 { 695 617 score: 2, label: 'Tense (elliptical shape)', sublabel: 'Markedly present', 696 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 697 - <ellipse cx="55" cy="52" rx="30" ry="26" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 698 - <polygon points="32,34 22,14 44,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 699 - <polygon points="78,34 88,14 66,30" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 700 - <circle cx="44" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 701 - <circle cx="66" cy="47" r="4.5" fill="#546052" opacity="0.6"/> 702 - <ellipse cx="55" cy="58" rx="3" ry="2" fill="#546052" opacity="0.55"/> 703 - <line x1="55" y1="60" x2="55" y2="64" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 704 - <path d="M 39,63 A 10.5,4.5 0 1,0 53,63" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 705 - <path d="M 59,63 A 10.5,4.5 0 1,0 71,63" fill="#edf1ec" stroke="#546052" stroke-width="1.3" stroke-linecap="round"/> 706 - </svg>` 618 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-c-muzzle-tension-2.jpg?t=1771863542" alt="Muzzle tension - markedly present" loading="lazy">` 707 619 } 708 620 ] 709 621 }, ··· 713 625 options: [ 714 626 { 715 627 score: 0, label: 'Loose and curved', sublabel: 'Absent', 716 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 717 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 718 - <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 719 - <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 720 - <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 721 - <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 722 - <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 723 - <!-- curved whiskers --> 724 - <path d="M38 53 Q22 50 10 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 725 - <path d="M38 57 Q22 57 10 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 726 - <path d="M38 61 Q22 64 10 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 727 - <path d="M72 53 Q88 50 100 53" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 728 - <path d="M72 57 Q88 57 100 60" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 729 - <path d="M72 61 Q88 64 100 68" stroke="#546052" stroke-width="1.2" fill="none" stroke-linecap="round"/> 730 - </svg>` 628 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-0.jpg?t=1771863543" alt="Whiskers change - absent" loading="lazy">` 731 629 }, 732 630 { 733 631 score: 1, label: 'Slightly curved or straight (closer together)', sublabel: 'Moderately present or uncertain', 734 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 735 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 736 - <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 737 - <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 738 - <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 739 - <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 740 - <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 741 - <!-- straighter whiskers --> 742 - <line x1="38" y1="54" x2="10" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 743 - <line x1="38" y1="58" x2="10" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 744 - <line x1="38" y1="62" x2="10" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 745 - <line x1="72" y1="54" x2="100" y2="54" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 746 - <line x1="72" y1="58" x2="100" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 747 - <line x1="72" y1="62" x2="100" y2="63" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 748 - </svg>` 632 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-1.jpg?t=1771863544" alt="Whiskers change - moderately present" loading="lazy">` 749 633 }, 750 634 { 751 635 score: 2, label: 'Straight and moving forward', sublabel: 'Markedly present', 752 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 753 - <ellipse cx="55" cy="52" rx="28" ry="24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 754 - <polygon points="33,36 24,16 44,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 755 - <polygon points="77,36 86,16 66,32" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 756 - <circle cx="44" cy="51" r="4" fill="#546052" opacity="0.6"/> 757 - <circle cx="66" cy="51" r="4" fill="#546052" opacity="0.6"/> 758 - <path d="M47 64 Q55 69 63 64" stroke="#546052" stroke-width="1.5" fill="none" stroke-linecap="round"/> 759 - <!-- forward-pointing whiskers --> 760 - <line x1="38" y1="55" x2="6" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 761 - <line x1="38" y1="58" x2="6" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 762 - <line x1="38" y1="61" x2="6" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 763 - <line x1="72" y1="55" x2="104" y2="51" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 764 - <line x1="72" y1="58" x2="104" y2="58" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 765 - <line x1="72" y1="61" x2="104" y2="65" stroke="#546052" stroke-width="1.2" stroke-linecap="round"/> 766 - </svg>` 636 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-d-whiskers-change-2.jpg?t=1771863545" alt="Whiskers change - markedly present" loading="lazy">` 767 637 } 768 638 ] 769 639 }, ··· 773 643 options: [ 774 644 { 775 645 score: 0, label: 'Head above the shoulder line', sublabel: 'Absent', 776 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 777 - <!-- body --> 778 - <ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 779 - <!-- head high --> 780 - <ellipse cx="55" cy="40" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 781 - <polygon points="40,26 32,10 50,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 782 - <polygon points="70,26 78,10 60,24" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 783 - <circle cx="46" cy="40" r="4" fill="#546052" opacity="0.6"/> 784 - <circle cx="64" cy="40" r="4" fill="#546052" opacity="0.6"/> 785 - <!-- shoulder line dashes --> 786 - <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 787 - </svg>` 646 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-0.jpg?t=1771863545" alt="Head position - absent" loading="lazy">` 788 647 }, 789 648 { 790 649 score: 1, label: 'Head aligned with the shoulder line', sublabel: 'Moderately present or uncertain', 791 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 792 - <ellipse cx="55" cy="72" rx="32" ry="16" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 793 - <!-- head level --> 794 - <ellipse cx="55" cy="52" rx="22" ry="20" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 795 - <polygon points="40,38 32,20 50,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 796 - <polygon points="70,38 78,20 60,36" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 797 - <circle cx="46" cy="52" r="4" fill="#546052" opacity="0.6"/> 798 - <circle cx="64" cy="52" r="4" fill="#546052" opacity="0.6"/> 799 - <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 800 - </svg>` 650 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-1.jpg?t=1771863546" alt="Head position - moderately present" loading="lazy">` 801 651 }, 802 652 { 803 653 score: 2, label: 'Head below the shoulder line or tilted down', sublabel: 'Markedly present', 804 - svg: `<svg viewBox="0 0 110 90" fill="none" xmlns="http://www.w3.org/2000/svg"> 805 - <ellipse cx="55" cy="72" rx="32" ry="14" fill="#dce6da" stroke="#546052" stroke-width="1.5"/> 806 - <!-- head low/down --> 807 - <ellipse cx="55" cy="66" rx="22" ry="18" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 808 - <polygon points="40,52 33,34 50,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 809 - <polygon points="70,52 77,34 60,50" fill="#edf1ec" stroke="#546052" stroke-width="1.5"/> 810 - <circle cx="46" cy="65" r="4" fill="#546052" opacity="0.6"/> 811 - <circle cx="64" cy="65" r="4" fill="#546052" opacity="0.6"/> 812 - <line x1="10" y1="58" x2="100" y2="58" stroke="#aaa" stroke-width="1" stroke-dasharray="4,3"/> 813 - </svg>` 654 + img: `<img src="https://cdn11.bigcommerce.com/s-lh9wfk05w0/images/stencil/320w/image-manager/-e-head-position-2.jpg?t=1771863547" alt="Head position - markedly present" loading="lazy">` 814 655 } 815 656 ] 816 657 } ··· 922 763 ${unit.options.map(opt => ` 923 764 <button class="option-btn" data-unit="${unit.id}" data-score="${opt.score}" aria-pressed="false"> 924 765 <div class="score-pill">${opt.score}</div> 925 - <div class="cat-illustration">${opt.svg}</div> 766 + <div class="cat-illustration">${opt.img}</div> 926 767 <div class="option-label">${opt.label}</div> 927 768 <div class="option-sublabel">${opt.sublabel}</div> 928 769 </button>