all letters and numeric complete and remove beanie from all file

pull/5/head
Dev 1 2023-10-16 19:38:07 +05:30
parent 5e517f6be1
commit e6ede94cd2
115 changed files with 12882 additions and 1098 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
public/assets/audio/loop.mp3 Executable file

Binary file not shown.

Binary file not shown.

BIN
public/assets/audio/roll-up.mp3 Executable file

Binary file not shown.

BIN
public/assets/audio/roll.mp3 Executable file

Binary file not shown.

Binary file not shown.

Binary file not shown.

313
public/assets/numeric/n0.svg Executable file
View File

@ -0,0 +1,313 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w2_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-1" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<ellipse
style="fill:none;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path5224"
cx="52.567612"
cy="50.416187"
rx="14.560527"
ry="21.45266" />
<g
id="g5232"
transform="matrix(1.2440252,0,0,1.5091547,1.233766,9.9707915)"
inkscape:transform-center-x="0.078737506"
inkscape:transform-center-y="-0.02246399">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5228"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5226"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5230"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.46771;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
d="m 48.296789,30.181333 c 3.018232,-2.286024 8.360684,-1.658519 10.194726,0.66436"
id="path5234"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.4029369"
inkscape:transform-center-y="0.0838721" />
<g
id="g19985"
style="display:none"
transform="matrix(0.88079587,0,0,1.0276504,8.2499935,-9.1427657)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 42.014207,78.885553 33.868367,0.105865"
id="path1106" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 54.585716,79.075266 44.449435,78.916887"
id="path9586" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9592"
cx="-78.125687"
cy="44.021099"
r="1.2760839"
transform="rotate(-88.91827)" />
<text
xml:space="preserve"
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="41.672253"
y="79.868111"
id="text9761"><tspan
id="tspan9759"
style="stroke-width:0.117792"
x="41.672253"
y="79.868111">4</tspan></text>
</g>
<path
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.23267;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 52.241378,0.26191402 C 52.315135,0.56658596 72.715386,65.174594 72.715386,65.174594"
id="path15674" />
<g
id="g1205"
transform="matrix(0.88079587,0,0,1.0276504,8.5600681,-8.5017231)"
style="display:none">
<g
id="g1198"
transform="translate(-0.48682415,0.59660565)"
style="display:none">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
id="path15682" />
<g
id="g1238"
style="display:inline"
transform="translate(-0.35203906,-0.62379443)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.897143,48.164759 26.507248,0.07809"
id="path1108" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:normal"
d="M 48.768524,48.161093 39.639351,48.31565"
id="path9576" />
<g
id="g21538"
transform="translate(-21.46967,-27.579792)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

322
public/assets/numeric/n1.svg Executable file
View File

@ -0,0 +1,322 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w0.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g19985"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 42.014207,78.885553 33.868367,0.105865"
id="path1106" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:stroke fill markers"
d="M 54.585716,79.075266 44.449435,78.916887"
id="path9586"
sodipodi:nodetypes="cc" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9592"
cx="-78.125687"
cy="44.021099"
r="1.2760839"
transform="rotate(-88.91827)" />
<text
xml:space="preserve"
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="41.672253"
y="79.868111"
id="text9761"><tspan
sodipodi:role="line"
id="tspan9759"
style="stroke-width:0.117792"
x="41.672253"
y="79.868111">4</tspan></text>
</g>
<path
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.945039,9.1516334 C 50.028779,9.4481077 73.189935,72.317745 73.189935,72.317745"
id="path15674"
sodipodi:nodetypes="cc" />
<g
id="g1205"
transform="translate(0.35203906,0.62379443)"
style="display:none">
<g
id="g1198"
transform="translate(-0.48682415,0.59660565)"
style="display:none">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
id="path15682"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-1.6158511"
inkscape:transform-center-y="4.8664848" />
<g
id="g1238"
style="display:inline"
transform="translate(-0.35203906,-0.62379443)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.897143,48.164759 26.507248,0.07809"
id="path1108" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2);paint-order:normal"
d="M 48.768524,48.161093 39.639351,48.31565"
id="path9576"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.8199192"
inkscape:transform-center-y="0.3134404" />
<g
id="g21538"
transform="translate(-21.46967,-27.579792)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
</g>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 53.719598,28.365391 c 0.02898,1.84444 0.139581,43.462881 0.139581,43.462881"
id="path127"
sodipodi:nodetypes="cc" />
<text
xml:space="preserve"
style="font-size:3.78008px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.1896;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.036243"
y="35.394852"
id="text9342"
transform="matrix(1.0839085,-0.00707373,0.00832414,0.92253275,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.1896;stroke-dasharray:none;stroke-opacity:1"
x="48.036243"
y="35.394852">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.189603;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448"
cx="-54.418415"
cy="-29.995638"
transform="matrix(-0.99980534,-0.01973028,0.02727456,-0.99962798,0,0)"
rx="1.8738403"
ry="1.5938919" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.46228;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 53.597816,43.149023 c -0.01086,-1.807121 0.02867,-8.762619 0.02867,-8.762619"
id="path13743"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.031384711"
inkscape:transform-center-y="4.5490919" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

340
public/assets/numeric/n2.svg Executable file
View File

@ -0,0 +1,340 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w9_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-1" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g19985"
style="display:none"
transform="matrix(0.88079587,0,0,1.0276504,8.2499935,-9.1427657)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 42.014207,78.885553 33.868367,0.105865"
id="path1106" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 54.585716,79.075266 44.449435,78.916887"
id="path9586" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9592"
cx="-78.125687"
cy="44.021099"
r="1.2760839"
transform="rotate(-88.91827)" />
<text
xml:space="preserve"
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="41.672253"
y="79.868111"
id="text9761"><tspan
id="tspan9759"
style="stroke-width:0.117792"
x="41.672253"
y="79.868111">4</tspan></text>
</g>
<path
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.23267;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 52.241378,0.26191402 C 52.315135,0.56658596 72.715386,65.174594 72.715386,65.174594"
id="path15674" />
<g
id="g1205"
transform="matrix(0.88079587,0,0,1.0276504,8.5600681,-8.5017231)"
style="display:none">
<g
id="g1198"
transform="translate(-0.48682415,0.59660565)"
style="display:none">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
id="path15682" />
<g
id="g1238"
style="display:inline"
transform="translate(-0.35203906,-0.62379443)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.897143,48.164759 26.507248,0.07809"
id="path1108" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:normal"
d="M 48.768524,48.161093 39.639351,48.31565"
id="path9576" />
<g
id="g21538"
transform="translate(-21.46967,-27.579792)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
</g>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 37.879497,32.131352 C 41.461683,18.7812 60.493839,17.317892 65.835893,28.175398 72.229493,41.170132 54.622314,49.45323 37.78953,64.096933"
id="path127" />
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 37.764142,64.196759 c 0.813085,0.148912 28.482383,0.140965 29.30932,0.181457"
id="path15674-3" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 52.347432,63.601068 c -2.091849,0.01672 -10.14356,0.01556 -10.14356,0.01556"
id="path13743" />
<g
id="g5615"
transform="matrix(1.2998634,0,0,1.5273408,-19.067924,1.4807871)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 56.090515,21.016538 C 52.712109,19.342092 47.20201,20.418024 45.522277,22.60893"
id="path5617" />
<g
id="g1198-5"
transform="matrix(1.2046627,0,0,1.3613173,-20.78515,50.464601)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678-6"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676-2"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680-9"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

246
public/assets/numeric/n2_l1.svg Executable file
View File

