scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,304 lines (836 loc) • 87.6 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 040</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="../docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="canvas-001.html">
./demo/canvas-001.js
</a>
<a class="source" href="canvas-002.html">
./demo/canvas-002.js
</a>
<a class="source" href="canvas-003.html">
./demo/canvas-003.js
</a>
<a class="source" href="canvas-004.html">
./demo/canvas-004.js
</a>
<a class="source" href="canvas-005.html">
./demo/canvas-005.js
</a>
<a class="source" href="canvas-006.html">
./demo/canvas-006.js
</a>
<a class="source" href="canvas-007.html">
./demo/canvas-007.js
</a>
<a class="source" href="canvas-008.html">
./demo/canvas-008.js
</a>
<a class="source" href="canvas-009.html">
./demo/canvas-009.js
</a>
<a class="source" href="canvas-010.html">
./demo/canvas-010.js
</a>
<a class="source" href="canvas-011.html">
./demo/canvas-011.js
</a>
<a class="source" href="canvas-012.html">
./demo/canvas-012.js
</a>
<a class="source" href="canvas-013.html">
./demo/canvas-013.js
</a>
<a class="source" href="canvas-014.html">
./demo/canvas-014.js
</a>
<a class="source" href="canvas-015.html">
./demo/canvas-015.js
</a>
<a class="source" href="canvas-015a.html">
./demo/canvas-015a.js
</a>
<a class="source" href="canvas-016.html">
./demo/canvas-016.js
</a>
<a class="source" href="canvas-017.html">
./demo/canvas-017.js
</a>
<a class="source" href="canvas-018.html">
./demo/canvas-018.js
</a>
<a class="source" href="canvas-019.html">
./demo/canvas-019.js
</a>
<a class="source" href="canvas-019a.html">
./demo/canvas-019a.js
</a>
<a class="source" href="canvas-020.html">
./demo/canvas-020.js
</a>
<a class="source" href="canvas-021.html">
./demo/canvas-021.js
</a>
<a class="source" href="canvas-022.html">
./demo/canvas-022.js
</a>
<a class="source" href="canvas-023.html">
./demo/canvas-023.js
</a>
<a class="source" href="canvas-024.html">
./demo/canvas-024.js
</a>
<a class="source" href="canvas-025.html">
./demo/canvas-025.js
</a>
<a class="source" href="canvas-026.html">
./demo/canvas-026.js
</a>
<a class="source" href="canvas-027.html">
./demo/canvas-027.js
</a>
<a class="source" href="canvas-028.html">
./demo/canvas-028.js
</a>
<a class="source" href="canvas-029.html">
./demo/canvas-029.js
</a>
<a class="source" href="canvas-030.html">
./demo/canvas-030.js
</a>
<a class="source" href="canvas-031.html">
./demo/canvas-031.js
</a>
<a class="source" href="canvas-032.html">
./demo/canvas-032.js
</a>
<a class="source" href="canvas-033.html">
./demo/canvas-033.js
</a>
<a class="source" href="canvas-034.html">
./demo/canvas-034.js
</a>
<a class="source" href="canvas-035.html">
./demo/canvas-035.js
</a>
<a class="source" href="canvas-036.html">
./demo/canvas-036.js
</a>
<a class="source" href="canvas-037.html">
./demo/canvas-037.js
</a>
<a class="source" href="canvas-038.html">
./demo/canvas-038.js
</a>
<a class="source" href="canvas-039.html">
./demo/canvas-039.js
</a>
<a class="source" href="canvas-040.html">
./demo/canvas-040.js
</a>
<a class="source" href="canvas-041.html">
./demo/canvas-041.js
</a>
<a class="source" href="canvas-042.html">
./demo/canvas-042.js
</a>
<a class="source" href="canvas-043.html">
./demo/canvas-043.js
</a>
<a class="source" href="canvas-044.html">
./demo/canvas-044.js
</a>
<a class="source" href="canvas-045.html">
./demo/canvas-045.js
</a>
<a class="source" href="canvas-046.html">
./demo/canvas-046.js
</a>
<a class="source" href="canvas-047.html">
./demo/canvas-047.js
</a>
<a class="source" href="canvas-048.html">
./demo/canvas-048.js
</a>
<a class="source" href="canvas-049.html">
./demo/canvas-049.js
</a>
<a class="source" href="canvas-050.html">
./demo/canvas-050.js
</a>
<a class="source" href="canvas-051.html">
./demo/canvas-051.js
</a>
<a class="source" href="canvas-052.html">
./demo/canvas-052.js
</a>
<a class="source" href="canvas-053.html">
./demo/canvas-053.js
</a>
<a class="source" href="canvas-054.html">
./demo/canvas-054.js
</a>
<a class="source" href="canvas-055.html">
./demo/canvas-055.js
</a>
<a class="source" href="canvas-056.html">
./demo/canvas-056.js
</a>
<a class="source" href="canvas-057.html">
./demo/canvas-057.js
</a>
<a class="source" href="canvas-058.html">
./demo/canvas-058.js
</a>
<a class="source" href="canvas-059.html">
./demo/canvas-059.js
</a>
<a class="source" href="canvas-060.html">
./demo/canvas-060.js
</a>
<a class="source" href="canvas-061.html">
./demo/canvas-061.js
</a>
<a class="source" href="canvas-062.html">
./demo/canvas-062.js
</a>
<a class="source" href="canvas-063.html">
./demo/canvas-063.js
</a>
<a class="source" href="canvas-064.html">
./demo/canvas-064.js
</a>
<a class="source" href="core-001.html">
./demo/core-001.js
</a>
<a class="source" href="delaunator-001.html">
./demo/delaunator-001.js
</a>
<a class="source" href="delaunator-002.html">
./demo/delaunator-002.js
</a>
<a class="source" href="dom-001.html">
./demo/dom-001.js
</a>
<a class="source" href="dom-002.html">
./demo/dom-002.js
</a>
<a class="source" href="dom-003.html">
./demo/dom-003.js
</a>
<a class="source" href="dom-004.html">
./demo/dom-004.js
</a>
<a class="source" href="dom-005.html">
./demo/dom-005.js
</a>
<a class="source" href="dom-006.html">
./demo/dom-006.js
</a>
<a class="source" href="dom-007.html">
./demo/dom-007.js
</a>
<a class="source" href="dom-008.html">
./demo/dom-008.js
</a>
<a class="source" href="dom-009.html">
./demo/dom-009.js
</a>
<a class="source" href="dom-010.html">
./demo/dom-010.js
</a>
<a class="source" href="dom-011.html">
./demo/dom-011.js
</a>
<a class="source" href="dom-012.html">
./demo/dom-012.js
</a>
<a class="source" href="dom-013.html">
./demo/dom-013.js
</a>
<a class="source" href="dom-015.html">
./demo/dom-015.js
</a>
<a class="source" href="dom-016.html">
./demo/dom-016.js
</a>
<a class="source" href="filters-001.html">
./demo/filters-001.js
</a>
<a class="source" href="filters-002.html">
./demo/filters-002.js
</a>
<a class="source" href="filters-002a.html">
./demo/filters-002a.js
</a>
<a class="source" href="filters-003.html">
./demo/filters-003.js
</a>
<a class="source" href="filters-004.html">
./demo/filters-004.js
</a>
<a class="source" href="filters-005.html">
./demo/filters-005.js
</a>
<a class="source" href="filters-006.html">
./demo/filters-006.js
</a>
<a class="source" href="filters-007.html">
./demo/filters-007.js
</a>
<a class="source" href="filters-008.html">
./demo/filters-008.js
</a>
<a class="source" href="filters-009.html">
./demo/filters-009.js
</a>
<a class="source" href="filters-010.html">
./demo/filters-010.js
</a>
<a class="source" href="filters-011.html">
./demo/filters-011.js
</a>
<a class="source" href="filters-012.html">
./demo/filters-012.js
</a>
<a class="source" href="filters-013.html">
./demo/filters-013.js
</a>
<a class="source" href="filters-014.html">
./demo/filters-014.js
</a>
<a class="source" href="filters-015.html">
./demo/filters-015.js
</a>
<a class="source" href="filters-016.html">
./demo/filters-016.js
</a>
<a class="source" href="filters-017.html">
./demo/filters-017.js
</a>
<a class="source" href="filters-018.html">
./demo/filters-018.js
</a>
<a class="source" href="filters-019.html">
./demo/filters-019.js
</a>
<a class="source" href="filters-020.html">
./demo/filters-020.js
</a>
<a class="source" href="filters-021.html">
./demo/filters-021.js
</a>
<a class="source" href="filters-022.html">
./demo/filters-022.js
</a>
<a class="source" href="filters-023.html">
./demo/filters-023.js
</a>
<a class="source" href="filters-024.html">
./demo/filters-024.js
</a>
<a class="source" href="filters-025.html">
./demo/filters-025.js
</a>
<a class="source" href="filters-026.html">
./demo/filters-026.js
</a>
<a class="source" href="filters-027.html">
./demo/filters-027.js
</a>
<a class="source" href="filters-101.html">
./demo/filters-101.js
</a>
<a class="source" href="filters-102.html">
./demo/filters-102.js
</a>
<a class="source" href="filters-103.html">
./demo/filters-103.js
</a>
<a class="source" href="filters-104.html">
./demo/filters-104.js
</a>
<a class="source" href="filters-105.html">
./demo/filters-105.js
</a>
<a class="source" href="filters-501.html">
./demo/filters-501.js
</a>
<a class="source" href="filters-502.html">
./demo/filters-502.js
</a>
<a class="source" href="filters-503.html">
./demo/filters-503.js
</a>
<a class="source" href="filters-504.html">
./demo/filters-504.js
</a>
<a class="source" href="filters-505.html">
./demo/filters-505.js
</a>
<a class="source" href="mediapipe-001.html">
./demo/mediapipe-001.js
</a>
<a class="source" href="mediapipe-002.html">
./demo/mediapipe-002.js
</a>
<a class="source" href="mediapipe-003.html">
./demo/mediapipe-003.js
</a>
<a class="source" href="modules-001.html">
./demo/modules-001.js
</a>
<a class="source" href="modules-002.html">
./demo/modules-002.js
</a>
<a class="source" href="modules-003.html">
./demo/modules-003.js
</a>
<a class="source" href="modules-004.html">
./demo/modules-004.js
</a>
<a class="source" href="modules-005.html">
./demo/modules-005.js
</a>
<a class="source" href="packets-001.html">
./demo/packets-001.js
</a>
<a class="source" href="packets-002.html">
./demo/packets-002.js
</a>
<a class="source" href="particles-001.html">
./demo/particles-001.js
</a>
<a class="source" href="particles-002.html">
./demo/particles-002.js
</a>
<a class="source" href="particles-003.html">
./demo/particles-003.js
</a>
<a class="source" href="particles-004.html">
./demo/particles-004.js
</a>
<a class="source" href="particles-005.html">
./demo/particles-005.js
</a>
<a class="source" href="particles-006.html">
./demo/particles-006.js
</a>
<a class="source" href="particles-007.html">
./demo/particles-007.js
</a>
<a class="source" href="particles-008.html">
./demo/particles-008.js
</a>
<a class="source" href="particles-009.html">
./demo/particles-009.js
</a>
<a class="source" href="particles-010.html">
./demo/particles-010.js
</a>
<a class="source" href="particles-011.html">
./demo/particles-011.js
</a>
<a class="source" href="particles-012.html">
./demo/particles-012.js
</a>
<a class="source" href="particles-013.html">
./demo/particles-013.js
</a>
<a class="source" href="particles-014.html">
./demo/particles-014.js
</a>
<a class="source" href="particles-015.html">
./demo/particles-015.js
</a>
<a class="source" href="particles-016.html">
./demo/particles-016.js
</a>
<a class="source" href="rapier-001.html">
./demo/rapier-001.js
</a>
<a class="source" href="snippets-001.html">
./demo/snippets-001.js
</a>
<a class="source" href="snippets-002.html">
./demo/snippets-002.js
</a>
<a class="source" href="snippets-003.html">
./demo/snippets-003.js
</a>
<a class="source" href="snippets-004.html">
./demo/snippets-004.js
</a>
<a class="source" href="snippets-005.html">
./demo/snippets-005.js
</a>
<a class="source" href="snippets-006.html">
./demo/snippets-006.js
</a>
<a class="source" href="temp-000.html">
./demo/temp-000.js
</a>
<a class="source" href="temp-001.html">
./demo/temp-001.js
</a>
<a class="source" href="temp-001a.html">
./demo/temp-001a.js
</a>
<a class="source" href="temp-002.html">
./demo/temp-002.js
</a>
<a class="source" href="temp-003.html">
./demo/temp-003.js
</a>
<a class="source" href="temp-004.html">
./demo/temp-004.js
</a>
<a class="source" href="temp-005.html">
./demo/temp-005.js
</a>
<a class="source" href="temp-006.html">
./demo/temp-006.js
</a>
<a class="source" href="temp-007.html">
./demo/temp-007.js
</a>
<a class="source" href="temp-008.html">
./demo/temp-008.js
</a>
<a class="source" href="temp-009.html">
./demo/temp-009.js
</a>
<a class="source" href="temp-010.html">
./demo/temp-010.js
</a>
<a class="source" href="temp-011.html">
./demo/temp-011.js
</a>
<a class="source" href="temp-012.html">
./demo/temp-012.js
</a>
<a class="source" href="temp-013.html">
./demo/temp-013.js
</a>
<a class="source" href="temp-014.html">
./demo/temp-014.js
</a>
<a class="source" href="temp-015.html">
./demo/temp-015.js
</a>
<a class="source" href="temp-016.html">
./demo/temp-016.js
</a>
<a class="source" href="temp-017.html">
./demo/temp-017.js
</a>
<a class="source" href="temp-018.html">
./demo/temp-018.js
</a>
<a class="source" href="temp-018a.html">
./demo/temp-018a.js
</a>
<a class="source" href="temp-019.html">
./demo/temp-019.js
</a>
<a class="source" href="temp-020.html">
./demo/temp-020.js
</a>
<a class="source" href="temp-021.html">
./demo/temp-021.js
</a>
<a class="source" href="temp-022.html">
./demo/temp-022.js
</a>
<a class="source" href="temp-023.html">
./demo/temp-023.js
</a>
<a class="source" href="temp-024.html">
./demo/temp-024.js
</a>
<a class="source" href="temp-025.html">
./demo/temp-025.js
</a>
<a class="source" href="temp-026.html">
./demo/temp-026.js
</a>
<a class="source" href="temp-027.html">
./demo/temp-027.js
</a>
<a class="source" href="temp-028.html">
./demo/temp-028.js
</a>
<a class="source" href="temp-029.html">
./demo/temp-029.js
</a>
<a class="source" href="temp-030.html">
./demo/temp-030.js
</a>
<a class="source" href="temp-031.html">
./demo/temp-031.js
</a>
<a class="source" href="temp-032.html">
./demo/temp-032.js
</a>
<a class="source" href="temp-033.html">
./demo/temp-033.js
</a>
<a class="source" href="temp-034.html">
./demo/temp-034.js
</a>
<a class="source" href="temp-035.html">
./demo/temp-035.js
</a>
<a class="source" href="temp-036.html">
./demo/temp-036.js
</a>
<a class="source" href="temp-037.html">
./demo/temp-037.js
</a>
<a class="source" href="temp-100.html">
./demo/temp-100.js
</a>
<a class="source" href="temp-101.html">
./demo/temp-101.js
</a>
<a class="source" href="temp-102.html">
./demo/temp-102.js
</a>
<a class="source" href="temp-103.html">
./demo/temp-103.js
</a>
<a class="source" href="temp-104.html">
./demo/temp-104.js
</a>
<a class="source" href="temp-200.html">
./demo/temp-200.js
</a>
<a class="source" href="temp-201.html">
./demo/temp-201.js
</a>
<a class="source" href="temp-301.html">
./demo/temp-301.js
</a>
<a class="source" href="temp-inkscapeSvgFilters.html">
./demo/temp-inkscapeSvgFilters.js
</a>
<a class="source" href="temp-lottie.html">
./demo/temp-lottie.js
</a>
<a class="source" href="tensorflow-001.html">
./demo/tensorflow-001.js
</a>
<a class="source" href="tensorflow-002.html">
./demo/tensorflow-002.js
</a>
<a class="source" href="utilities.html">
./demo/utilities.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="demo-canvas-040">Demo Canvas 040</h1>
<p>Trace out a Shape path over time</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<p><a href="../../demo/canvas-040.html">Run code</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>;
<span class="hljs-keyword">import</span> { reportSpeed } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utilities.js'</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="scene-setup">Scene setup</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> canvas = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">canvas</span>.<span class="hljs-property">mycanvas</span>;
<span class="hljs-keyword">const</span> balancePoint = <span class="hljs-number">2500</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Create a Shape entity to act as a path for our strokeStyle outline</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> arrow = scrawl.<span class="hljs-title function_">makeShape</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'my-arrow'</span>,
<span class="hljs-attr">pathDefinition</span>: <span class="hljs-string">'M266.2,703.1 h-178 L375.1,990 l287-286.9 H481.9 C507.4,365,683.4,91.9,911.8,25.5 877,15.4,840.9,10,803.9,10 525.1,10,295.5,313.4,266.2,703.1 z'</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'30%'</span>, <span class="hljs-string">'30%'</span>],
<span class="hljs-attr">handle</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'red'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'lavender'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">scale</span>: <span class="hljs-number">0.3</span>,
<span class="hljs-attr">scaleOutline</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">roll</span>: -<span class="hljs-number">90</span>,</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>We create this effect using a dashed line with very large dash/nodash values</p>
<ul>
<li>We can then set the offset to the point where the displayed dash ends, so it looks like the arrow doesn’t have a stroke</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">lineDash</span>: [balancePoint, balancePoint],
<span class="hljs-attr">lineDashOffset</span>: balancePoint,</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>To retrieve the Shape’s length, we need to tell it that it is being used as a path</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">precision</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillThenDraw'</span>,
});
<span class="hljs-keyword">let</span> japan = arrow.<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'japan'</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'70%'</span>, <span class="hljs-string">'50%'</span>],
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">roll</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">scale</span>: <span class="hljs-number">0.6</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'ivory'</span>,
<span class="hljs-attr">pathDefinition</span>: <span class="hljs-string">`M96.947,642.362c0.029,0.929,1.348,0.51,2.576,0.03c1.229-0.479,2.368-1.019,3.207-1.079c0.838-0.06,1.378,0.359,1.677-0.06
s0.36-1.678,0.959-2.517c0.599-0.839,1.738-1.259,2.517-1.798s1.198-1.198,0.869-2.008c-0.33-0.809-1.408-1.767-1.468-2.756
c-0.06-0.988,0.899-2.008,1.887-2.157c0.989-0.149,2.008,0.569,2.787,0.989c0.779,0.419,1.318,0.539,1.947,0.539
c0.629,0,1.348-0.12,2.337-1.708s2.247-4.644,3.057-6.861c0.809-2.217,1.168-3.595,1.108-4.674c-0.06-1.078-0.539-1.857-0.539-3.115
c0-1.259,0.479-2.996,1.648-5.603c1.168-2.606,3.026-6.082,4.284-8.809c1.259-2.727,1.918-4.704,2.427-6.232
c0.509-1.527,0.869-2.606,1.558-3.745c0.688-1.138,1.708-2.336,2.757-3.385c1.048-1.049,2.126-1.947,3.146-2.847
c1.019-0.898,1.977-1.798,2.517-2.696c0.539-0.898,0.659-1.798,0.09-2.576c-0.57-0.779-1.828-1.438-1.738-2.367
s1.528-2.127,1.498-2.757c-0.029-0.629-1.528-0.688-2.486-1.168s-1.378-1.378-1.318-2.367c0.06-0.988,0.599-2.067,0.21-2.396
c-0.39-0.33-1.708,0.09-3.625-0.24c-1.917-0.329-4.434-1.407-5.183-2.156c-0.749-0.75,0.27-1.169,1.438-1.738
c1.168-0.569,2.486-1.288,3.385-2.696c0.899-1.408,1.379-3.506,1.229-5.244c-0.149-1.737-0.929-3.115-2.307-3.805
c-1.378-0.689-3.355-0.689-4.523-0.03c-1.169,0.659-1.528,1.978-2.427,2.727s-2.336,0.929-3.984,0.779
c-1.648-0.15-3.505-0.63-4.704-1.349c-1.198-0.719-1.738-1.678-2.217-3.535c-0.479-1.857-0.899-4.614-1.139-6.292
s-0.3-2.277-0.839-2.187c-0.539,0.09-1.558,0.869-2.606,0.898c-1.049,0.03-2.127-0.688-3.146-0.839
c-1.02-0.15-1.978,0.27-3.176,0.659c-1.199,0.39-2.637,0.749-3.595,1.378c-0.959,0.63-1.438,1.528-1.828,2.337
c-0.39,0.81-0.689,1.528-1.228,2.098c-0.54,0.568-1.319,0.988-1.408,1.468c-0.09,0.479,0.509,1.019,0.629,1.618
c0.12,0.599-0.24,1.258-1.288,1.078c-1.049-0.18-2.787-1.198-3.985-1.348c-1.198-0.15-1.858,0.569-2.367,1.468
s-0.869,1.978-1.468,2.786c-0.599,0.81-1.438,1.349-2.037,1.109c-0.599-0.24-0.959-1.259-1.738-1.889
c-0.779-0.629-1.978-0.868-2.846-0.509s-1.408,1.318-1.798,2.037c-0.389,0.719-0.629,1.198-0.359,1.798
c0.27,0.599,1.048,1.318,1.258,1.978s-0.15,1.258-0.958,1.078c-0.809-0.18-2.068-1.139-3.296-1.498
c-1.228-0.359-2.426-0.119-3.085,0.39c-0.659,0.51-0.779,1.288-0.958,2.188c-0.18,0.898-0.42,1.917-0.18,2.606
c0.24,0.688,0.958,1.048,1.558,1.768c0.599,0.719,1.079,1.797,2.067,2.517c0.988,0.719,2.487,1.078,3.715,1.647
c1.229,0.569,2.187,1.349,2.666,2.487c0.48,1.138,0.48,2.637,0.18,3.625c-0.299,0.989-0.898,1.468-1.797,1.378
s-2.097-0.749-2.936-1.678c-0.839-0.929-1.318-2.127-1.918-2.457c-0.599-0.329-1.318,0.21-1.528,1.349s0.09,2.876,0.209,4.584
c0.12,1.708,0.06,3.386-0.419,5.123c-0.479,1.738-1.378,3.535-1.199,4.254c0.18,0.72,1.438,0.36,2.487-0.06
c1.049-0.419,1.887-0.898,3.056-2.187c1.168-1.289,2.667-3.386,4.254-4.584s3.266-1.498,4.134-0.959s0.929,1.917,0.689,2.906
c-0.24,0.988-0.779,1.588,0.299,1.768s3.775-0.06,5.003-1.408s0.989-3.805,0.12-5.423c-0.869-1.617-2.367-2.396-3.056-3.506
c-0.689-1.107-0.569-2.546-0.27-4.074c0.299-1.527,0.779-3.146,1.528-3.775c0.749-0.629,1.768-0.27,2.846,0.569
s2.217,2.157,2.667,3.476c0.449,1.318,0.209,2.637,1.198,4.015c0.989,1.379,3.206,2.816,4.105,4.135
c0.898,1.318,0.479,2.517-0.39,3.386c-0.869,0.868-2.188,1.408-2.367,2.037s0.779,1.348,1.199,2.247
c0.419,0.898,0.299,1.978-0.39,3.386s-1.948,3.146-3.235,4.974c-1.289,1.827-2.607,3.745-4.314,4.913
c-1.708,1.169-3.805,1.588-4.974,2.427s-1.408,2.097-1.558,4.464c-0.15,2.367-0.21,5.843,0.539,7.82
c0.749,1.977,2.307,2.456,3.056,3.445c0.749,0.988,0.689,2.486,0.149,3.924c-0.539,1.438-1.558,2.817-2.696,3.446
c-1.138,0.629-2.397,0.509-2.876,1.378c-0.479,0.869-0.18,2.727,1.168,4.164c1.348,1.438,3.745,2.457,6.262,3.176
c2.517,0.72,5.153,1.139,5.752,0.3s-0.839-2.936-1.558-4.974c-0.719-2.037-0.719-4.015,0-6.021c0.719-2.008,2.157-4.045,3.625-5.063
c1.468-1.019,2.966-1.019,4.015-0.51c1.048,0.51,1.648,1.528,1.108,2.547s-2.217,2.038-3.266,3.236s-1.468,2.576-0.989,3.835
c0.479,1.258,1.857,2.396,2.577,3.625c0.719,1.229,0.779,2.547,0.18,4.344C98.175,639.156,96.917,641.434,96.947,642.362
L96.947,642.362z M538.224,164.09c-0.943,1.333-1.573,2.921-2.651,3.805s-2.606,1.063-3.7,0.854
c-1.093-0.21-1.752-0.809-2.067-1.977c-0.313-1.168-0.284-2.907,0.285-4.18c0.569-1.273,1.678-2.083,2.966-2.847
c1.289-0.764,2.757-1.483,3.206-2.307s-0.12-1.753-0.824-2.502s-1.543-1.318-1.393-1.782c0.149-0.464,1.288-0.824,2.322-1.199
c1.033-0.375,1.962-0.764,2.486-1.483s0.644-1.768,1.093-2.322c0.45-0.555,1.229-0.614,1.979-1.408
c0.748-0.794,1.468-2.322,2.067-3.476c0.599-1.153,1.078-1.933,2.187-2.801c1.108-0.869,2.847-1.827,4.149-2.951
c1.304-1.123,2.172-2.412,2.517-3.835c0.345-1.423,0.165-2.98,0.509-3.895c0.345-0.914,1.214-1.184,2.173-0.644
c0.958,0.539,2.007,1.887,3.341,2.412c1.333,0.524,2.951,0.224,4.748-1.109c1.798-1.333,3.775-3.7,5.528-5.333
c1.752-1.633,3.28-2.532,4.449-2.756c1.168-0.225,1.977,0.225,2.427,1.108c0.449,0.884,0.539,2.202,0.449,3.535
c-0.09,1.333-0.36,2.682-0.6,3.625c-0.239,0.943-0.449,1.483-1.737,2.097s-3.655,1.303-5.618,2.052
c-1.962,0.749-3.52,1.558-4.823,2.442s-2.352,1.842-3.415,3.131c-1.064,1.289-2.143,2.906-3.057,4.254
c-0.913,1.348-1.662,2.427-2.816,2.472c-1.153,0.045-2.711-0.944-3.835-1.079c-1.123-0.135-1.813,0.584-2.262,1.723
s-0.659,2.696-1.153,3.82c-0.494,1.123-1.273,1.813-2.098,2.636c-0.823,0.824-1.692,1.783-2.262,2.876
c-0.569,1.094-0.839,2.322-1.603,3.476C540.426,161.678,539.168,162.756,538.224,164.09L538.224,164.09z M496.476,192.117
c0.359,0.928,1.079,2.187,1.708,3.026c0.629,0.838,1.168,1.258,1.857,1.124c0.688-0.135,1.528-0.824,1.857-1.828
c0.329-1.004,0.149-2.322,0.345-3.281c0.194-0.958,0.764-1.558,1.348-2.052c0.585-0.495,1.184-0.884,1.633-1.528
c0.45-0.645,0.75-1.543,1.214-2.187s1.094-1.034,1.468-1.648c0.375-0.614,0.495-1.453,0.734-2.112s0.599-1.138,1.213-1.678
c0.614-0.539,1.483-1.139,2.083-1.888c0.599-0.749,0.929-1.648,1.348-2.292c0.42-0.644,0.929-1.033,1.723-1.453
c0.795-0.419,1.873-0.869,2.906-1.438c1.034-0.569,2.022-1.258,2.966-2.067c0.944-0.809,1.843-1.737,2.277-2.666
s0.404-1.858-0.119-2.172c-0.524-0.314-1.544-0.015-2.518,0.3s-1.902,0.644-3.205,0.254c-1.304-0.389-2.981-1.498-4.314-1.708
c-1.333-0.21-2.322,0.479-2.921,1.633c-0.6,1.153-0.81,2.771-1.318,4.464c-0.51,1.693-1.318,3.461-2.337,4.779
c-1.019,1.317-2.247,2.187-2.876,3.22c-0.63,1.034-0.66,2.232-1.034,3.311s-1.094,2.037-1.902,2.951
c-0.809,0.914-1.708,1.782-2.472,2.576s-1.394,1.513-1.708,2.172C496.116,190.589,496.116,191.188,496.476,192.117L496.476,192.117z
M526.077,191.203c0.39-1.723,1.528-3.581,3.146-4.614c1.618-1.034,3.715-1.243,4.854-0.569c1.139,0.674,1.318,2.232,0.375,4
c-0.944,1.767-3.011,3.745-4.539,4.793c-1.528,1.048-2.517,1.168-3.191,0.434C526.047,194.513,525.688,192.925,526.077,191.203
L526.077,191.203z M513.554,201.674c-0.061-0.929,0.419-1.768,1.572-2.127c1.154-0.36,2.981-0.24,3.565,0.494
c0.585,0.734-0.074,2.082-0.929,2.951c-0.854,0.869-1.902,1.258-2.726,0.944C514.213,203.621,513.613,202.603,513.554,201.674
L513.554,201.674z M501.864,209.136c0.125-0.781,0.424-1.92,1.038-2.789c0.614-0.869,1.543-1.468,2.637-1.348
c1.094,0.12,2.352,0.958,2.547,2.007c0.194,1.048-0.674,2.307-1.893,2.968c-1.218,0.662-2.785,0.726-3.595,0.546
C501.79,210.341,501.739,209.917,501.864,209.136L501.864,209.136z M369.865,281.336c0.734-0.45,1.724-0.509,2.322-0.869
c0.6-0.36,0.809-1.02,0.779-1.783c-0.03-0.764-0.3-1.633-0.016-2.382c0.285-0.749,1.124-1.378,1.947-2.067
c0.824-0.689,1.634-1.438,2.308-2.172s1.213-1.453,2.052-1.513c0.839-0.06,1.978,0.539,3.236,1.063
c1.258,0.524,2.637,0.974,3.58,1.288c0.944,0.314,1.453,0.494,2.082,0.375s1.378-0.54,2.217-1.184
c0.84-0.644,1.769-1.513,2.053-2.321c0.284-0.809-0.075-1.559-0.645-2.098c-0.568-0.54-1.348-0.869-2.202-1.154
c-0.854-0.284-1.782-0.524-2.501-0.854c-0.719-0.33-1.229-0.749-1.843-1.528c-0.614-0.779-1.333-1.917-1.992-2.816
s-1.259-1.558-1.963-1.947c-0.704-0.39-1.513-0.509-2.217-0.464s-1.304,0.254-1.782,0.404c-0.479,0.15-0.839,0.239-1.408-0.075
c-0.569-0.315-1.349-1.034-2.263-1.798c-0.913-0.764-1.962-1.573-2.801-2.217c-0.839-0.644-1.469-1.124-1.769-1.752
c-0.299-0.629-0.269-1.408,0.181-2.697c0.449-1.288,1.318-3.085,2.127-4.389c0.809-1.303,1.558-2.112,2.771-2.546
c1.213-0.435,2.891-0.494,4.044-0.12c1.154,0.375,1.783,1.183,2.563,2.082c0.778,0.899,1.708,1.888,2.517,2.906
c0.809,1.019,1.498,2.067,2.112,2.727s1.153,0.929,1.992,0.63c0.839-0.3,1.978-1.169,3.056-2.083
c1.079-0.914,2.098-1.873,3.071-2.771c0.974-0.899,1.902-1.738,3.115-2.592c1.214-0.854,2.711-1.723,4.164-2.352
c1.453-0.629,2.861-1.019,4.284-1.048c1.424-0.03,2.861,0.299,4.688,1.228c1.828,0.929,4.045,2.457,6.517,3.85
s5.198,2.652,7.535,3.85s4.284,2.337,6.232,3.371c1.947,1.033,3.895,1.962,5.812,2.816c1.918,0.854,3.806,1.633,5.528,2.727
c1.723,1.093,3.28,2.501,4.209,3.011c0.929,0.51,1.229,0.12,1.468-1.168c0.24-1.289,0.42-3.476,0.63-5.288
c0.209-1.813,0.449-3.251,0.688-4.554c0.24-1.303,0.479-2.472,1.289-4.329c0.809-1.858,2.188-4.404,3.37-6.426
c1.184-2.022,2.172-3.521,3.415-4.869c1.244-1.348,2.742-2.547,4.21-3.775c1.469-1.229,2.906-2.487,4.149-3.865
s2.292-2.876,3.4-3.491c1.109-0.614,2.277-0.344,4.314,0.03c2.037,0.375,4.943,0.854,7.011,0.944s3.296-0.209,3.595-1.019
c0.3-0.809-0.329-2.127-0.209-2.801c0.12-0.674,0.988-0.705,1.782-0.255s1.514,1.378,2.292,1.498
c0.779,0.12,1.618-0.569,2.606-1.393c0.989-0.824,2.128-1.783,2.802-2.577s0.884-1.423,2.142-1.797
c1.259-0.375,3.565-0.495,5.034-1.154c1.468-0.659,2.097-1.857,2.411-2.906c0.315-1.049,0.315-1.948-0.119-2.113
c-0.435-0.164-1.304,0.405-2.562,0.405c-1.259,0-2.907-0.569-3.491-1.124c-0.584-0.554-0.104-1.093-0.135-1.873
c-0.029-0.779-0.569-1.797-0.943-2.876c-0.375-1.079-0.584-2.217-0.404-2.951c0.18-0.734,0.749-1.063,0.898-1.603
c0.15-0.539-0.12-1.288-0.689-1.663c-0.568-0.375-1.438-0.375-2.411-0.659s-2.053-0.854-2.562-2.083
c-0.51-1.228-0.45-3.116-0.345-5.063s0.255-3.955,1.108-5.587c0.854-1.633,2.412-2.891,3.102-4.599s0.509-3.865,0.27-5.842
s-0.539-3.775-1.528-3.625c-0.988,0.149-2.666,2.247-4.074,4.344c-1.408,2.098-2.547,4.194-3.925,6.352s-2.996,4.375-4.974,5.783
c-1.978,1.408-4.314,2.007-6.112,1.228c-1.797-0.779-3.056-2.936-4.644-4.434s-3.505-2.337-4.584-2.097
c-1.078,0.239-1.318,1.558-2.247,1.857c-0.929,0.299-2.546-0.419-3.955-0.479c-1.407-0.06-2.606,0.539-2.995-0.12
c-0.39-0.659,0.029-2.577-0.63-3.625s-2.396-1.229-4.584-1.858c-2.187-0.629-4.823-1.708-7.61-3.415
c-2.786-1.708-5.722-4.045-8.059-6.441c-2.337-2.397-4.074-4.854-6.142-7.76c-2.067-2.906-4.464-6.262-7.91-10.217
c-3.445-3.955-7.939-8.509-10.636-10.95c-2.696-2.442-3.596-2.771-4.18-2.546s-0.854,1.004-1.334,1.678
c-0.479,0.674-1.168,1.244-1.932,1.393c-0.765,0.15-1.604-0.12-2.292,0.27c-0.689,0.39-1.229,1.438-1.678,2.682
c-0.45,1.243-0.81,2.682-0.885,4.134c-0.074,1.453,0.135,2.921,0.674,4.495c0.54,1.573,1.409,3.25,2.487,5.048
c1.079,1.798,2.367,3.715,3.057,5.423c0.688,1.708,0.778,3.206,0.703,4.689c-0.074,1.483-0.313,2.951-0.479,4.554
c-0.165,1.603-0.255,3.341-0.749,4.884s-1.394,2.891-1.933,3.715c-0.539,0.824-0.719,1.124-0.584,1.603
c0.135,0.479,0.584,1.139,0.794,2.157s0.18,2.397,0.06,3.865c-0.12,1.468-0.329,3.026-0.539,4.225
c-0.21,1.198-0.42,2.037-0.854,2.876c-0.436,0.839-1.094,1.677-2.067,2.381c-0.974,0.705-2.263,1.273-2.861,2.083
c-0.6,0.809-0.51,1.857-0.375,3.146s0.314,2.816,0.72,4.794c0.404,1.978,1.033,4.404,1.139,6.247
c0.104,1.842-0.315,3.101-0.689,4.194c-0.375,1.093-0.704,2.022-1.288,2.771c-0.585,0.749-1.424,1.318-2.473,1.453
c-1.048,0.135-2.307-0.165-3.25-0.554c-0.944-0.39-1.573-0.869-2.143-1.303s-1.078-0.824-1.678-0.689s-1.288,0.794-2.067,0.899
c-0.778,0.105-1.647-0.344-2.651-1.108c-1.003-0.764-2.142-1.842-3.565-2.517c-1.423-0.674-3.131-0.944-4.435-0.824
c-1.303,0.12-2.201,0.629-2.726,1.169c-0.524,0.539-0.675,1.108-0.3,1.932c0.374,0.824,1.273,1.902,1.933,2.981
c0.659,1.079,1.078,2.157,1.333,3.116c0.255,0