packages/npr-demo/src/assets/NinePatchExample.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1200"
   height="1200"
   viewBox="0 0 1200 1200"
   version="1.1"
   id="svg1"
   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
   sodipodi:docname="NinePatchExample.svg"
   inkscape:export-filename="NinePatchExample.png"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="px"
     inkscape:zoom="0.40097006"
     inkscape:cx="544.92846"
     inkscape:cy="465.12201"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1"
     inkscape:export-bgcolor="#ffffffff" />
  <defs
     id="defs1" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#ffffff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;fill-opacity:1"
       id="rect3"
       width="1200"
       height="1200"
       x="0"
       y="0" />
    <g
       id="g13"
       transform="translate(-6.215843,-26.822391)">
      <g
         id="g2">
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:8.86596;stroke-linecap:round;stroke-linejoin:round"
           id="rect1"
           width="331.46274"
           height="331.46274"
           x="96.183632"
           y="122.26863" />
        <rect
           style="fill:#f4eadd;fill-opacity:1;stroke-width:8.0546;stroke-linecap:round;stroke-linejoin:round"
           id="rect1-9"
           width="301.12912"
           height="301.12912"
           x="111.35043"
           y="137.43542" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2"
           width="40.983719"
           height="40.983719"
           x="96.183632"
           y="122.26863" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-6"
           width="40.983719"
           height="40.983719"
           x="386.66266"
           y="122.26863" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-1"
           width="40.983719"
           height="40.983719"
           x="96.183632"
           y="412.74765" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-4"
           width="40.983719"
           height="40.983719"
           x="386.66266"
           y="412.74765" />
      </g>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50.5564px;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.31954;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18.9586, 18.9586;stroke-dashoffset:0;stroke-opacity:1"
         x="269.80035"
         y="575.60504"
         id="text5"><tspan
           sodipodi:role="line"
           x="269.80035"
           y="575.60504"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:6.31954"
           id="tspan7">Take an image</tspan><tspan
           sodipodi:role="line"
           x="269.80035"
           y="638.80054"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:6.31954"
           id="tspan8">of a frame</tspan></text>
    </g>
    <g
       id="g11"
       transform="translate(-874.27585,560.67189)">
      <rect
         style="fill:#3e2f25;fill-opacity:1;stroke-width:12.1446;stroke-linecap:round;stroke-linejoin:round"
         id="rect1-4-1"
         width="621.94171"
         height="331.46274"
         x="1166.3862"
         y="149.36591" />
      <rect
         style="fill:#f4eadd;fill-opacity:1;stroke-width:11.2898;stroke-linecap:round;stroke-linejoin:round"
         id="rect1-9-5-7"
         width="591.60822"
         height="301.12912"
         x="1181.553"
         y="164.5327" />
      <rect
         style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
         id="rect2-5-6"
         width="40.983719"
         height="40.983719"
         x="1166.3862"
         y="149.36591" />
      <rect
         style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
         id="rect2-6-5-3"
         width="40.983719"
         height="40.983719"
         x="1746.1637"
         y="149.36591" />
      <rect
         style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
         id="rect2-1-6-1"
         width="40.983719"
         height="40.983719"
         x="1166.3862"
         y="439.84494" />
      <rect
         style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
         id="rect2-4-3-0"
         width="40.983719"
         height="40.983719"
         x="1747.3441"
         y="439.84497" />
      <path
         style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         d="M 1243.6172,96.256029 V 536.43852"
         id="path2-8" />
      <path
         style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         d="M 1711.097,96.256029 V 536.43852"
         id="path2-1-3" />
      <path
         style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         d="m 1113.2763,403.59764 724.4991,-2.49395"
         id="path2-5-8"
         sodipodi:nodetypes="cc" />
      <path
         style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         d="m 1113.2763,226.59691 h 721.9991"
         id="path2-1-9-8"
         sodipodi:nodetypes="cc" />
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50.5564px;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.31954;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18.9586, 18.9586;stroke-dashoffset:0;stroke-opacity:1"
         x="1474.4397"
         y="602.89984"
         id="text5-4-8"><tspan
           sodipodi:role="line"
           x="1474.4397"
           y="602.89984"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:6.31954"
           id="tspan9">Stretch and rescale to include anything</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         x="1483.8676"
         y="341.16144"
         id="text10"><tspan
           sodipodi:role="line"
           id="tspan10"
           x="1483.8676"
           y="341.16144"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;font-family:'Freestyle Script';-inkscape-font-specification:'Freestyle Script'">Anything!</tspan></text>
    </g>
    <g
       id="g12"
       transform="translate(39.373686,-37.148746)">
      <g
         id="g2-4"
         transform="translate(471.13192)">
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:8.86596;stroke-linecap:round;stroke-linejoin:round"
           id="rect1-4"
           width="331.46274"
           height="331.46274"
           x="96.183632"
           y="122.26863" />
        <rect
           style="fill:#f4eadd;fill-opacity:1;stroke-width:8.0546;stroke-linecap:round;stroke-linejoin:round"
           id="rect1-9-5"
           width="301.12912"
           height="301.12912"
           x="111.35043"
           y="137.43542" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-5"
           width="40.983719"
           height="40.983719"
           x="96.183632"
           y="122.26863" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-6-5"
           width="40.983719"
           height="40.983719"
           x="386.66266"
           y="122.26863" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-1-6"
           width="40.983719"
           height="40.983719"
           x="96.183632"
           y="412.74765" />
        <rect
           style="fill:#3e2f25;fill-opacity:1;stroke-width:10;stroke-linecap:round;stroke-linejoin:round"
           id="rect2-4-3"
           width="40.983719"
           height="40.983719"
           x="386.66266"
           y="412.74765" />
      </g>
      <rect
         style="fill:#ff3232;fill-opacity:0.494832;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5"
         width="77.231079"
         height="77.231003"
         x="567.31555"
         y="122.26863" />
      <rect
         style="fill:#ff3232;fill-opacity:0.494832;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-3"
         width="77.231079"
         height="77.231003"
         x="821.54718"
         y="122.26863" />
      <rect
         style="fill:#ff3232;fill-opacity:0.494832;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-35"
         width="77.231079"
         height="77.231003"
         x="821.54718"
         y="376.50037" />
      <rect
         style="fill:#ff3232;fill-opacity:0.494832;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-2"
         width="77.231079"
         height="77.231003"
         x="567.31555"
         y="376.50037" />
      <rect
         style="fill:#79f432;fill-opacity:0.494832;stroke:none;stroke-width:7.5694;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22.7082, 22.7082;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-0"
         width="77.231079"
         height="177.00072"
         x="567.31555"
         y="199.49963" />
      <rect
         style="fill:#79f432;fill-opacity:0.494832;stroke:none;stroke-width:7.5694;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22.7082, 22.7082;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-0-3"
         width="77.231079"
         height="177.00072"
         x="821.54718"
         y="199.49963" />
      <rect
         style="fill:#79f432;fill-opacity:0.494832;stroke:none;stroke-width:7.5694;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22.7082, 22.7082;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-0-3-3"
         width="77.231079"
         height="177.00072"
         x="122.26859"
         y="-821.54718"
         transform="rotate(90)" />
      <rect
         style="fill:#79f432;fill-opacity:0.494832;stroke:none;stroke-width:7.5694;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22.7082, 22.7082;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-0-3-3-8"
         width="77.231079"
         height="177.00072"
         x="376.50034"
         y="-821.54736"
         transform="rotate(90)" />
      <rect
         style="fill:#7986f6;fill-opacity:0.494832;stroke:none;stroke-width:11.4592;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34.3775, 34.3775;stroke-dashoffset:0;stroke-opacity:1"
         id="rect5-0-3-3-3"
         width="177.00064"
         height="177.00072"
         x="199.49966"
         y="-821.54718"
         transform="rotate(90)" />
      <g
         id="g5"
         transform="translate(1.1069897,-1.9188735)">
        <g
           id="g3">
          <path
             style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
             d="M 643.43957,71.077627 V 511.26012"
             id="path2" />
          <path
             style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
             d="M 820.4403,71.077627 V 511.26012"
             id="path2-1" />
        </g>
        <g
           id="g4"
           transform="translate(-1.10699,1.9188785)">
          <path
             style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
             d="M 514.20568,376.50036 H 954.38817"
             id="path2-5" />
          <path
             style="fill:#3e2f25;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
             d="M 514.20568,199.49963 H 954.38817"
             id="path2-1-9" />
        </g>
      </g>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:50.5564px;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.31954;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18.9586, 18.9586;stroke-dashoffset:0;stroke-opacity:1"
         x="731.96082"
         y="585.9314"
         id="text5-4"><tspan
           sodipodi:role="line"
           id="tspan5-8"
           x="731.96082"
           y="585.9314"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:6.31954">Define the</tspan><tspan
           sodipodi:role="line"
           x="731.96082"
           y="649.12689"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Gill Sans MT';-inkscape-font-specification:'Gill Sans MT';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:6.31954"
           id="tspan6">borders</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'Freestyle Script';-inkscape-font-specification:'Freestyle Script';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         x="544.47687"
         y="105.9541"
         id="text11"><tspan
           sodipodi:role="line"
           id="tspan11"
           x="544.47687"
           y="105.9541"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'FiraCode Nerd Font Mono';-inkscape-font-specification:'FiraCode Nerd Font Mono'">borderLeft</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'Freestyle Script';-inkscape-font-specification:'Freestyle Script';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         x="928.45599"
         y="103.54042"
         id="text11-7"><tspan
           sodipodi:role="line"
           id="tspan11-5"
           x="928.45599"
           y="103.54042"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'FiraCode Nerd Font Mono';-inkscape-font-specification:'FiraCode Nerd Font Mono'">borderRight</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'Freestyle Script';-inkscape-font-specification:'Freestyle Script';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         x="997.24615"
         y="167.01985"
         id="text11-7-0"><tspan
           sodipodi:role="line"
           id="tspan11-5-3"
           x="997.24615"
           y="167.01985"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'FiraCode Nerd Font Mono';-inkscape-font-specification:'FiraCode Nerd Font Mono'">borderTop</tspan></text>
      <text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'Freestyle Script';-inkscape-font-specification:'Freestyle Script';text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:15, 15;stroke-dashoffset:0;stroke-opacity:1"
         x="1021.8616"
         y="422.98462"
         id="text11-7-0-8"><tspan
           sodipodi:role="line"
           id="tspan11-5-3-8"
           x="1021.8616"
           y="422.98462"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:26.6667px;font-family:'FiraCode Nerd Font Mono';-inkscape-font-specification:'FiraCode Nerd Font Mono'">borderBottom</tspan></text>
    </g>
  </g>
</svg>