@ -0,0 +1,246 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-1" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" />
</marker>
</defs>
<g
id="layer1"
style="display:inline">
<g
id="g19985"
style="display:none"
transform="matrix(0.88079587,0,0,1.0276504,8.2499935,-9.1427657)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 42.014207,78.885553 33.868367,0.105865"
id="path1106" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 54.585716,79.075266 44.449435,78.916887"
id="path9586" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9592"
cx="-78.125687"
cy="44.021099"
r="1.2760839"
transform="rotate(-88.91827)" />
<text
xml:space="preserve"
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="41.672253"
y="79.868111"
id="text9761"><tspan
id="tspan9759"
style="stroke-width:0.117792"
x="41.672253"
y="79.868111">4</tspan></text>
</g>
<path
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.23267;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 52.241378,0.26191402 C 52.315135,0.56658596 72.715386,65.174594 72.715386,65.174594"
id="path15674" />
<g
id="g1205"
transform="matrix(0.88079587,0,0,1.0276504,8.5600681,-8.5017231)"
style="display:none">
<g
id="g1198"
transform="translate(-0.48682415,0.59660565)"
style="display:none">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
id="path15682" />
<g
id="g1238"
style="display:inline"
transform="translate(-0.35203906,-0.62379443)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.897143,48.164759 26.507248,0.07809"
id="path1108" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:normal"
d="M 48.768524,48.161093 39.639351,48.31565"
id="path9576" />
<g
id="g21538"
transform="translate(-21.46967,-27.579792)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
</g>
</g>
<g
id="g12136">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 37.879497,32.131352 C 41.461683,18.7812 60.493839,17.317892 65.835893,28.175398 72.229493,41.170132 54.622314,49.45323 37.78953,64.096933"
id="path127" />
<g
id="g5615"
transform="matrix(1.2998634,0,0,1.5273408,-19.067924,1.4807871)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 56.090515,21.016538 C 52.712109,19.342092 47.20201,20.418024 45.522277,22.60893"
id="path5617" />
</g>
<g
id="g12127"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 37.764142,64.196759 c 0.813085,0.148912 28.482383,0.140965 29.30932,0.181457"
id="path15674-3" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 52.347432,63.601068 c -2.091849,0.01672 -10.14356,0.01556 -10.14356,0.01556"
id="path13743" />
<g
id="g1198-5"
transform="matrix(1.2046627,0,0,1.3613173,-20.78515,50.464601)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678-6"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676-2"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680-9"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

348
public/assets/numeric/n2_l2.svg Executable file
View File

@ -0,0 +1,348 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w2_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-1" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g19985"
style="display:none"
transform="matrix(0.88079587,0,0,1.0276504,8.2499935,-9.1427657)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#e10079;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 42.014207,78.885553 33.868367,0.105865"
id="path1106" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 54.585716,79.075266 44.449435,78.916887"
id="path9586" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9592"
cx="-78.125687"
cy="44.021099"
r="1.2760839"
transform="rotate(-88.91827)" />
<text
xml:space="preserve"
style="font-size:2.67135px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.117792;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="41.672253"
y="79.868111"
id="text9761"><tspan
id="tspan9759"
style="stroke-width:0.117792"
x="41.672253"
y="79.868111">4</tspan></text>
</g>
<path
style="display:none;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:5.23267;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 52.241378,0.26191402 C 52.315135,0.56658596 72.715386,65.174594 72.715386,65.174594"
id="path15674" />
<g
id="g1205"
transform="matrix(0.88079587,0,0,1.0276504,8.5600681,-8.5017231)"
style="display:none">
<g
id="g1198"
transform="translate(-0.48682415,0.59660565)"
style="display:none">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="M 54.145899,21.77088 C 53.442717,19.74276 50.806456,11.912664 50.806456,11.912664"
id="path15682" />
<g
id="g1238"
style="display:inline"
transform="translate(-0.35203906,-0.62379443)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 36.897143,48.164759 26.507248,0.07809"
id="path1108" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:normal"
d="M 48.768524,48.161093 39.639351,48.31565"
id="path9576" />
<g
id="g21538"
transform="translate(-21.46967,-27.579792)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
</g>
</g>
<g
id="g12136"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 37.879497,32.131352 C 41.461683,18.7812 60.493839,17.317892 65.835893,28.175398 72.229493,41.170132 54.622314,49.45323 37.78953,64.096933"
id="path127" />
<g
id="g5615"
transform="matrix(1.2998634,0,0,1.5273408,-19.067924,1.4807871)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 56.090515,21.016538 C 52.712109,19.342092 47.20201,20.418024 45.522277,22.60893"
id="path5617" />
</g>
<g
id="g12127"
style="display:inline">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 37.764142,64.196759 c 0.813085,0.148912 28.482383,0.140965 29.30932,0.181457"
id="path15674-3" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.446583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 52.347432,63.601068 c -2.091849,0.01672 -10.14356,0.01556 -10.14356,0.01556"
id="path13743" />
<g
id="g1198-5"
transform="matrix(1.2046627,0,0,1.3613173,-20.78515,50.464601)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text15678-6"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan15676-2"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680-9"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

104
public/assets/numeric/n3.svg Executable file
View File

@ -0,0 +1,104 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-5"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.024204,30.835116 c 2.932055,-10.257174 19.380973,-12.698365 25.491254,-4.472051 6.573001,7.970983 1.454588,21.446802 -16.03229,19.868203"
id="path127" />
<g
id="g5615"
transform="matrix(1.3668243,0,0,1.4233852,-26.270267,8.1583079)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="m 51.119219,21.678264 c -3.961259,-0.707707 -9.07215,2.069576 -9.969646,4.840117"
id="path5617" />
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 38.194102,63.207433 C 42.025293,73.261437 58.645308,74.706419 64.011433,66.13384 69.861597,57.788082 64.597894,44.1941 47.298249,46.820895"
id="path8192" />
<g
id="g9700"
transform="matrix(1.2672443,0,0,1.2429694,-15.257315,34.459233)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text9696"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
id="tspan9694"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9698"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="M 61.751626,49.364907 C 59.272378,46.375884 54.36315,45.122495 50.84418,46.294213"
id="path9702" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.1 KiB

227
public/assets/numeric/n3_l1.svg Executable file
View File

@ -0,0 +1,227 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w3.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-5"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g13433">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.024204,30.835116 c 2.932055,-10.257174 19.380973,-12.698365 25.491254,-4.472051 6.573001,7.970983 1.454588,21.446802 -16.03229,19.868203"
id="path127"
sodipodi:nodetypes="ccc" />
<g
id="g5615"
transform="matrix(1.3668243,0,0,1.4233852,-26.270267,8.1583079)"
inkscape:transform-center-x="0.080372917"
inkscape:transform-center-y="-0.021553287"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="m 51.119219,21.678264 c -3.961259,-0.707707 -9.07215,2.069576 -9.969646,4.840117"
id="path5617"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3671847"
inkscape:transform-center-y="-1.4670278" />
</g>
<g
id="g13441"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 38.194102,63.207433 C 42.025293,73.261437 58.645308,74.706419 64.011433,66.13384 69.861597,57.788082 64.597894,44.1941 47.298249,46.820895"
id="path8192"
sodipodi:nodetypes="ccc" />
<g
id="g9700"
transform="matrix(1.2672443,0,0,1.2429694,-15.257315,34.459233)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text9696"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan9694"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9698"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="M 61.751626,49.364907 C 59.272378,46.375884 54.36315,45.122495 50.84418,46.294213"
id="path9702"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.0231726"
inkscape:transform-center-y="1.9256938" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.8 KiB

228
public/assets/numeric/n3_l2.svg Executable file
View File

@ -0,0 +1,228 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w3_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w3.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-5"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g13433"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.024204,30.835116 c 2.932055,-10.257174 19.380973,-12.698365 25.491254,-4.472051 6.573001,7.970983 1.454588,21.446802 -16.03229,19.868203"
id="path127"
sodipodi:nodetypes="ccc" />
<g
id="g5615"
transform="matrix(1.3668243,0,0,1.4233852,-26.270267,8.1583079)"
inkscape:transform-center-x="0.080372917"
inkscape:transform-center-y="-0.021553287"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="m 51.119219,21.678264 c -3.961259,-0.707707 -9.07215,2.069576 -9.969646,4.840117"
id="path5617"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3671847"
inkscape:transform-center-y="-1.4670278" />
</g>
<g
id="g13441"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 38.194102,63.207433 C 42.025293,73.261437 58.645308,74.706419 64.011433,66.13384 69.861597,57.788082 64.597894,44.1941 47.298249,46.820895"
id="path8192"
sodipodi:nodetypes="ccc" />
<g
id="g9700"
transform="matrix(1.2672443,0,0,1.2429694,-15.257315,34.459233)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text9696"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan9694"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle9698"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.476116;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-5);paint-order:stroke fill markers"
d="M 61.751626,49.364907 C 59.272378,46.375884 54.36315,45.122495 50.84418,46.294213"
id="path9702"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.0231726"
inkscape:transform-center-y="1.9256938" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.8 KiB

