shutterbug 0.4.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/demo/iframe3.html DELETED
@@ -1,29 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
- <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
- <link rel="stylesheet" type="text/css" href="main.css"></link>
8
- <style type="text/css">
9
- #src {
10
- color: red;
11
- width: 350px;
12
- height: 250px;
13
- }
14
- </style>
15
- </head>
16
- <body>
17
- <div id="src">
18
- <p>(iframe that contains other iframes)</p>
19
- <iframe src="iframe.html" width="140" height="140"></iframe>
20
- <iframe src="iframe2.html" width="140" height="140"></iframe>
21
- </div>
22
- </div>
23
- </body>
24
- <script type="text/javascript">
25
- $(document).ready(function(e) {
26
- new Shutterbug('#src');
27
- });
28
- </script>
29
- </html>
data/demo/iframe4.html DELETED
@@ -1,29 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
- <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
- <link rel="stylesheet" type="text/css" href="main.css"></link>
8
- <style type="text/css">
9
- #src {
10
- color: navy;
11
- width: 350px;
12
- height: 250px;
13
- }
14
- </style>
15
- </head>
16
- <body>
17
- <div id="src">
18
- <p>(iframe that contains other iframes, but not all of them support Shutterbug)</p>
19
- <iframe src="iframe.html" width="140" height="140"></iframe>
20
- <iframe src="iframe_no_shutterbug.html" width="140" height="140"></iframe>
21
- </div>
22
- </div>
23
- </body>
24
- <script type="text/javascript">
25
- $(document).ready(function(e) {
26
- new Shutterbug('#src');
27
- });
28
- </script>
29
- </html>
@@ -1,38 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
- <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
- <link rel="stylesheet" type="text/css" href="main.css">
8
- <style type="text/css">
9
- #src {
10
- color: red;
11
- }
12
- </style>
13
- </head>
14
-
15
- <body>
16
- <iframe id="src1" src="iframe.html" width="300" height="300"></iframe>
17
- <button class="shutterbug" data-dst="#dst">Snapshot</button>
18
- <div id="dst"></div>
19
- <body>
20
- <iframe id="src2" src="iframe2.html" width="300" height="300"></iframe>
21
- <button class="shutterbug2" data-dst="#dst">Snapshot</button>
22
- <div id="dst2"></div>
23
-
24
- </body>
25
- <script type="text/javascript">
26
- var bug = null;
27
- $(document).ready(function(e) {
28
- bug = new Shutterbug("#src1","#dst");
29
- bug2 = new Shutterbug("#src2","#dst2",null,"plugh");
30
- $("button.shutterbug").click(function(e) {
31
- bug.getDomSnapshot();
32
- });
33
- $("button.shutterbug2").click(function(e) {
34
- bug2.getDomSnapshot();
35
- });
36
- });
37
- </script>
38
- </html>
@@ -1,20 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <link rel="stylesheet" type="text/css" href="main.css"></link>
6
- <style type="text/css">
7
- #src {
8
- color: red;
9
- width: 100px;
10
- height: 100px;
11
- }
12
- </style>
13
- </head>
14
- <body>
15
- <div id="src">
16
- (iframe without Shutterbug support)
17
- </div>
18
- </div>
19
- </body>
20
- </html>
data/demo/index.html DELETED
@@ -1,20 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <link href='http://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,400,400italic,700' rel='stylesheet' type='text/css'>
6
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
7
- <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
8
- <link rel="stylesheet" type="text/css" href="main.css"></link>
9
- </head>
10
- <body>
11
- Examples:
12
- <ul>
13
- <li>Sourced vs. inline <a href="svg_example.html">SVG</a>.</li>
14
- <li>Very <a href="simple_example.html">simple</a> example.</li>
15
- <li><a href="iframe_example.html">IFrame</a> example.</li>
16
- <li><a href="nested_iframe_example.html">Nested IFrames</a> example.</li>
17
- <li><a href="canvas_example.html">Canvas</a> example.</li>
18
- </ul>
19
- </body>
20
- </html>
data/demo/main.css DELETED
@@ -1,9 +0,0 @@
1
- div {
2
- font-weight: bold;
3
- font-family: sans-serif;
4
- min-width: 100px;
5
- min-height: 100px;
6
- border: 1px solid black;
7
- overflow: hidden;
8
- padding: 10px;
9
- }
@@ -1,41 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <title>demo</title>
5
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
- <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
- <link rel="stylesheet" type="text/css" href="main.css">
8
- <style type="text/css">
9
- #dst, #dst2 {
10
- padding: 0;
11
- }
12
- </style>
13
- </head>
14
-
15
- <body>
16
- <div id="src1">
17
- <iframe src="iframe3.html" width="400" height="300"></iframe>
18
- </div>
19
- <button class="shutterbug" data-dst="#dst">Snapshot</button>
20
- <div id="dst"></div>
21
-
22
- <div id="src2">
23
- <iframe src="iframe4.html" width="400" height="300"></iframe>
24
- </div>
25
- <button class="shutterbug2" data-dst="#dst">Snapshot</button>
26
- <div id="dst2"></div>
27
-
28
- </body>
29
- <script type="text/javascript">
30
- $(document).ready(function(e) {
31
- var bug = new Shutterbug("#src1", "#dst");
32
- var bug2 = new Shutterbug("#src2", "#dst2", null, "plugh");
33
- $("button.shutterbug").click(function(e) {
34
- bug.getDomSnapshot();
35
- });
36
- $("button.shutterbug2").click(function(e) {
37
- bug2.getDomSnapshot();
38
- });
39
- });
40
- </script>
41
- </html>
@@ -1,20 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="96.236px" height="53.321px" viewBox="1.764 13.81 96.236 53.321" enable-background="new 1.764 13.81 96.236 53.321"
6
- xml:space="preserve">
7
- <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-622" y1="945.561" x2="-622" y2="926.4399">
8
- <stop offset="0" style="stop-color:#555555"/>
9
- <stop offset="1" style="stop-color:#FFFFFF"/>
10
- </linearGradient>
11
- <path fill="#E6E7E8" stroke="url(#SVGID_1_)" stroke-width="0.5" stroke-miterlimit="10" d="M71.33,14.384
12
- c-8.942,0-16.827,4.459-21.596,11.265c-4.77-6.803-12.655-11.265-21.598-11.265c-14.564,0-26.373,11.806-26.373,26.373
13
- c0,14.568,11.805,26.374,26.373,26.374c8.942,0,16.828-4.46,21.598-11.266c4.769,6.802,12.653,11.266,21.596,11.266
14
- c14.566,0,26.372-11.806,26.372-26.374C97.702,26.19,85.896,14.384,71.33,14.384z"/>
15
- <path fill="#555555" d="M31.448,47.719V27.133c0-1.16-0.941-2.1-2.102-2.1c-1.157,0-2.095,0.94-2.095,2.1v20.586
16
- c-1.385,0.752-2.338,2.196-2.338,3.881c0,2.447,1.986,4.428,4.433,4.428c2.451,0,4.434-1.98,4.434-4.428
17
- C33.783,49.916,32.83,48.471,31.448,47.719z"/>
18
- <path fill="#555555" d="M80.209,37.663v-3.974c0-4.775-3.882-8.659-8.653-8.659S62.9,28.915,62.9,33.689v3.974h-2.067v15.973h21.72
19
- V37.663H80.209z M66.239,33.689c0-2.93,2.384-5.316,5.313-5.316c2.931,0,5.316,2.386,5.316,5.316v3.974h-10.63V33.689z"/>
20
- </svg>
@@ -1,27 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- width="39px" height="111px" viewBox="25.5 4.093 39 111" enable-background="new 25.5 4.093 39 111" xml:space="preserve">
6
- <path fill="#E6E7E8" d="M60.915,106.038c0,6.81-1.053,7.92-7.68,7.92l-14.445,0.273c-6.627,0-7.625-1.384-7.625-8.193V13.563
7
- c0-6.81,0.998-8.22,7.625-8.22h14.445c6.627,0,7.68,1.41,7.68,8.22V106.038z"/>
8
- <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="986.0449" y1="1290.5266" x2="986.0449" y2="1226.1321">
9
- <stop offset="0" style="stop-color:#A7A9AC"/>
10
- <stop offset="1" style="stop-color:#FFFFFF"/>
11
- </linearGradient>
12
- <path fill="#E6E7E8" stroke="url(#SVGID_1_)" stroke-width="0.5" stroke-miterlimit="10" d="M36.971,24.763
13
- c0-2.005,1.624-3.628,3.628-3.628h10.937c2.004,0,3.628,1.622,3.628,3.628v68.458c0,2.003-1.624,3.629-3.628,3.629H40.599
14
- c-2.004,0-3.628-1.625-3.628-3.629V24.763z"/>
15
- <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1245.5889" y1="890.0452" x2="1245.5889" y2="962.26" gradientTransform="matrix(-1 0 0 1 1291.6289 -867.2383)">
16
- <stop offset="0.0043" style="stop-color:#EF4136"/>
17
- <stop offset="0.1653" style="stop-color:#F1604B"/>
18
- <stop offset="0.5189" style="stop-color:#F79E85"/>
19
- <stop offset="1" style="stop-color:#FFFFFF"/>
20
- </linearGradient>
21
- <path fill="url(#SVGID_2_)" d="M42.827,95.023c-2.215,0-4.009-1.796-4.009-4.011V26.893c0-2.257,1.828-4.086,4.085-4.086h6.274
22
- c2.257,0,4.086,1.829,4.086,4.086v64.119c0,2.215-1.795,4.011-4.011,4.011H42.827z"/>
23
- <rect x="14.397" y="9.607" fill="none" width="61.36" height="14.812"/>
24
- <text transform="matrix(1 0 0 1 34.606 17.0129)" font-family="'ArialMT'" font-size="9.4798">HIGH</text>
25
- <rect x="14.397" y="103.033" fill="none" width="61.36" height="14.812"/>
26
- <text transform="matrix(1 0 0 1 35.293 108.6692)" font-family="'ArialMT'" font-size="9.4798">LOW</text>
27
- </svg>
@@ -1,487 +0,0 @@
1
- <?xml version="1.0"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" width="696" height="417.6" style="width: 696px; height: 417.6px;">
3
- <g class="particle-container-vis" transform="translate(0,0)">
4
- <rect class="plot" width="696" height="417.59999999999997" x="0" y="0" style="fill: #e1efde;"/>
5
- <g class="grid-container">
6
- <g class="x" transform="translate(0,0)"/>
7
- <g class="x" transform="translate(198.85714285714283,0)"/>
8
- <g class="x" transform="translate(397.71428571428567,0)"/>
9
- <g class="x" transform="translate(596.5714285714286,0)"/>
10
- <g class="y" transform="translate(0,417.6)" background-fill="#FFEEB6"/>
11
- <g class="y" transform="translate(0,318.1714285714286)" background-fill="#FFEEB6"/>
12
- <g class="y" transform="translate(0,218.74285714285716)" background-fill="#FFEEB6"/>
13
- <g class="y" transform="translate(0,119.31428571428573)" background-fill="#FFEEB6"/>
14
- <g class="y" transform="translate(0,19.885714285714304)" background-fill="#FFEEB6"/>
15
- </g>
16
- <svg class="viewport" viewBox="0 0 696 417.59999999999997" x="0" y="0" width="696" height="417.59999999999997">
17
- <g class="image-container-below"/>
18
- <g class="text-container-below"/>
19
- <g class="radial-bonds-container">
20
- <path d="M 332.33494785853793,195.8134077889579 L 312.50121525355746 , 180.75282521929063" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
21
- <path d="M 543.2830467224121,312.7163508551462 L 554.2456389835902 , 334.5718260424478" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
22
- <path d="M 164.0883015223912,328.2634201322283 L 159.8659930229187 , 303.87336093357635" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
23
- <path d="M 265.3489616938999,284.6315339224679 L 268.7383792059762 , 259.59923024858745" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
24
- <path d="M 430.23867906842906,251.56617834908624 L 452.4297932216099 , 261.30314863749913" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
25
- <path d="M 563.4138581412178,249.39266943250385 L 542.8480723244802 , 263.6223345075335" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
26
- <path d="M 602.5971597943987,327.67113524845666 L 589.3232934134347 , 306.32971343994143" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
27
- <path d="M 323.6724169594901,140.38090013776508 L 342.1078025272914 , 156.1404784338815" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
28
- <path d="M 585.4924654279437,187.4983064379011 L 601.1168150220599 , 205.78329170772008" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
29
- <path d="M 387.52022961207797,273.82076429639545 L 381.54113919394354 , 249.34828658785142" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
30
- <path d="M 502.27199445452004,233.88477369035996 L 521.4837390354701 , 219.1950062615531" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
31
- <path d="M 89.79431758608136,150.08901476178852 L 86.58077205930437 , 175.2736625943865" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
32
- <path d="M 272.6858980996268,347.6203438486372 L 298.2857142857143 , 348.000001185281" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
33
- <path d="M 221.39547320774622,282.55681817190987 L 219.10343619755335 , 305.7903898715973" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
34
- <path d="M 46.913588353565764,211.83859569004605 L 60.991189292499 , 231.7125567299979" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
35
- <path d="M 321.312878199986,252.18743149893626 L 328.1142928259713 , 276.41142691203527" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
36
- <path d="M 249.82995986938477,175.04775990077428 L 237.74310493469238 , 195.3004419054304" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
37
- <path d="M 117.90789536067416,234.25748528071813 L 142.47644008908952 , 236.3782373428345" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
38
- <path d="M 237.0106724330357,134.4235596248082 L 221.85755498068673 , 155.66451702117922" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
39
- <path d="M 110.18888364519391,277.49982891082766 L 115.44703878675188 , 302.3249602930887" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
40
- <path d="M 489.35802677699496,188.86725850786485 L 492.6791128431048 , 164.81966253008164" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
41
- <path d="M 430.38475309099465,173.32120857238772 L 442.55642672947477 , 193.06356787000385" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
42
- <path d="M 312.50121525355746 , 180.75282521929063 L 292.667482648577,165.69224264962335" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
43
- <path d="M 554.2456389835902 , 334.5718260424478 L 565.2082312447684,356.42730122974945" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
44
- <path d="M 159.8659930229187 , 303.87336093357635 L 155.6436845234462,279.48330173492434" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
45
- <path d="M 268.7383792059762 , 259.59923024858745 L 272.1277967180524,234.56692657470703" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
46
- <path d="M 452.4297932216099 , 261.30314863749913 L 474.62090737479076,271.04011892591205" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
47
- <path d="M 542.8480723244802 , 263.6223345075335 L 522.2822865077427,277.8519995825631" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
48
- <path d="M 589.3232934134347 , 306.32971343994143 L 576.0494270324707,284.98829163142614" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
49
- <path d="M 342.1078025272914 , 156.1404784338815 L 360.5431880950928,171.9000567299979" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
50
- <path d="M 601.1168150220599 , 205.78329170772008 L 616.7411646161761,224.06827697753909" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
51
- <path d="M 381.54113919394354 , 249.34828658785142 L 375.5620487758091,224.87580887930739" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
52
- <path d="M 521.4837390354701 , 219.1950062615531 L 540.6954836164202,204.50523883274624" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
53
- <path d="M 86.58077205930437 , 175.2736625943865 L 83.36722653252738,200.45831042698453" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
54
- <path d="M 298.2857142857143 , 348.000001185281 L 323.88553047180176,348.37965852192474" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
55
- <path d="M 219.10343619755335 , 305.7903898715973 L 216.81139918736048,329.0239615712847" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
56
- <path d="M 60.991189292499 , 231.7125567299979 L 75.06879023143223,251.58651776994978" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
57
- <path d="M 328.1142928259713 , 276.41142691203527 L 334.91570745195656,300.6354223251343" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
58
- <path d="M 237.74310493469238 , 195.3004419054304 L 225.65625,215.55312391008653" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
59
- <path d="M 142.47644008908952 , 236.3782373428345 L 167.04498481750488,238.49898940495083" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
60
- <path d="M 221.85755498068673 , 155.66451702117922 L 206.70443752833776,176.90547441755024" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
61
- <path d="M 115.44703878675188 , 302.3249602930887 L 120.70519392830984,327.15009167534964" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
62
- <path d="M 492.6791128431048 , 164.81966253008164 L 496.0001989092146,140.7720665522984" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
63
- <path d="M 442.55642672947477 , 193.06356787000385 L 454.7281003679548,212.80592716762" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
64
- </g>
65
- <g class="vdw-lines-container">
66
- <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="360.5431880950928" y2="171.9000567299979" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
67
- <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="375.5620487758091" y2="224.87580887930739" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
68
- <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
69
- <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="323.6724169594901" y2="140.38090013776508" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
70
- <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="249.82995986938477" y2="175.04775990077428" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
71
- <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="237.0106724330357" y2="134.4235596248082" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
72
- <line class="attractionforce" x1="543.2830467224121" y1="312.7163508551462" x2="522.2822865077427" y2="277.8519995825631" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
73
- <line class="attractionforce" x1="543.2830467224121" y1="312.7163508551462" x2="576.0494270324707" y2="284.98829163142614" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
74
- <line class="attractionforce" x1="565.2082312447684" y1="356.42730122974945" x2="602.5971597943987" y2="327.67113524845666" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
75
- <line class="attractionforce" x1="164.0883015223912" y1="328.2634201322283" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
76
- <line class="attractionforce" x1="164.0883015223912" y1="328.2634201322283" x2="120.70519392830984" y2="327.15009167534964" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
77
- <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="221.39547320774622" y2="282.55681817190987" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
78
- <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
79
- <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="167.04498481750488" y2="238.49898940495083" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
80
- <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
81
- <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="120.70519392830984" y2="327.15009167534964" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
82
- <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="272.6858980996268" y2="347.6203438486372" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
83
- <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="221.39547320774622" y2="282.55681817190987" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
84
- <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
85
- <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
86
- <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
87
- <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="249.82995986938477" y2="175.04775990077428" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
88
- <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="225.65625" y2="215.55312391008653" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
89
- <line class="attractionforce" x1="430.23867906842906" y1="251.56617834908624" x2="375.5620487758091" y2="224.87580887930739" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
90
- <line class="attractionforce" x1="430.23867906842906" y1="251.56617834908624" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
91
- <line class="attractionforce" x1="474.62090737479076" y1="271.04011892591205" x2="502.27199445452004" y2="233.88477369035996" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
92
- <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="576.0494270324707" y2="284.98829163142614" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
93
- <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="616.7411646161761" y2="224.06827697753909" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
94
- <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="540.6954836164202" y2="204.50523883274624" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
95
- <line class="attractionforce" x1="522.2822865077427" y1="277.8519995825631" x2="502.27199445452004" y2="233.88477369035996" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
96
- <line class="attractionforce" x1="585.4924654279437" y1="187.4983064379011" x2="540.6954836164202" y2="204.50523883274624" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
97
- <line class="attractionforce" x1="387.52022961207797" y1="273.82076429639545" x2="334.91570745195656" y2="300.6354223251343" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
98
- <line class="attractionforce" x1="375.5620487758091" y1="224.87580887930739" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
99
- <line class="attractionforce" x1="502.27199445452004" y1="233.88477369035996" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
100
- <line class="attractionforce" x1="540.6954836164202" y1="204.50523883274624" x2="489.35802677699496" y2="188.86725850786485" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
101
- <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="46.913588353565764" y2="211.83859569004605" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
102
- <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="75.06879023143223" y2="251.58651776994978" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
103
- <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
104
- <line class="attractionforce" x1="272.6858980996268" y1="347.6203438486372" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
105
- <line class="attractionforce" x1="323.88553047180176" y1="348.37965852192474" x2="334.91570745195656" y2="300.6354223251343" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
106
- <line class="attractionforce" x1="75.06879023143223" y1="251.58651776994978" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
107
- <line class="attractionforce" x1="75.06879023143223" y1="251.58651776994978" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
108
- <line class="attractionforce" x1="249.82995986938477" y1="175.04775990077428" x2="237.0106724330357" y2="134.4235596248082" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
109
- <line class="attractionforce" x1="249.82995986938477" y1="175.04775990077428" x2="206.70443752833776" y2="176.90547441755024" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
110
- <line class="attractionforce" x1="225.65625" y1="215.55312391008653" x2="167.04498481750488" y2="238.49898940495083" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
111
- <line class="attractionforce" x1="225.65625" y1="215.55312391008653" x2="206.70443752833776" y2="176.90547441755024" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
112
- <line class="attractionforce" x1="117.90789536067416" y1="234.25748528071813" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
113
- <line class="attractionforce" x1="489.35802677699496" y1="188.86725850786485" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
114
- </g>
115
- <g class="main-container">
116
- <defs>
117
- <marker id="Triangle-velocity" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" stroke="#000" fill="#000">
118
- <path d="M 0 0 L 10 5 L 0 10 z"/>
119
- </marker>
120
- <marker id="Triangle-force" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" stroke="#169C30" fill="#169C30">
121
- <path d="M 0 0 L 10 5 L 0 10 z"/>
122
- </marker>
123
- <radialGradient id="ke-shading-0" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
124
- <stop stop-color="#FFFFFF" offset="0%"/>
125
- <stop stop-color="#f2f2f2" offset="40%"/>
126
- <stop stop-color="#a4a4a4" offset="80%"/>
127
- <stop stop-color="#f2f2f2" offset="100%"/>
128
- </radialGradient>
129
- <radialGradient id="ke-shading-1" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
130
- <stop stop-color="#FFFFFF" offset="0%"/>
131
- <stop stop-color="#f3eded" offset="40%"/>
132
- <stop stop-color="#a89f9f" offset="80%"/>
133
- <stop stop-color="#f3eded" offset="100%"/>
134
- </radialGradient>
135
- <radialGradient id="ke-shading-2" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
136
- <stop stop-color="#FFFFFF" offset="0%"/>
137
- <stop stop-color="#f3e9e9" offset="40%"/>
138
- <stop stop-color="#ab9999" offset="80%"/>
139
- <stop stop-color="#f3e9e9" offset="100%"/>
140
- </radialGradient>
141
- <radialGradient id="ke-shading-3" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
142
- <stop stop-color="#FFFFFF" offset="0%"/>
143
- <stop stop-color="#f4e4e4" offset="40%"/>
144
- <stop stop-color="#af9494" offset="80%"/>
145
- <stop stop-color="#f4e4e4" offset="100%"/>
146
- </radialGradient>
147
- <radialGradient id="ke-shading-4" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
148
- <stop stop-color="#FFFFFF" offset="0%"/>
149
- <stop stop-color="#f4e0e0" offset="40%"/>
150
- <stop stop-color="#b38f8f" offset="80%"/>
151
- <stop stop-color="#f4e0e0" offset="100%"/>
152
- </radialGradient>
153
- <radialGradient id="ke-shading-5" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
154
- <stop stop-color="#FFFFFF" offset="0%"/>
155
- <stop stop-color="#f5dbdb" offset="40%"/>
156
- <stop stop-color="#b68a8a" offset="80%"/>
157
- <stop stop-color="#f5dbdb" offset="100%"/>
158
- </radialGradient>
159
- <radialGradient id="ke-shading-6" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
160
- <stop stop-color="#FFFFFF" offset="0%"/>
161
- <stop stop-color="#f5d7d7" offset="40%"/>
162
- <stop stop-color="#ba8484" offset="80%"/>
163
- <stop stop-color="#f5d7d7" offset="100%"/>
164
- </radialGradient>
165
- <radialGradient id="ke-shading-7" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
166
- <stop stop-color="#FFFFFF" offset="0%"/>
167
- <stop stop-color="#f6d2d2" offset="40%"/>
168
- <stop stop-color="#bd7f7f" offset="80%"/>
169
- <stop stop-color="#f6d2d2" offset="100%"/>
170
- </radialGradient>
171
- <radialGradient id="ke-shading-8" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
172
- <stop stop-color="#FFFFFF" offset="0%"/>
173
- <stop stop-color="#f6cece" offset="40%"/>
174
- <stop stop-color="#c17a7a" offset="80%"/>
175
- <stop stop-color="#f6cece" offset="100%"/>
176
- </radialGradient>
177
- <radialGradient id="ke-shading-9" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
178
- <stop stop-color="#FFFFFF" offset="0%"/>
179
- <stop stop-color="#f7c9c9" offset="40%"/>
180
- <stop stop-color="#c57474" offset="80%"/>
181
- <stop stop-color="#f7c9c9" offset="100%"/>
182
- </radialGradient>
183
- <radialGradient id="ke-shading-10" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
184
- <stop stop-color="#FFFFFF" offset="0%"/>
185
- <stop stop-color="#f7c4c4" offset="40%"/>
186
- <stop stop-color="#c86f6f" offset="80%"/>
187
- <stop stop-color="#f7c4c4" offset="100%"/>
188
- </radialGradient>
189
- <radialGradient id="ke-shading-11" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
190
- <stop stop-color="#FFFFFF" offset="0%"/>
191
- <stop stop-color="#f8c0c0" offset="40%"/>
192
- <stop stop-color="#cc6a6a" offset="80%"/>
193
- <stop stop-color="#f8c0c0" offset="100%"/>
194
- </radialGradient>
195
- <radialGradient id="ke-shading-12" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
196
- <stop stop-color="#FFFFFF" offset="0%"/>
197
- <stop stop-color="#f8bbbb" offset="40%"/>
198
- <stop stop-color="#d06565" offset="80%"/>
199
- <stop stop-color="#f8bbbb" offset="100%"/>
200
- </radialGradient>
201
- <radialGradient id="ke-shading-13" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
202
- <stop stop-color="#FFFFFF" offset="0%"/>
203
- <stop stop-color="#f9b7b7" offset="40%"/>
204
- <stop stop-color="#d35f5f" offset="80%"/>
205
- <stop stop-color="#f9b7b7" offset="100%"/>
206
- </radialGradient>
207
- <radialGradient id="ke-shading-14" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
208
- <stop stop-color="#FFFFFF" offset="0%"/>
209
- <stop stop-color="#f9b2b2" offset="40%"/>
210
- <stop stop-color="#d75a5a" offset="80%"/>
211
- <stop stop-color="#f9b2b2" offset="100%"/>
212
- </radialGradient>
213
- <radialGradient id="ke-shading-15" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
214
- <stop stop-color="#FFFFFF" offset="0%"/>
215
- <stop stop-color="#faaeae" offset="40%"/>
216
- <stop stop-color="#db5555" offset="80%"/>
217
- <stop stop-color="#faaeae" offset="100%"/>
218
- </radialGradient>
219
- <radialGradient id="ke-shading-16" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
220
- <stop stop-color="#FFFFFF" offset="0%"/>
221
- <stop stop-color="#faa9a9" offset="40%"/>
222
- <stop stop-color="#de5050" offset="80%"/>
223
- <stop stop-color="#faa9a9" offset="100%"/>
224
- </radialGradient>
225
- <radialGradient id="ke-shading-17" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
226
- <stop stop-color="#FFFFFF" offset="0%"/>
227
- <stop stop-color="#fba4a4" offset="40%"/>
228
- <stop stop-color="#e24a4a" offset="80%"/>
229
- <stop stop-color="#fba4a4" offset="100%"/>
230
- </radialGradient>
231
- <radialGradient id="ke-shading-18" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
232
- <stop stop-color="#FFFFFF" offset="0%"/>
233
- <stop stop-color="#fba0a0" offset="40%"/>
234
- <stop stop-color="#e64545" offset="80%"/>
235
- <stop stop-color="#fba0a0" offset="100%"/>
236
- </radialGradient>
237
- <radialGradient id="ke-shading-19" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
238
- <stop stop-color="#FFFFFF" offset="0%"/>
239
- <stop stop-color="#fc9b9b" offset="40%"/>
240
- <stop stop-color="#e94040" offset="80%"/>
241
- <stop stop-color="#fc9b9b" offset="100%"/>
242
- </radialGradient>
243
- <radialGradient id="ke-shading-20" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
244
- <stop stop-color="#FFFFFF" offset="0%"/>
245
- <stop stop-color="#fc9797" offset="40%"/>
246
- <stop stop-color="#ed3a3a" offset="80%"/>
247
- <stop stop-color="#fc9797" offset="100%"/>
248
- </radialGradient>
249
- <radialGradient id="ke-shading-21" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
250
- <stop stop-color="#FFFFFF" offset="0%"/>
251
- <stop stop-color="#fd9292" offset="40%"/>
252
- <stop stop-color="#f03535" offset="80%"/>
253
- <stop stop-color="#fd9292" offset="100%"/>
254
- </radialGradient>
255
- <radialGradient id="ke-shading-22" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
256
- <stop stop-color="#FFFFFF" offset="0%"/>
257
- <stop stop-color="#fd8e8e" offset="40%"/>
258
- <stop stop-color="#f43030" offset="80%"/>
259
- <stop stop-color="#fd8e8e" offset="100%"/>
260
- </radialGradient>
261
- <radialGradient id="ke-shading-23" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
262
- <stop stop-color="#FFFFFF" offset="0%"/>
263
- <stop stop-color="#fe8989" offset="40%"/>
264
- <stop stop-color="#f82b2b" offset="80%"/>
265
- <stop stop-color="#fe8989" offset="100%"/>
266
- </radialGradient>
267
- <radialGradient id="ke-shading-24" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
268
- <stop stop-color="#FFFFFF" offset="0%"/>
269
- <stop stop-color="#fe8585" offset="40%"/>
270
- <stop stop-color="#fb2525" offset="80%"/>
271
- <stop stop-color="#fe8585" offset="100%"/>
272
- </radialGradient>
273
- <radialGradient id="neg-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
274
- <stop stop-color="#ffefff" offset="0%"/>
275
- <stop stop-color="#fdadad" offset="40%"/>
276
- <stop stop-color="#e95e5e" offset="80%"/>
277
- <stop stop-color="#fdadad" offset="100%"/>
278
- </radialGradient>
279
- <radialGradient id="pos-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
280
- <stop stop-color="#dfffff" offset="0%"/>
281
- <stop stop-color="#9abeff" offset="40%"/>
282
- <stop stop-color="#767fbf" offset="80%"/>
283
- <stop stop-color="#9abeff" offset="100%"/>
284
- </radialGradient>
285
- <radialGradient id="neutral-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
286
- <stop stop-color="#FFFFFF" offset="0%"/>
287
- <stop stop-color="#f2f2f2" offset="40%"/>
288
- <stop stop-color="#A4A4A4" offset="80%"/>
289
- <stop stop-color="#f2f2f2" offset="100%"/>
290
- </radialGradient>
291
- <radialGradient id="green-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
292
- <stop stop-color="#dfffef" offset="0%"/>
293
- <stop stop-color="#75a643" offset="40%"/>
294
- <stop stop-color="#2a7216" offset="80%"/>
295
- <stop stop-color="#75a643" offset="100%"/>
296
- </radialGradient>
297
- <radialGradient id="orange-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
298
- <stop stop-color="#F0E6D1" offset="0%"/>
299
- <stop stop-color="#E0A21B" offset="40%"/>
300
- <stop stop-color="#AD7F1C" offset="80%"/>
301
- <stop stop-color="#E0A21B" offset="100%"/>
302
- </radialGradient>
303
- <radialGradient id="elem0-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
304
- <stop stop-color="#ffd7d7" offset="0%"/>
305
- <stop stop-color="#fc9797" offset="40%"/>
306
- <stop stop-color="#b06969" offset="80%"/>
307
- <stop stop-color="#fc9797" offset="100%"/>
308
- </radialGradient>
309
- <radialGradient id="elem1-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
310
- <stop stop-color="#ffffff" offset="0%"/>
311
- <stop stop-color="#ffffff" offset="40%"/>
312
- <stop stop-color="#b2b2b2" offset="80%"/>
313
- <stop stop-color="#ffffff" offset="100%"/>
314
- </radialGradient>
315
- <radialGradient id="elem2-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
316
- <stop stop-color="#a75fed" offset="0%"/>
317
- <stop stop-color="#7543a6" offset="40%"/>
318
- <stop stop-color="#512e74" offset="80%"/>
319
- <stop stop-color="#7543a6" offset="100%"/>
320
- </radialGradient>
321
- <radialGradient id="elem3-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
322
- <stop stop-color="#e6e6ff" offset="0%"/>
323
- <stop stop-color="#a1a1ff" offset="40%"/>
324
- <stop stop-color="#7070b2" offset="80%"/>
325
- <stop stop-color="#a1a1ff" offset="100%"/>
326
- </radialGradient>
327
- <radialGradient id="mark-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
328
- <stop stop-color="#ffff00" offset="0%"/>
329
- <stop stop-color="#f8b500" offset="40%"/>
330
- <stop stop-color="#ad7e00" offset="80%"/>
331
- <stop stop-color="#f8b500" offset="100%"/>
332
- </radialGradient>
333
- </defs>
334
- <circle class="atom draggable" r="19.885714582034517" cx="332.33494785853793" cy="195.8134077889579" fill-opacity="1" fill="url(#pos-grad)"/>
335
- <circle class="atom draggable" r="19.885714582034517" cx="292.667482648577" cy="165.69224264962335" fill-opacity="1" fill="url(#neg-grad)"/>
336
- <circle class="atom draggable" r="19.885714582034517" cx="543.2830467224121" cy="312.7163508551462" fill-opacity="1" fill="url(#pos-grad)"/>
337
- <circle class="atom draggable" r="19.885714582034517" cx="565.2082312447684" cy="356.42730122974945" fill-opacity="1" fill="url(#neg-grad)"/>
338
- <circle class="atom draggable" r="19.885714582034517" cx="164.0883015223912" cy="328.2634201322283" fill-opacity="1" fill="url(#neutral-grad)"/>
339
- <circle class="atom draggable" r="19.885714582034517" cx="155.6436845234462" cy="279.48330173492434" fill-opacity="1" fill="url(#neutral-grad)"/>
340
- <circle class="atom draggable" r="19.885714582034517" cx="265.3489616938999" cy="284.6315339224679" fill-opacity="1" fill="url(#neutral-grad)"/>
341
- <circle class="atom draggable" r="19.885714582034517" cx="272.1277967180524" cy="234.56692657470703" fill-opacity="1" fill="url(#neutral-grad)"/>
342
- <circle class="atom draggable" r="19.885714582034517" cx="430.23867906842906" cy="251.56617834908624" fill-opacity="1" fill="url(#pos-grad)"/>
343
- <circle class="atom draggable" r="19.885714582034517" cx="474.62090737479076" cy="271.04011892591205" fill-opacity="1" fill="url(#neg-grad)"/>
344
- <circle class="atom draggable" r="19.885714582034517" cx="563.4138581412178" cy="249.39266943250385" fill-opacity="1" fill="url(#pos-grad)"/>
345
- <circle class="atom draggable" r="19.885714582034517" cx="522.2822865077427" cy="277.8519995825631" fill-opacity="1" fill="url(#neg-grad)"/>
346
- <circle class="atom draggable" r="19.885714582034517" cx="602.5971597943987" cy="327.67113524845666" fill-opacity="1" fill="url(#pos-grad)"/>
347
- <circle class="atom draggable" r="19.885714582034517" cx="576.0494270324707" cy="284.98829163142614" fill-opacity="1" fill="url(#neg-grad)"/>
348
- <circle class="atom draggable" r="19.885714582034517" cx="323.6724169594901" cy="140.38090013776508" fill-opacity="1" fill="url(#pos-grad)"/>
349
- <circle class="atom draggable" r="19.885714582034517" cx="360.5431880950928" cy="171.9000567299979" fill-opacity="1" fill="url(#neg-grad)"/>
350
- <circle class="atom draggable" r="19.885714582034517" cx="585.4924654279437" cy="187.4983064379011" fill-opacity="1" fill="url(#pos-grad)"/>
351
- <circle class="atom draggable" r="19.885714582034517" cx="616.7411646161761" cy="224.06827697753909" fill-opacity="1" fill="url(#neg-grad)"/>
352
- <circle class="atom draggable" r="19.885714582034517" cx="387.52022961207797" cy="273.82076429639545" fill-opacity="1" fill="url(#pos-grad)"/>
353
- <circle class="atom draggable" r="19.885714582034517" cx="375.5620487758091" cy="224.87580887930739" fill-opacity="1" fill="url(#neg-grad)"/>
354
- <circle class="atom draggable" r="19.885714582034517" cx="502.27199445452004" cy="233.88477369035996" fill-opacity="1" fill="url(#pos-grad)"/>
355
- <circle class="atom draggable" r="19.885714582034517" cx="540.6954836164202" cy="204.50523883274624" fill-opacity="1" fill="url(#neg-grad)"/>
356
- <circle class="atom draggable" r="19.885714582034517" cx="89.79431758608136" cy="150.08901476178852" fill-opacity="1" fill="url(#neutral-grad)"/>
357
- <circle class="atom draggable" r="19.885714582034517" cx="83.36722653252738" cy="200.45831042698453" fill-opacity="1" fill="url(#neutral-grad)"/>
358
- <circle class="atom draggable" r="19.885714582034517" cx="272.6858980996268" cy="347.6203438486372" fill-opacity="1" fill="url(#neutral-grad)"/>
359
- <circle class="atom draggable" r="19.885714582034517" cx="323.88553047180176" cy="348.37965852192474" fill-opacity="1" fill="url(#neutral-grad)"/>
360
- <circle class="atom draggable" r="19.885714582034517" cx="221.39547320774622" cy="282.55681817190987" fill-opacity="1" fill="url(#neutral-grad)"/>
361
- <circle class="atom draggable" r="19.885714582034517" cx="216.81139918736048" cy="329.0239615712847" fill-opacity="1" fill="url(#neutral-grad)"/>
362
- <circle class="atom draggable" r="19.885714582034517" cx="46.913588353565764" cy="211.83859569004605" fill-opacity="1" fill="url(#neutral-grad)"/>
363
- <circle class="atom draggable" r="19.885714582034517" cx="75.06879023143223" cy="251.58651776994978" fill-opacity="1" fill="url(#neutral-grad)"/>
364
- <circle class="atom draggable" r="19.885714582034517" cx="321.312878199986" cy="252.18743149893626" fill-opacity="1" fill="url(#neutral-grad)"/>
365
- <circle class="atom draggable" r="19.885714582034517" cx="334.91570745195656" cy="300.6354223251343" fill-opacity="1" fill="url(#neutral-grad)"/>
366
- <circle class="atom draggable" r="19.885714582034517" cx="249.82995986938477" cy="175.04775990077428" fill-opacity="1" fill="url(#neutral-grad)"/>
367
- <circle class="atom draggable" r="19.885714582034517" cx="225.65625" cy="215.55312391008653" fill-opacity="1" fill="url(#neutral-grad)"/>
368
- <circle class="atom draggable" r="19.885714582034517" cx="117.90789536067416" cy="234.25748528071813" fill-opacity="1" fill="url(#neutral-grad)"/>
369
- <circle class="atom draggable" r="19.885714582034517" cx="167.04498481750488" cy="238.49898940495083" fill-opacity="1" fill="url(#neutral-grad)"/>
370
- <circle class="atom draggable" r="19.885714582034517" cx="237.0106724330357" cy="134.4235596248082" fill-opacity="1" fill="url(#neutral-grad)"/>
371
- <circle class="atom draggable" r="19.885714582034517" cx="206.70443752833776" cy="176.90547441755024" fill-opacity="1" fill="url(#neutral-grad)"/>
372
- <circle class="atom draggable" r="19.885714582034517" cx="110.18888364519391" cy="277.49982891082766" fill-opacity="1" fill="url(#neutral-grad)"/>
373
- <circle class="atom draggable" r="19.885714582034517" cx="120.70519392830984" cy="327.15009167534964" fill-opacity="1" fill="url(#neutral-grad)"/>
374
- <circle class="atom draggable" r="19.885714582034517" cx="489.35802677699496" cy="188.86725850786485" fill-opacity="1" fill="url(#pos-grad)"/>
375
- <circle class="atom draggable" r="19.885714582034517" cx="496.0001989092146" cy="140.7720665522984" fill-opacity="1" fill="url(#neg-grad)"/>
376
- <circle class="atom draggable" r="19.885714582034517" cx="430.38475309099465" cy="173.32120857238772" fill-opacity="1" fill="url(#pos-grad)"/>
377
- <circle class="atom draggable" r="19.885714582034517" cx="454.7281003679548" cy="212.80592716762" fill-opacity="1" fill="url(#neg-grad)"/>
378
- <g class="label" transform="translate(332.33494785853793,195.8134077889579)">
379
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
380
- </g>
381
- <g class="label" transform="translate(292.667482648577,165.69224264962335)">
382
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
383
- </g>
384
- <g class="label" transform="translate(543.2830467224121,312.7163508551462)">
385
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
386
- </g>
387
- <g class="label" transform="translate(565.2082312447684,356.42730122974945)">
388
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
389
- </g>
390
- <g class="label" transform="translate(164.0883015223912,328.2634201322283)"/>
391
- <g class="label" transform="translate(155.6436845234462,279.48330173492434)"/>
392
- <g class="label" transform="translate(265.3489616938999,284.6315339224679)"/>
393
- <g class="label" transform="translate(272.1277967180524,234.56692657470703)"/>
394
- <g class="label" transform="translate(430.23867906842906,251.56617834908624)">
395
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
396
- </g>
397
- <g class="label" transform="translate(474.62090737479076,271.04011892591205)">
398
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
399
- </g>
400
- <g class="label" transform="translate(563.4138581412178,249.39266943250385)">
401
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
402
- </g>
403
- <g class="label" transform="translate(522.2822865077427,277.8519995825631)">
404
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
405
- </g>
406
- <g class="label" transform="translate(602.5971597943987,327.67113524845666)">
407
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
408
- </g>
409
- <g class="label" transform="translate(576.0494270324707,284.98829163142614)">
410
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
411
- </g>
412
- <g class="label" transform="translate(323.6724169594901,140.38090013776508)">
413
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
414
- </g>
415
- <g class="label" transform="translate(360.5431880950928,171.9000567299979)">
416
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
417
- </g>
418
- <g class="label" transform="translate(585.4924654279437,187.4983064379011)">
419
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
420
- </g>
421
- <g class="label" transform="translate(616.7411646161761,224.06827697753909)">
422
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
423
- </g>
424
- <g class="label" transform="translate(387.52022961207797,273.82076429639545)">
425
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
426
- </g>
427
- <g class="label" transform="translate(375.5620487758091,224.87580887930739)">
428
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
429
- </g>
430
- <g class="label" transform="translate(502.27199445452004,233.88477369035996)">
431
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
432
- </g>
433
- <g class="label" transform="translate(540.6954836164202,204.50523883274624)">
434
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
435
- </g>
436
- <g class="label" transform="translate(89.79431758608136,150.08901476178852)"/>
437
- <g class="label" transform="translate(83.36722653252738,200.45831042698453)"/>
438
- <g class="label" transform="translate(272.6858980996268,347.6203438486372)"/>
439
- <g class="label" transform="translate(323.88553047180176,348.37965852192474)"/>
440
- <g class="label" transform="translate(221.39547320774622,282.55681817190987)"/>
441
- <g class="label" transform="translate(216.81139918736048,329.0239615712847)"/>
442
- <g class="label" transform="translate(46.913588353565764,211.83859569004605)"/>
443
- <g class="label" transform="translate(75.06879023143223,251.58651776994978)"/>
444
- <g class="label" transform="translate(321.312878199986,252.18743149893626)"/>
445
- <g class="label" transform="translate(334.91570745195656,300.6354223251343)"/>
446
- <g class="label" transform="translate(249.82995986938477,175.04775990077428)"/>
447
- <g class="label" transform="translate(225.65625,215.55312391008653)"/>
448
- <g class="label" transform="translate(117.90789536067416,234.25748528071813)"/>
449
- <g class="label" transform="translate(167.04498481750488,238.49898940495083)"/>
450
- <g class="label" transform="translate(237.0106724330357,134.4235596248082)"/>
451
- <g class="label" transform="translate(206.70443752833776,176.90547441755024)"/>
452
- <g class="label" transform="translate(110.18888364519391,277.49982891082766)"/>
453
- <g class="label" transform="translate(120.70519392830984,327.15009167534964)"/>
454
- <g class="label" transform="translate(489.35802677699496,188.86725850786485)">
455
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
456
- </g>
457
- <g class="label" transform="translate(496.0001989092146,140.7720665522984)">
458
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
459
- </g>
460
- <g class="label" transform="translate(430.38475309099465,173.32120857238772)">
461
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
462
- </g>
463
- <g class="label" transform="translate(454.7281003679548,212.80592716762)">
464
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
465
- </g>
466
- </g>
467
- <g class="image-container-top"/>
468
- <g class="text-container-top">
469
- <g class="textBoxWrapper">
470
- <rect class="textBoxFrame text-0" id="text-0" transform="rotate(0 230.56071428571425 45.157714285714306)" style="fill:rgb(245,245,245);opacity:1.0;fill-opacity:1;stroke:#000000;stroke-width:0.54;stroke-opacity:1" width="249.59" height="36.971999999999994" rx="6.4799999999999995" ry="8.1" x="214.76571428571427" y="19.885714285714304"/>
471
- <text class="textBox" transform="rotate(0 230.56071428571425 45.157714285714306)" x-data="230.56071428571425" y="45.157714285714306" width="696" height="417.59999999999997" xml:space="preserve" font-family="'Lato', sans-serif" font-size="21.06px" fill="black" text-data="Separated oil and water" text-anchor="left" has-host="false">
472
- <tspan x="230.56071428571425" dy="0">Separated oil and water </tspan>
473
- </text>
474
- </g>
475
- </g>
476
- <g class="brush-container"/>
477
- </svg>
478
- <g class="icon-container">
479
- <image id="heat-bath" x="1%" width="36" height="36" preserveAspectRatio="xMinYMin" xlink:href="heatbath.svg" class="opaque-on-hover" style="display: none;">
480
- <title>Heatbath active</title>
481
- </image>
482
- <image id="ke-gradient" x="0" width="39.6" height="108" preserveAspectRatio="xMinYMin" xlink:href="ke-gradient.svg" class="opaque-on-hover" style="display: none;">
483
- <title>Kinetic energy gradient</title>
484
- </image>
485
- </g>
486
- </g>
487
- </svg>