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.
Files changed (29) hide show
  1. checksums.yaml +8 -8
  2. data/README.md +4 -86
  3. data/lib/shutterbug.rb +1 -1
  4. data/lib/shutterbug/handlers.rb +0 -1
  5. data/lib/shutterbug/handlers/convert_handler.rb +11 -24
  6. data/lib/shutterbug/phantom_job.rb +25 -7
  7. data/lib/shutterbug/rackapp.rb +0 -1
  8. data/spec/shutterbug/rackapp_spec.rb +0 -8
  9. metadata +2 -23
  10. data/bower.json +0 -26
  11. data/demo/The_Scream.jpg +0 -0
  12. data/demo/canvas_example.html +0 -36
  13. data/demo/iframe.html +0 -30
  14. data/demo/iframe2.html +0 -30
  15. data/demo/iframe3.html +0 -29
  16. data/demo/iframe4.html +0 -29
  17. data/demo/iframe_example.html +0 -38
  18. data/demo/iframe_no_shutterbug.html +0 -20
  19. data/demo/index.html +0 -20
  20. data/demo/main.css +0 -9
  21. data/demo/nested_iframe_example.html +0 -41
  22. data/demo/oil-and-water/heatbath.svg +0 -20
  23. data/demo/oil-and-water/ke-gradient.svg +0 -27
  24. data/demo/oil-and-water/oil-and-water.svg +0 -487
  25. data/demo/simple_example.html +0 -35
  26. data/demo/svg_example.html +0 -571
  27. data/lib/shutterbug/handlers/js_file_handler.rb +0 -30
  28. data/lib/shutterbug/handlers/shutterbug.js +0 -388
  29. data/spec/shutterbug/js_file_handler_spec.rb +0 -5