255
public/assets/numeric/n4.svg Executable file
View File

@ -0,0 +1,255 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w3_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.834832,28.760336 c 0,0 -0.10253,20.491837 -0.02083,21.56101"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g5615"
transform="matrix(1.460727,0,0,1.4422608,-30.824195,8.1730094)"
inkscape:transform-center-x="0.07641773"
inkscape:transform-center-y="-0.025642763">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 38.706413,42.201053 c -0.0043,-2.086893 0.0609,-10.119003 0.0609,-10.119003"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041998397"
inkscape:transform-center-y="6.1678244" />
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.862094,50.525211 c 0.619414,0.18323 21.698076,0.17344 22.328042,0.223274"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3543056,0,0,1.2594527,-29.153926,37.877844)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 53.69499,49.925703 c -2.34155,0.01839 -11.354358,0.01711 -11.354358,0.01711"
id="path13321"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.2445532"
inkscape:transform-center-y="0.005789471" />
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.152781,28.703716 0.02385,49.419925"
id="path10309" />
<g
id="g13329"
transform="matrix(1.8098945,0,0,1.5410645,-46.365245,-86.727413)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 60.939392,44.757648 c -0.0043,-2.086894 0.0609,-10.119004 0.0609,-10.119004"
id="path13331"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041999202"
inkscape:transform-center-y="6.167825" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

266
public/assets/numeric/n4_l1.svg Executable file
View File

@ -0,0 +1,266 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w4_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g6074">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.834832,28.760336 c 0,0 -0.10253,20.491837 -0.02083,21.56101"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g5615"
transform="matrix(1.460727,0,0,1.4422608,-30.824195,8.1730094)"
inkscape:transform-center-x="0.07641773"
inkscape:transform-center-y="-0.025642763">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 38.706413,42.201053 c -0.0043,-2.086893 0.0609,-10.119003 0.0609,-10.119003"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041998397"
inkscape:transform-center-y="6.1678244" />
</g>
<g
id="g6065"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.862094,50.525211 c 0.619414,0.18323 21.698076,0.17344 22.328042,0.223274"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3543056,0,0,1.2594527,-29.153926,37.877844)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 53.69499,49.925703 c -2.34155,0.01839 -11.354358,0.01711 -11.354358,0.01711"
id="path13321"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.2445532"
inkscape:transform-center-y="0.005789471" />
</g>
<g
id="g6057"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.152781,28.703716 0.02385,49.419925"
id="path10309" />
<g
id="g13329"
transform="matrix(1.8098945,0,0,1.5410645,-46.365245,-86.727413)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 60.939392,44.757648 c -0.0043,-2.086894 0.0609,-10.119004 0.0609,-10.119004"
id="path13331"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041999202"
inkscape:transform-center-y="6.167825" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

267
public/assets/numeric/n4_l2.svg Executable file
View File

@ -0,0 +1,267 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w4_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g6074"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.834832,28.760336 c 0,0 -0.10253,20.491837 -0.02083,21.56101"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g5615"
transform="matrix(1.460727,0,0,1.4422608,-30.824195,8.1730094)"
inkscape:transform-center-x="0.07641773"
inkscape:transform-center-y="-0.025642763">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 38.706413,42.201053 c -0.0043,-2.086893 0.0609,-10.119003 0.0609,-10.119003"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041998397"
inkscape:transform-center-y="6.1678244" />
</g>
<g
id="g6065"
style="display:inline">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.862094,50.525211 c 0.619414,0.18323 21.698076,0.17344 22.328042,0.223274"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3543056,0,0,1.2594527,-29.153926,37.877844)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 53.69499,49.925703 c -2.34155,0.01839 -11.354358,0.01711 -11.354358,0.01711"
id="path13321"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.2445532"
inkscape:transform-center-y="0.005789471" />
</g>
<g
id="g6057"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.152781,28.703716 0.02385,49.419925"
id="path10309" />
<g
id="g13329"
transform="matrix(1.8098945,0,0,1.5410645,-46.365245,-86.727413)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 60.939392,44.757648 c -0.0043,-2.086894 0.0609,-10.119004 0.0609,-10.119004"
id="path13331"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041999202"
inkscape:transform-center-y="6.167825" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

267
public/assets/numeric/n4_l3.svg Executable file
View File

@ -0,0 +1,267 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w4_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g6074"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.834832,28.760336 c 0,0 -0.10253,20.491837 -0.02083,21.56101"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g5615"
transform="matrix(1.460727,0,0,1.4422608,-30.824195,8.1730094)"
inkscape:transform-center-x="0.07641773"
inkscape:transform-center-y="-0.025642763">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="46.800331"
y="15.960659"
id="text5609"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="46.800331"
y="15.960659">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5611"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-48.065395"
cy="-13.491238"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 38.706413,42.201053 c -0.0043,-2.086893 0.0609,-10.119003 0.0609,-10.119003"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041998397"
inkscape:transform-center-y="6.1678244" />
</g>
<g
id="g6065"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 38.862094,50.525211 c 0.619414,0.18323 21.698076,0.17344 22.328042,0.223274"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3543056,0,0,1.2594527,-29.153926,37.877844)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 53.69499,49.925703 c -2.34155,0.01839 -11.354358,0.01711 -11.354358,0.01711"
id="path13321"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.2445532"
inkscape:transform-center-y="0.005789471" />
</g>
<g
id="g6057"
style="display:inline">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.152781,28.703716 0.02385,49.419925"
id="path10309" />
<g
id="g13329"
transform="matrix(1.8098945,0,0,1.5410645,-46.365245,-86.727413)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.495451;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-2);paint-order:stroke fill markers"
d="m 60.939392,44.757648 c -0.0043,-2.086894 0.0609,-10.119004 0.0609,-10.119004"
id="path13331"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.041999202"
inkscape:transform-center-y="6.167825" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

261
public/assets/numeric/n5.svg Executable file
View File

@ -0,0 +1,261 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w4_l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g7106"
transform="translate(-0.52916667)">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.389386,21.377013 c 0,0 -0.09882,21.74684 -0.02007,22.881494"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(1.0513431,0,0,1.0317452,-12.456081,9.7196665)">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.585711;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 34.594882,35.954904 c -0.0608,-0.876006 -0.02656,-4.261502 -0.02656,-4.261502"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.040315665"
inkscape:transform-center-y="2.1468404" />
</g>
<g
id="g7114"
transform="translate(-0.52916667)">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.310041,44.474858 c 32.536104,-13.749915 40.339663,34.856163 0.0075,26.378352"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3052235,0,0,1.3365867,-31.240974,31.052912)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.501064;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 48.748332,43.516495 c -3.301504,-2.472487 -9.081976,-2.096111 -11.851544,-0.097"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3603091"
inkscape:transform-center-y="0.21085932" />
</g>
<g
id="g7090"
transform="translate(-0.52916667)">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.313272,21.430769 26.578362,-0.08341"
id="path10309"
inkscape:transform-center-x="-12.706525"
inkscape:transform-center-y="-0.33399499" />
<g
id="g13329"
transform="matrix(1.8326084,0,0,1.5941849,-72.161906,-99.615248)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.50707;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 51.549666,21.472931 c -2.370934,0.01903 -11.496853,0.01769 -11.496853,0.01769"
id="path15635"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.4035846"
inkscape:transform-center-y="0.0050672075" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

263
public/assets/numeric/n5_l1.svg Executable file
View File

