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/.ruby-version CHANGED
@@ -1 +1 @@
1
- ruby-1.9.3-p327
1
+ ruby-1.9.3-p392
data/.travis.yml CHANGED
@@ -1,11 +1,10 @@
1
1
  language: ruby
2
2
  rvm:
3
- - "1.8.7"
4
3
  - "1.9.2"
5
4
  - "1.9.3"
5
+ - "2.0.0"
6
6
  - jruby-18mode # JRuby in 1.8 mode
7
7
  - jruby-19mode # JRuby in 1.9 mode
8
- - rbx-18mode
9
8
  - rbx-19mode
10
9
  # uncomment this line if your project needs to run something other than `rake`:
11
- # script: bundle exec rspec spec
10
+ # script: bundle exec rspec spec
data/Guardfile CHANGED
@@ -7,3 +7,8 @@ guard :rspec do
7
7
  watch('spec/spec_helper.rb') { "spec" }
8
8
  end
9
9
 
10
+ guard 'rack', :port => 9292 do
11
+ watch('Gemfile.lock')
12
+ watch('config.ru')
13
+ watch(%r{^(js|lib)/.*})
14
+ end
data/README.md CHANGED
@@ -2,6 +2,9 @@
2
2
 
3
3
  [![Build Status](https://travis-ci.org/concord-consortium/shutterbug.png?branch=master)](https://travis-ci.org/concord-consortium/shutterbug)
4
4
  [![Code Climate](https://codeclimate.com/github/concord-consortium/shutterbug.png)](https://codeclimate.com/github/concord-consortium/shutterbug)
5
+ [![Gem Version](https://badge.fury.io/rb/shutterbug.png)](http://badge.fury.io/rb/shutterbug)
6
+
7
+ ## Overview ##
5
8
 
6
9
  A rack utility using phantomjs that will create and save images (pngs) from parts of your html's documents current dom. These images become available as public png resources in the rack application. Currently shutterbug supports HTML, SVG and Canvas elements. Here is a sampel config.ru file:
7
10
 
@@ -15,6 +18,9 @@ A rack utility using phantomjs that will create and save images (pngs) from part
15
18
 
16
19
  Configuration options default to reasonable defaults.
17
20
 
21
+ Shutterbug is distributed as a Ruby Gem. The rack service delivers a javascript library to the browser that can send HTML fragments back to the Rack service. The Rack service generates images from these fragments using PhantomJS. In the following image “getDomSnapshot()” triggers a request to the Shutterbug service. The response from the POST request contains an image tag, that points to a newly created image on the server.
22
+
23
+ ![System Overview](images/shutterbug.jpg)
18
24
 
19
25
  ## Installation
20
26
 
@@ -36,18 +42,18 @@ Or install it yourself as:
36
42
  * [MIT](http://www.opensource.org/licenses/MIT), or
37
43
  * [Apache 2.0](http://www.opensource.org/licenses/Apache-2.0).
38
44
 
39
- See [LICENSE.md](license.md) for more information.
45
+ See [LICENSE.md](LICENSE.md) for more information.
40
46
 
41
47
  ## Usage
42
48
 
43
49
  After adding `use Shutterbug::Rackapp` to your config.ru file, you can convert pieces of your web-page into png images. Just follow these steps:
44
50
 
45
- include the following javascript in your pages:
46
-
51
+ include the following javascript in your pages:
52
+
47
53
  <script src='http://<yourhost:port>/shutterbug/shutterbug.js' type='text/javascript'></script>
48
54
 
49
55
  Elsewhere in your javascript, something like this:
50
-
56
+
51
57
  var shutterbug = new Shutterbug('#sourceselector', '#outselector',optCallbackFn, optIdentifier);
52
58
  $('#button').click(function() {
53
59
  shutterbug.getDomSnapshot();
@@ -55,6 +61,40 @@ Elsewhere in your javascript, something like this:
55
61
 
56
62
  This will replace the contents of `$("#outselector")` with an `<img src="http://<yourhost:port>/gete_png/sha1hash>` tag which will magically spring into existance. `optCallbackFn` is an optional callback function which will be invoked whith the `<img src=..>` tag. `optIdentifier` is useful when there are multiple snapshot buttons targetting multiple iframes, and you need to verify the destination for various snapshot window message events.
57
63
 
64
+ ## IFrame support
65
+
66
+ If the element being snapshot'd is an iframe then the iframe needs to handle a postMessage API.
67
+ Shutterbug will run something like the following JS to get the html of the iframe
68
+
69
+ iframe.contentWindow.postMessage(JSON.stringify({
70
+ type: 'htmlFragRequest',
71
+ id: id
72
+ }), "*");
73
+
74
+ It is passing a JSON message that specifies the 'type' of message and passes an id so the caller can match up the response.
75
+ Currently the id will be the optIdentifier passed to the Shutterbug constructor in the parent window.
76
+ The iframe should respond by posting back to the source window a message like:
77
+
78
+ message.source.postMessage(JSON.stringfy({
79
+ type: 'htmlFragResponse',
80
+ value: {
81
+ content: 'htmlContent'
82
+ css: '<div><link rel='stylesheet'..><style>...</style></div>',
83
+ width: width,
84
+ height: height,
85
+ base_url: 'url that resource urls in content and css are relative to'
86
+ },
87
+ id: id // id sent in in the 'htmlFragRequest'
88
+ }), message.origin);
89
+
90
+ The `shutterbug.js` script actually adds a handler for this postMessage API when the Shutterbug constructor is called.
91
+ So if shutterbug is included in the iframe html as described in the Usage section above, then a parent page can snapshot
92
+ the iframe. The iframe's html doesn't need the button with a click hander because the parent window will trigger things.
93
+ Additionally the `#outselector` in the iframe is not used.
94
+
95
+ You could also reimplement this API in the html of the iframe if you'd like. However the shutterbug implementation includes
96
+ some useful things like finding and including all the css on the page, and 'serializing' canvas elements into images.
97
+
58
98
  ## Deploying on Heroku ##
59
99
 
60
100
  To deploy on heroku, you are going to want to modify your stack following [these instructions](http://nerdery.crowdmob.com/post/33143120111/heroku-ruby-on-rails-and-phantomjs).
@@ -64,24 +104,30 @@ Your app should have a config.ru that looks something like this:
64
104
 
65
105
  require 'shutterbug'
66
106
  require 'rack/cors'
67
-
107
+
68
108
  use Rack::Cors do
69
109
  allow do
70
110
  origins '*'
71
111
  resource '/shutterbug/*', :headers => :any, :methods => :any
72
112
  end
73
113
  end
74
-
114
+
115
+ # Without a complete set of S3 credentials, Shutterbug
116
+ # Places images in a temporary directory where
117
+ # you will LOOSE your images...
75
118
  use Shutterbug::Rackapp do |config|
76
119
  config.uri_prefix = "http://<your app name>.herokuapp.com/"
77
120
  config.path_prefix = "/shutterbug"
78
121
  config.phantom_bin_path = "/app/vendor/phantomjs/bin/phantomjs"
122
+ # config.s3_key = "your_S3_KEY"
123
+ # config.s3_secret = "your_S3_SECRET_DONT_COMMIT_IT"
124
+ # config.s3_bin = "your_S3_bucket_name"
79
125
  end
80
-
126
+
81
127
  app = proc do |env|
82
128
  [200, { 'Content-Type' => 'text/html' }, ['move along']]
83
129
  end
84
-
130
+
85
131
  run app
86
132
 
87
133
  And a Procfile which looks like this:
@@ -95,13 +141,16 @@ And a Procfile which looks like this:
95
141
  * Configuration of the rack paths.
96
142
  * Fix web-font bugs in phantom js.
97
143
  * Better abstraction phantomjs command line invocation. Use phantomjs.rb ?
98
- * Use [sprockets](https://github.com/sstephenson/sprockets) for and coffee.erb for shutterbug.js
144
+ * Use [sprockets](https://github.com/sstephenson/sprockets) for and coffee.erb for shutterbug.js
99
145
  * Write Tests.
100
146
  * Write Documentation.
101
147
 
102
148
  ## Contributing
103
149
 
104
- 1. Fork it
150
+
151
+ 2. Join the mailing list: [email](mailto:shutterbug-dev+subscribe@googlegroups.com) or [web](https://groups.google.com/forum/?hl=en#!forum/shutterbug-dev)
152
+ 2. Fork this project.
153
+ com/forum/#!forum/shutterbug-dev)
105
154
  2. Create your feature branch (`git checkout -b my-new-feature`)
106
155
  3. Commit your changes (`git commit -am 'Add some feature'`)
107
156
  4. Push to the branch (`git push origin my-new-feature`)
data/config.ru CHANGED
@@ -9,10 +9,12 @@ use Rack::Cors do
9
9
  end
10
10
 
11
11
  use Shutterbug::Rackapp do |config|
12
- config.uri_prefix = "http://localhost:9292"
13
- config.path_prefix = "/shutterbug"
12
+ config.uri_prefix = "http://localhost:9292"
13
+ config.path_prefix = "/shutterbug"
14
+ config.s3_key = ENV['S3_KEY']
15
+ config.s3_secret = ENV['S3_SECRET']
16
+ config.s3_bin = "ccshutterbugtest"
14
17
  end
15
18
 
16
19
  app = Rack::Directory.new "demo"
17
-
18
20
  run app
data/demo/{withIframe.html → iframe_example.html} RENAMED
File without changes
data/demo/index.html CHANGED
@@ -2,34 +2,17 @@
2
2
  <html>
3
3
  <head>
4
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'>
5
6
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
6
7
  <script type="text/javascript" src="/shutterbug/shutterbug.js"></script>
7
8
  <link rel="stylesheet" type="text/css" href="main.css"></link>
8
- <style type="text/css">
9
- #src {
10
- color: red;
11
- }
12
- </style>
13
9
  </head>
14
-
15
10
  <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
-
11
+ Examples:
12
+ <ul>
13
+ <li>Sourced vs. inline <a href="svg_example.html">SVG</a>.</li>
14
+ <li>Very <a href="simple_example.html">simple</a> example.</li>
15
+ <li><a href="iframe_example.html">IFrame</a> example.</li>
16
+ </ul>
23
17
  </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
18
  </html>
data/demo/oil-and-water/heatbath.svg ADDED
@@ -0,0 +1,20 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="96.236px" height="53.321px" viewBox="1.764 13.81 96.236 53.321" enable-background="new 1.764 13.81 96.236 53.321"
6
+ xml:space="preserve">
7
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-622" y1="945.561" x2="-622" y2="926.4399">
8
+ <stop offset="0" style="stop-color:#555555"/>
9
+ <stop offset="1" style="stop-color:#FFFFFF"/>
10
+ </linearGradient>
11
+ <path fill="#E6E7E8" stroke="url(#SVGID_1_)" stroke-width="0.5" stroke-miterlimit="10" d="M71.33,14.384
12
+ c-8.942,0-16.827,4.459-21.596,11.265c-4.77-6.803-12.655-11.265-21.598-11.265c-14.564,0-26.373,11.806-26.373,26.373
13
+ c0,14.568,11.805,26.374,26.373,26.374c8.942,0,16.828-4.46,21.598-11.266c4.769,6.802,12.653,11.266,21.596,11.266
14
+ c14.566,0,26.372-11.806,26.372-26.374C97.702,26.19,85.896,14.384,71.33,14.384z"/>
15
+ <path fill="#555555" d="M31.448,47.719V27.133c0-1.16-0.941-2.1-2.102-2.1c-1.157,0-2.095,0.94-2.095,2.1v20.586
16
+ c-1.385,0.752-2.338,2.196-2.338,3.881c0,2.447,1.986,4.428,4.433,4.428c2.451,0,4.434-1.98,4.434-4.428
17
+ C33.783,49.916,32.83,48.471,31.448,47.719z"/>
18
+ <path fill="#555555" d="M80.209,37.663v-3.974c0-4.775-3.882-8.659-8.653-8.659S62.9,28.915,62.9,33.689v3.974h-2.067v15.973h21.72
19
+ V37.663H80.209z M66.239,33.689c0-2.93,2.384-5.316,5.313-5.316c2.931,0,5.316,2.386,5.316,5.316v3.974h-10.63V33.689z"/>
20
+ </svg>
data/demo/oil-and-water/ke-gradient.svg ADDED
@@ -0,0 +1,27 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
3
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
+ width="39px" height="111px" viewBox="25.5 4.093 39 111" enable-background="new 25.5 4.093 39 111" xml:space="preserve">
6
+ <path fill="#E6E7E8" d="M60.915,106.038c0,6.81-1.053,7.92-7.68,7.92l-14.445,0.273c-6.627,0-7.625-1.384-7.625-8.193V13.563
7
+ c0-6.81,0.998-8.22,7.625-8.22h14.445c6.627,0,7.68,1.41,7.68,8.22V106.038z"/>
8
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="986.0449" y1="1290.5266" x2="986.0449" y2="1226.1321">
9
+ <stop offset="0" style="stop-color:#A7A9AC"/>
10
+ <stop offset="1" style="stop-color:#FFFFFF"/>
11
+ </linearGradient>
12
+ <path fill="#E6E7E8" stroke="url(#SVGID_1_)" stroke-width="0.5" stroke-miterlimit="10" d="M36.971,24.763
13
+ c0-2.005,1.624-3.628,3.628-3.628h10.937c2.004,0,3.628,1.622,3.628,3.628v68.458c0,2.003-1.624,3.629-3.628,3.629H40.599
14
+ c-2.004,0-3.628-1.625-3.628-3.629V24.763z"/>
15
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1245.5889" y1="890.0452" x2="1245.5889" y2="962.26" gradientTransform="matrix(-1 0 0 1 1291.6289 -867.2383)">
16
+ <stop offset="0.0043" style="stop-color:#EF4136"/>
17
+ <stop offset="0.1653" style="stop-color:#F1604B"/>
18
+ <stop offset="0.5189" style="stop-color:#F79E85"/>
19
+ <stop offset="1" style="stop-color:#FFFFFF"/>
20
+ </linearGradient>
21
+ <path fill="url(#SVGID_2_)" d="M42.827,95.023c-2.215,0-4.009-1.796-4.009-4.011V26.893c0-2.257,1.828-4.086,4.085-4.086h6.274
22
+ c2.257,0,4.086,1.829,4.086,4.086v64.119c0,2.215-1.795,4.011-4.011,4.011H42.827z"/>
23
+ <rect x="14.397" y="9.607" fill="none" width="61.36" height="14.812"/>
24
+ <text transform="matrix(1 0 0 1 34.606 17.0129)" font-family="'ArialMT'" font-size="9.4798">HIGH</text>
25
+ <rect x="14.397" y="103.033" fill="none" width="61.36" height="14.812"/>
26
+ <text transform="matrix(1 0 0 1 35.293 108.6692)" font-family="'ArialMT'" font-size="9.4798">LOW</text>
27
+ </svg>
data/demo/oil-and-water/oil-and-water.svg ADDED
@@ -0,0 +1,487 @@
1
+ <?xml version="1.0"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" width="696" height="417.6" style="width: 696px; height: 417.6px;">
3
+ <g class="particle-container-vis" transform="translate(0,0)">
4
+ <rect class="plot" width="696" height="417.59999999999997" x="0" y="0" style="fill: #e1efde;"/>
5
+ <g class="grid-container">
6
+ <g class="x" transform="translate(0,0)"/>
7
+ <g class="x" transform="translate(198.85714285714283,0)"/>
8
+ <g class="x" transform="translate(397.71428571428567,0)"/>
9
+ <g class="x" transform="translate(596.5714285714286,0)"/>
10
+ <g class="y" transform="translate(0,417.6)" background-fill="#FFEEB6"/>
11
+ <g class="y" transform="translate(0,318.1714285714286)" background-fill="#FFEEB6"/>
12
+ <g class="y" transform="translate(0,218.74285714285716)" background-fill="#FFEEB6"/>
13
+ <g class="y" transform="translate(0,119.31428571428573)" background-fill="#FFEEB6"/>
14
+ <g class="y" transform="translate(0,19.885714285714304)" background-fill="#FFEEB6"/>
15
+ </g>
16
+ <svg class="viewport" viewBox="0 0 696 417.59999999999997" x="0" y="0" width="696" height="417.59999999999997">
17
+ <g class="image-container-below"/>
18
+ <g class="text-container-below"/>
19
+ <g class="radial-bonds-container">
20
+ <path d="M 332.33494785853793,195.8134077889579 L 312.50121525355746 , 180.75282521929063" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
21
+ <path d="M 543.2830467224121,312.7163508551462 L 554.2456389835902 , 334.5718260424478" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
22
+ <path d="M 164.0883015223912,328.2634201322283 L 159.8659930229187 , 303.87336093357635" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
23
+ <path d="M 265.3489616938999,284.6315339224679 L 268.7383792059762 , 259.59923024858745" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
24
+ <path d="M 430.23867906842906,251.56617834908624 L 452.4297932216099 , 261.30314863749913" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
25
+ <path d="M 563.4138581412178,249.39266943250385 L 542.8480723244802 , 263.6223345075335" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
26
+ <path d="M 602.5971597943987,327.67113524845666 L 589.3232934134347 , 306.32971343994143" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
27
+ <path d="M 323.6724169594901,140.38090013776508 L 342.1078025272914 , 156.1404784338815" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
28
+ <path d="M 585.4924654279437,187.4983064379011 L 601.1168150220599 , 205.78329170772008" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
29
+ <path d="M 387.52022961207797,273.82076429639545 L 381.54113919394354 , 249.34828658785142" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
30
+ <path d="M 502.27199445452004,233.88477369035996 L 521.4837390354701 , 219.1950062615531" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
31
+ <path d="M 89.79431758608136,150.08901476178852 L 86.58077205930437 , 175.2736625943865" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
32
+ <path d="M 272.6858980996268,347.6203438486372 L 298.2857142857143 , 348.000001185281" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
33
+ <path d="M 221.39547320774622,282.55681817190987 L 219.10343619755335 , 305.7903898715973" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
34
+ <path d="M 46.913588353565764,211.83859569004605 L 60.991189292499 , 231.7125567299979" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
35
+ <path d="M 321.312878199986,252.18743149893626 L 328.1142928259713 , 276.41142691203527" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
36
+ <path d="M 249.82995986938477,175.04775990077428 L 237.74310493469238 , 195.3004419054304" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
37
+ <path d="M 117.90789536067416,234.25748528071813 L 142.47644008908952 , 236.3782373428345" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
38
+ <path d="M 237.0106724330357,134.4235596248082 L 221.85755498068673 , 155.66451702117922" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
39
+ <path d="M 110.18888364519391,277.49982891082766 L 115.44703878675188 , 302.3249602930887" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond1"/>
40
+ <path d="M 489.35802677699496,188.86725850786485 L 492.6791128431048 , 164.81966253008164" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
41
+ <path d="M 430.38475309099465,173.32120857238772 L 442.55642672947477 , 193.06356787000385" stroke-width="14.914285936525888" stroke="#767fbf" fill="none" class="radialbond1"/>
42
+ <path d="M 312.50121525355746 , 180.75282521929063 L 292.667482648577,165.69224264962335" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
43
+ <path d="M 554.2456389835902 , 334.5718260424478 L 565.2082312447684,356.42730122974945" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
44
+ <path d="M 159.8659930229187 , 303.87336093357635 L 155.6436845234462,279.48330173492434" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
45
+ <path d="M 268.7383792059762 , 259.59923024858745 L 272.1277967180524,234.56692657470703" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
46
+ <path d="M 452.4297932216099 , 261.30314863749913 L 474.62090737479076,271.04011892591205" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
47
+ <path d="M 542.8480723244802 , 263.6223345075335 L 522.2822865077427,277.8519995825631" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
48
+ <path d="M 589.3232934134347 , 306.32971343994143 L 576.0494270324707,284.98829163142614" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
49
+ <path d="M 342.1078025272914 , 156.1404784338815 L 360.5431880950928,171.9000567299979" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
50
+ <path d="M 601.1168150220599 , 205.78329170772008 L 616.7411646161761,224.06827697753909" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
51
+ <path d="M 381.54113919394354 , 249.34828658785142 L 375.5620487758091,224.87580887930739" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
52
+ <path d="M 521.4837390354701 , 219.1950062615531 L 540.6954836164202,204.50523883274624" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
53
+ <path d="M 86.58077205930437 , 175.2736625943865 L 83.36722653252738,200.45831042698453" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
54
+ <path d="M 298.2857142857143 , 348.000001185281 L 323.88553047180176,348.37965852192474" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
55
+ <path d="M 219.10343619755335 , 305.7903898715973 L 216.81139918736048,329.0239615712847" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
56
+ <path d="M 60.991189292499 , 231.7125567299979 L 75.06879023143223,251.58651776994978" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
57
+ <path d="M 328.1142928259713 , 276.41142691203527 L 334.91570745195656,300.6354223251343" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
58
+ <path d="M 237.74310493469238 , 195.3004419054304 L 225.65625,215.55312391008653" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
59
+ <path d="M 142.47644008908952 , 236.3782373428345 L 167.04498481750488,238.49898940495083" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
60
+ <path d="M 221.85755498068673 , 155.66451702117922 L 206.70443752833776,176.90547441755024" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
61
+ <path d="M 115.44703878675188 , 302.3249602930887 L 120.70519392830984,327.15009167534964" stroke-width="14.914285936525888" stroke="#A4A4A4" fill="none" class="radialbond2"/>
62
+ <path d="M 492.6791128431048 , 164.81966253008164 L 496.0001989092146,140.7720665522984" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
63
+ <path d="M 442.55642672947477 , 193.06356787000385 L 454.7281003679548,212.80592716762" stroke-width="14.914285936525888" stroke="#e95e5e" fill="none" class="radialbond2"/>
64
+ </g>
65
+ <g class="vdw-lines-container">
66
+ <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="360.5431880950928" y2="171.9000567299979" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
67
+ <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="375.5620487758091" y2="224.87580887930739" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
68
+ <line class="attractionforce" x1="332.33494785853793" y1="195.8134077889579" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
69
+ <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="323.6724169594901" y2="140.38090013776508" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
70
+ <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="249.82995986938477" y2="175.04775990077428" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
71
+ <line class="attractionforce" x1="292.667482648577" y1="165.69224264962335" x2="237.0106724330357" y2="134.4235596248082" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
72
+ <line class="attractionforce" x1="543.2830467224121" y1="312.7163508551462" x2="522.2822865077427" y2="277.8519995825631" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
73
+ <line class="attractionforce" x1="543.2830467224121" y1="312.7163508551462" x2="576.0494270324707" y2="284.98829163142614" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
74
+ <line class="attractionforce" x1="565.2082312447684" y1="356.42730122974945" x2="602.5971597943987" y2="327.67113524845666" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
75
+ <line class="attractionforce" x1="164.0883015223912" y1="328.2634201322283" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
76
+ <line class="attractionforce" x1="164.0883015223912" y1="328.2634201322283" x2="120.70519392830984" y2="327.15009167534964" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
77
+ <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="221.39547320774622" y2="282.55681817190987" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
78
+ <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
79
+ <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="167.04498481750488" y2="238.49898940495083" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
80
+ <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
81
+ <line class="attractionforce" x1="155.6436845234462" y1="279.48330173492434" x2="120.70519392830984" y2="327.15009167534964" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
82
+ <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="272.6858980996268" y2="347.6203438486372" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
83
+ <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="221.39547320774622" y2="282.55681817190987" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
84
+ <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
85
+ <line class="attractionforce" x1="265.3489616938999" y1="284.6315339224679" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
86
+ <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
87
+ <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="249.82995986938477" y2="175.04775990077428" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
88
+ <line class="attractionforce" x1="272.1277967180524" y1="234.56692657470703" x2="225.65625" y2="215.55312391008653" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
89
+ <line class="attractionforce" x1="430.23867906842906" y1="251.56617834908624" x2="375.5620487758091" y2="224.87580887930739" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
90
+ <line class="attractionforce" x1="430.23867906842906" y1="251.56617834908624" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
91
+ <line class="attractionforce" x1="474.62090737479076" y1="271.04011892591205" x2="502.27199445452004" y2="233.88477369035996" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
92
+ <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="576.0494270324707" y2="284.98829163142614" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
93
+ <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="616.7411646161761" y2="224.06827697753909" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
94
+ <line class="attractionforce" x1="563.4138581412178" y1="249.39266943250385" x2="540.6954836164202" y2="204.50523883274624" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
95
+ <line class="attractionforce" x1="522.2822865077427" y1="277.8519995825631" x2="502.27199445452004" y2="233.88477369035996" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
96
+ <line class="attractionforce" x1="585.4924654279437" y1="187.4983064379011" x2="540.6954836164202" y2="204.50523883274624" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
97
+ <line class="attractionforce" x1="387.52022961207797" y1="273.82076429639545" x2="334.91570745195656" y2="300.6354223251343" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
98
+ <line class="attractionforce" x1="375.5620487758091" y1="224.87580887930739" x2="321.312878199986" y2="252.18743149893626" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
99
+ <line class="attractionforce" x1="502.27199445452004" y1="233.88477369035996" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
100
+ <line class="attractionforce" x1="540.6954836164202" y1="204.50523883274624" x2="489.35802677699496" y2="188.86725850786485" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
101
+ <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="46.913588353565764" y2="211.83859569004605" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
102
+ <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="75.06879023143223" y2="251.58651776994978" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
103
+ <line class="attractionforce" x1="83.36722653252738" y1="200.45831042698453" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
104
+ <line class="attractionforce" x1="272.6858980996268" y1="347.6203438486372" x2="216.81139918736048" y2="329.0239615712847" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
105
+ <line class="attractionforce" x1="323.88553047180176" y1="348.37965852192474" x2="334.91570745195656" y2="300.6354223251343" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
106
+ <line class="attractionforce" x1="75.06879023143223" y1="251.58651776994978" x2="117.90789536067416" y2="234.25748528071813" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
107
+ <line class="attractionforce" x1="75.06879023143223" y1="251.58651776994978" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
108
+ <line class="attractionforce" x1="249.82995986938477" y1="175.04775990077428" x2="237.0106724330357" y2="134.4235596248082" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
109
+ <line class="attractionforce" x1="249.82995986938477" y1="175.04775990077428" x2="206.70443752833776" y2="176.90547441755024" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
110
+ <line class="attractionforce" x1="225.65625" y1="215.55312391008653" x2="167.04498481750488" y2="238.49898940495083" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
111
+ <line class="attractionforce" x1="225.65625" y1="215.55312391008653" x2="206.70443752833776" y2="176.90547441755024" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
112
+ <line class="attractionforce" x1="117.90789536067416" y1="234.25748528071813" x2="110.18888364519391" y2="277.49982891082766" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
113
+ <line class="attractionforce" x1="489.35802677699496" y1="188.86725850786485" x2="454.7281003679548" y2="212.80592716762" style="stroke-width: 3.9771428571428573px; stroke-dasharray: 5.965714285714284px, 3.9771428571428573px;"/>
114
+ </g>
115
+ <g class="main-container">
116
+ <defs>
117
+ <marker id="Triangle-velocity" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" stroke="#000" fill="#000">
118
+ <path d="M 0 0 L 10 5 L 0 10 z"/>
119
+ </marker>
120
+ <marker id="Triangle-force" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" stroke="#169C30" fill="#169C30">
121
+ <path d="M 0 0 L 10 5 L 0 10 z"/>
122
+ </marker>
123
+ <radialGradient id="ke-shading-0" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
124
+ <stop stop-color="#FFFFFF" offset="0%"/>
125
+ <stop stop-color="#f2f2f2" offset="40%"/>
126
+ <stop stop-color="#a4a4a4" offset="80%"/>
127
+ <stop stop-color="#f2f2f2" offset="100%"/>
128
+ </radialGradient>
129
+ <radialGradient id="ke-shading-1" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
130
+ <stop stop-color="#FFFFFF" offset="0%"/>
131
+ <stop stop-color="#f3eded" offset="40%"/>
132
+ <stop stop-color="#a89f9f" offset="80%"/>
133
+ <stop stop-color="#f3eded" offset="100%"/>
134
+ </radialGradient>
135
+ <radialGradient id="ke-shading-2" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
136
+ <stop stop-color="#FFFFFF" offset="0%"/>
137
+ <stop stop-color="#f3e9e9" offset="40%"/>
138
+ <stop stop-color="#ab9999" offset="80%"/>
139
+ <stop stop-color="#f3e9e9" offset="100%"/>
140
+ </radialGradient>
141
+ <radialGradient id="ke-shading-3" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
142
+ <stop stop-color="#FFFFFF" offset="0%"/>
143
+ <stop stop-color="#f4e4e4" offset="40%"/>
144
+ <stop stop-color="#af9494" offset="80%"/>
145
+ <stop stop-color="#f4e4e4" offset="100%"/>
146
+ </radialGradient>
147
+ <radialGradient id="ke-shading-4" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
148
+ <stop stop-color="#FFFFFF" offset="0%"/>
149
+ <stop stop-color="#f4e0e0" offset="40%"/>
150
+ <stop stop-color="#b38f8f" offset="80%"/>
151
+ <stop stop-color="#f4e0e0" offset="100%"/>
152
+ </radialGradient>
153
+ <radialGradient id="ke-shading-5" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
154
+ <stop stop-color="#FFFFFF" offset="0%"/>
155
+ <stop stop-color="#f5dbdb" offset="40%"/>
156
+ <stop stop-color="#b68a8a" offset="80%"/>
157
+ <stop stop-color="#f5dbdb" offset="100%"/>
158
+ </radialGradient>
159
+ <radialGradient id="ke-shading-6" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
160
+ <stop stop-color="#FFFFFF" offset="0%"/>
161
+ <stop stop-color="#f5d7d7" offset="40%"/>
162
+ <stop stop-color="#ba8484" offset="80%"/>
163
+ <stop stop-color="#f5d7d7" offset="100%"/>
164
+ </radialGradient>
165
+ <radialGradient id="ke-shading-7" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
166
+ <stop stop-color="#FFFFFF" offset="0%"/>
167
+ <stop stop-color="#f6d2d2" offset="40%"/>
168
+ <stop stop-color="#bd7f7f" offset="80%"/>
169
+ <stop stop-color="#f6d2d2" offset="100%"/>
170
+ </radialGradient>
171
+ <radialGradient id="ke-shading-8" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
172
+ <stop stop-color="#FFFFFF" offset="0%"/>
173
+ <stop stop-color="#f6cece" offset="40%"/>
174
+ <stop stop-color="#c17a7a" offset="80%"/>
175
+ <stop stop-color="#f6cece" offset="100%"/>
176
+ </radialGradient>
177
+ <radialGradient id="ke-shading-9" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
178
+ <stop stop-color="#FFFFFF" offset="0%"/>
179
+ <stop stop-color="#f7c9c9" offset="40%"/>
180
+ <stop stop-color="#c57474" offset="80%"/>
181
+ <stop stop-color="#f7c9c9" offset="100%"/>
182
+ </radialGradient>
183
+ <radialGradient id="ke-shading-10" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
184
+ <stop stop-color="#FFFFFF" offset="0%"/>
185
+ <stop stop-color="#f7c4c4" offset="40%"/>
186
+ <stop stop-color="#c86f6f" offset="80%"/>
187
+ <stop stop-color="#f7c4c4" offset="100%"/>
188
+ </radialGradient>
189
+ <radialGradient id="ke-shading-11" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
190
+ <stop stop-color="#FFFFFF" offset="0%"/>
191
+ <stop stop-color="#f8c0c0" offset="40%"/>
192
+ <stop stop-color="#cc6a6a" offset="80%"/>
193
+ <stop stop-color="#f8c0c0" offset="100%"/>
194
+ </radialGradient>
195
+ <radialGradient id="ke-shading-12" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
196
+ <stop stop-color="#FFFFFF" offset="0%"/>
197
+ <stop stop-color="#f8bbbb" offset="40%"/>
198
+ <stop stop-color="#d06565" offset="80%"/>
199
+ <stop stop-color="#f8bbbb" offset="100%"/>
200
+ </radialGradient>
201
+ <radialGradient id="ke-shading-13" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
202
+ <stop stop-color="#FFFFFF" offset="0%"/>
203
+ <stop stop-color="#f9b7b7" offset="40%"/>
204
+ <stop stop-color="#d35f5f" offset="80%"/>
205
+ <stop stop-color="#f9b7b7" offset="100%"/>
206
+ </radialGradient>
207
+ <radialGradient id="ke-shading-14" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
208
+ <stop stop-color="#FFFFFF" offset="0%"/>
209
+ <stop stop-color="#f9b2b2" offset="40%"/>
210
+ <stop stop-color="#d75a5a" offset="80%"/>
211
+ <stop stop-color="#f9b2b2" offset="100%"/>
212
+ </radialGradient>
213
+ <radialGradient id="ke-shading-15" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
214
+ <stop stop-color="#FFFFFF" offset="0%"/>
215
+ <stop stop-color="#faaeae" offset="40%"/>
216
+ <stop stop-color="#db5555" offset="80%"/>
217
+ <stop stop-color="#faaeae" offset="100%"/>
218
+ </radialGradient>
219
+ <radialGradient id="ke-shading-16" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
220
+ <stop stop-color="#FFFFFF" offset="0%"/>
221
+ <stop stop-color="#faa9a9" offset="40%"/>
222
+ <stop stop-color="#de5050" offset="80%"/>
223
+ <stop stop-color="#faa9a9" offset="100%"/>
224
+ </radialGradient>
225
+ <radialGradient id="ke-shading-17" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
226
+ <stop stop-color="#FFFFFF" offset="0%"/>
227
+ <stop stop-color="#fba4a4" offset="40%"/>
228
+ <stop stop-color="#e24a4a" offset="80%"/>
229
+ <stop stop-color="#fba4a4" offset="100%"/>
230
+ </radialGradient>
231
+ <radialGradient id="ke-shading-18" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
232
+ <stop stop-color="#FFFFFF" offset="0%"/>
233
+ <stop stop-color="#fba0a0" offset="40%"/>
234
+ <stop stop-color="#e64545" offset="80%"/>
235
+ <stop stop-color="#fba0a0" offset="100%"/>
236
+ </radialGradient>
237
+ <radialGradient id="ke-shading-19" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
238
+ <stop stop-color="#FFFFFF" offset="0%"/>
239
+ <stop stop-color="#fc9b9b" offset="40%"/>
240
+ <stop stop-color="#e94040" offset="80%"/>
241
+ <stop stop-color="#fc9b9b" offset="100%"/>
242
+ </radialGradient>
243
+ <radialGradient id="ke-shading-20" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
244
+ <stop stop-color="#FFFFFF" offset="0%"/>
245
+ <stop stop-color="#fc9797" offset="40%"/>
246
+ <stop stop-color="#ed3a3a" offset="80%"/>
247
+ <stop stop-color="#fc9797" offset="100%"/>
248
+ </radialGradient>
249
+ <radialGradient id="ke-shading-21" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
250
+ <stop stop-color="#FFFFFF" offset="0%"/>
251
+ <stop stop-color="#fd9292" offset="40%"/>
252
+ <stop stop-color="#f03535" offset="80%"/>
253
+ <stop stop-color="#fd9292" offset="100%"/>
254
+ </radialGradient>
255
+ <radialGradient id="ke-shading-22" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
256
+ <stop stop-color="#FFFFFF" offset="0%"/>
257
+ <stop stop-color="#fd8e8e" offset="40%"/>
258
+ <stop stop-color="#f43030" offset="80%"/>
259
+ <stop stop-color="#fd8e8e" offset="100%"/>
260
+ </radialGradient>
261
+ <radialGradient id="ke-shading-23" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
262
+ <stop stop-color="#FFFFFF" offset="0%"/>
263
+ <stop stop-color="#fe8989" offset="40%"/>
264
+ <stop stop-color="#f82b2b" offset="80%"/>
265
+ <stop stop-color="#fe8989" offset="100%"/>
266
+ </radialGradient>
267
+ <radialGradient id="ke-shading-24" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
268
+ <stop stop-color="#FFFFFF" offset="0%"/>
269
+ <stop stop-color="#fe8585" offset="40%"/>
270
+ <stop stop-color="#fb2525" offset="80%"/>
271
+ <stop stop-color="#fe8585" offset="100%"/>
272
+ </radialGradient>
273
+ <radialGradient id="neg-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
274
+ <stop stop-color="#ffefff" offset="0%"/>
275
+ <stop stop-color="#fdadad" offset="40%"/>
276
+ <stop stop-color="#e95e5e" offset="80%"/>
277
+ <stop stop-color="#fdadad" offset="100%"/>
278
+ </radialGradient>
279
+ <radialGradient id="pos-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
280
+ <stop stop-color="#dfffff" offset="0%"/>
281
+ <stop stop-color="#9abeff" offset="40%"/>
282
+ <stop stop-color="#767fbf" offset="80%"/>
283
+ <stop stop-color="#9abeff" offset="100%"/>
284
+ </radialGradient>
285
+ <radialGradient id="neutral-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
286
+ <stop stop-color="#FFFFFF" offset="0%"/>
287
+ <stop stop-color="#f2f2f2" offset="40%"/>
288
+ <stop stop-color="#A4A4A4" offset="80%"/>
289
+ <stop stop-color="#f2f2f2" offset="100%"/>
290
+ </radialGradient>
291
+ <radialGradient id="green-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
292
+ <stop stop-color="#dfffef" offset="0%"/>
293
+ <stop stop-color="#75a643" offset="40%"/>
294
+ <stop stop-color="#2a7216" offset="80%"/>
295
+ <stop stop-color="#75a643" offset="100%"/>
296
+ </radialGradient>
297
+ <radialGradient id="orange-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
298
+ <stop stop-color="#F0E6D1" offset="0%"/>
299
+ <stop stop-color="#E0A21B" offset="40%"/>
300
+ <stop stop-color="#AD7F1C" offset="80%"/>
301
+ <stop stop-color="#E0A21B" offset="100%"/>
302
+ </radialGradient>
303
+ <radialGradient id="elem0-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
304
+ <stop stop-color="#ffd7d7" offset="0%"/>
305
+ <stop stop-color="#fc9797" offset="40%"/>
306
+ <stop stop-color="#b06969" offset="80%"/>
307
+ <stop stop-color="#fc9797" offset="100%"/>
308
+ </radialGradient>
309
+ <radialGradient id="elem1-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
310
+ <stop stop-color="#ffffff" offset="0%"/>
311
+ <stop stop-color="#ffffff" offset="40%"/>
312
+ <stop stop-color="#b2b2b2" offset="80%"/>
313
+ <stop stop-color="#ffffff" offset="100%"/>
314
+ </radialGradient>
315
+ <radialGradient id="elem2-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
316
+ <stop stop-color="#a75fed" offset="0%"/>
317
+ <stop stop-color="#7543a6" offset="40%"/>
318
+ <stop stop-color="#512e74" offset="80%"/>
319
+ <stop stop-color="#7543a6" offset="100%"/>
320
+ </radialGradient>
321
+ <radialGradient id="elem3-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
322
+ <stop stop-color="#e6e6ff" offset="0%"/>
323
+ <stop stop-color="#a1a1ff" offset="40%"/>
324
+ <stop stop-color="#7070b2" offset="80%"/>
325
+ <stop stop-color="#a1a1ff" offset="100%"/>
326
+ </radialGradient>
327
+ <radialGradient id="mark-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
328
+ <stop stop-color="#ffff00" offset="0%"/>
329
+ <stop stop-color="#f8b500" offset="40%"/>
330
+ <stop stop-color="#ad7e00" offset="80%"/>
331
+ <stop stop-color="#f8b500" offset="100%"/>
332
+ </radialGradient>
333
+ </defs>
334
+ <circle class="atom draggable" r="19.885714582034517" cx="332.33494785853793" cy="195.8134077889579" fill-opacity="1" fill="url(#pos-grad)"/>
335
+ <circle class="atom draggable" r="19.885714582034517" cx="292.667482648577" cy="165.69224264962335" fill-opacity="1" fill="url(#neg-grad)"/>
336
+ <circle class="atom draggable" r="19.885714582034517" cx="543.2830467224121" cy="312.7163508551462" fill-opacity="1" fill="url(#pos-grad)"/>
337
+ <circle class="atom draggable" r="19.885714582034517" cx="565.2082312447684" cy="356.42730122974945" fill-opacity="1" fill="url(#neg-grad)"/>
338
+ <circle class="atom draggable" r="19.885714582034517" cx="164.0883015223912" cy="328.2634201322283" fill-opacity="1" fill="url(#neutral-grad)"/>
339
+ <circle class="atom draggable" r="19.885714582034517" cx="155.6436845234462" cy="279.48330173492434" fill-opacity="1" fill="url(#neutral-grad)"/>
340
+ <circle class="atom draggable" r="19.885714582034517" cx="265.3489616938999" cy="284.6315339224679" fill-opacity="1" fill="url(#neutral-grad)"/>
341
+ <circle class="atom draggable" r="19.885714582034517" cx="272.1277967180524" cy="234.56692657470703" fill-opacity="1" fill="url(#neutral-grad)"/>
342
+ <circle class="atom draggable" r="19.885714582034517" cx="430.23867906842906" cy="251.56617834908624" fill-opacity="1" fill="url(#pos-grad)"/>
343
+ <circle class="atom draggable" r="19.885714582034517" cx="474.62090737479076" cy="271.04011892591205" fill-opacity="1" fill="url(#neg-grad)"/>
344
+ <circle class="atom draggable" r="19.885714582034517" cx="563.4138581412178" cy="249.39266943250385" fill-opacity="1" fill="url(#pos-grad)"/>
345
+ <circle class="atom draggable" r="19.885714582034517" cx="522.2822865077427" cy="277.8519995825631" fill-opacity="1" fill="url(#neg-grad)"/>
346
+ <circle class="atom draggable" r="19.885714582034517" cx="602.5971597943987" cy="327.67113524845666" fill-opacity="1" fill="url(#pos-grad)"/>
347
+ <circle class="atom draggable" r="19.885714582034517" cx="576.0494270324707" cy="284.98829163142614" fill-opacity="1" fill="url(#neg-grad)"/>
348
+ <circle class="atom draggable" r="19.885714582034517" cx="323.6724169594901" cy="140.38090013776508" fill-opacity="1" fill="url(#pos-grad)"/>
349
+ <circle class="atom draggable" r="19.885714582034517" cx="360.5431880950928" cy="171.9000567299979" fill-opacity="1" fill="url(#neg-grad)"/>
350
+ <circle class="atom draggable" r="19.885714582034517" cx="585.4924654279437" cy="187.4983064379011" fill-opacity="1" fill="url(#pos-grad)"/>
351
+ <circle class="atom draggable" r="19.885714582034517" cx="616.7411646161761" cy="224.06827697753909" fill-opacity="1" fill="url(#neg-grad)"/>
352
+ <circle class="atom draggable" r="19.885714582034517" cx="387.52022961207797" cy="273.82076429639545" fill-opacity="1" fill="url(#pos-grad)"/>
353
+ <circle class="atom draggable" r="19.885714582034517" cx="375.5620487758091" cy="224.87580887930739" fill-opacity="1" fill="url(#neg-grad)"/>
354
+ <circle class="atom draggable" r="19.885714582034517" cx="502.27199445452004" cy="233.88477369035996" fill-opacity="1" fill="url(#pos-grad)"/>
355
+ <circle class="atom draggable" r="19.885714582034517" cx="540.6954836164202" cy="204.50523883274624" fill-opacity="1" fill="url(#neg-grad)"/>
356
+ <circle class="atom draggable" r="19.885714582034517" cx="89.79431758608136" cy="150.08901476178852" fill-opacity="1" fill="url(#neutral-grad)"/>
357
+ <circle class="atom draggable" r="19.885714582034517" cx="83.36722653252738" cy="200.45831042698453" fill-opacity="1" fill="url(#neutral-grad)"/>
358
+ <circle class="atom draggable" r="19.885714582034517" cx="272.6858980996268" cy="347.6203438486372" fill-opacity="1" fill="url(#neutral-grad)"/>
359
+ <circle class="atom draggable" r="19.885714582034517" cx="323.88553047180176" cy="348.37965852192474" fill-opacity="1" fill="url(#neutral-grad)"/>
360
+ <circle class="atom draggable" r="19.885714582034517" cx="221.39547320774622" cy="282.55681817190987" fill-opacity="1" fill="url(#neutral-grad)"/>
361
+ <circle class="atom draggable" r="19.885714582034517" cx="216.81139918736048" cy="329.0239615712847" fill-opacity="1" fill="url(#neutral-grad)"/>
362
+ <circle class="atom draggable" r="19.885714582034517" cx="46.913588353565764" cy="211.83859569004605" fill-opacity="1" fill="url(#neutral-grad)"/>
363
+ <circle class="atom draggable" r="19.885714582034517" cx="75.06879023143223" cy="251.58651776994978" fill-opacity="1" fill="url(#neutral-grad)"/>
364
+ <circle class="atom draggable" r="19.885714582034517" cx="321.312878199986" cy="252.18743149893626" fill-opacity="1" fill="url(#neutral-grad)"/>
365
+ <circle class="atom draggable" r="19.885714582034517" cx="334.91570745195656" cy="300.6354223251343" fill-opacity="1" fill="url(#neutral-grad)"/>
366
+ <circle class="atom draggable" r="19.885714582034517" cx="249.82995986938477" cy="175.04775990077428" fill-opacity="1" fill="url(#neutral-grad)"/>
367
+ <circle class="atom draggable" r="19.885714582034517" cx="225.65625" cy="215.55312391008653" fill-opacity="1" fill="url(#neutral-grad)"/>
368
+ <circle class="atom draggable" r="19.885714582034517" cx="117.90789536067416" cy="234.25748528071813" fill-opacity="1" fill="url(#neutral-grad)"/>
369
+ <circle class="atom draggable" r="19.885714582034517" cx="167.04498481750488" cy="238.49898940495083" fill-opacity="1" fill="url(#neutral-grad)"/>
370
+ <circle class="atom draggable" r="19.885714582034517" cx="237.0106724330357" cy="134.4235596248082" fill-opacity="1" fill="url(#neutral-grad)"/>
371
+ <circle class="atom draggable" r="19.885714582034517" cx="206.70443752833776" cy="176.90547441755024" fill-opacity="1" fill="url(#neutral-grad)"/>
372
+ <circle class="atom draggable" r="19.885714582034517" cx="110.18888364519391" cy="277.49982891082766" fill-opacity="1" fill="url(#neutral-grad)"/>
373
+ <circle class="atom draggable" r="19.885714582034517" cx="120.70519392830984" cy="327.15009167534964" fill-opacity="1" fill="url(#neutral-grad)"/>
374
+ <circle class="atom draggable" r="19.885714582034517" cx="489.35802677699496" cy="188.86725850786485" fill-opacity="1" fill="url(#pos-grad)"/>
375
+ <circle class="atom draggable" r="19.885714582034517" cx="496.0001989092146" cy="140.7720665522984" fill-opacity="1" fill="url(#neg-grad)"/>
376
+ <circle class="atom draggable" r="19.885714582034517" cx="430.38475309099465" cy="173.32120857238772" fill-opacity="1" fill="url(#pos-grad)"/>
377
+ <circle class="atom draggable" r="19.885714582034517" cx="454.7281003679548" cy="212.80592716762" fill-opacity="1" fill="url(#neg-grad)"/>
378
+ <g class="label" transform="translate(332.33494785853793,195.8134077889579)">
379
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
380
+ </g>
381
+ <g class="label" transform="translate(292.667482648577,165.69224264962335)">
382
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
383
+ </g>
384
+ <g class="label" transform="translate(543.2830467224121,312.7163508551462)">
385
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
386
+ </g>
387
+ <g class="label" transform="translate(565.2082312447684,356.42730122974945)">
388
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
389
+ </g>
390
+ <g class="label" transform="translate(164.0883015223912,328.2634201322283)"/>
391
+ <g class="label" transform="translate(155.6436845234462,279.48330173492434)"/>
392
+ <g class="label" transform="translate(265.3489616938999,284.6315339224679)"/>
393
+ <g class="label" transform="translate(272.1277967180524,234.56692657470703)"/>
394
+ <g class="label" transform="translate(430.23867906842906,251.56617834908624)">
395
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
396
+ </g>
397
+ <g class="label" transform="translate(474.62090737479076,271.04011892591205)">
398
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
399
+ </g>
400
+ <g class="label" transform="translate(563.4138581412178,249.39266943250385)">
401
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
402
+ </g>
403
+ <g class="label" transform="translate(522.2822865077427,277.8519995825631)">
404
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
405
+ </g>
406
+ <g class="label" transform="translate(602.5971597943987,327.67113524845666)">
407
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
408
+ </g>
409
+ <g class="label" transform="translate(576.0494270324707,284.98829163142614)">
410
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
411
+ </g>
412
+ <g class="label" transform="translate(323.6724169594901,140.38090013776508)">
413
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
414
+ </g>
415
+ <g class="label" transform="translate(360.5431880950928,171.9000567299979)">
416
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
417
+ </g>
418
+ <g class="label" transform="translate(585.4924654279437,187.4983064379011)">
419
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
420
+ </g>
421
+ <g class="label" transform="translate(616.7411646161761,224.06827697753909)">
422
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
423
+ </g>
424
+ <g class="label" transform="translate(387.52022961207797,273.82076429639545)">
425
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
426
+ </g>
427
+ <g class="label" transform="translate(375.5620487758091,224.87580887930739)">
428
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
429
+ </g>
430
+ <g class="label" transform="translate(502.27199445452004,233.88477369035996)">
431
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
432
+ </g>
433
+ <g class="label" transform="translate(540.6954836164202,204.50523883274624)">
434
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
435
+ </g>
436
+ <g class="label" transform="translate(89.79431758608136,150.08901476178852)"/>
437
+ <g class="label" transform="translate(83.36722653252738,200.45831042698453)"/>
438
+ <g class="label" transform="translate(272.6858980996268,347.6203438486372)"/>
439
+ <g class="label" transform="translate(323.88553047180176,348.37965852192474)"/>
440
+ <g class="label" transform="translate(221.39547320774622,282.55681817190987)"/>
441
+ <g class="label" transform="translate(216.81139918736048,329.0239615712847)"/>
442
+ <g class="label" transform="translate(46.913588353565764,211.83859569004605)"/>
443
+ <g class="label" transform="translate(75.06879023143223,251.58651776994978)"/>
444
+ <g class="label" transform="translate(321.312878199986,252.18743149893626)"/>
445
+ <g class="label" transform="translate(334.91570745195656,300.6354223251343)"/>
446
+ <g class="label" transform="translate(249.82995986938477,175.04775990077428)"/>
447
+ <g class="label" transform="translate(225.65625,215.55312391008653)"/>
448
+ <g class="label" transform="translate(117.90789536067416,234.25748528071813)"/>
449
+ <g class="label" transform="translate(167.04498481750488,238.49898940495083)"/>
450
+ <g class="label" transform="translate(237.0106724330357,134.4235596248082)"/>
451
+ <g class="label" transform="translate(206.70443752833776,176.90547441755024)"/>
452
+ <g class="label" transform="translate(110.18888364519391,277.49982891082766)"/>
453
+ <g class="label" transform="translate(120.70519392830984,327.15009167534964)"/>
454
+ <g class="label" transform="translate(489.35802677699496,188.86725850786485)">
455
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
456
+ </g>
457
+ <g class="label" transform="translate(496.0001989092146,140.7720665522984)">
458
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
459
+ </g>
460
+ <g class="label" transform="translate(430.38475309099465,173.32120857238772)">
461
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-9.5" y="0.31em">+</text>
462
+ </g>
463
+ <g class="label" transform="translate(454.7281003679548,212.80592716762)">
464
+ <text style="font-size: 31.81714333125523px; font-weight: bold; opacity: 0.7;" pointer-events="none" x="-5.5" y="0.31em">-</text>
465
+ </g>
466
+ </g>
467
+ <g class="image-container-top"/>
468
+ <g class="text-container-top">
469
+ <g class="textBoxWrapper">
470
+ <rect class="textBoxFrame text-0" id="text-0" transform="rotate(0 230.56071428571425 45.157714285714306)" style="fill:rgb(245,245,245);opacity:1.0;fill-opacity:1;stroke:#000000;stroke-width:0.54;stroke-opacity:1" width="249.59" height="36.971999999999994" rx="6.4799999999999995" ry="8.1" x="214.76571428571427" y="19.885714285714304"/>
471
+ <text class="textBox" transform="rotate(0 230.56071428571425 45.157714285714306)" x-data="230.56071428571425" y="45.157714285714306" width="696" height="417.59999999999997" xml:space="preserve" font-family="'Lato', sans-serif" font-size="21.06px" fill="black" text-data="Separated oil and water" text-anchor="left" has-host="false">
472
+ <tspan x="230.56071428571425" dy="0">Separated oil and water </tspan>
473
+ </text>
474
+ </g>
475
+ </g>
476
+ <g class="brush-container"/>
477
+ </svg>
478
+ <g class="icon-container">
479
+ <image id="heat-bath" x="1%" width="36" height="36" preserveAspectRatio="xMinYMin" xlink:href="heatbath.svg" class="opaque-on-hover" style="display: none;">
480
+ <title>Heatbath active</title>
481
+ </image>
482
+ <image id="ke-gradient" x="0" width="39.6" height="108" preserveAspectRatio="xMinYMin" xlink:href="ke-gradient.svg" class="opaque-on-hover" style="display: none;">
483
+ <title>Kinetic energy gradient</title>
484
+ </image>
485
+ </g>
486
+ </g>
487
+ </svg>