shutterbug 0.0.11 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. data/.ruby-version +1 -1
  2. data/.travis.yml +2 -3
  3. data/Guardfile +5 -0
  4. data/README.md +59 -10
  5. data/config.ru +5 -3
  6. data/demo/{withIframe.html → iframe_example.html} +0 -0
  7. data/demo/index.html +7 -24
  8. data/demo/oil-and-water/heatbath.svg +20 -0
  9. data/demo/oil-and-water/ke-gradient.svg +27 -0
  10. data/demo/oil-and-water/oil-and-water.svg +487 -0
  11. data/demo/simple_example.html +35 -0
  12. data/demo/svg_example.html +571 -0
  13. data/images/shutterbug.jpg +0 -0
  14. data/lib/shutterbug.rb +4 -6
  15. data/lib/shutterbug/cache_manager.rb +6 -0
  16. data/lib/shutterbug/cache_manager/cache_entry.rb +19 -0
  17. data/lib/shutterbug/cache_manager/no_cache.rb +19 -0
  18. data/lib/shutterbug/configuration.rb +20 -24
  19. data/lib/shutterbug/handlers.rb +7 -0
  20. data/lib/shutterbug/handlers/convert_handler.rb +38 -0
  21. data/lib/shutterbug/handlers/file_handlers.rb +9 -0
  22. data/lib/shutterbug/handlers/file_handlers/base.rb +39 -0
  23. data/lib/shutterbug/handlers/file_handlers/html_file.rb +22 -0
  24. data/lib/shutterbug/handlers/file_handlers/png_file.rb +23 -0
  25. data/lib/shutterbug/handlers/js_file_handler.rb +27 -0
  26. data/lib/shutterbug/{shutterbug.js → handlers/shutterbug.js} +26 -3
  27. data/lib/shutterbug/phantom_job.rb +17 -12
  28. data/lib/shutterbug/rackapp.rb +33 -31
  29. data/lib/shutterbug/storage.rb +6 -0
  30. data/lib/shutterbug/storage/file_storage.rb +20 -0
  31. data/lib/shutterbug/storage/s3_storage.rb +75 -0
  32. data/shutterbug.gemspec +3 -0
  33. data/spec/shared_examples_for_file_handlers.rb +16 -0
  34. data/spec/shared_examples_for_handlers.rb +26 -0
  35. data/spec/shared_examples_for_storage.rb +17 -0
  36. data/spec/shutterbug/configuration_spec.rb +83 -0
  37. data/spec/shutterbug/convert_handler_spec.rb +29 -0
  38. data/spec/shutterbug/file_storage_spec.rb +5 -0
  39. data/spec/shutterbug/html_file_handler_spec.rb +10 -0
  40. data/spec/shutterbug/js_file_handler_spec.rb +4 -0
  41. data/spec/shutterbug/png_file_handler_spec.rb +10 -0
  42. data/spec/shutterbug/rackapp_spec.rb +49 -41
  43. data/spec/shutterbug/s3_storage_spec.rb +12 -0
  44. metadata +205 -105
  45. data/lib/shutterbug/bug_file.rb +0 -22
  46. data/lib/shutterbug/html_file.rb +0 -3
  47. data/lib/shutterbug/js_file.rb +0 -11
  48. data/lib/shutterbug/png_file.rb +0 -3
  49. data/lib/shutterbug/service.rb +0 -39
data/demo/simple_example.html ADDED
@@ -0,0 +1,35 @@
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 ADDED
@@ -0,0 +1,571 @@
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>