@ -0,0 +1,263 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w5.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g7106"
transform="translate(-0.52916667)">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.389386,21.377013 c 0,0 -0.09882,21.74684 -0.02007,22.881494"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(1.0513431,0,0,1.0317452,-12.456081,9.7196665)">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.585711;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 34.594882,35.954904 c -0.0608,-0.876006 -0.02656,-4.261502 -0.02656,-4.261502"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.040315665"
inkscape:transform-center-y="2.1468404" />
</g>
<g
id="g7114"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.310041,44.474858 c 32.536104,-13.749915 40.339663,34.856163 0.0075,26.378352"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3052235,0,0,1.3365867,-31.240974,31.052912)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.501064;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 48.748332,43.516495 c -3.301504,-2.472487 -9.081976,-2.096111 -11.851544,-0.097"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3603091"
inkscape:transform-center-y="0.21085932" />
</g>
<g
id="g7090"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.313272,21.430769 26.578362,-0.08341"
id="path10309"
inkscape:transform-center-x="-12.706525"
inkscape:transform-center-y="-0.33399499" />
<g
id="g13329"
transform="matrix(1.8326084,0,0,1.5941849,-72.161906,-99.615248)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.50707;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 51.549666,21.472931 c -2.370934,0.01903 -11.496853,0.01769 -11.496853,0.01769"
id="path15635"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.4035846"
inkscape:transform-center-y="0.0050672075" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

264
public/assets/numeric/n5_l2.svg Executable file
View File

@ -0,0 +1,264 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w5_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g7106"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.389386,21.377013 c 0,0 -0.09882,21.74684 -0.02007,22.881494"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(1.0513431,0,0,1.0317452,-12.456081,9.7196665)">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.585711;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 34.594882,35.954904 c -0.0608,-0.876006 -0.02656,-4.261502 -0.02656,-4.261502"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.040315665"
inkscape:transform-center-y="2.1468404" />
</g>
<g
id="g7114"
transform="translate(-0.52916667)"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.310041,44.474858 c 32.536104,-13.749915 40.339663,34.856163 0.0075,26.378352"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3052235,0,0,1.3365867,-31.240974,31.052912)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.501064;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 48.748332,43.516495 c -3.301504,-2.472487 -9.081976,-2.096111 -11.851544,-0.097"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3603091"
inkscape:transform-center-y="0.21085932" />
</g>
<g
id="g7090"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.313272,21.430769 26.578362,-0.08341"
id="path10309"
inkscape:transform-center-x="-12.706525"
inkscape:transform-center-y="-0.33399499" />
<g
id="g13329"
transform="matrix(1.8326084,0,0,1.5941849,-72.161906,-99.615248)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.50707;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 51.549666,21.472931 c -2.370934,0.01903 -11.496853,0.01769 -11.496853,0.01769"
id="path15635"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.4035846"
inkscape:transform-center-y="0.0050672075" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

264
public/assets/numeric/n5_l3.svg Executable file
View File

@ -0,0 +1,264 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w5_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g7106"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.389386,21.377013 c 0,0 -0.09882,21.74684 -0.02007,22.881494"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(1.0513431,0,0,1.0317452,-12.456081,9.7196665)">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.585711;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 34.594882,35.954904 c -0.0608,-0.876006 -0.02656,-4.261502 -0.02656,-4.261502"
id="path12561"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.040315665"
inkscape:transform-center-y="2.1468404" />
</g>
<g
id="g7114"
transform="translate(-0.52916667)"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.310041,44.474858 c 32.536104,-13.749915 40.339663,34.856163 0.0075,26.378352"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g13319"
transform="matrix(1.3052235,0,0,1.3365867,-31.240974,31.052912)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.501064;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 48.748332,43.516495 c -3.301504,-2.472487 -9.081976,-2.096111 -11.851544,-0.097"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.3603091"
inkscape:transform-center-y="0.21085932" />
</g>
<g
id="g7090"
transform="translate(-0.52916667)"
style="display:inline">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 34.313272,21.430769 26.578362,-0.08341"
id="path10309"
inkscape:transform-center-x="-12.706525"
inkscape:transform-center-y="-0.33399499" />
<g
id="g13329"
transform="matrix(1.8326084,0,0,1.5941849,-72.161906,-99.615248)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse13323"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971"
id="text13327"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan13325"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text>
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.50707;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="m 51.549666,21.472931 c -2.370934,0.01903 -11.496853,0.01769 -11.496853,0.01769"
id="path15635"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-5.4035846"
inkscape:transform-center-y="0.0050672075" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

212
public/assets/numeric/n6.svg Executable file
View File

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w5_l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-7"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 57.085083,28.142179 C 32.972593,36.263958 23.566454,67.553455 48.497314,71.842706"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.90170746,0,0,0.77569259,14.806438,15.041923)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 44.939347,34.737188 c 2.017014,-2.343158 5.13946,-4.226512 8.476447,-4.641639"
id="path17536"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.7377801"
inkscape:transform-center-y="2.689582" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 43.702456,65.921495 C 38.028879,55.327172 48.421799,49.271699 55.16716,49.184744 c 6.340597,-0.08174 12.769243,5.389874 12.249013,12.72046 -0.481468,6.784393 -7.894084,12.559193 -18.192104,10.058811"
id="path10277"
sodipodi:nodetypes="cssc" />
<g
id="g13319"
transform="matrix(1.1194536,0,0,1.0048803,-5.2667019,62.428805)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 63.113288,69.959778 c -2.012306,2.528304 -6.82362,3.595409 -9.62671,2.808089"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.7771296"
inkscape:transform-center-y="-2.4652434" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.1 KiB

188
public/assets/numeric/n6_l1.svg Executable file
View File

@ -0,0 +1,188 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w5_l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="n6.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-7"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 57.085083,28.142179 C 32.972593,36.263958 23.566454,67.553455 48.497314,71.842706"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.90170746,0,0,0.77569259,14.806438,15.041923)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 44.939347,34.737188 c 2.017014,-2.343158 5.13946,-4.226512 8.476447,-4.641639"
id="path17536"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.7377801"
inkscape:transform-center-y="2.689582" />
<path
style="display:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 43.702456,65.921495 C 38.028879,55.327172 48.421799,49.271699 55.16716,49.184744 c 6.340597,-0.08174 12.769243,5.389874 12.249013,12.72046 -0.481468,6.784393 -7.894084,12.559193 -18.192104,10.058811"
id="path10277"
sodipodi:nodetypes="cssc" />
<path
style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 63.113288,69.959778 c -2.012306,2.528304 -6.82362,3.595409 -9.62671,2.808089"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.7771296"
inkscape:transform-center-y="-2.4652434" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.9 KiB

212
public/assets/numeric/n6_l2.svg Executable file
View File

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="n6_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="n6.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-7"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:none;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 57.085083,28.142179 C 32.972593,36.263958 23.566454,67.553455 48.497314,71.842706"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.90170746,0,0,0.77569259,14.806438,15.041923)"
style="display:none">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:none;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 44.939347,34.737188 c 2.017014,-2.343158 5.13946,-4.226512 8.476447,-4.641639"
id="path17536"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.7377801"
inkscape:transform-center-y="2.689582" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 43.702456,65.921495 C 38.028879,55.327172 48.421799,49.271699 55.16716,49.184744 c 6.340597,-0.08174 12.769243,5.389874 12.249013,12.72046 -0.481468,6.784393 -7.894084,12.559193 -18.192104,10.058811"
id="path10277"
sodipodi:nodetypes="cssc" />
<g
id="g13319"
transform="matrix(1.1194536,0,0,1.0048803,-5.2667019,62.428805)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text13315"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan13313"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle13317"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.402358;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 63.113288,69.959778 c -2.012306,2.528304 -6.82362,3.595409 -9.62671,2.808089"
id="path15605"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.7771296"
inkscape:transform-center-y="-2.4652434" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.1 KiB

212
public/assets/numeric/n7.svg Executable file
View File

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w6_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-9"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 41.628079,28.5484 c 0.815754,0.2624 24.542874,-0.121161 25.197591,-0.09548"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.94768543,0,0,0.98216945,0.49024194,10.768235)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.877412,28.388494 C 65.379702,31.711422 48.282327,66.9129 46.134029,71.528894"
id="path10277"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.436094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:normal"
d="m 54.311841,28.040434 -8.651582,0.151802"
id="path18514"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.567767"
inkscape:transform-center-y="0.30785214" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.47867;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:stroke fill markers"
d="m 60.299699,42.806613 c 0.734767,-1.875585 3.638305,-9.072475 3.638305,-9.072475"
id="path18516"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="1.9032412"
inkscape:transform-center-y="4.7057266" />
<g
id="g18524"
transform="matrix(1.6162784,0,0,1.4600023,-15.321118,15.717041)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text18520"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan18518"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle18522"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.0 KiB

