n3bulous-infuse 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.textile ADDED
@@ -0,0 +1,88 @@
1
+ h1. Infuse
2
+
3
+ h2. Description
4
+
5
+ Create HTML slide shows with a simple DSL.
6
+
7
+ h2. Installation
8
+
9
+ <pre>
10
+ sudo gem install n3bulous-infuse --source=http://gems.github.com
11
+ </pre>
12
+
13
+ h2. Usage
14
+
15
+ <pre>
16
+ infuse presentation.infuse
17
+ </pre>
18
+
19
+ The above command will:
20
+
21
+ * Parse your slide show file.
22
+ * Create a directory named "presentation" if it doesn't already exist.
23
+ * Populate the directory with default files (the first time.)
24
+ * Convert your slide show markup to an HTML file.
25
+
26
+ h2. Example
27
+
28
+ <pre>
29
+ title "Gitting Jiggy with Git"
30
+ subtitle "Managing Documents with a Source Code Management System"
31
+ author "Kevin McFadden"
32
+ company "Concepts Ahead"
33
+ copyright "2009 Kevin McFadden"
34
+ background ""
35
+
36
+ slide "Who is this Guy?", <<_EOS
37
+ * Name: Kevin McFadden
38
+ * Current: Concepts Ahead
39
+ * Past: Director of Technology @ Viget Labs IN D.C.
40
+ * Other projects found on "Github":https://github.com/n3bulous/.
41
+ _EOS
42
+ </pre>
43
+
44
+ h2. Future
45
+
46
+ * Add cli help and options
47
+ * Support external resources (images, ...)
48
+ * Figure out why my redcloth dependency check fails.
49
+ * Support TextMate
50
+ * Support Rakefile
51
+ * Support Markdown
52
+ * Custom theme support
53
+ * Code formatting
54
+ * Animated transitions
55
+ * Let me know, or contribute!
56
+
57
+ h2. Useful Info
58
+
59
+ * You can use "iRed Light":http://www.filewell.com/iRedLite/ to control any application. In this case, assign the up and down cursor keys to your preferred buttons.
60
+
61
+ h2. Inspiration
62
+
63
+ Infuse was born out of getting caught up in the look of slide show presentations with Keynote, and out of the frustration of "codex's":http://github.com/pragdave/codex complicated process.
64
+
65
+ h2. License
66
+
67
+ Copyright &copy; 2009 Kevin McFadden, Concepts Ahead
68
+
69
+ Permission is hereby granted, free of charge, to any person
70
+ obtaining a copy of this software and associated documentation
71
+ files (the "Software"), to deal in the Software without
72
+ restriction, including without limitation the rights to use,
73
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
74
+ copies of the Software, and to permit persons to whom the
75
+ Software is furnished to do so, subject to the following
76
+ conditions:
77
+
78
+ The above copyright notice and this permission notice shall be
79
+ included in all copies or substantial portions of the Software.
80
+
81
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
82
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
83
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
84
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
85
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
86
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
87
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
88
+ OTHER DEALINGS IN THE SOFTWARE.
data/Rakefile ADDED
@@ -0,0 +1,41 @@
1
+ require 'rubygems'
2
+ require 'rake/gempackagetask'
3
+ require 'rake/testtask'
4
+
5
+ require 'lib/infuse/version'
6
+
7
+ task :default => :test
8
+
9
+ spec = Gem::Specification.new do |s|
10
+ s.name = 'infuse'
11
+ s.version = Infuse::Version.to_s
12
+ s.has_rdoc = true
13
+ s.extra_rdoc_files = %w(README.textile)
14
+ s.rdoc_options = %w(--main README.textile)
15
+ s.summary = "Create HTML slide shows with a simple DSL!"
16
+ s.author = 'Kevin McFadden'
17
+ s.email = 'kevin+github@conceptsahead.com'
18
+ s.homepage = 'http://conceptsahead.com'
19
+ s.files = %w(README.textile Rakefile) + Dir.glob("{lib,test}/**/*")
20
+ s.executables = ['infuse']
21
+
22
+ # Can probably go older...
23
+ # s.add_dependency('redcloth')
24
+ end
25
+
26
+ Rake::GemPackageTask.new(spec) do |pkg|
27
+ pkg.gem_spec = spec
28
+ end
29
+
30
+ Rake::TestTask.new do |t|
31
+ t.libs << 'test'
32
+ t.test_files = FileList["test/**/*_test.rb"]
33
+ t.verbose = true
34
+ end
35
+
36
+ desc 'Generate the gemspec to serve this Gem from Github'
37
+ task :github do
38
+ file = File.dirname(__FILE__) + "/#{spec.name}.gemspec"
39
+ File.open(file, 'w') {|f| f << spec.to_ruby }
40
+ puts "Created gemspec: #{file}"
41
+ end
data/bin/infuse ADDED
@@ -0,0 +1,47 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ begin
4
+ require 'infuse'
5
+ rescue LoadError => exception
6
+ $:.unshift File.dirname(File.expand_path(__FILE__)) + "/../lib"
7
+ retry
8
+ end
9
+
10
+ def title(text)
11
+ InfuseDSL.instance.title = text
12
+ end
13
+
14
+ def author(text)
15
+ InfuseDSL.instance.author = text
16
+ end
17
+
18
+ def company(text)
19
+ InfuseDSL.instance.company = text
20
+ end
21
+
22
+ def copyright(text)
23
+ InfuseDSL.instance.copyright = text
24
+ end
25
+
26
+ def subtitle(text)
27
+ InfuseDSL.instance.subtitle = text
28
+ end
29
+
30
+ def background(text)
31
+ InfuseDSL.instance.background = text
32
+ end
33
+
34
+ def slide(title, *content)
35
+ s = Slide.new(title, content)
36
+ InfuseDSL.instance.add_slide(s)
37
+ end
38
+
39
+ def notes(*content)
40
+ InfuseDSL.instance.slides.last.notes(content)
41
+ end
42
+
43
+ InfuseDSL.instance.source_file = ARGV[0]
44
+ InfuseDSL.instance.output_dir = File.dirname(ARGV[0]) + "/" + File.basename(ARGV[0], ".#{INFUSE_EXTENSION}")
45
+
46
+ load InfuseDSL.instance.source_file
47
+ InfuseDSL.instance.run
@@ -0,0 +1,66 @@
1
+ require 'singleton'
2
+
3
+ class InfuseDSL
4
+ include Singleton
5
+
6
+ attr_accessor :slides, :title, :author, :company, :copyright, :subtitle, :background
7
+ attr_accessor :source_file, :output_dir
8
+
9
+ def initialize
10
+ @slides = []
11
+
12
+ @header_template = File.dirname(__FILE__) + "/themes/plain/header.html.erb"
13
+ @footer_template = File.dirname(__FILE__) + "/themes/plain/footer.html.erb"
14
+ @slide_template = File.dirname(__FILE__) + "/themes/plain/slide.html.erb"
15
+ end
16
+
17
+ def add_slide(slide)
18
+ @slides << slide
19
+ end
20
+
21
+ def run
22
+ header_tpl = IO.read(@header_template)
23
+ footer_tpl = IO.read(@footer_template)
24
+ slide_tpl = IO.read(@slide_template)
25
+
26
+ header_with_data = ERB.new(header_tpl, 0, ">").result(self.send(:binding))
27
+ footer_with_data = ERB.new(footer_tpl, 0, ">").result(self.send(:binding))
28
+
29
+ slides_with_data = ""
30
+ @slides.each do |s|
31
+ slides_with_data << s.convert(slide_tpl)
32
+ end
33
+
34
+ output = header_with_data + "\n" + slides_with_data + "\n" + footer_with_data
35
+
36
+ prepare_target_dir
37
+
38
+ begin
39
+ File.new(output_file, "w").puts(output)
40
+ rescue
41
+ puts ""
42
+ end
43
+
44
+ end
45
+
46
+ private
47
+ def output_file
48
+ @output_dir + "/" + File.basename(@source_file, ".#{INFUSE_EXTENSION}") + ".html"
49
+ end
50
+
51
+ def prepare_target_dir
52
+ begin
53
+ FileUtils.mkdir(@output_dir)
54
+ copy_default_files
55
+ rescue Errno::EEXIST
56
+ puts "-- #{output_dir} already exists -- canceling initialization. "
57
+ return
58
+ end
59
+ end
60
+
61
+ def copy_default_files
62
+ FileUtils.cp_r(File.dirname(__FILE__) + "/../s6/shared/", @output_dir)
63
+ FileUtils.cp_r(File.dirname(__FILE__) + "/themes/plain/css/custom.css", @output_dir)
64
+ end
65
+
66
+ end
@@ -0,0 +1,15 @@
1
+ class Slide
2
+ def initialize(title, content_lines)
3
+ @title = title
4
+ @content = content_lines.to_s
5
+ @notes = ""
6
+ end
7
+
8
+ def notes(content)
9
+ @notes = content.to_s
10
+ end
11
+
12
+ def convert(slide_template, markup_lang="textile")
13
+ RedCloth.new(ERB.new(slide_template, 0, ">").result(self.send(:binding))).to_html
14
+ end
15
+ end
@@ -0,0 +1,39 @@
1
+ @import url(shared/slides.css); /* required to make the slide show run at all */
2
+
3
+ html, body {
4
+ color: black;
5
+ background-color: white;
6
+ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
7
+ }
8
+
9
+ a:link, a:visited { color: white; }
10
+
11
+ h1 { font-size: 30pt; }
12
+ h2 { font-size: 28pt; }
13
+ h3 { font-size: 25pt; }
14
+ p, li, td, th { font-size: 18pt; }
15
+
16
+ pre { font-size: 16pt; }
17
+
18
+ pre.code {
19
+ background-color: black;
20
+ padding: 5px;
21
+ border: silver thick groove;
22
+ -moz-border-radius: 11px;
23
+ }
24
+
25
+
26
+ div#header, div#footer {
27
+ color: #ffe8b2;
28
+ background-color: #ce8b45;
29
+ }
30
+
31
+ #currentSlide {
32
+ color: #ffe8b2;
33
+ }
34
+
35
+ #controls #navLinks a { color: #ffe8b2; }
36
+
37
+ .step { color: gray; }
38
+ /* or hide next steps e.g. .step { visibility: hidden; } */
39
+ .stepcurrent { color: yellow; }
@@ -0,0 +1,8 @@
1
+ </div> <!-- presentation -->
2
+
3
+ <div id="footer">
4
+ <h1><%= title %></h1>
5
+ <h2>&copy; <%= copyright %></h2>
6
+ </div>
7
+ </body>
8
+ </html>
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2
+ <html>
3
+ <head>
4
+ <title><%= @title %></title>
5
+
6
+ <!-- configuration parameters -->
7
+ <meta name="defaultView" content="slideshow">
8
+ <!-- style sheet links -->
9
+ <link rel="stylesheet" href="custom.css" type="text/css" media="projection" id="slideProj">
10
+ <link rel="stylesheet" href="shared/outline.css" type="text/css" media="screen" id="outlineStyle">
11
+ <link rel="stylesheet" href="shared/print.css" type="text/css" media="print" id="slidePrint">
12
+
13
+ <script src="shared/jquery.js" type="text/javascript"></script>
14
+ <script src="shared/slides.js" type="text/javascript"></script>
15
+ </head>
16
+
17
+ <body>
18
+ <div class="layout">
19
+
20
+ <% if background.length > 0 %>
21
+ <div class="background">
22
+ <object data="<%= @background %>" width="100%" height="100%">
23
+ </object>
24
+ </div>
25
+ <% end %>
26
+
27
+ <div id="controls"><!-- DO NOT EDIT --></div>
28
+ <div id="currentSlide"><!-- DO NOT EDIT --></div>
29
+ <div id="header"></div>
30
+
31
+ <div id='microsoft'>
32
+ <p>
33
+ Microsoft's Internet Explorer browser has no built-in vector graphics machinery required for "loss-free" gradient background themes.
34
+ </p>
35
+ <p>
36
+ Please upgrade to a better browser such as <a href='http://getfirefox.com'>Firefox</a>, <a href='http://www.opera.com/download'>Opera</a>,
37
+ <a href='http://google.com/chrome'>Chrome</a>, <a href='http://apple.com/safari/download'>Safari</a> or others with built-in vector graphics machinery and much more.
38
+
39
+ (Learn more or post questions or comments at the <a href='http://slideshow.rubyforge.org'>Slide Show (S9)</a> project site. Thanks!)
40
+ </p>
41
+ </div>
42
+ </div>
43
+ </div> <!-- layout -->
44
+
45
+ <div class="presentation">
@@ -0,0 +1,11 @@
1
+ <div class="slide">
2
+ <h1><%= @title %></h1>
3
+
4
+ <%= @content %>
5
+
6
+ <% if @notes.length > 0 %>
7
+ <!-- NOTES
8
+ <%= @notes %>
9
+ -->
10
+ <% end %>
11
+ </div>
File without changes
@@ -0,0 +1,13 @@
1
+ module Infuse
2
+ module Version
3
+
4
+ MAJOR = 0
5
+ MINOR = 9
6
+ TINY = 0
7
+
8
+ def self.to_s # :nodoc:
9
+ [MAJOR, MINOR, TINY].join('.')
10
+ end
11
+
12
+ end
13
+ end
data/lib/infuse.rb ADDED
@@ -0,0 +1,11 @@
1
+ $:.unshift File.dirname(__FILE__)
2
+
3
+ INFUSE_EXTENSION = "infuse"
4
+
5
+ require 'rubygems'
6
+ require 'redcloth'
7
+
8
+ require 'infuse/version'
9
+ require 'infuse/infuse_dsl'
10
+ require 'infuse/slide'
11
+
@@ -0,0 +1,42 @@
1
+ h2. What's S5? What's S6?
2
+
3
+ Simple Standards-based Slide Show System (S5) is Eric Meyer's (of CSS fame) public domain (free, open source)
4
+ slide show package inspired by Opera Show and others that works in all modern browsers
5
+ without any plugin required because it includes its own slide show machinery in JavaScript. More "S5 Project Site &raquo;":http://meyerweb.com/eric/tools/s5
6
+
7
+ S6 started as a rewrite of Eric Meyer's S5 using the jQuery JavaScript library - offering easier to understand and easier
8
+ to extend code. Add plugins, effects and more. Contributions welcome!
9
+
10
+ h2. What's Slide Show (S9)? Slide Show Generator for S6
11
+
12
+ A Ruby gem that lets you create slide shows and author slides in plain text using
13
+ a wiki-style markup language that's easy-to-write and easy-to-read and ships "out-of-the-gem"
14
+ with S6 templates built-in. More "Slide Show ==(S9)== Project Site &raquo;":http://slideshow.rubyforge.org
15
+
16
+ h2. S6 in Action - Sample Slide Shows Online
17
+
18
+ Try some slide show samples powered by S6:
19
+
20
+ * "Slide Show (S9) 10-Minute Tutorial":http://slideshow.rubyforge.org/tutorial.html
21
+ * "Prototype vs jQuery: To and from JavaScript Libraries":http://slideshow.rubyforge.org/jquery.html
22
+ * "Adding Semantics to Your Web Site / RDF, RDFa, Microformats / Web 3.0 in Action":http://slideshow.rubyforge.org/friends.html
23
+ * "Ruby 1.9: What to Expect":http://slideshow.rubyforge.org/ruby19.html
24
+
25
+ Keyboard controls:
26
+
27
+ |_. Action |_. Key |
28
+ | Go to next slide | Space Bar, Right Arrow Down Arrow, Page Down |
29
+ | Go to previous slide | Left Arrow, Up Arrow, Page Up |
30
+ | Go to first slide | Home |
31
+ | Go to last slide | End |
32
+ | Toggle between slideshow and outline view (&#216;) | T |
33
+ | Show/hide slide controls (&#216; &laquo; &raquo;) | C, Move mouse to bottom right corner |
34
+
35
+ h2. About, License - Questions? Comments?
36
+
37
+ License. The slide show scripts and templates are dedicated to the <a href='http://creativecommons.org/licenses/publicdomain'>public domain</a>.
38
+ Use it as you please with no restrictions whatsoever.
39
+
40
+ Questions? Comments? Send them along to the
41
+ "Free Web Slide Show Alternatives (S5, S6, S9, Slidy And Friends) Forum/Mailing List":http://groups.google.com/group/webslideshow.
42
+ Thanks!
data/lib/s6/blank.css ADDED
@@ -0,0 +1,31 @@
1
+ @import url(shared/slides.css); /* required to make the slide show run at all */
2
+
3
+ html, body { color: white;
4
+ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
5
+
6
+ a:link, a:visited { color: white; }
7
+
8
+ h1 { font-size: 30pt; }
9
+ h2 { font-size: 28pt; }
10
+ h3 { font-size: 25pt; }
11
+ p, li, td, th { font-size: 18pt; }
12
+
13
+ pre { font-size: 16pt; }
14
+
15
+ pre.code {
16
+ background-color: black;
17
+ padding: 5px;
18
+ border: silver thick groove;
19
+ -moz-border-radius: 11px;
20
+ }
21
+
22
+
23
+ div#header, div#footer { color: silver; }
24
+
25
+ #currentSlide { color: silver;}
26
+
27
+ #controls #navLinks a { color: silver; }
28
+
29
+ .step { color: gray; }
30
+ /* or hide next steps e.g. .step { visibility: hidden; } */
31
+ .stepcurrent { color: yellow; }
data/lib/s6/blank.html ADDED
@@ -0,0 +1,93 @@
1
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
2
+ <html>
3
+ <head>
4
+ <title>[your_title_here]</title>
5
+
6
+ <!-- configuration parameters -->
7
+ <meta name="defaultView" content="slideshow">
8
+ <!-- style sheet links -->
9
+ <link rel="stylesheet" href="blank.css" type="text/css" media="projection" id="slideProj">
10
+ <link rel="stylesheet" href="shared/outline.css" type="text/css" media="screen" id="outlineStyle">
11
+ <link rel="stylesheet" href="shared/print.css" type="text/css" media="print" id="slidePrint">
12
+
13
+ <!-- S6 JS -->
14
+ <script src="shared/jquery.js" type="text/javascript"></script>
15
+ <script src="shared/slides.js" type="text/javascript"></script>
16
+
17
+ </head>
18
+ <body>
19
+
20
+ <div class="layout">
21
+
22
+ <div class="background">
23
+ <object data="blank.svg" width="100%" height="100%">
24
+ </object>
25
+ </div>
26
+
27
+ <div id="controls"><!-- DO NOT EDIT --></div>
28
+ <div id="currentSlide"><!-- DO NOT EDIT --></div>
29
+ <div id="header"></div>
30
+ <div id="footer">
31
+ <h1>[your_footer_here]</h1>
32
+ <h2>[your_subfooter_here]</h2>
33
+ </div>
34
+
35
+ <div id='microsoft'>
36
+ <p>
37
+ Microsoft's Internet Explorer browser
38
+ has no built-in vector graphics machinery
39
+ required for "loss-free" gradient background themes.
40
+ </p>
41
+ <p>
42
+ Please upgrade to a better browser
43
+ such as <a href='http://getfirefox.com'>Firefox</a>, <a href='http://www.opera.com/download'>Opera</a>,
44
+ <a href='http://google.com/chrome'>Chrome</a>, <a href='http://apple.com/safari/download'>Safari</a> or others
45
+ with built-in vector graphics machinery and much more.
46
+
47
+ (Learn more or post questions or comments
48
+ at the <a href='http://slideshow.rubyforge.org'>Slide Show (S9)</a>
49
+ project site. Thanks!)
50
+ </p>
51
+ </div>
52
+ </div>
53
+
54
+ <div class="presentation">
55
+
56
+ <!-- add slides here; example -->
57
+
58
+ <div class='slide'>
59
+ <h1>Your Slide Title Here</h1>
60
+
61
+ <ul>
62
+ <li>Item One Here</li>
63
+ <li>Item Two Here</li>
64
+ </ul>
65
+ </div>
66
+
67
+ <div class='slide'>
68
+ <h1>Steps Demos</h1>
69
+
70
+ <!-- mark list with class step to mark all items at once -->
71
+ <ul class='step'>
72
+ <li>Item 1.1 Here</li>
73
+ <li>Item 1.2 Here</li>
74
+ </ul>
75
+
76
+ <!-- or mark individual list items -->
77
+ <ul>
78
+ <li class='step'>Item 2.1 Here</li>
79
+ <li class='step'>Item 2.2 Here</li>
80
+ </ol>
81
+ </div>
82
+
83
+
84
+ <div class='slide'>
85
+ <h1>Another Slide Title Here</h1>
86
+
87
+ <p>yada yada yada</p>
88
+ </div>
89
+
90
+
91
+ </div> <!-- presentation -->
92
+ </body>
93
+ </html>
data/lib/s6/blank.svg ADDED
@@ -0,0 +1,62 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+
3
+ <defs>
4
+ <linearGradient id="dark" x1="0" y1="0" x2="1" y2="1">
5
+ <stop offset="0" style="stop-color: navy"/>
6
+ <stop offset="1" style="stop-color: aqua"/>
7
+ </linearGradient>
8
+
9
+ <linearGradient id="dark_reverse" x1="0" y1="0" x2="1" y2="1">
10
+ <stop offset="0" style="stop-color: aqua"/>
11
+ <stop offset="1" style="stop-color: navy"/>
12
+ </linearGradient>
13
+
14
+ <linearGradient id="light" x1="0" y1="0" x2="1" y2="1">
15
+ <stop offset="0" style="stop-color: navy"/>
16
+ <stop offset="1" style="stop-color: aqua"/>
17
+ </linearGradient>
18
+
19
+ <linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="1">
20
+ <stop offset="0%" style="stop-color: navy" />
21
+ <stop offset="100%" style="stop-color: aqua" />
22
+ </linearGradient>
23
+
24
+ <linearGradient id="left_right" x1="0" y1="0" x2="1" y2="0">
25
+ <stop offset="0%" style="stop-color: navy" />
26
+ <stop offset="100%" style="stop-color: aqua" />
27
+ </linearGradient>
28
+
29
+ <linearGradient id="repeat" x1="0.4" y1="0.4" x2="0.5" y2="0.5"
30
+
31
+ spreadMethod="repeat">
32
+ <stop offset="0%" style="stop-color: navy" />
33
+ <stop offset="50%" style="stop-color: aqua" />
34
+ <stop offset="100%" style="stop-color: navy" />
35
+ </linearGradient>
36
+
37
+ <radialGradient id="radial">
38
+ <stop offset="0%" style="stop-color: aqua" />
39
+ <stop offset="100%" style="stop-color: navy" />
40
+ </radialGradient>
41
+
42
+
43
+ <radialGradient id="radial_off_center" fx="0.7" fy="0.7" cx="0.5" cy="0.5" r="0.4">
44
+ <stop offset="0%" style="stop-color: aqua" />
45
+ <stop offset="100%" style="stop-color: navy" />
46
+ </radialGradient>
47
+
48
+ <radialGradient id="radial_repeat" fx="0.5" fy="0.5" cx="0.6" cy="0.6" r="0.2"
49
+
50
+ spreadMethod="repeat">
51
+ <stop offset="0%" style="stop-color: navy" />
52
+ <stop offset="50%" style="stop-color: aqua" />
53
+ <stop offset="100%" style="stop-color: navy" />
54
+ </radialGradient>
55
+
56
+ </defs>
57
+
58
+ <rect width="100%" height="100%"
59
+
60
+ style="fill: url(#top_bottom) "/>
61
+
62
+ </svg>