data/demo/simple_example.html DELETED
@@ -1,35 +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
- }
12
- </style>
13
- </head>
14
-
15
- <body>
16
- <div id="src">
17
- testing..
18
- </div>
19
- <button class="shutterbug" data-src="#src" data-dst="#dst">Snapshot</button>
20
- <div id="dst">
21
- </div>
22
-
23
- </body>
24
- <script type="text/javascript">
25
- $(document).ready(function(e) {
26
- $("button.shutterbug").click(function(e) {
27
- var target = $(e.target);
28
- var src = target.attr('data-src');
29
- var dst = target.attr('data-dst');
30
- var bug = new Shutterbug(src,dst,null,"xxyyz");
31
- bug.getDomSnapshot();
32
- });
33
- });
34
- </script>
35
- </html>
data/demo/svg_example.html DELETED
@@ -1,571 +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
- <style type="text/css">
10
- @font-face {
11
- font-family: "Lato";
12
- font-style: normal;
13
- font-weight: 300; }
14
- body {
15
- height: 100%;
16
- min-height: 100%;
17
- font-size: 1em;
18
- font-family: 'Lato', Verdana, Geneva, sans-serif;
19
- margin: 0;
20
- padding: 0;
21
- background-color: white;
22
- color: #3f3f3f; }
23
- li {
24
- display: block;
25
- }
26
- #src {
27
- color: red;
28
- }
29
- </style>
30
- </head>
31
-
32
- <body>
33
-
34
- <div id="src-svg-inlined">
35
- <ul>
36
- <li>
37
- testing inlined SVG ...
38
- </li>
39
- <li>
40
- <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;">
41
- <g class="particle-container-vis" transform="translate(0,0)">
42
- <rect class="plot" width="696" height="417.59999999999997" x="0" y="0" style="fill: #e1efde;"/>
43
- <g class="grid-container">
44
- <g class="x" transform="translate(0,0)"/>
45
- <g class="x" transform="translate(198.85714285714283,0)"/>
46
- <g class="x" transform="translate(397.71428571428567,0)"/>
47
- <g class="x" transform="translate(596.5714285714286,0)"/>
48
- <g class="y" transform="translate(0,417.6)" background-fill="#FFEEB6"/>
49
- <g class="y" transform="translate(0,318.1714285714286)" background-fill="#FFEEB6"/>
50
- <g class="y" transform="translate(0,218.74285714285716)" background-fill="#FFEEB6"/>
51
- <g class="y" transform="translate(0,119.31428571428573)" background-fill="#FFEEB6"/>
52
- <g class="y" transform="translate(0,19.885714285714304)" background-fill="#FFEEB6"/>
53
- </g>
54
- <svg class="viewport" viewBox="0 0 696 417.59999999999997" x="0" y="0" width="696" height="417.59999999999997">
55
- <g class="image-container-below"/>
56
- <g class="text-container-below"/>
57
- <g class="radial-bonds-container">
58
- <path d="M 332.33494785853793,195.8134077889579 L 312.50121525355746 , 180.75282521929063" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
59
- <path d="M 543.2830467224121,312.7163508551462 L 554.2456389835902 , 334.5718260424478" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
60
- <path d="M 164.0883015223912,328.2634201322283 L 159.8659930229187 , 303.87336093357635" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
61
- <path d="M 265.3489616938999,284.6315339224679 L 268.7383792059762 , 259.59923024858745" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
62
- <path d="M 430.23867906842906,251.56617834908624 L 452.4297932216099 , 261.30314863749913" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
63
- <path d="M 563.4138581412178,249.39266943250385 L 542.8480723244802 , 263.6223345075335" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
64
- <path d="M 602.5971597943987,327.67113524845666 L 589.3232934134347 , 306.32971343994143" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
65
- <path d="M 323.6724169594901,140.38090013776508 L 342.1078025272914 , 156.1404784338815" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
66
- <path d="M 585.4924654279437,187.4983064379011 L 601.1168150220599 , 205.78329170772008" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
67
- <path d="M 387.52022961207797,273.82076429639545 L 381.54113919394354 , 249.34828658785142" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
68
- <path d="M 502.27199445452004,233.88477369035996 L 521.4837390354701 , 219.1950062615531" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
69
- <path d="M 89.79431758608136,150.08901476178852 L 86.58077205930437 , 175.2736625943865" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
70
- <path d="M 272.6858980996268,347.6203438486372 L 298.2857142857143 , 348.000001185281" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
71
- <path d="M 221.39547320774622,282.55681817190987 L 219.10343619755335 , 305.7903898715973" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
72
- <path d="M 46.913588353565764,211.83859569004605 L 60.991189292499 , 231.7125567299979" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
73
- <path d="M 321.312878199986,252.18743149893626 L 328.1142928259713 , 276.41142691203527" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
74
- <path d="M 249.82995986938477,175.04775990077428 L 237.74310493469238 , 195.3004419054304" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
75
- <path d="M 117.90789536067416,234.25748528071813 L 142.47644008908952 , 236.3782373428345" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
76
- <path d="M 237.0106724330357,134.4235596248082 L 221.85755498068673 , 155.66451702117922" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
77
- <path d="M 110.18888364519391,277.49982891082766 L 115.44703878675188 , 302.3249602930887" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
78
- <path d="M 489.35802677699496,188.86725850786485 L 492.6791128431048 , 164.81966253008164" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
79
- <path d="M 430.38475309099465,173.32120857238772 L 442.55642672947477 , 193.06356787000385" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
80
- <path d="M 312.50121525355746 , 180.75282521929063 L 292.667482648577,165.69224264962335" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
81
- <path d="M 554.2456389835902 , 334.5718260424478 L 565.2082312447684,356.42730122974945" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
82
- <path d="M 159.8659930229187 , 303.87336093357635 L 155.6436845234462,279.48330173492434" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
83
- <path d="M 268.7383792059762 , 259.59923024858745 L 272.1277967180524,234.56692657470703" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
84
- <path d="M 452.4297932216099 , 261.30314863749913 L 474.62090737479076,271.04011892591205" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
85
- <path d="M 542.8480723244802 , 263.6223345075335 L 522.2822865077427,277.8519995825631" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
86
- <path d="M 589.3232934134347 , 306.32971343994143 L 576.0494270324707,284.98829163142614" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
87
- <path d="M 342.1078025272914 , 156.1404784338815 L 360.5431880950928,171.9000567299979" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
88
- <path d="M 601.1168150220599 , 205.78329170772008 L 616.7411646161761,224.06827697753909" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
89
- <path d="M 381.54113919394354 , 249.34828658785142 L 375.5620487758091,224.87580887930739" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
90
- <path d="M 521.4837390354701 , 219.1950062615531 L 540.6954836164202,204.50523883274624" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
91
- <path d="M 86.58077205930437 , 175.2736625943865 L 83.36722653252738,200.45831042698453" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
92
- <path d="M 298.2857142857143 , 348.000001185281 L 323.88553047180176,348.37965852192474" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
93
- <path d="M 219.10343619755335 , 305.7903898715973 L 216.81139918736048,329.0239615712847" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
94
- <path d="M 60.991189292499 , 231.7125567299979 L 75.06879023143223,251.58651776994978" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
95
- <path d="M 328.1142928259713 , 276.41142691203527 L 334.91570745195656,300.6354223251343" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
96
- <path d="M 237.74310493469238 , 195.3004419054304 L 225.65625,215.55312391008653" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
97
- <path d="M 142.47644008908952 , 236.3782373428345 L 167.04498481750488,238.49898940495083" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
98
- <path d="M 221.85755498068673 , 155.66451702117922 L 206.70443752833776,176.90547441755024" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
99
- <path d="M 115.44703878675188 , 302.3249602930887 L 120.70519392830984,327.15009167534964" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
100
- <path d="M 492.6791128431048 , 164.81966253008164 L 496.0001989092146,140.7720665522984" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
101
- <path d="M 442.55642672947477 , 193.06356787000385 L 454.7281003679548,212.80592716762" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
102
- </g>
103
- <g class="vdw-lines-container">
104
- <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;"/>
105
- <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;"/>
106
- <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;"/>
107
- <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;"/>
108
- <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;"/>
109
- <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;"/>
110
- <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;"/>
111
- <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;"/>
112
- <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;"/>
113
- <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;"/>
114
- <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;"/>
115
- <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;"/>
116
- <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;"/>
117
- <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;"/>
118
- <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;"/>
119
- <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;"/>
120
- <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;"/>
121
- <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;"/>
122
- <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;"/>
123
- <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;"/>
124
- <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;"/>
125
- <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;"/>
126
- <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;"/>
127
- <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;"/>
128
- <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;"/>
129
- <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;"/>
130
- <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;"/>
131
- <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;"/>
132
- <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;"/>
133
- <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;"/>
134
- <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;"/>
135
- <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;"/>
136
- <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;"/>
137
- <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;"/>
138
- <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;"/>
139
- <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;"/>
140
- <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;"/>
141
- <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;"/>
142
- <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;"/>
143
- <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;"/>
144
- <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;"/>
145
- <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;"/>
146
- <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;"/>
147
- <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;"/>
148
- <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;"/>
149
- <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;"/>
150
- <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;"/>
151
- <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;"/>
152
- </g>
153
- <g class="main-container">
154
- <defs>
155
- <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">
156
- <path d="M 0 0 L 10 5 L 0 10 z"/>
157
- </marker>
158
- <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">
159
- <path d="M 0 0 L 10 5 L 0 10 z"/>
160
- </marker>
161
- <radialGradient id="ke-shading-0" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
162
- <stop stop-color="#FFFFFF" offset="0%"/>
163
- <stop stop-color="#f2f2f2" offset="40%"/>
164
- <stop stop-color="#a4a4a4" offset="80%"/>
165
- <stop stop-color="#f2f2f2" offset="100%"/>
166
- </radialGradient>
167
- <radialGradient id="ke-shading-1" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
168
- <stop stop-color="#FFFFFF" offset="0%"/>
169
- <stop stop-color="#f3eded" offset="40%"/>
170
- <stop stop-color="#a89f9f" offset="80%"/>
171
- <stop stop-color="#f3eded" offset="100%"/>
172
- </radialGradient>
173
- <radialGradient id="ke-shading-2" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
174
- <stop stop-color="#FFFFFF" offset="0%"/>
175
- <stop stop-color="#f3e9e9" offset="40%"/>
176
- <stop stop-color="#ab9999" offset="80%"/>
177
- <stop stop-color="#f3e9e9" offset="100%"/>
178
- </radialGradient>
179
- <radialGradient id="ke-shading-3" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
180
- <stop stop-color="#FFFFFF" offset="0%"/>
181
- <stop stop-color="#f4e4e4" offset="40%"/>
182
- <stop stop-color="#af9494" offset="80%"/>
183
- <stop stop-color="#f4e4e4" offset="100%"/>
184
- </radialGradient>
185
- <radialGradient id="ke-shading-4" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
186
- <stop stop-color="#FFFFFF" offset="0%"/>
187
- <stop stop-color="#f4e0e0" offset="40%"/>
188
- <stop stop-color="#b38f8f" offset="80%"/>
189
- <stop stop-color="#f4e0e0" offset="100%"/>
190
- </radialGradient>
191
- <radialGradient id="ke-shading-5" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
192
- <stop stop-color="#FFFFFF" offset="0%"/>
193
- <stop stop-color="#f5dbdb" offset="40%"/>
194
- <stop stop-color="#b68a8a" offset="80%"/>
195
- <stop stop-color="#f5dbdb" offset="100%"/>
196
- </radialGradient>
197
- <radialGradient id="ke-shading-6" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
198
- <stop stop-color="#FFFFFF" offset="0%"/>
199
- <stop stop-color="#f5d7d7" offset="40%"/>
200
- <stop stop-color="#ba8484" offset="80%"/>
201
- <stop stop-color="#f5d7d7" offset="100%"/>
202
- </radialGradient>
203
- <radialGradient id="ke-shading-7" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
204
- <stop stop-color="#FFFFFF" offset="0%"/>
205
- <stop stop-color="#f6d2d2" offset="40%"/>
206
- <stop stop-color="#bd7f7f" offset="80%"/>
207
- <stop stop-color="#f6d2d2" offset="100%"/>
208
- </radialGradient>
209
- <radialGradient id="ke-shading-8" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
210
- <stop stop-color="#FFFFFF" offset="0%"/>
211
- <stop stop-color="#f6cece" offset="40%"/>
212
- <stop stop-color="#c17a7a" offset="80%"/>
213
- <stop stop-color="#f6cece" offset="100%"/>
214
- </radialGradient>
215
- <radialGradient id="ke-shading-9" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
216
- <stop stop-color="#FFFFFF" offset="0%"/>
217
- <stop stop-color="#f7c9c9" offset="40%"/>
218
- <stop stop-color="#c57474" offset="80%"/>
219
- <stop stop-color="#f7c9c9" offset="100%"/>
220
- </radialGradient>
221
- <radialGradient id="ke-shading-10" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
222
- <stop stop-color="#FFFFFF" offset="0%"/>
223
- <stop stop-color="#f7c4c4" offset="40%"/>
224
- <stop stop-color="#c86f6f" offset="80%"/>
225
- <stop stop-color="#f7c4c4" offset="100%"/>
226
- </radialGradient>
227
- <radialGradient id="ke-shading-11" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
228
- <stop stop-color="#FFFFFF" offset="0%"/>
229
- <stop stop-color="#f8c0c0" offset="40%"/>
230
- <stop stop-color="#cc6a6a" offset="80%"/>
231
- <stop stop-color="#f8c0c0" offset="100%"/>
232
- </radialGradient>
233
- <radialGradient id="ke-shading-12" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
234
- <stop stop-color="#FFFFFF" offset="0%"/>
235
- <stop stop-color="#f8bbbb" offset="40%"/>
236
- <stop stop-color="#d06565" offset="80%"/>
237
- <stop stop-color="#f8bbbb" offset="100%"/>
238
- </radialGradient>
239
- <radialGradient id="ke-shading-13" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
240
- <stop stop-color="#FFFFFF" offset="0%"/>
241
- <stop stop-color="#f9b7b7" offset="40%"/>
242
- <stop stop-color="#d35f5f" offset="80%"/>
243
- <stop stop-color="#f9b7b7" offset="100%"/>
244
- </radialGradient>
245
- <radialGradient id="ke-shading-14" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
246
- <stop stop-color="#FFFFFF" offset="0%"/>
247
- <stop stop-color="#f9b2b2" offset="40%"/>
248
- <stop stop-color="#d75a5a" offset="80%"/>
249
- <stop stop-color="#f9b2b2" offset="100%"/>
250
- </radialGradient>
251
- <radialGradient id="ke-shading-15" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
252
- <stop stop-color="#FFFFFF" offset="0%"/>
253
- <stop stop-color="#faaeae" offset="40%"/>
254
- <stop stop-color="#db5555" offset="80%"/>
255
- <stop stop-color="#faaeae" offset="100%"/>
256
- </radialGradient>
257
- <radialGradient id="ke-shading-16" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
258
- <stop stop-color="#FFFFFF" offset="0%"/>
259
- <stop stop-color="#faa9a9" offset="40%"/>
260
- <stop stop-color="#de5050" offset="80%"/>
261
- <stop stop-color="#faa9a9" offset="100%"/>
262
- </radialGradient>
263
- <radialGradient id="ke-shading-17" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
264
- <stop stop-color="#FFFFFF" offset="0%"/>
265
- <stop stop-color="#fba4a4" offset="40%"/>
266
- <stop stop-color="#e24a4a" offset="80%"/>
267
- <stop stop-color="#fba4a4" offset="100%"/>
268
- </radialGradient>
269
- <radialGradient id="ke-shading-18" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
270
- <stop stop-color="#FFFFFF" offset="0%"/>
271
- <stop stop-color="#fba0a0" offset="40%"/>
272
- <stop stop-color="#e64545" offset="80%"/>
273
- <stop stop-color="#fba0a0" offset="100%"/>
274
- </radialGradient>
275
- <radialGradient id="ke-shading-19" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
276
- <stop stop-color="#FFFFFF" offset="0%"/>
277
- <stop stop-color="#fc9b9b" offset="40%"/>
278
- <stop stop-color="#e94040" offset="80%"/>
279
- <stop stop-color="#fc9b9b" offset="100%"/>
280
- </radialGradient>
281
- <radialGradient id="ke-shading-20" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
282
- <stop stop-color="#FFFFFF" offset="0%"/>
283
- <stop stop-color="#fc9797" offset="40%"/>
284
- <stop stop-color="#ed3a3a" offset="80%"/>
285
- <stop stop-color="#fc9797" offset="100%"/>
286
- </radialGradient>
287
- <radialGradient id="ke-shading-21" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
288
- <stop stop-color="#FFFFFF" offset="0%"/>
289
- <stop stop-color="#fd9292" offset="40%"/>
290
- <stop stop-color="#f03535" offset="80%"/>
291
- <stop stop-color="#fd9292" offset="100%"/>
292
- </radialGradient>
293
- <radialGradient id="ke-shading-22" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
294
- <stop stop-color="#FFFFFF" offset="0%"/>
295
- <stop stop-color="#fd8e8e" offset="40%"/>
296
- <stop stop-color="#f43030" offset="80%"/>
297
- <stop stop-color="#fd8e8e" offset="100%"/>
298
- </radialGradient>
299
- <radialGradient id="ke-shading-23" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
300
- <stop stop-color="#FFFFFF" offset="0%"/>
301
- <stop stop-color="#fe8989" offset="40%"/>
302
- <stop stop-color="#f82b2b" offset="80%"/>
303
- <stop stop-color="#fe8989" offset="100%"/>
304
- </radialGradient>
305
- <radialGradient id="ke-shading-24" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
306
- <stop stop-color="#FFFFFF" offset="0%"/>
307
- <stop stop-color="#fe8585" offset="40%"/>
308
- <stop stop-color="#fb2525" offset="80%"/>
309
- <stop stop-color="#fe8585" offset="100%"/>
310
- </radialGradient>
311
- <radialGradient id="neg-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
312
- <stop stop-color="#ffefff" offset="0%"/>
313
- <stop stop-color="#fdadad" offset="40%"/>
314
- <stop stop-color="#e95e5e" offset="80%"/>
315
- <stop stop-color="#fdadad" offset="100%"/>
316
- </radialGradient>
317
- <radialGradient id="pos-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
318
- <stop stop-color="#dfffff" offset="0%"/>
319
- <stop stop-color="#9abeff" offset="40%"/>
320
- <stop stop-color="#767fbf" offset="80%"/>
321
- <stop stop-color="#9abeff" offset="100%"/>
322
- </radialGradient>
323
- <radialGradient id="neutral-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
324
- <stop stop-color="#FFFFFF" offset="0%"/>
325
- <stop stop-color="#f2f2f2" offset="40%"/>
326
- <stop stop-color="#A4A4A4" offset="80%"/>
327
- <stop stop-color="#f2f2f2" offset="100%"/>
328
- </radialGradient>
329
- <radialGradient id="green-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
330
- <stop stop-color="#dfffef" offset="0%"/>
331
- <stop stop-color="#75a643" offset="40%"/>
332
- <stop stop-color="#2a7216" offset="80%"/>
333
- <stop stop-color="#75a643" offset="100%"/>
334
- </radialGradient>
335
- <radialGradient id="orange-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
336
- <stop stop-color="#F0E6D1" offset="0%"/>
337
- <stop stop-color="#E0A21B" offset="40%"/>
338
- <stop stop-color="#AD7F1C" offset="80%"/>
339
- <stop stop-color="#E0A21B" offset="100%"/>
340
- </radialGradient>
341
- <radialGradient id="elem0-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
342
- <stop stop-color="#ffd7d7" offset="0%"/>
343
- <stop stop-color="#fc9797" offset="40%"/>
344
- <stop stop-color="#b06969" offset="80%"/>
345
- <stop stop-color="#fc9797" offset="100%"/>
346
- </radialGradient>
347
- <radialGradient id="elem1-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
348
- <stop stop-color="#ffffff" offset="0%"/>
349
- <stop stop-color="#ffffff" offset="40%"/>
350
- <stop stop-color="#b2b2b2" offset="80%"/>
351
- <stop stop-color="#ffffff" offset="100%"/>
352
- </radialGradient>
353
- <radialGradient id="elem2-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
354
- <stop stop-color="#a75fed" offset="0%"/>
355
- <stop stop-color="#7543a6" offset="40%"/>
356
- <stop stop-color="#512e74" offset="80%"/>
357
- <stop stop-color="#7543a6" offset="100%"/>
358
- </radialGradient>
359
- <radialGradient id="elem3-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
360
- <stop stop-color="#e6e6ff" offset="0%"/>
361
- <stop stop-color="#a1a1ff" offset="40%"/>
362
- <stop stop-color="#7070b2" offset="80%"/>
363
- <stop stop-color="#a1a1ff" offset="100%"/>
364
- </radialGradient>
365
- <radialGradient id="mark-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
366
- <stop stop-color="#ffff00" offset="0%"/>
367
- <stop stop-color="#f8b500" offset="40%"/>
368
- <stop stop-color="#ad7e00" offset="80%"/>
369
- <stop stop-color="#f8b500" offset="100%"/>
370
- </radialGradient>
371
- </defs>
372
- <circle class="atom draggable" r="19.885714582034517" cx="332.33494785853793" cy="195.8134077889579" fill-opacity="1" fill="url(#pos-grad)"/>
373
- <circle class="atom draggable" r="19.885714582034517" cx="292.667482648577" cy="165.69224264962335" fill-opacity="1" fill="url(#neg-grad)"/>
374
- <circle class="atom draggable" r="19.885714582034517" cx="543.2830467224121" cy="312.7163508551462" fill-opacity="1" fill="url(#pos-grad)"/>
375
- <circle class="atom draggable" r="19.885714582034517" cx="565.2082312447684" cy="356.42730122974945" fill-opacity="1" fill="url(#neg-grad)"/>
376
- <circle class="atom draggable" r="19.885714582034517" cx="164.0883015223912" cy="328.2634201322283" fill-opacity="1" fill="url(#neutral-grad)"/>
377
- <circle class="atom draggable" r="19.885714582034517" cx="155.6436845234462" cy="279.48330173492434" fill-opacity="1" fill="url(#neutral-grad)"/>
378
- <circle class="atom draggable" r="19.885714582034517" cx="265.3489616938999" cy="284.6315339224679" fill-opacity="1" fill="url(#neutral-grad)"/>
379
- <circle class="atom draggable" r="19.885714582034517" cx="272.1277967180524" cy="234.56692657470703" fill-opacity="1" fill="url(#neutral-grad)"/>
380
- <circle class="atom draggable" r="19.885714582034517" cx="430.23867906842906" cy="251.56617834908624" fill-opacity="1" fill="url(#pos-grad)"/>
381
- <circle class="atom draggable" r="19.885714582034517" cx="474.62090737479076" cy="271.04011892591205" fill-opacity="1" fill="url(#neg-grad)"/>
382
- <circle class="atom draggable" r="19.885714582034517" cx="563.4138581412178" cy="249.39266943250385" fill-opacity="1" fill="url(#pos-grad)"/>
383
- <circle class="atom draggable" r="19.885714582034517" cx="522.2822865077427" cy="277.8519995825631" fill-opacity="1" fill="url(#neg-grad)"/>
384
- <circle class="atom draggable" r="19.885714582034517" cx="602.5971597943987" cy="327.67113524845666" fill-opacity="1" fill="url(#pos-grad)"/>
385
- <circle class="atom draggable" r="19.885714582034517" cx="576.0494270324707" cy="284.98829163142614" fill-opacity="1" fill="url(#neg-grad)"/>
386
- <circle class="atom draggable" r="19.885714582034517" cx="323.6724169594901" cy="140.38090013776508" fill-opacity="1" fill="url(#pos-grad)"/>
387
- <circle class="atom draggable" r="19.885714582034517" cx="360.5431880950928" cy="171.9000567299979" fill-opacity="1" fill="url(#neg-grad)"/>
388
- <circle class="atom draggable" r="19.885714582034517" cx="585.4924654279437" cy="187.4983064379011" fill-opacity="1" fill="url(#pos-grad)"/>
389
- <circle class="atom draggable" r="19.885714582034517" cx="616.7411646161761" cy="224.06827697753909" fill-opacity="1" fill="url(#neg-grad)"/>
390
- <circle class="atom draggable" r="19.885714582034517" cx="387.52022961207797" cy="273.82076429639545" fill-opacity="1" fill="url(#pos-grad)"/>
391
- <circle class="atom draggable" r="19.885714582034517" cx="375.5620487758091" cy="224.87580887930739" fill-opacity="1" fill="url(#neg-grad)"/>
392
- <circle class="atom draggable" r="19.885714582034517" cx="502.27199445452004" cy="233.88477369035996" fill-opacity="1" fill="url(#pos-grad)"/>
393
- <circle class="atom draggable" r="19.885714582034517" cx="540.6954836164202" cy="204.50523883274624" fill-opacity="1" fill="url(#neg-grad)"/>
394
- <circle class="atom draggable" r="19.885714582034517" cx="89.79431758608136" cy="150.08901476178852" fill-opacity="1" fill="url(#neutral-grad)"/>
395
- <circle class="atom draggable" r="19.885714582034517" cx="83.36722653252738" cy="200.45831042698453" fill-opacity="1" fill="url(#neutral-grad)"/>
396
- <circle class="atom draggable" r="19.885714582034517" cx="272.6858980996268" cy="347.6203438486372" fill-opacity="1" fill="url(#neutral-grad)"/>
397
- <circle class="atom draggable" r="19.885714582034517" cx="323.88553047180176" cy="348.37965852192474" fill-opacity="1" fill="url(#neutral-grad)"/>
398
- <circle class="atom draggable" r="19.885714582034517" cx="221.39547320774622" cy="282.55681817190987" fill-opacity="1" fill="url(#neutral-grad)"/>
399
- <circle class="atom draggable" r="19.885714582034517" cx="216.81139918736048" cy="329.0239615712847" fill-opacity="1" fill="url(#neutral-grad)"/>
400
- <circle class="atom draggable" r="19.885714582034517" cx="46.913588353565764" cy="211.83859569004605" fill-opacity="1" fill="url(#neutral-grad)"/>
401
- <circle class="atom draggable" r="19.885714582034517" cx="75.06879023143223" cy="251.58651776994978" fill-opacity="1" fill="url(#neutral-grad)"/>
402
- <circle class="atom draggable" r="19.885714582034517" cx="321.312878199986" cy="252.18743149893626" fill-opacity="1" fill="url(#neutral-grad)"/>
403
- <circle class="atom draggable" r="19.885714582034517" cx="334.91570745195656" cy="300.6354223251343" fill-opacity="1" fill="url(#neutral-grad)"/>
404
- <circle class="atom draggable" r="19.885714582034517" cx="249.82995986938477" cy="175.04775990077428" fill-opacity="1" fill="url(#neutral-grad)"/>
405
- <circle class="atom draggable" r="19.885714582034517" cx="225.65625" cy="215.55312391008653" fill-opacity="1" fill="url(#neutral-grad)"/>
406
- <circle class="atom draggable" r="19.885714582034517" cx="117.90789536067416" cy="234.25748528071813" fill-opacity="1" fill="url(#neutral-grad)"/>
407
- <circle class="atom draggable" r="19.885714582034517" cx="167.04498481750488" cy="238.49898940495083" fill-opacity="1" fill="url(#neutral-grad)"/>
408
- <circle class="atom draggable" r="19.885714582034517" cx="237.0106724330357" cy="134.4235596248082" fill-opacity="1" fill="url(#neutral-grad)"/>
409
- <circle class="atom draggable" r="19.885714582034517" cx="206.70443752833776" cy="176.90547441755024" fill-opacity="1" fill="url(#neutral-grad)"/>
410
- <circle class="atom draggable" r="19.885714582034517" cx="110.18888364519391" cy="277.49982891082766" fill-opacity="1" fill="url(#neutral-grad)"/>
411
- <circle class="atom draggable" r="19.885714582034517" cx="120.70519392830984" cy="327.15009167534964" fill-opacity="1" fill="url(#neutral-grad)"/>
412
- <circle class="atom draggable" r="19.885714582034517" cx="489.35802677699496" cy="188.86725850786485" fill-opacity="1" fill="url(#pos-grad)"/>
413
- <circle class="atom draggable" r="19.885714582034517" cx="496.0001989092146" cy="140.7720665522984" fill-opacity="1" fill="url(#neg-grad)"/>
414
- <circle class="atom draggable" r="19.885714582034517" cx="430.38475309099465" cy="173.32120857238772" fill-opacity="1" fill="url(#pos-grad)"/>
415
- <circle class="atom draggable" r="19.885714582034517" cx="454.7281003679548" cy="212.80592716762" fill-opacity="1" fill="url(#neg-grad)"/>
416
- <g class="label" transform="translate(332.33494785853793,195.8134077889579)">
417
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
418
- </g>
419
- <g class="label" transform="translate(292.667482648577,165.69224264962335)">
420
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
421
- </g>
422
- <g class="label" transform="translate(543.2830467224121,312.7163508551462)">
423
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
424
- </g>
425
- <g class="label" transform="translate(565.2082312447684,356.42730122974945)">
426
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
427
- </g>
428
- <g class="label" transform="translate(164.0883015223912,328.2634201322283)"/>
429
- <g class="label" transform="translate(155.6436845234462,279.48330173492434)"/>
430
- <g class="label" transform="translate(265.3489616938999,284.6315339224679)"/>
431
- <g class="label" transform="translate(272.1277967180524,234.56692657470703)"/>
432
- <g class="label" transform="translate(430.23867906842906,251.56617834908624)">
433
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
434
- </g>
435
- <g class="label" transform="translate(474.62090737479076,271.04011892591205)">
436
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
437
- </g>
438
- <g class="label" transform="translate(563.4138581412178,249.39266943250385)">
439
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
440
- </g>
441
- <g class="label" transform="translate(522.2822865077427,277.8519995825631)">
442
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
443
- </g>
444
- <g class="label" transform="translate(602.5971597943987,327.67113524845666)">
445
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
446
- </g>
447
- <g class="label" transform="translate(576.0494270324707,284.98829163142614)">
448
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
449
- </g>
450
- <g class="label" transform="translate(323.6724169594901,140.38090013776508)">
451
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
452
- </g>
453
- <g class="label" transform="translate(360.5431880950928,171.9000567299979)">
454
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
455
- </g>
456
- <g class="label" transform="translate(585.4924654279437,187.4983064379011)">
457
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
458
- </g>
459
- <g class="label" transform="translate(616.7411646161761,224.06827697753909)">
460
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
461
- </g>
462
- <g class="label" transform="translate(387.52022961207797,273.82076429639545)">
463
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
464
- </g>
465
- <g class="label" transform="translate(375.5620487758091,224.87580887930739)">
466
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
467
- </g>
468
- <g class="label" transform="translate(502.27199445452004,233.88477369035996)">
469
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
470
- </g>
471
- <g class="label" transform="translate(540.6954836164202,204.50523883274624)">
472
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
473
- </g>
474
- <g class="label" transform="translate(89.79431758608136,150.08901476178852)"/>
475
- <g class="label" transform="translate(83.36722653252738,200.45831042698453)"/>
476
- <g class="label" transform="translate(272.6858980996268,347.6203438486372)"/>
477
- <g class="label" transform="translate(323.88553047180176,348.37965852192474)"/>
478
- <g class="label" transform="translate(221.39547320774622,282.55681817190987)"/>
479
- <g class="label" transform="translate(216.81139918736048,329.0239615712847)"/>
480
- <g class="label" transform="translate(46.913588353565764,211.83859569004605)"/>
481
- <g class="label" transform="translate(75.06879023143223,251.58651776994978)"/>
482
- <g class="label" transform="translate(321.312878199986,252.18743149893626)"/>
483
- <g class="label" transform="translate(334.91570745195656,300.6354223251343)"/>
484
- <g class="label" transform="translate(249.82995986938477,175.04775990077428)"/>
485
- <g class="label" transform="translate(225.65625,215.55312391008653)"/>
486
- <g class="label" transform="translate(117.90789536067416,234.25748528071813)"/>
487
- <g class="label" transform="translate(167.04498481750488,238.49898940495083)"/>
488
- <g class="label" transform="translate(237.0106724330357,134.4235596248082)"/>
489
- <g class="label" transform="translate(206.70443752833776,176.90547441755024)"/>
490
- <g class="label" transform="translate(110.18888364519391,277.49982891082766)"/>
491
- <g class="label" transform="translate(120.70519392830984,327.15009167534964)"/>
492
- <g class="label" transform="translate(489.35802677699496,188.86725850786485)">
493
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
494
- </g>
495
- <g class="label" transform="translate(496.0001989092146,140.7720665522984)">
496
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
497
- </g>
498
- <g class="label" transform="translate(430.38475309099465,173.32120857238772)">
499
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
500
- </g>
501
- <g class="label" transform="translate(454.7281003679548,212.80592716762)">
502
- <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
503
- </g>
504
- </g>
505
- <g class="image-container-top"/>
506
- <g class="text-container-top">
507
- <g class="textBoxWrapper">
508
- <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"/>
509
- <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">
510
- <tspan x="230.56071428571425" dy="0">Separated oil and water </tspan>
511
- </text>
512
- </g>
513
- </g>
514
- <g class="brush-container"/>
515
- </svg>
516
- <g class="icon-container">
517
- <image id="heat-bath" x="1%" width="36" height="36" preserveAspectRatio="xMinYMin" xlink:href="oil-and-water/heatbath.svg" class="opaque-on-hover" style="display: none;">
518
- <title>Heatbath active</title>
519
- </image>
520
- <image id="ke-gradient" x="0" width="39.6" height="108" preserveAspectRatio="xMinYMin" xlink:href="oil-and-water/ke-gradient.svg" class="opaque-on-hover" style="display: none;">
521
- <title>Kinetic energy gradient</title>
522
- </image>
523
- </g>
524
- </g>
525
- </svg>
526
- </li>
527
- </ul>
528
- </div>
529
-
530
- <button id="make-svg-inlined-image" class="shutterbug" data-src="#src-svg-inlined" data-dst="#image-svg-inlined-dst">Image Snapshot</button>
531
- <div id="image-svg-inlined-dst"></div>
532
-
533
- <script type="text/javascript">
534
- $(document).ready(function(e) {
535
- $("button.shutterbug#make-svg-inlined-image").click(function(e) {
536
- var target = $(e.target);
537
- var src = target.attr('data-src');
538
- var dst = target.attr('data-dst');
539
- var bug = new Shutterbug(src,dst,null,"xxyyz");
540
- bug.getDomSnapshot();
541
- });
542
- });
543
- </script>
544
-
545
- <div id="src-svg-embed">
546
- <ul>
547
- <li>
548
- testing SVG using &lt;embed> ...
549
- </li>
550
- <li>
551
- <embed src="oil-and-water/oil-and-water.svg" type="image/svg+xml" />
552
- </li>
553
- </ul>
554
- </div>
555
- <button id="make-svg-embed-image" class="shutterbug" data-src="#src-svg-embed" data-dst="#image-svg-embed-dst">Image Snapshot</button>
556
- <div id="image-svg-embed-dst"></div>
557
-
558
- <script type="text/javascript">
559
- $(document).ready(function(e) {
560
- $("button.shutterbug#make-svg-embed-image").click(function(e) {
561
- var target = $(e.target);
562
- var src = target.attr('data-src');
563
- var dst = target.attr('data-dst');
564
- var bug = new Shutterbug(src,dst,null,"xxyyz");
565
- bug.getDomSnapshot();
566
- });
567
- });
568
- </script>
569
-
570
- </body>
571
- </html>