220
public/assets/numeric/n7_l1.svg Executable file
View File

@ -0,0 +1,220 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w7.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-9"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g9111"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 41.628079,28.5484 c 0.815754,0.2624 24.542874,-0.121161 25.197591,-0.09548"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.94768543,0,0,0.98216945,0.49024194,10.768235)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.436094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:normal"
d="m 54.311841,28.040434 -8.651582,0.151802"
id="path18514"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.567767"
inkscape:transform-center-y="0.30785214" />
</g>
<g
id="g9119"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.877412,28.388494 C 65.379702,31.711422 48.282327,66.9129 46.134029,71.528894"
id="path10277"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.47867;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:stroke fill markers"
d="m 60.299699,42.806613 c 0.734767,-1.875585 3.638305,-9.072475 3.638305,-9.072475"
id="path18516"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="1.9032412"
inkscape:transform-center-y="4.7057266" />
<g
id="g18524"
transform="matrix(1.6162784,0,0,1.4600023,-15.321118,15.717041)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text18520"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan18518"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle18522"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.2 KiB

220
public/assets/numeric/n7_l2.svg Executable file
View File

@ -0,0 +1,220 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w7_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-9"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-3" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g9111"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 41.628079,28.5484 c 0.815754,0.2624 24.542874,-0.121161 25.197591,-0.09548"
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g15627"
transform="matrix(0.94768543,0,0,0.98216945,0.49024194,10.768235)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text5609"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan5607"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5613"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.436094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:normal"
d="m 54.311841,28.040434 -8.651582,0.151802"
id="path18514"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.567767"
inkscape:transform-center-y="0.30785214" />
</g>
<g
id="g9119"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.877412,28.388494 C 65.379702,31.711422 48.282327,66.9129 46.134029,71.528894"
id="path10277"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.47867;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-9);paint-order:stroke fill markers"
d="m 60.299699,42.806613 c 0.734767,-1.875585 3.638305,-9.072475 3.638305,-9.072475"
id="path18516"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="1.9032412"
inkscape:transform-center-y="4.7057266" />
<g
id="g18524"
transform="matrix(1.6162784,0,0,1.4600023,-15.321118,15.717041)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text18520"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan18518"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle18522"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.2 KiB

212
public/assets/numeric/n8.svg Executable file
View File

@ -0,0 +1,212 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w7_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 43.166082,69.337929 c 10.041865,3.581252 17.073324,1.419906 20.438237,-3.04324 4.133854,-5.483056 3.082465,-14.16368 -0.464163,-16.563446 C 50.571087,41.226602 40.896567,43.456551 39.353976,36.021404 35.612499,17.987819 63.766417,18.053818 65.60695,31.436214"
id="path127"
sodipodi:nodetypes="csssc" />
<g
id="g19076"
transform="matrix(1.2186431,0,0,1.0445256,4.9737543,4.7754049)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text19072"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.023604,24.444143 c 3.981479,-1.94131 9.037372,-2.798631 13.425938,-1.747177"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="6.3285755"
inkscape:transform-center-y="1.3354378" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 65.649049,31.680591 c 0.361279,6.014275 -16.599028,13.503824 -23.733609,22.325413 -3.899469,4.821518 -4.063617,14.16183 2.28392,15.470082"
id="path10277"
sodipodi:nodetypes="csc" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 42.745642,53.011783 C 38.9848,55.587363 37.79208,61.25146 39.304807,64.411564"
id="path19092"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.4478083"
inkscape:transform-center-y="-5.17866" />
<g
id="g19090"
transform="matrix(1.7110999,0,0,1.5303902,-45.355532,52.079839)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.3 KiB

219
public/assets/numeric/n8_l1.svg Executable file
View File

@ -0,0 +1,219 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w8.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g9941">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 43.166082,69.337929 c 10.041865,3.581252 17.073324,1.419906 20.438237,-3.04324 4.133854,-5.483056 3.082465,-14.16368 -0.464163,-16.563446 C 50.571087,41.226602 40.896567,43.456551 39.353976,36.021404 35.612499,17.987819 63.766417,18.053818 65.60695,31.436214"
id="path127"
sodipodi:nodetypes="csssc" />
<g
id="g19076"
transform="matrix(1.2186431,0,0,1.0445256,4.9737543,4.7754049)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text19072"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.023604,24.444143 c 3.981479,-1.94131 9.037372,-2.798631 13.425938,-1.747177"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="6.3285755"
inkscape:transform-center-y="1.3354378" />
</g>
<g
id="g9949"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 65.649049,31.680591 c 0.361279,6.014275 -16.599028,13.503824 -23.733609,22.325413 -3.899469,4.821518 -4.063617,14.16183 2.28392,15.470082"
id="path10277"
sodipodi:nodetypes="csc" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 42.745642,53.011783 C 38.9848,55.587363 37.79208,61.25146 39.304807,64.411564"
id="path19092"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.4478083"
inkscape:transform-center-y="-5.17866" />
<g
id="g19090"
transform="matrix(1.7110999,0,0,1.5303902,-45.355532,52.079839)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

220
public/assets/numeric/n8_l2.svg Executable file
View File

@ -0,0 +1,220 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w8_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="w0.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g9941"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 43.166082,69.337929 c 10.041865,3.581252 17.073324,1.419906 20.438237,-3.04324 4.133854,-5.483056 3.082465,-14.16368 -0.464163,-16.563446 C 50.571087,41.226602 40.896567,43.456551 39.353976,36.021404 35.612499,17.987819 63.766417,18.053818 65.60695,31.436214"
id="path127"
sodipodi:nodetypes="csssc" />
<g
id="g19076"
transform="matrix(1.2186431,0,0,1.0445256,4.9737543,4.7754049)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="45.748825"
y="18.934566"
id="text19072"
transform="matrix(0.94966469,-0.00807366,0.00729318,1.0529412,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="45.748825"
y="18.934566">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.19732;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-45.073257"
cy="-16.922338"
transform="matrix(-0.99966972,-0.02569916,0.02094013,-0.99978073,0,0)"
rx="1.708829"
ry="1.8929724" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.023604,24.444143 c 3.981479,-1.94131 9.037372,-2.798631 13.425938,-1.747177"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="6.3285755"
inkscape:transform-center-y="1.3354378" />
</g>
<g
id="g9949"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 65.649049,31.680591 c 0.361279,6.014275 -16.599028,13.503824 -23.733609,22.325413 -3.899469,4.821518 -4.063617,14.16183 2.28392,15.470082"
id="path10277"
sodipodi:nodetypes="csc" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.54279;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 42.745642,53.011783 C 38.9848,55.587363 37.79208,61.25146 39.304807,64.411564"
id="path19092"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.4478083"
inkscape:transform-center-y="-5.17866" />
<g
id="g19090"
transform="matrix(1.7110999,0,0,1.5303902,-45.355532,52.079839)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.5 KiB

218
public/assets/numeric/n9.svg Executable file
View File

@ -0,0 +1,218 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="w8_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="n9.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g2733">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 61.320139,35.938187 C 58.572907,23.057623 41.944671,28.366313 40.693618,39.889307 39.371875,52.0634 47.473584,60.824447 54.144476,50.502828 60.00805,41.430339 61.3926,36.149338 61.3926,36.149338"
id="path127"
sodipodi:nodetypes="cssc" />
<g
id="g19076"
transform="matrix(0.95197944,-0.18321878,0.17851821,0.92755594,11.362464,20.294433)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.631275"
y="9.711072"
id="text19072"
transform="matrix(0.93107468,0.19207718,-0.20335779,1.0320758,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="48.631275"
y="9.711072">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.197337;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-48.100395"
cy="-2.605973"
transform="matrix(-0.94597462,-0.32424067,0.30611958,-0.95199307,0,0)"
rx="1.7133685"
ry="1.8882798" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.497576,32.608387 c 2.883663,-1.898869 6.75206,-3.236869 10.340556,-3.199642"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="4.7793359"
inkscape:transform-center-y="2.0008444" />
</g>
<g
id="g2802">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.212006,79.358313 c 0.241585,-16.483557 0.298687,-38.321144 0.09913,-45.884667"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g19090"
transform="matrix(1.2039578,0,0,1.2175428,0.8490144,22.177419)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 61.840472,46.630573 C 61.853302,43.892443 61.6155,38.709824 61.678371,36.371032"
id="path19667"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.072821416"
inkscape:transform-center-y="3.8615703" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

219
public/assets/numeric/n9_l1.svg Executable file
View File

@ -0,0 +1,219 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="n9.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="n9.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g2733">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 61.320139,35.938187 C 58.572907,23.057623 41.944671,28.366313 40.693618,39.889307 39.371875,52.0634 47.473584,60.824447 54.144476,50.502828 60.00805,41.430339 61.3926,36.149338 61.3926,36.149338"
id="path127"
sodipodi:nodetypes="cssc" />
<g
id="g19076"
transform="matrix(0.95197944,-0.18321878,0.17851821,0.92755594,11.362464,20.294433)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.631275"
y="9.711072"
id="text19072"
transform="matrix(0.93107468,0.19207718,-0.20335779,1.0320758,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="48.631275"
y="9.711072">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.197337;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-48.100395"
cy="-2.605973"
transform="matrix(-0.94597462,-0.32424067,0.30611958,-0.95199307,0,0)"
rx="1.7133685"
ry="1.8882798" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.497576,32.608387 c 2.883663,-1.898869 6.75206,-3.236869 10.340556,-3.199642"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="4.7793359"
inkscape:transform-center-y="2.0008444" />
</g>
<g
id="g2802"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.212006,79.358313 c 0.241585,-16.483557 0.298687,-38.321144 0.09913,-45.884667"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g19090"
transform="matrix(1.2039578,0,0,1.2175428,0.8490144,22.177419)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 61.840472,46.630573 C 61.853302,43.892443 61.6155,38.709824 61.678371,36.371032"
id="path19667"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.072821416"
inkscape:transform-center-y="3.8615703" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

220
public/assets/numeric/n9_l2.svg Executable file
View File

@ -0,0 +1,220 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
inkscape:export-filename="n9_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="n9.svg"
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="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:zoom="1.4478969"
inkscape:cx="172.3189"
inkscape:cy="215.48496"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<sodipodi:guide
position="50.044837,106.13694"
orientation="1,0"
id="guide61"
inkscape:locked="false" />
<sodipodi:guide
position="30.151491,87.756667"
orientation="1,0"
id="guide65"
inkscape:locked="false" />
<sodipodi:guide
position="34.933229,103.49635"
orientation="1,0"
id="guide67"
inkscape:locked="false" />
<sodipodi:guide
position="117.31671,32.570302"
orientation="0,-1"
id="guide69"
inkscape:locked="false" />
<sodipodi:guide
position="-33.075271,49.930251"
orientation="0,-1"
id="guide71"
inkscape:locked="false" />
<sodipodi:guide
position="65.121878,12.99501"
orientation="1,0"
id="guide550"
inkscape:locked="false" />
<sodipodi:guide
position="105.80432,67.655673"
orientation="0,-1"
id="guide343"
inkscape:locked="false" />
<sodipodi:guide
position="105.07338,82.274578"
orientation="0,-1"
id="guide347"
inkscape:locked="false" />
<sodipodi:guide
position="106.16979,17.585925"
orientation="0,-1"
id="guide349"
inkscape:locked="false" />
<sodipodi:guide
position="70.170742,91.411393"
orientation="1,0"
id="guide351"
inkscape:locked="false" />
<sodipodi:guide
position="49.521539,24.712641"
orientation="0,-1"
id="guide353"
inkscape:locked="false" />
<sodipodi:guide
position="50.069748,74.965125"
orientation="0,-1"
id="guide355"
inkscape:locked="false" />
<sodipodi:guide
position="57.561936,-11.83462"
orientation="1,0"
id="guide357"
inkscape:locked="false" />
<sodipodi:guide
position="42.394823,-21.154172"
orientation="1,0"
id="guide359"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-2" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<g
id="g2733"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 61.320139,35.938187 C 58.572907,23.057623 41.944671,28.366313 40.693618,39.889307 39.371875,52.0634 47.473584,60.824447 54.144476,50.502828 60.00805,41.430339 61.3926,36.149338 61.3926,36.149338"
id="path127"
sodipodi:nodetypes="cssc" />
<g
id="g19076"
transform="matrix(0.95197944,-0.18321878,0.17851821,0.92755594,11.362464,20.294433)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:3.93397px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.197318;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.631275"
y="9.711072"
id="text19072"
transform="matrix(0.93107468,0.19207718,-0.20335779,1.0320758,0,0)"><tspan
sodipodi:role="line"
id="tspan19070"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.197318;stroke-dasharray:none;stroke-opacity:1"
x="48.631275"
y="9.711072">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.197337;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="ellipse19074"
cx="-48.100395"
cy="-2.605973"
transform="matrix(-0.94597462,-0.32424067,0.30611958,-0.95199307,0,0)"
rx="1.7133685"
ry="1.8882798" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 43.497576,32.608387 c 2.883663,-1.898869 6.75206,-3.236869 10.340556,-3.199642"
id="path19082"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="4.7793359"
inkscape:transform-center-y="2.0008444" />
</g>
<g
id="g2802"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 61.212006,79.358313 c 0.241585,-16.483557 0.298687,-38.321144 0.09913,-45.884667"
id="path10277"
sodipodi:nodetypes="cc" />
<g
id="g19090"
transform="matrix(1.2039578,0,0,1.2175428,0.8490144,22.177419)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="49.768463"
y="10.649764"
id="text19086"
transform="matrix(0.99960636,-0.0021636,0.00216529,1.0003891,0,0)"><tspan
sodipodi:role="line"
id="tspan19084"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="49.768463"
y="10.649764">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle19088"
cx="-50.731476"
cy="-8.3328476"
r="1.2760839"
transform="rotate(-178.35508)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.400616;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 61.840472,46.630573 C 61.853302,43.892443 61.6155,38.709824 61.678371,36.371032"
id="path19667"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.072821416"
inkscape:transform-center-y="3.8615703" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -7,7 +7,7 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="as.svg"
sodipodi:docname="qs.svg"
inkscape:export-filename="ps_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
@ -130,9 +130,9 @@
</marker>
</defs>
<g
id="g12030">
id="g2736">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 75.679028,79.219842 C 75.237682,91.712247 66.819005,91.953239 65.88225,84.671899 66.077559,69.845234 66.408397,28.26379 66.408397,28.26379"
id="path1236-7"
sodipodi:nodetypes="ccc" />
@ -143,58 +143,9 @@
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0036710437"
inkscape:transform-center-y="9.6301294" />
<g
id="g2746"
transform="matrix(1.2159824,0,0,1.2159824,6.9149817,5.8894993)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g11986"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7.63014;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.983324,28.134764 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g1244"
transform="matrix(1.106128,-0.7492006,0.7492006,1.106128,-9.7220503,67.63524)"
transform="matrix(0.92958321,-0.62962361,0.62962361,0.92958321,3.3795753,56.873322)"
style="display:inline">
<text
xml:space="preserve"
@ -217,4 +168,52 @@
transform="rotate(-144.24458)" />
</g>
</g>
<g
id="g2716">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.62991;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.409271,29.39768 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g2588"
transform="matrix(1.2159824,0,0,1.2159824,5.7668764,12.20408)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2584"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2582"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2586"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -7,7 +7,7 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="as.svg"
sodipodi:docname="qs.svg"
inkscape:export-filename="qs.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
@ -130,9 +130,10 @@
</marker>
</defs>
<g
id="g12030">
id="g2736"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 75.679028,79.219842 C 75.237682,91.712247 66.819005,91.953239 65.88225,84.671899 66.077559,69.845234 66.408397,28.26379 66.408397,28.26379"
id="path1236-7"
sodipodi:nodetypes="ccc" />
@ -143,58 +144,9 @@
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0036710437"
inkscape:transform-center-y="9.6301294" />
<g
id="g2746"
transform="matrix(1.2159824,0,0,1.2159824,6.9149817,5.8894993)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g11986"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7.63014;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.983324,28.134764 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g1244"
transform="matrix(1.106128,-0.7492006,0.7492006,1.106128,-9.7220503,67.63524)"
transform="matrix(0.92958321,-0.62962361,0.62962361,0.92958321,3.3795753,56.873322)"
style="display:inline">
<text
xml:space="preserve"
@ -217,4 +169,52 @@
transform="rotate(-144.24458)" />
</g>
</g>
<g
id="g2716">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.62991;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.409271,29.39768 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g2588"
transform="matrix(1.2159824,0,0,1.2159824,5.7668764,12.20408)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2584"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2582"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2586"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

@ -7,7 +7,7 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="as.svg"
sodipodi:docname="qs.svg"
inkscape:export-filename="qs_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
@ -130,10 +130,10 @@
</marker>
</defs>
<g
id="g12030"
style="display:none">
id="g2736"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.96716;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 75.679028,79.219842 C 75.237682,91.712247 66.819005,91.953239 65.88225,84.671899 66.077559,69.845234 66.408397,28.26379 66.408397,28.26379"
id="path1236-7"
sodipodi:nodetypes="ccc" />
@ -144,58 +144,9 @@
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0036710437"
inkscape:transform-center-y="9.6301294" />
<g
id="g2746"
transform="matrix(1.2159824,0,0,1.2159824,6.9149817,5.8894993)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g11986"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7.63014;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.983324,28.134764 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g1244"
transform="matrix(1.106128,-0.7492006,0.7492006,1.106128,-9.7220503,67.63524)"
transform="matrix(0.92958321,-0.62962361,0.62962361,0.92958321,3.3795753,56.873322)"
style="display:inline">
<text
xml:space="preserve"
@ -218,4 +169,53 @@
transform="rotate(-144.24458)" />
</g>
</g>
<g
id="g2716"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.62991;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-4"
sodipodi:type="arc"
sodipodi:cx="52.315052"
sodipodi:cy="47.374203"
sodipodi:rx="10.841099"
sodipodi:ry="14.142745"
sodipodi:start="0.59929828"
sodipodi:end="5.9241271"
sodipodi:arc-type="arc"
d="m 61.26689,55.351604 a 10.841099,14.142745 0 0 1 -12.767927,5.260197 10.841099,14.142745 0 0 1 -6.946892,-14.932343 10.841099,14.142745 0 0 1 9.470884,-12.347192 10.841099,14.142745 0 0 1 11.441839,9.07228"
sodipodi:open="true"
transform="matrix(0.99676556,-0.08036428,0.09129966,0.99582346,0,0)" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-1);paint-order:stroke fill markers"
d="m 53.409271,29.39768 c 4.098495,-1.318063 7.359315,-0.116537 9.681191,2.371884"
id="path13743-5-5"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="5.1741954"
inkscape:transform-center-y="-1.536351" />
<g
id="g2588"
transform="matrix(1.2159824,0,0,1.2159824,5.7668764,12.20408)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2584"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2582"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2586"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

View File

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedAHeight = 35;
animatedAScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedAHeight = 20;
animatedAScale = 0.73;
}
@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -119,33 +109,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
@ -174,6 +137,19 @@ import Layout from "../../layouts/Layout.astro";
fill: true // Apply shadow to fill (background color)
}
});
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedBHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedBHeight = 20;
}
// let hideButton;
@ -92,8 +84,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +106,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +121,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedAHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedAHeight = 20;
}
// let hideButton;
@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,9 +103,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -127,17 +115,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedDHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedDHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedAHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedAHeight = 20;
}
function preload() {
@ -92,7 +84,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -115,7 +106,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -130,17 +120,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedFHeight = 35;
animatedFScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedFHeight = 20;
animatedFScale = 0.73;
}
@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -118,8 +108,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedGHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedGHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,11 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedHHeight = 35;
animatedHScale = 0.65;
} else{
cloudeSize = 500;
@ -74,10 +69,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedHHeight = 20;
animatedHScale = 0.73;
}
@ -96,8 +87,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -118,7 +107,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedIHeight = 35;
animatedIScale = 0.65;
} else{
@ -74,11 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedIHeight = 20;
animatedIScale = 0.73;
}
function preload() {
@ -96,8 +87,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -118,7 +107,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedJHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedJHeight = 20;
}
// let hideButton;
@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedKHeight = 35;
animatedKScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedKHeight = 20;
animatedKScale = 0.73;
}
@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -118,7 +108,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -133,17 +122,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterK').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedLHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedLHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
@ -153,7 +132,6 @@ import Layout from "../../layouts/Layout.astro";
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedMHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedMHeight = 20;
}
function preload() {
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedNHeight = 35;
animatedNScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedNHeight = 20;
animatedNScale = 0.73;
}
@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -119,7 +109,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -134,17 +123,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedOHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedOHeight = 20;
}
// let hideButton;
@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedPHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedPHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedQHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedQHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedRHeight = 35;
animatedRScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedRHeight = 20;
animatedRScale = 0.73;
}
@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -119,7 +109,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -134,17 +123,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedSHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedSHeight = 20;
}
// let hideButton;
@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterS').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedTHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedTHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -129,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedUHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedUHeight = 20;
}
// let hideButton;
@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,8 +103,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -127,17 +116,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVHeight = 20;
}
// let hideButton;
@ -90,7 +82,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -113,7 +104,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -128,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedWHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedWHeight = 20;
}
function preload() {
@ -90,7 +82,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -113,7 +104,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@ -128,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedXHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedXHeight = 20;
}
// let hideButton;
@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +105,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -129,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedYHeight = 35;
animatedYScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedYHeight = 20;
animatedYScale = 0.73;
}
@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -119,8 +109,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -134,17 +122,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

View File

@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.365;
beanieWidth = 135;
beanieHeight = 170;
animatedZHeight = 35;
animatedZScale = 0.65;
} else{
@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.45;
beanieWidth = 200;
beanieHeight = 255;
animatedZHeight = 20;
animatedZScale = 0.73;
}
@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
// this.load.image('beanie', '/assets/beanie.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -118,8 +108,6 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

268
src/pages/numeric/0.astro Normal file
View File

@ -0,0 +1,268 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30;
letterScale = 1.1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated0videoScale = 0.6;
animated0Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.2;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated0videoScale = 0.70;
animated0Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated0', '/assets/animated-letter/number_0.mp4');
this.load.svg('number0', '/assets/numeric/n0.svg');
this.load.svg('layer1', '/assets/numeric/n0.svg');
this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 16 : customWidth * 0.70;
textY = isMobile ? customHeight / 6.5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 0) {
firstTextLayer.setVisible(false);
firstLayer.setAlpha(1);
} else {
firstLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

271
src/pages/numeric/1.astro Normal file
View File

@ -0,0 +1,271 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30;
letterScale = 1.1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated1videoScale = 0.6;
animated1Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.2;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated1videoScale = 0.70;
animated1Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
this.load.svg('number1', '/assets/numeric/n1.svg');
this.load.svg('layer1', '/assets/numeric/n1.svg');
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.70;
textY = isMobile ? customHeight / 6.5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 0) {
firstTextLayer.setVisible(false);
firstLayer.setAlpha(1);
} else {
firstLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

304
src/pages/numeric/2.astro Normal file
View File

@ -0,0 +1,304 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 58;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated2Scale = 0.55;
animated2Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 50;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated2Scale = 0.55;
animated2Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
this.load.svg('number2', '/assets/numeric/n2.svg');
this.load.svg('layer1', '/assets/numeric/n2.svg');
this.load.svg('layer2', '/assets/numeric/n2.svg');
this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

303
src/pages/numeric/3.astro Normal file
View File

@ -0,0 +1,303 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 48;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated3Scale = 0.55;
animated3Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 30;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated3Scale = 0.55;
animated3Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated3', '/assets/animated-letter/number_3.mp4');
this.load.svg('number3', '/assets/numeric/n3.svg');
this.load.svg('layer1', '/assets/numeric/n3.svg');
this.load.svg('layer2', '/assets/numeric/n3.svg');
this.load.audio('audioOne', '/assets/audio/roll-around.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number3').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number3').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated3').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioOne');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

333
src/pages/numeric/4.astro Normal file
View File

@ -0,0 +1,333 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
// let x = 100;
// // Use x
// console.log(x);
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 20;
letterScale = 1.2;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated4Height = 35;
animated4Scale = 0.65;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.3;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated4Height = 20;
animated4Scale = 0.7;
}
function preload() {
this.load.video('animated4', '/assets/animated-letter/number_4.mp4');
this.load.svg('number4', '/assets/numeric/n4.svg');
this.load.svg('layer1', '/assets/numeric/n4_l1.svg');
this.load.svg('layer2', '/assets/numeric/n4_l2.svg');
this.load.svg('layer3', '/assets/numeric/n4_l3.svg');
this.load.audio('audioOne', '/assets/audio/down.mp3');
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated4').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// add function after end video;
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioOne');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
let thirdDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 70) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 70) {
secondTextLayer.setVisible(false);
thirdTextLayer.setVisible(true);
audioThreeAudio.play();
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
});
// Add this code for thirdLayer
thirdLayer.on('dragstart', (pointer) => {
thirdDragStartPoint.x = pointer.x;
thirdDragStartPoint.y = pointer.y;
});
thirdLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false);
} else {
thirdLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
// console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

334
src/pages/numeric/5.astro Normal file
View File

@ -0,0 +1,334 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let isDrawing = false;
// let x = 100;
// // Use x
// console.log(x);
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 50;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated5Height = 35;
animated5Scale = 0.55;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 40;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated5Height = 20;
animated5Scale = 0.6;
}
function preload() {
this.load.video('animated5', '/assets/animated-letter/number_5.mp4');
this.load.svg('number5', '/assets/numeric/n5.svg');
this.load.svg('layer1', '/assets/numeric/n5_l1.svg');
this.load.svg('layer2', '/assets/numeric/n5_l2.svg');
this.load.svg('layer3', '/assets/numeric/n5_l3.svg');
this.load.audio('audioOne', '/assets/audio/down.mp3');
this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
this.load.audio('audioThree', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated5').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// add function after end video;
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioThree');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
let thirdDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 70) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 70) {
secondTextLayer.setVisible(false);
thirdTextLayer.setVisible(true);
audioThreeAudio.play();
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
});
// Add this code for thirdLayer
thirdLayer.on('dragstart', (pointer) => {
thirdDragStartPoint.x = pointer.x;
thirdDragStartPoint.y = pointer.y;
});
thirdLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false);
} else {
thirdLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
// console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

304
src/pages/numeric/6.astro Normal file
View File

@ -0,0 +1,304 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 30;
letterHeight = 30;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated6Scale = 0.55;
animated6Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated6Scale = 0.55;
animated6Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated6', '/assets/animated-letter/number_6.mp4');
this.load.svg('number6', '/assets/numeric/n6.svg');
this.load.svg('layer1', '/assets/numeric/n6_l1.svg');
this.load.svg('layer2', '/assets/numeric/n6_l2.svg');
this.load.audio('audioOne', '/assets/audio/curve-down.mp3');
this.load.audio('audioTwo', '/assets/audio/loop.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number6').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number6').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated6').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Loop',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

304
src/pages/numeric/7.astro Normal file
View File

@ -0,0 +1,304 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 30;
letterHeight = 30;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated7Scale = 0.55;
animated7Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated7Scale = 0.55;
animated7Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated7', '/assets/animated-letter/number_7.mp4');
this.load.svg('number7', '/assets/numeric/n7.svg');
this.load.svg('layer1', '/assets/numeric/n7_l1.svg');
this.load.svg('layer2', '/assets/numeric/n7_l2.svg');
this.load.audio('audioOne', '/assets/audio/slide.mp3');
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number7').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number7').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated7').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

304
src/pages/numeric/8.astro Normal file
View File

@ -0,0 +1,304 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 30;
letterHeight = 30;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated8Scale = 0.55;
animated8Height = 15;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated8Scale = 0.55;
animated8Height = 0;
}
// let hideButton;
function preload() {
this.load.video('animated8', '/assets/animated-letter/number_8.mp4');
this.load.svg('number8', '/assets/numeric/n8.svg');
this.load.svg('layer1', '/assets/numeric/n8_l1.svg');
this.load.svg('layer2', '/assets/numeric/n8_l2.svg');
this.load.audio('audioOne', '/assets/audio/hook-snake.mp3');
this.load.audio('audioTwo', '/assets/audio/roll-up.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number8').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number8').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated8').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Roll Up',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

304
src/pages/numeric/9.astro Normal file
View File

@ -0,0 +1,304 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: {
preload: preload,
create: create,
update: update
}
};
// backgroundImage.png
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer;
let graphics;
let isDrawing = false;
if(isMobile){
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = 30;
letterHeight = 30;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated9Scale = 0.55;
animated9Height = 32;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated9Scale = 0.55;
animated9Height = 20;
}
// let hideButton;
function preload() {
this.load.video('animated9', '/assets/animated-letter/number_9.mp4');
this.load.svg('number9', '/assets/numeric/n9.svg');
this.load.svg('layer1', '/assets/numeric/n9_l1.svg');
this.load.svg('layer2', '/assets/numeric/n9_l2.svg');
this.load.audio('audioOne', '/assets/audio/curve-around.mp3');
this.load.audio('audioTwo', '/assets/audio/tall-down.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number9').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number9').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated9').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);
// Play the video
animatedLetter.play();
animatedLetter.setVisible(false);
// You can set additional properties for the video, such as loop and mute:
animatedLetter.setLoop(true); // Loop the video
animatedLetter.setMute(false); // Unmute the video
animatedLetter.on('complete', function () {
// Video playback is complete
// You can add your code here for what to do when the video finishes.
});
let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 0) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
``
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >=100) {
secondTextLayer.setVisible(false);
secondLayer.setAlpha(1);
} else {
secondLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
}
function update() {
}
</script>

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedAHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedAHeight = 20;
}
// let hideButton;
@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedBHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedBHeight = 20;
}
// let hideButton;
@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedCHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedCHeight = 20;
}
// let hideButton;
@ -89,7 +83,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -112,8 +106,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -128,17 +121,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideScale = 0.6
animatedDHeight = 32;
} else{
@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideScale = 0.9;
animatedDHeight = 20;
}
@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedEHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedEHeight = 20;
}
// let hideButton;
@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedFHeight = 32;
} else{
cloudeSize = 500;
@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedFHeight = 20;
}
// let hideButton;
@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideoScale = 0.63;
animatedGHeight = 32;
} else{
@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideoScale = 0.7;
animatedGHeight = 20;
}
@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideoScale = 0.63;
animatedHHeight = 32;
} else{
@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideoScale = 0.7;
animatedHHeight = 20;
}
@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideoScale = 0.5;
animatedIHeight = 32;
} else{
@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideoScale = 0.55;
animatedIHeight = 20;
}
@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setDepth(2).setScale(letterScale);

View File

@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
beanieScale = 0.35;
beanieScalePlus = 0.38;
beanieWidth = 135;
beanieHeight = 170;
animatedVideoScale = 0.5;
animatedJHeight = 32;
} else{
@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
beanieScale = 0.4;
beanieScalePlus = 0.44;
beanieWidth = 200;
beanieHeight = 245;
animatedVideoScale = 0.7;
animatedJHeight = 20;
}
@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('beanie', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
const beanieduration = 2500;
this.tweens.add({
targets: beanie,
scaleX: beaniescaleFactor + 0.004,
scaleY: beaniescaleFactor,
duration: beanieduration,
ease: 'Redial',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 - 20 , customHeight / 2 + letterJeight, 'letterJ').setDepth(2).setScale(letterScale);

Some files were not shown because too many files have changed in this diff Show More