comparing 1.4.1 and main on cduck.me/drawsvg

+1 -1

.gitignore

···

       3
       3
        
       /MANIFEST

     

       4
       4
        
       /dist

     

       5
       5
        
       /*.egg-info

     

       6
       6
       -
       

     

       6
       6
       +
       *.ipynb_checkpoints

FUNDING.yml

···

       1
       1
       +
       # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/displaying-a-sponsor-button-in-your-repository

     

       2
       2
       +
       

     

       3
       3
       +
       github: [cduck]

+1 -1

LICENSE.txt

···

       1
       1
       -
       Copyright 2017 Casey Duckering

     

       1
       1
       +
       Copyright 2023 Casey Duckering

     

       2
       2
        
       

     

       3
       3
        
       Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

     

       4
       4

+328 -106

README.md

···

       1
       1
       -
       # drawSvg

     

       1
       1
       +
       [![drawsvg logo](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/logo.svg?sanitize=true)](https://github.com/cduck/drawSvg/blob/master/examples/logo.svg)

     

       2
       2
        
       

     

       3
       3
       -
       A Python 3 library for programmatically generating SVG images (vector drawings) and rendering them or displaying them in an iPython notebook.

     

       3
       3
       +
       A Python 3 library for programmatically generating SVG images and animations that can render and display your drawings in a Jupyter notebook or Jupyter lab.

     

       4
       4
        
       

     

       5
       5
       -
       Most common SVG tags are supported and others can easily be added by writing a small subclass of `DrawableBasicElement` or `DrawableParentElement`.

     

       5
       5
       +
       Most common SVG tags are supported and others can easily be added by writing a small subclass of `DrawableBasicElement` or `DrawableParentElement`.  [Nearly all SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG) are supported via keyword args (e.g. Python keyword argument `fill_opacity=0.5` becomes SVG attribute `fill-opacity="0.5"`).

     

       6
       6
        
       

     

       7
       7
       -
       An interactive [Jupyter notebook](https://jupyter.org) widget, `drawSvg.widgets.DrawingWidget`, is included that can update drawings based on mouse events.

     

       7
       7
       +
       An interactive [Jupyter notebook](https://jupyter.org) widget, `drawsvg.widgets.DrawingWidget`, [is included](#interactive-widget) that can update drawings based on mouse events.  The widget does not yet work in Jupyter lab.

     

       8
       8
        
       

     

       9
       9
       -
       # Install

     

       9
       9
       +
       [SVG quick reference docs](https://cduck.github.io/drawsvg/)

     

       10
       10
        
       

     

       11
       11
       -
       drawSvg is available on PyPI:

     

       12
       11
        
       

     

       13
       13
       -
       ```

     

       14
       14
       -
       $ pip3 install drawSvg

     

       12
       12
       +
       # Install

     

       13
       13
       +
       

     

       14
       14
       +
       Drawsvg is available on PyPI:

     

       15
       15
       +
       ```bash

     

       16
       16
       +
       $ python3 -m pip install "drawsvg~=2.0"

     

       15
       17
        
       ```

     

       16
       18
        
       

     

       17
       17
       -
       ## Prerequisites

     

       19
       19
       +
       To enable raster image support (PNG, MP4, and GIF), follow the [full-feature install instructions](#full-feature-install).

     

       18
       20
        
       

     

       19
       19
       -
       Cairo needs to be installed separately. When Cairo is installed, drawSvg can output PNG or other image formats in addition to SVG. See platform-specific [instructions for Linux, Windows, and macOS from Cairo](https://www.cairographics.org/download/). Below are some examples for installing Cairo on Linux distributions and macOS.

     

       20
       21
        
       

     

       21
       21
       -
       **Ubuntu**

     

       22
       22
       +
       ## Upgrading from version 1.x

     

       22
       23
        
       

     

       23
       23
       -
       ```

     

       24
       24
       -
       $ sudo apt-get install libcairo2

     

       25
       25
       -
       ```

     

       24
       24
       +
       Major breaking changes:

     

       26
       25
        
       

     

       27
       27
       -
       **macOS**

     

       26
       26
       +
       - camelCase method and argument names are now snake\_case and the package name is lowercase (except for arguments that correspond to camelCase SVG attributes).

     

       27
       27
       +
       - The default coordinate system y-axis now matches the SVG coordinate system (y increases down the screen, x increases right)

     

       28
       28
       +
       - How to fix `ModuleNotFoundError: No module named 'drawSvg'` (with a capital S)?  Either pip install `"drawSvg~=1.9"` or update your code for drawsvg 2.x (for example, change `drawSvg` to `drawsvg` and `d.saveSvg` to `d.save_svg`).

     

       28
       29
        
       

     

       29
       29
       -
       Using [homebrew](https://brew.sh/):

     

       30
       30
       -
       

     

       31
       31
       -
       ```

     

       32
       32
       -
       $ brew install cairo

     

       33
       33
       -
       ```

     

       34
       30
        
       

     

       35
       31
        
       # Examples

     

       36
       32
        
       

     

       37
       33
        
       ### Basic drawing elements

     

       38
       34
        
       ```python

     

       39
       39
       -
       import drawSvg as draw

     

       35
       35
       +
       import drawsvg as draw

     

       40
       36
        
       

     

       41
       37
        
       d = draw.Drawing(200, 100, origin='center')

     

       42
       38
        
       

     

       43
       43
       -
       d.append(draw.Lines(-80, -45,

     

       44
       44
       -
                           70, -49,

     

       45
       45
       -
                           95, 49,

     

       46
       46
       -
                           -90, 40,

     

       39
       39
       +
       # Draw an irregular polygon

     

       40
       40
       +
       d.append(draw.Lines(-80, 45,

     

       41
       41
       +
                            70, 49,

     

       42
       42
       +
                            95, -49,

     

       43
       43
       +
                           -90, -40,

     

       47
       44
        
                           close=False,

     

       48
       45
        
                   fill='#eeee00',

     

       49
       46
        
                   stroke='black'))

     

       50
       47
        
       

     

       51
       51
       -
       d.append(draw.Rectangle(0,0,40,50, fill='#1248ff'))

     

       52
       52
       -
       d.append(draw.Circle(-40, -10, 30,

     

       53
       53
       -
                   fill='red', stroke_width=2, stroke='black'))

     

       48
       48
       +
       # Draw a rectangle

     

       49
       49
       +
       r = draw.Rectangle(-80, -50, 40, 50, fill='#1248ff')

     

       50
       50
       +
       r.append_title("Our first rectangle")  # Add a tooltip

     

       51
       51
       +
       d.append(r)

     

       52
       52
       +
       

     

       53
       53
       +
       # Draw a circle

     

       54
       54
       +
       d.append(draw.Circle(-40, 10, 30,

     

       55
       55
       +
               fill='red', stroke_width=2, stroke='black'))

     

       54
       56
        
       

     

       55
       55
       -
       p = draw.Path(stroke_width=2, stroke='green',

     

       56
       56
       -
                     fill='black', fill_opacity=0.5)

     

       57
       57
       -
       p.M(-30,5)  # Start path at point (-30, 5)

     

       58
       58
       -
       p.l(60,30)  # Draw line to (60, 30)

     

       59
       59
       -
       p.h(-70)    # Draw horizontal line to x=-70

     

       60
       60
       -
       p.Z()       # Draw line to start

     

       57
       57
       +
       # Draw an arbitrary path (a triangle in this case)

     

       58
       58
       +
       p = draw.Path(stroke_width=2, stroke='lime', fill='black', fill_opacity=0.2)

     

       59
       59
       +
       p.M(-10, -20)  # Start path at point (-10, -20)

     

       60
       60
       +
       p.C(30, 10, 30, -50, 70, -20)  # Draw a curve to (70, -20)

     

       61
       61
        
       d.append(p)

     

       62
       62
        
       

     

       63
       63
       -
       d.append(draw.ArcLine(60,-20,20,60,270,

     

       64
       64
       -
                   stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       65
       65
       -
       d.append(draw.Arc(60,-20,20,60,270,cw=False,

     

       66
       66
       -
                   stroke='green', stroke_width=3, fill='none'))

     

       67
       67
       -
       d.append(draw.Arc(60,-20,20,270,60,cw=True,

     

       68
       68
       -
                   stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       63
       63
       +
       # Draw text

     

       64
       64
       +
       d.append(draw.Text('Basic text', 8, -10, -35, fill='blue'))  # 8pt text at (-10, -35)

     

       65
       65
       +
       d.append(draw.Text('Path text', 8, path=p, text_anchor='start', line_height=1))

     

       66
       66
       +
       d.append(draw.Text(['Multi-line', 'text'], 8, path=p, text_anchor='end', center=True))

     

       69
       67
        
       

     

       70
       70
       -
       d.setPixelScale(2)  # Set number of pixels per geometry unit

     

       71
       71
       -
       #d.setRenderSize(400,200)  # Alternative to setPixelScale

     

       72
       72
       -
       d.saveSvg('example.svg')

     

       73
       73
       -
       d.savePng('example.png')

     

       68
       68
       +
       # Draw multiple circular arcs

     

       69
       69
       +
       d.append(draw.ArcLine(60, 20, 20, 60, 270,

     

       70
       70
       +
               stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       71
       71
       +
       d.append(draw.Arc(60, 20, 20, 90, -60, cw=True,

     

       72
       72
       +
               stroke='green', stroke_width=3, fill='none'))

     

       73
       73
       +
       d.append(draw.Arc(60, 20, 20, -60, 90, cw=False,

     

       74
       74
       +
               stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       74
       75
        
       

     

       75
       75
       -
       # Display in iPython notebook

     

       76
       76
       -
       d.rasterize()  # Display as PNG

     

       76
       76
       +
       # Draw arrows

     

       77
       77
       +
       arrow = draw.Marker(-0.1, -0.51, 0.9, 0.5, scale=4, orient='auto')

     

       78
       78
       +
       arrow.append(draw.Lines(-0.1, 0.5, -0.1, -0.5, 0.9, 0, fill='red', close=True))

     

       79
       79
       +
       p = draw.Path(stroke='red', stroke_width=2, fill='none',

     

       80
       80
       +
               marker_end=arrow)  # Add an arrow to the end of a path

     

       81
       81
       +
       p.M(20, 40).L(20, 27).L(0, 20)  # Chain multiple path commands

     

       82
       82
       +
       d.append(p)

     

       83
       83
       +
       d.append(draw.Line(30, 20, 0, 10,

     

       84
       84
       +
               stroke='red', stroke_width=2, fill='none',

     

       85
       85
       +
               marker_end=arrow))  # Add an arrow to the end of a line

     

       86
       86
       +
       

     

       87
       87
       +
       d.set_pixel_scale(2)  # Set number of pixels per geometry unit

     

       88
       88
       +
       #d.set_render_size(400, 200)  # Alternative to set_pixel_scale

     

       89
       89
       +
       d.save_svg('example.svg')

     

       90
       90
       +
       d.save_png('example.png')

     

       91
       91
       +
       

     

       92
       92
       +
       # Display in Jupyter notebook

     

       93
       93
       +
       #d.rasterize()  # Display as PNG

     

       77
       94
        
       d  # Display as SVG

     

       78
       95
        
       ```

     

       79
       96
        
       

     

       80
       80
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example1.png)

     

       97
       97
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example1.png)](https://github.com/cduck/drawsvg/blob/master/examples/example1.svg)

     

       81
       98
        
       

     

       82
       82
       -
       ### Gradients

     

       99
       99
       +
       ### SVG-native animation with playback controls

     

       83
       100
        
       ```python

     

       84
       84
       -
       import drawSvg as draw

     

       101
       101
       +
       import drawsvg as draw

     

       102
       102
       +
       

     

       103
       103
       +
       d = draw.Drawing(400, 200, origin='center',

     

       104
       104
       +
               animation_config=draw.types.SyncedAnimationConfig(

     

       105
       105
       +
                   # Animation configuration

     

       106
       106
       +
                   duration=8,  # Seconds

     

       107
       107
       +
                   show_playback_progress=True,

     

       108
       108
       +
                   show_playback_controls=True))

     

       109
       109
       +
       d.append(draw.Rectangle(-200, -100, 400, 200, fill='#eee'))  # Background

     

       110
       110
       +
       d.append(draw.Circle(0, 0, 40, fill='green'))  # Center circle

     

       111
       111
       +
       

     

       112
       112
       +
       # Animation

     

       113
       113
       +
       circle = draw.Circle(0, 0, 0, fill='gray')  # Moving circle

     

       114
       114
       +
       circle.add_key_frame(0, cx=-100, cy=0,    r=0)

     

       115
       115
       +
       circle.add_key_frame(2, cx=0,    cy=-100, r=40)

     

       116
       116
       +
       circle.add_key_frame(4, cx=100,  cy=0,    r=0)

     

       117
       117
       +
       circle.add_key_frame(6, cx=0,    cy=100,  r=40)

     

       118
       118
       +
       circle.add_key_frame(8, cx=-100, cy=0,    r=0)

     

       119
       119
       +
       d.append(circle)

     

       120
       120
       +
       r = draw.Rectangle(0, 0, 0, 0, fill='silver')  # Moving square

     

       121
       121
       +
       r.add_key_frame(0, x=-100, y=0,       width=0,  height=0)

     

       122
       122
       +
       r.add_key_frame(2, x=0-20, y=-100-20, width=40, height=40)

     

       123
       123
       +
       r.add_key_frame(4, x=100,  y=0,       width=0,  height=0)

     

       124
       124
       +
       r.add_key_frame(6, x=0-20, y=100-20,  width=40, height=40)

     

       125
       125
       +
       r.add_key_frame(8, x=-100, y=0,       width=0,  height=0)

     

       126
       126
       +
       d.append(r)

     

       127
       127
       +
       

     

       128
       128
       +
       # Changing text

     

       129
       129
       +
       draw.native_animation.animate_text_sequence(

     

       130
       130
       +
               d,

     

       131
       131
       +
               [0, 2, 4, 6],

     

       132
       132
       +
               ['0', '1', '2', '3'],

     

       133
       133
       +
               30, 0, 1, fill='yellow', center=True)

     

       134
       134
       +
       

     

       135
       135
       +
       # Save as a standalone animated SVG or HTML

     

       136
       136
       +
       d.save_svg('playback-controls.svg')

     

       137
       137
       +
       d.save_html('playback-controls.html')

     

       138
       138
       +
       

     

       139
       139
       +
       # Display in Jupyter notebook

     

       140
       140
       +
       #d.display_image()  # Display SVG as an image (will not be interactive)

     

       141
       141
       +
       #d.display_iframe()  # Display as interactive SVG (alternative)

     

       142
       142
       +
       #d.as_gif('orbit.gif', fps=10)  # Render as a GIF image, optionally save to file

     

       143
       143
       +
       #d.as_mp4('orbig.mp4', fps=60, verbose=True)  # Render as an MP4 video, optionally save to file

     

       144
       144
       +
       #d.as_spritesheet('orbit-spritesheet.png', row_length=10, fps=3)  # Render as a spritesheet

     

       145
       145
       +
       d.display_inline()  # Display as interactive SVG

     

       146
       146
       +
       ```

     

       147
       147
       +
       

     

       148
       148
       +
       [![Example animated image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/playback-controls.svg?sanitize=true)](https://github.com/cduck/drawsvg/blob/master/examples/playback-controls.svg)

     

       149
       149
       +
       

     

       150
       150
       +
       Note: GitHub blocks the playback controls.

     

       151
       151
       +
       Download the above SVG and open it in a web browser to try.

     

       152
       152
       +
       

     

       153
       153
       +
       https://user-images.githubusercontent.com/2476062/221400434-1529d237-e9bf-4363-a143-0ece75cd349a.mp4

     

       154
       154
       +
       

     

       155
       155
       +
       ### Patterns and gradients

     

       156
       156
       +
       ```python

     

       157
       157
       +
       import drawsvg as draw

     

       85
       158
        
       

     

       86
       159
        
       d = draw.Drawing(1.5, 0.8, origin='center')

     

       87
       160
        
       

     

       88
       88
       -
       d.draw(draw.Rectangle(-0.75,-0.5,1.5,1, fill='#ddd'))

     

       161
       161
       +
       # Background pattern (not supported by Cairo, d.rasterize() will not show it)

     

       162
       162
       +
       pattern = draw.Pattern(width=0.13, height=0.23)

     

       163
       163
       +
       pattern.append(draw.Rectangle(0, 0, .1, .1, fill='yellow'))

     

       164
       164
       +
       pattern.append(draw.Rectangle(0, .1, .1, .1, fill='orange'))

     

       165
       165
       +
       d.draw(draw.Rectangle(-0.75, -0.5, 1.5, 1, fill=pattern, fill_opacity=0.4))

     

       89
       166
        
       

     

       90
       167
        
       # Create gradient

     

       91
       91
       -
       gradient = draw.RadialGradient(0,-0.35,0.7*10)

     

       92
       92
       -
       gradient.addStop(0.5/0.7/10, 'green', 1)

     

       93
       93
       -
       gradient.addStop(1/10, 'red', 0)

     

       168
       168
       +
       gradient = draw.RadialGradient(0, 0.35, 0.7*10)

     

       169
       169
       +
       gradient.add_stop(0.5/0.7/10, 'green', 1)

     

       170
       170
       +
       gradient.add_stop(1/10, 'red', 0)

     

       94
       171
        
       

     

       95
       172
        
       # Draw a shape to fill with the gradient

     

       96
       173
        
       p = draw.Path(fill=gradient, stroke='black', stroke_width=0.002)

     

       97
       97
       -
       p.arc(0,-0.35,0.7,30,120)

     

       98
       98
       -
       p.arc(0,-0.35,0.5,120,30,cw=True, includeL=True)

     

       174
       174
       +
       p.arc(0, 0.35, 0.7, -30, -120, cw=False)

     

       175
       175
       +
       p.arc(0, 0.35, 0.5, -120, -30, cw=True, include_l=True)

     

       99
       176
        
       p.Z()

     

       100
       177
        
       d.append(p)

     

       101
       178
        
       

     

       102
       179
        
       # Draw another shape to fill with the same gradient

     

       103
       180
        
       p = draw.Path(fill=gradient, stroke='red', stroke_width=0.002)

     

       104
       104
       -
       p.arc(0,-0.35,0.75,130,160)

     

       105
       105
       -
       p.arc(0,-0.35,0,160,130,cw=True, includeL=True)

     

       181
       181
       +
       p.arc(0, 0.35, 0.75, -130, -160, cw=False)

     

       182
       182
       +
       p.arc(0, 0.35, 0, -160, -130, cw=True, include_l=True)

     

       106
       183
        
       p.Z()

     

       107
       184
        
       d.append(p)

     

       108
       185
        
       

     

       109
       186
        
       # Another gradient

     

       110
       110
       -
       gradient2 = draw.LinearGradient(0.1,-0.35,0.1+0.6,-0.35+0.2)

     

       111
       111
       -
       gradient2.addStop(0, 'green', 1)

     

       112
       112
       -
       gradient2.addStop(1, 'red', 0)

     

       113
       113
       -
       d.append(draw.Rectangle(0.1,-0.35,0.6,0.2,

     

       187
       187
       +
       gradient2 = draw.LinearGradient(0.1, 0.35, 0.1+0.6, 0.35+0.2)

     

       188
       188
       +
       gradient2.add_stop(0, 'green', 1)

     

       189
       189
       +
       gradient2.add_stop(1, 'red', 0)

     

       190
       190
       +
       d.append(draw.Rectangle(0.1, 0.15, 0.6, 0.2,

     

       114
       191
        
                               stroke='black', stroke_width=0.002,

     

       115
       192
        
                               fill=gradient2))

     

       116
       193
        
       

     

       117
       194
        
       # Display

     

       118
       118
       -
       d.setRenderSize(w=600)

     

       195
       195
       +
       d.set_render_size(w=600)

     

       119
       196
        
       d

     

       120
       197
        
       ```

     

       121
       198
        
       

     

       122
       122
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example2.png)

     

       199
       199
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example2.svg?sanitize=true)](https://github.com/cduck/drawsvg/blob/master/examples/example2.svg)

     

       123
       200
        
       

     

       124
       201
        
       ### Duplicate geometry and clip paths

     

       125
       202
        
       ```python

     

       126
       126
       -
       import drawSvg as draw

     

       203
       203
       +
       import drawsvg as draw

     

       127
       204
        
       

     

       128
       205
        
       d = draw.Drawing(1.4, 1.4, origin='center')

     

       129
       206
        
       

     

       130
       207
        
       # Define clip path

     

       131
       208
        
       clip = draw.ClipPath()

     

       132
       132
       -
       clip.append(draw.Rectangle(-.25,.25-1,1,1))

     

       209
       209
       +
       clip.append(draw.Rectangle(-.25, -.25, 1, 1))

     

       133
       210
        
       

     

       134
       211
        
       # Draw a cropped circle

     

       135
       135
       -
       c = draw.Circle(0,0,0.5, stroke_width='0.01', stroke='black',

     

       136
       136
       -
                                fill_opacity=0.3, clip_path=clip,

     

       137
       137
       -
                                id='circle')

     

       138
       138
       -
       d.append(c)

     

       212
       212
       +
       circle = draw.Circle(0, 0, 0.5,

     

       213
       213
       +
               stroke_width='0.01', stroke='black',

     

       214
       214
       +
               fill_opacity=0.3, clip_path=clip)

     

       215
       215
       +
       d.append(circle)

     

       139
       216
        
       

     

       140
       217
        
       # Make a transparent copy, cropped again

     

       141
       218
        
       g = draw.Group(opacity=0.5, clip_path=clip)

     

       142
       142
       -
       g.append(draw.Use('circle', 0.25,0.1))

     

       219
       219
       +
       # Here, circle is not directly appended to the drawing.

     

       220
       220
       +
       # drawsvg recognizes that `Use` references `circle` and automatically adds

     

       221
       221
       +
       # `circle` to the <defs></defs> section of the SVG.

     

       222
       222
       +
       g.append(draw.Use(circle, 0.25, -0.1))

     

       143
       223
        
       d.append(g)

     

       144
       224
        
       

     

       145
       225
        
       # Display

     

       146
       146
       -
       d.setRenderSize(400)

     

       147
       147
       -
       d.rasterize()

     

       226
       226
       +
       d.set_render_size(400)

     

       227
       227
       +
       #d.rasterize()  # Display as PNG

     

       228
       228
       +
       d  # Display as SVG

     

       229
       229
       +
       ```

     

       230
       230
       +
       

     

       231
       231
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example3.png)](https://github.com/cduck/drawsvg/blob/master/examples/example3.svg)

     

       232
       232
       +
       

     

       233
       233
       +
       ### Organizing and duplicating drawing elements

     

       234
       234
       +
       ```python

     

       235
       235
       +
       import drawsvg as draw

     

       236
       236
       +
       

     

       237
       237
       +
       d = draw.Drawing(300, 100)

     

       238
       238
       +
       d.set_pixel_scale(2)

     

       239
       239
       +
       

     

       240
       240
       +
       # Use groups to contain other elements

     

       241
       241
       +
       # Children elements of groups inherit the coordinate system (transform)

     

       242
       242
       +
       # and attribute values

     

       243
       243
       +
       group = draw.Group(fill='orange', transform='rotate(-20)')

     

       244
       244
       +
       group.append(draw.Rectangle(0, 10, 20, 40))  # This rectangle will be orange

     

       245
       245
       +
       group.append(draw.Circle(30, 40, 10))  # This circle will also be orange

     

       246
       246
       +
       group.append(draw.Circle(50, 40, 10, fill='green'))  # This circle will not

     

       247
       247
       +
       d.append(group)

     

       248
       248
       +
       

     

       249
       249
       +
       # Use the Use element to make duplicates of elements

     

       250
       250
       +
       # Each duplicate can be placed at an offset (x, y) location and any additional

     

       251
       251
       +
       # attributes (like fill color) are inherited if the element didn't specify them.

     

       252
       252
       +
       d.append(draw.Use(group, 80, 0, stroke='black', stroke_width=1))

     

       253
       253
       +
       d.append(draw.Use(group, 80, 20, stroke='blue', stroke_width=2))

     

       254
       254
       +
       d.append(draw.Use(group, 80, 40, stroke='red', stroke_width=3))

     

       255
       255
       +
       

     

       256
       256
       +
       d.display_inline()

     

       148
       257
        
       ```

     

       149
       258
        
       

     

       150
       150
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example3.png)

     

       259
       259
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example8.png)](https://github.com/cduck/drawsvg/blob/master/examples/example8.svg)

     

       151
       260
        
       

     

       152
       261
        
       ### Implementing other SVG tags

     

       153
       262
        
       ```python

     

       154
       154
       -
       import drawSvg as draw

     

       263
       263
       +
       import drawsvg as draw

     

       155
       264
        
       

     

       156
       265
        
       # Subclass DrawingBasicElement if it cannot have child nodes

     

       157
       266
        
       # Subclass DrawingParentElement otherwise

     
···

       161
       270
        
           def __init__(self, href, target=None, **kwargs):

     

       162
       271
        
               # Other init logic...

     

       163
       272
        
               # Keyword arguments to super().__init__() correspond to SVG node

     

       164
       164
       -
               # arguments: stroke_width=5 -> stroke-width="5"

     

       273
       273
       +
               # arguments: stroke_width=5 -> <a stroke-width="5" ...>...</a>

     

       165
       274
        
               super().__init__(href=href, target=target, **kwargs)

     

       166
       275
        
       

     

       167
       276
        
       d = draw.Drawing(1, 1.2, origin='center')

     
···

       170
       279
        
       hlink = Hyperlink('https://www.python.org', target='_blank',

     

       171
       280
        
                         transform='skewY(-30)')

     

       172
       281
        
       # Add child elements

     

       173
       173
       -
       hlink.append(draw.Circle(0,0,0.5, fill='green'))

     

       174
       174
       -
       hlink.append(draw.Text('Hyperlink',0.2, 0,0, center=0.6, fill='white'))

     

       282
       282
       +
       hlink.append(draw.Circle(0, 0, 0.5, fill='green'))

     

       283
       283
       +
       hlink.append(draw.Text('Hyperlink', 0.2, 0, 0, center=0.6, fill='white'))

     

       175
       284
        
       

     

       176
       285
        
       # Draw and display

     

       177
       286
        
       d.append(hlink)

     

       178
       178
       -
       d.setRenderSize(200)

     

       287
       287
       +
       d.set_render_size(200)

     

       179
       288
        
       d

     

       180
       289
        
       ```

     

       181
       290
        
       

     

       182
       182
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example4.png)

     

       291
       291
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example4.png)](https://github.com/cduck/drawsvg/blob/master/examples/example4.svg)

     

       292
       292
       +
       

     

       293
       293
       +
       ### Animation with the SVG Animate Tag

     

       294
       294
       +
       ```python

     

       295
       295
       +
       import drawsvg as draw

     

       296
       296
       +
       

     

       297
       297
       +
       d = draw.Drawing(200, 200, origin='center')

     

       298
       298
       +
       

     

       299
       299
       +
       # Animate the position and color of circle

     

       300
       300
       +
       c = draw.Circle(0, 0, 20, fill='red')

     

       301
       301
       +
       # See for supported attributes:

     

       302
       302
       +
       # https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

     

       303
       303
       +
       c.append_anim(draw.Animate('cy', '6s', '-80;80;-80',

     

       304
       304
       +
                                  repeatCount='indefinite'))

     

       305
       305
       +
       c.append_anim(draw.Animate('cx', '6s', '0;80;0;-80;0',

     

       306
       306
       +
                                  repeatCount='indefinite'))

     

       307
       307
       +
       c.append_anim(draw.Animate('fill', '6s', 'red;green;blue;yellow',

     

       308
       308
       +
                                  calc_mode='discrete',

     

       309
       309
       +
                                  repeatCount='indefinite'))

     

       310
       310
       +
       d.append(c)

     

       311
       311
       +
       

     

       312
       312
       +
       # Animate a black circle around an ellipse

     

       313
       313
       +
       ellipse = draw.Path()

     

       314
       314
       +
       ellipse.M(-90, 0)

     

       315
       315
       +
       ellipse.A(90, 40, 360, True, True, 90, 0)  # Ellipse path

     

       316
       316
       +
       ellipse.A(90, 40, 360, True, True, -90, 0)

     

       317
       317
       +
       ellipse.Z()

     

       318
       318
       +
       c2 = draw.Circle(0, 0, 10)

     

       319
       319
       +
       # See for supported attributes:

     

       320
       320
       +
       # https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate_motion

     

       321
       321
       +
       c2.append_anim(draw.AnimateMotion(ellipse, '3s',

     

       322
       322
       +
                                         repeatCount='indefinite'))

     

       323
       323
       +
       # See for supported attributes:

     

       324
       324
       +
       # https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate_transform

     

       325
       325
       +
       c2.append_anim(draw.AnimateTransform('scale', '3s', '1,2;2,1;1,2;2,1;1,2',

     

       326
       326
       +
                                            repeatCount='indefinite'))

     

       327
       327
       +
       d.append(c2)

     

       328
       328
       +
       

     

       329
       329
       +
       d.save_svg('animated.svg')  # Save to file

     

       330
       330
       +
       d  # Display in Jupyter notebook

     

       331
       331
       +
       ```

     

       332
       332
       +
       

     

       333
       333
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/animated-fix-github.svg?sanitize=true)](https://github.com/cduck/drawsvg/blob/master/examples/animated.svg)

     

       183
       334
        
       

     

       184
       335
        
       ### Interactive Widget

     

       185
       336
        
       ```python

     

       186
       186
       -
       import drawSvg as draw

     

       187
       187
       -
       from drawSvg.widgets import DrawingWidget

     

       188
       188
       -
       import hyperbolic.poincare.shapes as hyper  # pip3 install hyperbolic

     

       337
       337
       +
       import drawsvg as draw

     

       338
       338
       +
       from drawsvg.widgets import DrawingWidget

     

       339
       339
       +
       import hyperbolic.poincare as hyper  # python3 -m pip install hyperbolic

     

       340
       340
       +
       from hyperbolic import euclid

     

       189
       341
        
       

     

       190
       342
        
       # Create drawing

     

       191
       191
       -
       d = draw.Drawing(2, 2, origin='center')

     

       192
       192
       -
       d.setRenderSize(500)

     

       343
       343
       +
       d = draw.Drawing(2, 2, origin='center', context=draw.Context(invert_y=True))

     

       344
       344
       +
       d.set_render_size(500)

     

       193
       345
        
       d.append(draw.Circle(0, 0, 1, fill='orange'))

     

       194
       346
        
       group = draw.Group()

     

       195
       347
        
       d.append(group)

     
···

       201
       353
        
           for x1, y1 in points:

     

       202
       354
        
               for x2, y2 in points:

     

       203
       355
        
                   if (x1, y1) == (x2, y2): continue

     

       204
       204
       -
                   p1 = hyper.Point.fromEuclid(x1, y1)

     

       205
       205
       -
                   p2 = hyper.Point.fromEuclid(x2, y2)

     

       206
       206
       -
                   if p1.distanceTo(p2) <= 2:

     

       207
       207
       -
                       line = hyper.Line.fromPoints(*p1, *p2, segment=True)

     

       356
       356
       +
                   p1 = hyper.Point.from_euclid(x1, y1)

     

       357
       357
       +
                   p2 = hyper.Point.from_euclid(x2, y2)

     

       358
       358
       +
                   if p1.distance_to(p2) <= 2:

     

       359
       359
       +
                       line = hyper.Line.from_points(*p1, *p2, segment=True)

     

       208
       360
        
                       group.draw(line, hwidth=0.2, fill='white')

     

       209
       361
        
           for x, y in points:

     

       210
       210
       -
               p = hyper.Point.fromEuclid(x, y)

     

       211
       211
       -
               group.draw(hyper.Circle.fromCenterRadius(p, 0.1),

     

       362
       362
       +
               p = hyper.Point.from_euclid(x, y)

     

       363
       363
       +
               group.draw(hyper.Circle.from_center_radius(p, 0.1),

     

       212
       364
        
                          fill='green')

     

       213
       365
        
       redraw(click_list)

     

       214
       366
        
       

     
···

       228
       380
        
       widget

     

       229
       381
        
       ```

     

       230
       382
        
       

     

       231
       231
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example5.gif)

     

       383
       383
       +
       ![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example5.gif)

     

       232
       384
        
       

     

       233
       233
       -
       ### Animation

     

       385
       385
       +
       Note: The above example currently only works in `jupyter notebook`, not `jupyter lab`.

     

       386
       386
       +
       

     

       387
       387
       +
       ### Frame-by-Frame Animation

     

       234
       388
        
       ```python

     

       235
       235
       -
       import drawSvg as draw

     

       389
       389
       +
       import drawsvg as draw

     

       236
       390
        
       

     

       237
       391
        
       # Draw a frame of the animation

     

       238
       392
        
       def draw_frame(t):

     

       239
       239
       -
           d = draw.Drawing(2, 6.05, origin=(-1,-1.05))

     

       240
       240
       -
           d.setRenderSize(h=300)

     

       241
       241
       -
           d.append(draw.Rectangle(-2, -2, 4, 8, fill='white'))

     

       242
       242
       -
           d.append(draw.Rectangle(-1, -1.05, 2, 0.05, fill='brown'))

     

       393
       393
       +
           d = draw.Drawing(2, 6.05, origin=(-1, -5))

     

       394
       394
       +
           d.set_render_size(h=300)

     

       395
       395
       +
           d.append(draw.Rectangle(-2, -6, 4, 8, fill='white'))

     

       396
       396
       +
           d.append(draw.Rectangle(-1, 1, 2, 0.05, fill='brown'))

     

       243
       397
        
           t = (t + 1) % 2 - 1

     

       244
       244
       -
           y = 4 - t**2 * 4

     

       398
       398
       +
           y = t**2 * 4 - 4

     

       245
       399
        
           d.append(draw.Circle(0, y, 1, fill='lime'))

     

       246
       400
        
           return d

     

       247
       401
        
       

     

       248
       248
       -
       with draw.animate_jupyter(draw_frame, delay=0.05) as anim:

     

       402
       402
       +
       with draw.frame_animate_jupyter(draw_frame, delay=0.05) as anim:

     

       249
       403
        
       # Or:

     

       250
       250
       -
       #with draw.animate_video('example6.gif', draw_frame, duration=0.05

     

       251
       251
       -
       #                       ) as anim:

     

       404
       404
       +
       #with draw.frame_animate_video('example6.gif', draw_frame, duration=0.05) as anim:

     

       405
       405
       +
       # Or:

     

       406
       406
       +
       #with draw.frame_animate_spritesheet('example6.png', draw_frame, row_length=10) as anim:

     

       252
       407
        
           # Add each frame to the animation

     

       253
       408
        
           for i in range(20):

     

       254
       409
        
               anim.draw_frame(i/10)

     
···

       258
       413
        
               anim.draw_frame(i/10)

     

       259
       414
        
       ```

     

       260
       415
        
       

     

       261
       261
       -
       ![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example6.gif)

     

       416
       416
       +
       GIF:

     

       262
       417
        
       

     

       263
       263
       -
       ### Asynchronous Animation in Jupyter

     

       418
       418
       +
       ![Example output gif](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example6.gif)

     

       419
       419
       +
       

     

       420
       420
       +
       Spritesheet (usable in most 2D game engines):

     

       421
       421
       +
       

     

       422
       422
       +
       ![Example output spritesheet](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example6.png)

     

       423
       423
       +
       

     

       424
       424
       +
       ### Asynchronous Frame-based Animation in Jupyter

     

       264
       425
        
       ```python

     

       265
       426
        
       # Jupyter cell 1:

     

       427
       427
       +
       import drawsvg as draw

     

       428
       428
       +
       from drawsvg.widgets import AsyncAnimation

     

       266
       429
        
       widget = AsyncAnimation(fps=10)

     

       267
       430
        
       widget

     

       268
       431
        
       # [Animation is displayed here (click to pause)]

     
···

       272
       435
        
       @widget.set_draw_frame  # Animation above is automatically updated

     

       273
       436
        
       def draw_frame(secs=0):

     

       274
       437
        
           # Draw something...

     

       275
       275
       -
           d = draw.Drawing(300, 40)

     

       276
       276
       -
           d.append(draw.Text(global_variable, 20, 0, 10))

     

       277
       277
       -
           d.append(draw.Text(str(secs), 20, 30, 10))

     

       438
       438
       +
           d = draw.Drawing(100, 40)

     

       439
       439
       +
           d.append(draw.Text(global_variable, 20, 0, 30))

     

       440
       440
       +
           d.append(draw.Text('{:0.1f}'.format(secs), 20, 30, 30))

     

       278
       441
        
           return d

     

       279
       442
        
       

     

       280
       443
        
       # Jupyter cell 3:

     

       281
       444
        
       global_variable = 'b'  # Animation above now displays 'b'

     

       282
       445
        
       ```

     

       446
       446
       +
       

     

       447
       447
       +
       ![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example7.gif)

     

       448
       448
       +
       

     

       449
       449
       +
       Note: The above example currently only works in `jupyter notebook`, not `jupyter lab`.

     

       450
       450
       +
       

     

       451
       451
       +
       

     

       452
       452
       +
       ### Embed custom fonts

     

       453
       453
       +
       ```python

     

       454
       454
       +
       import drawsvg as draw

     

       455
       455
       +
       

     

       456
       456
       +
       d = draw.Drawing(400, 100, origin='center')

     

       457
       457
       +
       d.embed_google_font('Permanent Marker', text=set('Text with custom font'))

     

       458
       458
       +
       

     

       459
       459
       +
       d.append(draw.Text('Text with custom font', 35, 0, 0, center=True,

     

       460
       460
       +
                          font_family='Permanent Marker', font_style='italic'))

     

       461
       461
       +
       

     

       462
       462
       +
       d.save_svg('font.svg')

     

       463
       463
       +
       d  # Custom fonts work in most browsers but not in rasterize(), save_png(), or save_video()

     

       464
       464
       +
       ```

     

       465
       465
       +
       

     

       466
       466
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/font.svg?sanitize=true)](https://github.com/cduck/drawsvg/blob/master/examples/font.svg)

     

       467
       467
       +
       

     

       468
       468
       +
       

     

       469
       469
       +
       ---

     

       470
       470
       +
       

     

       471
       471
       +
       # Full-feature install

     

       472
       472
       +
       Drawsvg may be either be installed with no dependencies (only SVG and SVG-native animation will work):

     

       473
       473
       +
       ```bash

     

       474
       474
       +
       $ python3 -m pip install "drawsvg~=2.0"

     

       475
       475
       +
       ```

     

       476
       476
       +
       

     

       477
       477
       +
       Or drawsvg may be installed with extra dependencies to support PNG, MP4, and GIF output:

     

       478
       478
       +
       ```bash

     

       479
       479
       +
       $ python3 -m pip install "drawsvg[all]~=2.0"

     

       480
       480
       +
       ```

     

       481
       481
       +
       

     

       482
       482
       +
       An additional required package, [Cairo](https://www.cairographics.org/download/), cannot be installed with pip and must be installed separately.  When Cairo is installed, drawsvg can output PNG and other image formats in addition to SVG.  Install it with your preferred package manager.  Examples:

     

       483
       483
       +
       

     

       484
       484
       +
       **Ubuntu**

     

       485
       485
       +
       

     

       486
       486
       +
       ```bash

     

       487
       487
       +
       $ sudo apt install libcairo2

     

       488
       488
       +
       ```

     

       489
       489
       +
       

     

       490
       490
       +
       **macOS**

     

       491
       491
       +
       

     

       492
       492
       +
       Using [homebrew](https://brew.sh/) (may require a Python version installed with `brew install python`):

     

       493
       493
       +
       

     

       494
       494
       +
       ```bash

     

       495
       495
       +
       $ brew install cairo

     

       496
       496
       +
       ```

     

       497
       497
       +
       

     

       498
       498
       +
       **Any platform**

     

       499
       499
       +
       

     

       500
       500
       +
       Using [Anaconda](https://docs.conda.io/en/latest/miniconda.html) (may require Python and cairo installed in the same conda environment):

     

       501
       501
       +
       

     

       502
       502
       +
       ```bash

     

       503
       503
       +
       $ conda install -c anaconda cairo

     

       504
       504
       +
       ```

docs/img/01_circ.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <circle cx="50" cy="50" r="40" />

     

       7
       7
       +
       <circle cx="150" cy="50" r="40" stroke="black" fill="none" />

     

       8
       8
       +
       <circle cx="250" cy="50" r="40" stroke="black" fill="none" stroke-width="15" />

     

       9
       9
       +
       </svg>

docs/img/01_ellip.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <ellipse cx="50" cy="50" rx="50" ry="30" />

     

       7
       7
       +
       <ellipse cx="160" cy="50" rx="50" ry="30" stroke="black" fill="none" />

     

       8
       8
       +
       <ellipse cx="250" cy="50" rx="30" ry="45" stroke="black" fill="none" />

     

       9
       9
       +
       </svg>

docs/img/01_line.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M30,30 L90,90" stroke="black" />

     

       7
       7
       +
       </svg>

docs/img/01_multilines.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,90 L10,10 L80,90 L80,10" fill="none" stroke="black" />

     

       7
       7
       +
       </svg>

docs/img/01_multilines2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M30,80 L40,20 L50,80 L60,20 L70,80 L80,20 L90,80 L100,20 L110,80 L120,20 L130,80 L140,20 L150,80 L160,20 L170,80 L180,20 L190,80 L200,20 L210,80 L220,20" stroke="black" stroke-width="5" fill="none" />

     

       7
       7
       +
       </svg>

docs/img/01_polygon.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M48,16 L16,96 L96,48 L0,48 L88,96 Z" stroke="black" fill="none" />

     

       7
       7
       +
       </svg>

+10

docs/img/01_rect.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="500" height="200" viewBox="0 0 500 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="10" y="10" width="90" height="150" />

     

       7
       7
       +
       <rect x="120" y="10" width="60" height="120" fill="none" stroke="black" />

     

       8
       8
       +
       <rect x="210" y="10" width="75" height="90" fill="#0000ff" stroke="red" stroke-width="7" stroke-opacity="0.5" />

     

       9
       9
       +
       <rect x="300" y="10" width="105" height="60" fill="yellow" fill-opacity="0.5" stroke="green" stroke-width="2" stroke-dasharray="5,2" />

     

       10
       10
       +
       </svg>

+11

docs/img/01_rectround.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="500" height="200" viewBox="0 0 500 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="10" y="10" width="80" height="180" rx="10" ry="10" stroke="black" fill="none" />

     

       7
       7
       +
       <rect x="110" y="10" width="80" height="180" ry="20" stroke="black" fill="none" />

     

       8
       8
       +
       <rect x="210" y="10" width="80" height="180" rx="40" stroke="black" fill="none" />

     

       9
       9
       +
       <rect x="310" y="10" width="80" height="180" rx="30" ry="10" stroke="black" fill="none" />

     

       10
       10
       +
       <rect x="410" y="10" width="80" height="180" rx="10" ry="30" stroke="black" fill="none" />

     

       11
       11
       +
       </svg>

docs/img/02_dash.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="110" height="40" viewBox="0 0 110 40">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,10 L100,10" stroke="black" stroke-width="2" stroke-dasharray="9,5" />

     

       7
       7
       +
       <path d="M10,20 L100,20" stroke="black" stroke-width="2" stroke-dasharray="5,3,9,2" />

     

       8
       8
       +
       <path d="M10,30 L100,30" stroke="black" stroke-width="2" stroke-dasharray="9,3,5" />

     

       9
       9
       +
       </svg>

+16

docs/img/02_foso.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M0,10 L290,10" stroke="black" stroke-width="5" stroke-opacity="0.1" />

     

       7
       7
       +
       <rect x="0" y="70" width="50" height="50" fill="red" fill-opacity="0.1" />

     

       8
       8
       +
       <path d="M0,20 L290,20" stroke="black" stroke-width="5" stroke-opacity="0.30000000000000004" />

     

       9
       9
       +
       <rect x="60" y="70" width="50" height="50" fill="red" fill-opacity="0.30000000000000004" />

     

       10
       10
       +
       <path d="M0,30 L290,30" stroke="black" stroke-width="5" stroke-opacity="0.5" />

     

       11
       11
       +
       <rect x="120" y="70" width="50" height="50" fill="red" fill-opacity="0.5" />

     

       12
       12
       +
       <path d="M0,40 L290,40" stroke="black" stroke-width="5" stroke-opacity="0.7" />

     

       13
       13
       +
       <rect x="180" y="70" width="50" height="50" fill="red" fill-opacity="0.7" />

     

       14
       14
       +
       <path d="M0,50 L290,50" stroke="black" stroke-width="5" stroke-opacity="0.9" />

     

       15
       15
       +
       <rect x="240" y="70" width="50" height="50" fill="red" fill-opacity="0.9" />

     

       16
       16
       +
       </svg>

+11

docs/img/02_fsc.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="60" viewBox="0 0 100 60">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,10 L80,10" stroke="red" stroke-width="5" />

     

       7
       7
       +
       <path d="M10,20 L80,20" stroke="#9f9" stroke-width="5" />

     

       8
       8
       +
       <path d="M10,30 L80,30" stroke="#9999ff" stroke-width="5" />

     

       9
       9
       +
       <path d="M10,40 L80,40" stroke="rgb(255,128,64)" stroke-width="5" />

     

       10
       10
       +
       <path d="M10,50 L80,50" stroke="rgb(60%,20%,60%)" stroke-width="5" />

     

       11
       11
       +
       </svg>

+12

docs/img/02_join.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M0,20 L300,20" stroke="gray" />

     

       7
       7
       +
       <g stroke-width="20" stroke="black" fill="none">

     

       8
       8
       +
       <path d="M10,80 L50,20 L90,80" stroke-linejoin="miter" />

     

       9
       9
       +
       <path d="M110,80 L150,20 L190,80" stroke-linejoin="round" />

     

       10
       10
       +
       <path d="M210,80 L250,20 L290,80" stroke-linejoin="bevel" />

     

       11
       11
       +
       </g>

     

       12
       12
       +
       </svg>

+11

docs/img/02_linecap.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="150" height="100" viewBox="0 0 150 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,15 L50,15" stroke="black" stroke-width="15" stroke-linecap="butt" />

     

       7
       7
       +
       <path d="M10,45 L50,45" stroke="black" stroke-width="15" stroke-linecap="round" />

     

       8
       8
       +
       <path d="M10,75 L50,75" stroke="black" stroke-width="15" stroke-linecap="square" />

     

       9
       9
       +
       <path d="M10,0 L10,100" stroke="#999" />

     

       10
       10
       +
       <path d="M50,0 L50,100" stroke="#999" />

     

       11
       11
       +
       </svg>

+12

docs/img/02_mlimit.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="100" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M0,30 L300,30" stroke="gray" />

     

       7
       7
       +
       <g stroke-width="20" stroke="black" fill="none" stroke-linejoin="miter">

     

       8
       8
       +
       <path d="M10,90 L40,30 L70,90" />

     

       9
       9
       +
       <path d="M100,90 L130,30 L160,90" stroke-miterlimit="2.3" />

     

       10
       10
       +
       <path d="M190,90 L220,30 L250,90" stroke-miterlimit="1" />

     

       11
       11
       +
       </g>

     

       12
       12
       +
       </svg>

+26

docs/img/02_strokewdth.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="320" height="100" viewBox="0 0 320 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M15,10 L15,90" stroke="black" stroke-width="11" />

     

       7
       7
       +
       <path d="M30,10 L30,90" stroke="black" stroke-width="10" />

     

       8
       8
       +
       <path d="M45,10 L45,90" stroke="black" stroke-width="9" />

     

       9
       9
       +
       <path d="M60,10 L60,90" stroke="black" stroke-width="8" />

     

       10
       10
       +
       <path d="M75,10 L75,90" stroke="black" stroke-width="7" />

     

       11
       11
       +
       <path d="M90,10 L90,90" stroke="black" stroke-width="6" />

     

       12
       12
       +
       <path d="M105,10 L105,90" stroke="black" stroke-width="5" />

     

       13
       13
       +
       <path d="M120,10 L120,90" stroke="black" stroke-width="4" />

     

       14
       14
       +
       <path d="M135,10 L135,90" stroke="black" stroke-width="3" />

     

       15
       15
       +
       <path d="M150,10 L150,90" stroke="black" stroke-width="2" />

     

       16
       16
       +
       <path d="M165,10 L165,90" stroke="black" stroke-width="1" />

     

       17
       17
       +
       <path d="M180,10 L180,90" stroke="black" stroke-width="2" />

     

       18
       18
       +
       <path d="M195,10 L195,90" stroke="black" stroke-width="3" />

     

       19
       19
       +
       <path d="M210,10 L210,90" stroke="black" stroke-width="4" />

     

       20
       20
       +
       <path d="M225,10 L225,90" stroke="black" stroke-width="5" />

     

       21
       21
       +
       <path d="M240,10 L240,90" stroke="black" stroke-width="6" />

     

       22
       22
       +
       <path d="M255,10 L255,90" stroke="black" stroke-width="7" />

     

       23
       23
       +
       <path d="M270,10 L270,90" stroke="black" stroke-width="8" />

     

       24
       24
       +
       <path d="M285,10 L285,90" stroke="black" stroke-width="9" />

     

       25
       25
       +
       <path d="M300,10 L300,90" stroke="black" stroke-width="10" />

     

       26
       26
       +
       </svg>

+10

docs/img/03_pA.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="200" viewBox="0 0 400 200" stroke-width="3" fill="none">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M125,75 A100,50,0,0,0,225,125" stroke="red" />

     

       7
       7
       +
       <path d="M125,75 A100,50,0,0,1,225,125" stroke="blue" />

     

       8
       8
       +
       <path d="M125,75 A100,50,0,1,0,225,125" stroke="rgb(0 80 255)" stroke-dasharray="5 3" />

     

       9
       9
       +
       <path d="M125,75 A100,50,0,1,1,225,125" stroke="rgb(255 80 0)" stroke-dasharray="5 3" />

     

       10
       10
       +
       </svg>

+48

docs/img/03_pC.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="650" height="100" viewBox="0 0 650 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M40,50 C10,10,140,10,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(0,0)" />

     

       7
       7
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(0,0)">

     

       8
       8
       +
       <circle cx="10" cy="10" r="2" />

     

       9
       9
       +
       <circle cx="140" cy="10" r="2" />

     

       10
       10
       +
       <path d="M40,50 L10,10" />

     

       11
       11
       +
       <path d="M110,50 L140,10" />

     

       12
       12
       +
       </g>

     

       13
       13
       +
       <path d="M40,50 C60,10,90,10,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(100,0)" />

     

       14
       14
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(100,0)">

     

       15
       15
       +
       <circle cx="60" cy="10" r="2" />

     

       16
       16
       +
       <circle cx="90" cy="10" r="2" />

     

       17
       17
       +
       <path d="M40,50 L60,10" />

     

       18
       18
       +
       <path d="M110,50 L90,10" />

     

       19
       19
       +
       </g>

     

       20
       20
       +
       <path d="M40,50 C110,10,40,10,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(200,0)" />

     

       21
       21
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(200,0)">

     

       22
       22
       +
       <circle cx="110" cy="10" r="2" />

     

       23
       23
       +
       <circle cx="40" cy="10" r="2" />

     

       24
       24
       +
       <path d="M40,50 L110,10" />

     

       25
       25
       +
       <path d="M110,50 L40,10" />

     

       26
       26
       +
       </g>

     

       27
       27
       +
       <path d="M40,50 C110,10,40,10,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(300,0)" />

     

       28
       28
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(300,0)">

     

       29
       29
       +
       <circle cx="110" cy="10" r="2" />

     

       30
       30
       +
       <circle cx="40" cy="10" r="2" />

     

       31
       31
       +
       <path d="M40,50 L110,10" />

     

       32
       32
       +
       <path d="M110,50 L40,10" />

     

       33
       33
       +
       </g>

     

       34
       34
       +
       <path d="M40,50 C60,10,90,90,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(400,0)" />

     

       35
       35
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(400,0)">

     

       36
       36
       +
       <circle cx="60" cy="10" r="2" />

     

       37
       37
       +
       <circle cx="90" cy="90" r="2" />

     

       38
       38
       +
       <path d="M40,50 L60,10" />

     

       39
       39
       +
       <path d="M110,50 L90,90" />

     

       40
       40
       +
       </g>

     

       41
       41
       +
       <path d="M40,50 C110,10,40,90,110,50" stroke="black" fill="none" stroke-width="3" transform="translate(500,0)" />

     

       42
       42
       +
       <g stroke="gray" fill="gray" stroke-width="1" transform="translate(500,0)">

     

       43
       43
       +
       <circle cx="110" cy="10" r="2" />

     

       44
       44
       +
       <circle cx="40" cy="90" r="2" />

     

       45
       45
       +
       <path d="M40,50 L110,10" />

     

       46
       46
       +
       <path d="M110,50 L40,90" />

     

       47
       47
       +
       </g>

     

       48
       48
       +
       </svg>

docs/img/03_pHV.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="60" viewBox="0 0 100 60">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,10 H100 M10,20 H100 V50" stroke="black" fill="none" id="pathHV0" />

     

       7
       7
       +
       <use xlink:href="#pathHV0" />

     

       8
       8
       +
       </svg>

+11

docs/img/03_pL.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="70" viewBox="0 0 100 70">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <g stroke="black" fill="none">

     

       7
       7
       +
       <path d="M10,10 L100,10" />

     

       8
       8
       +
       <path d="M10,20 L100,20 L100,50" />

     

       9
       9
       +
       <path d="M40,60 L10,60 L40,42 M60,60 L90,60 L60,42" />

     

       10
       10
       +
       </g>

     

       11
       11
       +
       </svg>

+21

docs/img/03_pQ.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="700" height="130" viewBox="0 0 700 130">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <path d="M30,75 Q240,30,300,120" stroke="black" fill="none" stroke-width="3" id="pathQ0" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <use xlink:href="#pathQ0" />

     

       8
       8
       +
       <use xlink:href="#pathQ0" x="300" y="0" />

     

       9
       9
       +
       <g stroke="gray" fill="gray">

     

       10
       10
       +
       <circle cx="330" cy="75" r="3" />

     

       11
       11
       +
       <circle cx="600" cy="120" r="3" />

     

       12
       12
       +
       <circle cx="540" cy="30" r="3" />

     

       13
       13
       +
       <path d="M330,75 L540,30" />

     

       14
       14
       +
       <path d="M540,30 L600,120" />

     

       15
       15
       +
       <path d="M330,75 L600,120" stroke-dasharray="5,5" />

     

       16
       16
       +
       <circle cx="435" cy="52.5" r="3" />

     

       17
       17
       +
       <circle cx="570" cy="75" r="3" />

     

       18
       18
       +
       <path d="M435,52.5 L570,75" />

     

       19
       19
       +
       <circle cx="502.5" cy="63.75" r="4" fill="none" />

     

       20
       20
       +
       </g>

     

       21
       21
       +
       </svg>

+16

docs/img/03_pS.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="250" height="150" viewBox="0 0 250 150">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M30,100 C50,30,70,50,100,100 S150,40,200,80" stroke="black" fill="none" stroke-width="3" />

     

       7
       7
       +
       <circle cx="30" cy="100" r="4" />

     

       8
       8
       +
       <circle cx="50" cy="30" r="2" stroke="gray" fill="gray" />

     

       9
       9
       +
       <path d="M30,100 L50,30" stroke="gray" />

     

       10
       10
       +
       <circle cx="100" cy="100" r="4" />

     

       11
       11
       +
       <circle cx="70" cy="50" r="2" stroke="gray" fill="gray" />

     

       12
       12
       +
       <path d="M100,100 L70,50" stroke="gray" />

     

       13
       13
       +
       <circle cx="200" cy="80" r="4" />

     

       14
       14
       +
       <circle cx="150" cy="40" r="2" stroke="gray" fill="gray" />

     

       15
       15
       +
       <path d="M200,80 L150,40" stroke="gray" />

     

       16
       16
       +
       </svg>

docs/img/03_pT.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="100" viewBox="0 0 400 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M30,60 Q80,-10,100,60 Q130,25,200,40" stroke="black" fill="none" stroke-width="3" />

     

       7
       7
       +
       <path d="M30,60 Q80,-10,100,60 T200,40" stroke="black" fill="none" stroke-width="3" transform="translate(200,0)" />

     

       8
       8
       +
       </svg>

docs/img/03_pZ.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="90" height="70" viewBox="0 0 90 70">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M10,10 h30 v50 h-30 Z M50,10 h30 v50 Z" stroke="black" fill="none" id="pathZ0" />

     

       7
       7
       +
       <use xlink:href="#pathZ0" />

     

       8
       8
       +
       </svg>

+16

docs/img/04_align.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="250" height="120" viewBox="0 0 250 120">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M75,100 L75,0" stroke="gray" />

     

       7
       7
       +
       <path d="M140,30 L250,30" stroke="gray" />

     

       8
       8
       +
       <path d="M140,60 L250,60" stroke="gray" />

     

       9
       9
       +
       <path d="M140,90 L250,90" stroke="gray" />

     

       10
       10
       +
       <text x="75" y="30" font-size="24" text-anchor="start">Start</text>

     

       11
       11
       +
       <text x="75" y="60" font-size="24" text-anchor="middle">Middle</text>

     

       12
       12
       +
       <text x="75" y="90" font-size="24" text-anchor="end">End</text>

     

       13
       13
       +
       <text x="150" y="30" font-size="24" dominant-baseline="auto">Auto</text>

     

       14
       14
       +
       <text x="150" y="60" font-size="24" dominant-baseline="middle">Middle</text>

     

       15
       15
       +
       <text x="150" y="90" font-size="24" dominant-baseline="hanging">Hanging</text>

     

       16
       16
       +
       </svg>

+13

docs/img/04_fill.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="550" height="370" viewBox="0 0 550 370">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M20,0 V370 M10,60 H500 M10,120 H500 M10,180 H500 M10,240 H500 M10,300 H500 M10,360 H500" stroke="gray" />

     

       7
       7
       +
       <text x="20" y="60" font-size="50">Simplest Text</text>

     

       8
       8
       +
       <text x="20" y="120" font-size="50" stroke="black">Outline / Filled</text>

     

       9
       9
       +
       <text x="20" y="180" font-size="50" stroke="black" stroke-width="5">Too big stroke</text>

     

       10
       10
       +
       <text x="20" y="240" font-size="50" stroke="black" stroke-width="0.5" fill="none">Outlined only</text>

     

       11
       11
       +
       <text x="20" y="300" font-size="50" stroke="black" fill="red">Outlined and colored</text>

     

       12
       12
       +
       <text x="20" y="360" font-size="50" fill="blue">Colored fill only</text>

     

       13
       13
       +
       </svg>

docs/img/04_fonts1.png

This is a binary file and will not be displayed.

docs/img/04_fonts2.png

This is a binary file and will not be displayed.

+14

docs/img/04_len.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="200" viewBox="0 0 400 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="20" y="30" font-size="20" textLength="250" lengthAdjust="spacing">Two words</text>

     

       7
       7
       +
       <text x="20" y="70" font-size="20" textLength="250" lengthAdjust="spacingAndGlyphs">Two words</text>

     

       8
       8
       +
       <text x="20" y="110" font-size="20">Two words (normal length)</text>

     

       9
       9
       +
       <text x="20" y="150" font-size="20" textLength="80" lengthAdjust="spacing">Two words</text>

     

       10
       10
       +
       <text x="20" y="190" font-size="20" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text>

     

       11
       11
       +
       <path d="M20,10 L20,195" stroke="gray" />

     

       12
       12
       +
       <path d="M270,80 L270,10" stroke="gray" />

     

       13
       13
       +
       <path d="M100,130 L100,195" stroke="gray" />

     

       14
       14
       +
       </svg>

docs/img/04_multiline_text.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="50" y="20" font-size="14" text-anchor="middle"><tspan x="50" dy="0em">this is</tspan><tspan x="50" dy="1em">a</tspan><tspan x="50" dy="1em">multiline text</tspan><tspan x="50" dy="1em">given as a</tspan><tspan x="50" dy="1em">list</tspan></text>

     

       7
       7
       +
       <text x="150" y="20" font-size="14" text-anchor="middle"><tspan x="150" dy="0em">this is</tspan><tspan x="150" dy="1em">a</tspan><tspan x="150" dy="1em">multiline text</tspan><tspan x="150" dy="1em">given as a</tspan><tspan x="150" dy="1em">string</tspan></text>

     

       8
       8
       +
       </svg>

docs/img/04_mutiline_text.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="50" y="20" font-size="14" text-anchor="middle"><tspan x="50" dy="0em">this is</tspan><tspan x="50" dy="1em">a</tspan><tspan x="50" dy="1em">multiline text</tspan><tspan x="50" dy="1em">given as a</tspan><tspan x="50" dy="1em">list</tspan></text>

     

       7
       7
       +
       <text x="150" y="20" font-size="14" text-anchor="middle"><tspan x="150" dy="0em">this is</tspan><tspan x="150" dy="1em">a</tspan><tspan x="150" dy="1em">multiline text</tspan><tspan x="150" dy="1em">given as a</tspan><tspan x="150" dy="1em">string</tspan></text>

     

       8
       8
       +
       </svg>

+31

docs/img/04_path.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="500" height="200" viewBox="0 0 500 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <path d="M30,50 C50,20,70,20,120,50 S150,10,200,50" stroke="gray" fill="none" id="textpath0" />

     

       6
       6
       +
       <path d="M250,30 L300,30 A30,30,0,0,1,330,60 L330,110" stroke="gray" fill="none" id="textpath1" />

     

       7
       7
       +
       <path d="M30,110 L100,110 L100,160" stroke="gray" fill="none" id="textpath2" />

     

       8
       8
       +
       <path d="M150,110 A40,30,0,1,0,230,110 M250,110 L270,140" stroke="gray" fill="none" id="textpath3" />

     

       9
       9
       +
       <path d="M330,130 L330,160 A30,30,0,0,1,300,180 L200,180" stroke="gray" fill="none" id="textpath4" />

     

       10
       10
       +
       </defs>

     

       11
       11
       +
       <use xlink:href="#textpath0" />

     

       12
       12
       +
       <use xlink:href="#textpath1" />

     

       13
       13
       +
       <use xlink:href="#textpath2" />

     

       14
       14
       +
       <use xlink:href="#textpath3" />

     

       15
       15
       +
       <use xlink:href="#textpath4" />

     

       16
       16
       +
       <text font-size="14"><textPath xlink:href="#textpath0">

     

       17
       17
       +
       <tspan dy="0em">Following a cubic Bézier curve</tspan>

     

       18
       18
       +
       </textPath></text>

     

       19
       19
       +
       <text font-size="14"><textPath xlink:href="#textpath1">

     

       20
       20
       +
       <tspan dy="0em">Going 'round the bend</tspan>

     

       21
       21
       +
       </textPath></text>

     

       22
       22
       +
       <text font-size="14"><textPath xlink:href="#textpath2">

     

       23
       23
       +
       <tspan dy="0em">Making a quick turn</tspan>

     

       24
       24
       +
       </textPath></text>

     

       25
       25
       +
       <text font-size="14"><textPath xlink:href="#textpath3">

     

       26
       26
       +
       <tspan dy="0em">Text along a broken path</tspan>

     

       27
       27
       +
       </textPath></text>

     

       28
       28
       +
       <text font-size="14" offset="50%" text-anchor="middle"><textPath xlink:href="#textpath4" startOffset="50%">

     

       29
       29
       +
       <tspan dy="0em">centered</tspan>

     

       30
       30
       +
       </textPath></text>

     

       31
       31
       +
       </svg>

docs/img/04_rot.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="20" y="20" font-size="20" letter-spacing="20" rotate="90">Rotate</text>

     

       7
       7
       +
       <text x="20" y="80" font-size="20" letter-spacing="20" rotate="0 90 180 270">Rotate</text>

     

       8
       8
       +
       </svg>

docs/img/04_rot2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="80" viewBox="0 0 200 80">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="20" y="50" font-size="20" letter-spacing="20"><tspan rotate="68">R</tspan><tspan rotate="50 20">OT</tspan><tspan rotate="291 32 130">ATE</tspan></text>

     

       7
       7
       +
       </svg>

docs/img/04_tspan.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="600" height="50" viewBox="0 0 600 50">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="10" y="40" font-size="24">Switch among <tspan font-style="italic">italic</tspan><tspan>, normal, and </tspan><tspan font-weight="bold">bold</tspan><tspan> text.</tspan></text>

     

       7
       7
       +
       </svg>

docs/img/04_tspan2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="160" viewBox="0 0 300 160">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="10" y="30" font-size="24">F<tspan dy="5">a</tspan><tspan dy="31" dx="21">l</tspan><tspan dy="89" dx="54">l</tspan></text>

     

       7
       7
       +
       </svg>

docs/img/04_tspan3.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="160" viewBox="0 0 300 160">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="10" y="30" font-size="24" dx="0,0,21,54" dy="0,5,21,54">Fall</text>

     

       7
       7
       +
       </svg>

+16

docs/img/04_weight.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="600" height="200" viewBox="0 0 600 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <text x="20" y="35" font-size="30" font-weight="bold">bold</text>

     

       7
       7
       +
       <text x="20" y="75" font-size="30" font-style="italic">italic</text>

     

       8
       8
       +
       <text x="20" y="115" font-size="30" text-decoration="underline">under</text>

     

       9
       9
       +
       <text x="20" y="155" font-size="30" text-decoration="overline">over</text>

     

       10
       10
       +
       <text x="20" y="195" font-size="30" text-decoration="line-through">through</text>

     

       11
       11
       +
       <text x="200" y="35" font-size="30">normal word space</text>

     

       12
       12
       +
       <text x="200" y="75" font-size="30" word-spacing="10">more word space</text>

     

       13
       13
       +
       <text x="200" y="115" font-size="30" word-spacing="-5">less word space</text>

     

       14
       14
       +
       <text x="200" y="155" font-size="30" letter-spacing="8">wide letter space</text>

     

       15
       15
       +
       <text x="200" y="195" font-size="30" letter-spacing="-2">narrow letter space</text>

     

       16
       16
       +
       </svg>

+12

docs/img/05_clip.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <clipPath id="clip0">

     

       6
       6
       +
       <rect x="100" y="100" width="100" height="100" />

     

       7
       7
       +
       </clipPath>

     

       8
       8
       +
       </defs>

     

       9
       9
       +
       <rect x="100" y="100" width="100" height="100" stroke="gray" fill="none" />

     

       10
       10
       +
       <circle cx="100" cy="100" r="100" fill="none" stroke="gray" stroke-dasharray="5 5" />

     

       11
       11
       +
       <circle cx="100" cy="100" r="100" fill="cyan" clip-path="url(#clip0)" />

     

       12
       12
       +
       </svg>

+12

docs/img/05_clip2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="600" height="200" viewBox="0 0 600 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <path d="M150,150 L68,145 L32,65 L60,126 L230,120 L194,53 L48,124 L14,99 L221,155 L1,178 L228,68 L117,151 L52,81 L15,5 L13,166 L277,2 L195,175 L110,108 L14,135 L113,195 L224,126 L283,59 L176,59 L112,194 L235,74 L11,106 L284,164 L51,47 L151,30 L170,184 L256,108 L259,171 L97,77 L145,150 L255,129 L201,150 L17,122 L124,190 L206,106 L88,93 L280,179" stroke="black" stroke-width="2" fill="none" id="clip20" />

     

       6
       6
       +
       <clipPath id="clip21">

     

       7
       7
       +
       <circle cx="150" cy="100" r="75" />

     

       8
       8
       +
       </clipPath>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <use xlink:href="#clip20" />

     

       11
       11
       +
       <use xlink:href="#clip20" x="300" y="0" clip-path="url(#clip21)" />

     

       12
       12
       +
       </svg>

+29

docs/img/05_clip3.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="300" viewBox="0 0 300 300">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <g id="clip30">

     

       6
       6
       +
       <rect x="0" y="50" width="90" height="60" fill="#999" />

     

       7
       7
       +
       <circle cx="25" cy="25" r="25" fill="#666" />

     

       8
       8
       +
       <path d="M30,0 L80,0 L80,100 Z" fill="#ccc" />

     

       9
       9
       +
       </g>

     

       10
       10
       +
       <path d="M5,55 C25,5,45,-25,75,55 C85,85,20,105,40,55 Z" stroke="black" stroke-width="1" stroke-dasharray="3 2" fill="none" id="clip31" />

     

       11
       11
       +
       <clipPath id="clip32">

     

       12
       12
       +
       <use xlink:href="#clip31" x="0" y="0" />

     

       13
       13
       +
       </clipPath>

     

       14
       14
       +
       <text x="20" y="20" font-size="48" font-weight="bold" transform="rotate(60)" stroke="black" stroke-width="1" stroke-dasharray="3 2" fill="none" id="clip33">CLIP</text>

     

       15
       15
       +
       <clipPath id="clip34">

     

       16
       16
       +
       <use xlink:href="#clip33" x="0" y="0" />

     

       17
       17
       +
       </clipPath>

     

       18
       18
       +
       </defs>

     

       19
       19
       +
       <use xlink:href="#clip30" x="0" y="0" clip-path="url(#clip32)" />

     

       20
       20
       +
       <g transform="translate(100,0)">

     

       21
       21
       +
       <use xlink:href="#clip30" />

     

       22
       22
       +
       <use xlink:href="#clip31" x="0" y="0" />

     

       23
       23
       +
       </g>

     

       24
       24
       +
       <use xlink:href="#clip30" x="0" y="150" clip-path="url(#clip34)" />

     

       25
       25
       +
       <g transform="translate(100,150)">

     

       26
       26
       +
       <use xlink:href="#clip30" />

     

       27
       27
       +
       <use xlink:href="#clip33" x="0" y="0" />

     

       28
       28
       +
       </g>

     

       29
       29
       +
       </svg>

+11

docs/img/05_lingrad.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="80" viewBox="0 0 200 80">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <linearGradient x1="150" y1="0" x2="0" y2="0" gradientUnits="userSpaceOnUse" id="grad10">

     

       6
       6
       +
       <stop offset="0" stop-color="green" />

     

       7
       7
       +
       <stop offset="1" stop-color="yellow" />

     

       8
       8
       +
       </linearGradient>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <rect x="10" y="10" width="150" height="60" stroke="black" fill="url(#grad10)" />

     

       11
       11
       +
       </svg>

+15

docs/img/05_mask.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="mask10">

     

       6
       6
       +
       <stop offset="0" stop-color="white" />

     

       7
       7
       +
       <stop offset="1" stop-color="black" />

     

       8
       8
       +
       </linearGradient>

     

       9
       9
       +
       <mask id="mask11">

     

       10
       10
       +
       <rect x="30" y="0" width="100" height="100" fill="url(#mask10)" />

     

       11
       11
       +
       </mask>

     

       12
       12
       +
       </defs>

     

       13
       13
       +
       <rect x="0" y="0" width="200" height="100" fill="cyan" stroke="blue" stroke-width="2" />

     

       14
       14
       +
       <rect x="0" y="0" width="200" height="100" fill="pink" stroke="red" stroke-width="2" mask="url(#mask11)" />

     

       15
       15
       +
       </svg>

+38

docs/img/05_mask2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="250" height="150" viewBox="0 0 250 150">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <mask maskContentUnits="objectBoundingBox" id="mask20">

     

       6
       6
       +
       <rect x="0" y="0" width="1" height="1" fill="#f00" />

     

       7
       7
       +
       </mask>

     

       8
       8
       +
       <mask maskContentUnits="objectBoundingBox" id="mask21">

     

       9
       9
       +
       <rect x="0" y="0" width="1" height="1" fill="#0f0" />

     

       10
       10
       +
       </mask>

     

       11
       11
       +
       <mask maskContentUnits="objectBoundingBox" id="mask22">

     

       12
       12
       +
       <rect x="0" y="0" width="1" height="1" fill="#00f" />

     

       13
       13
       +
       </mask>

     

       14
       14
       +
       <mask maskContentUnits="objectBoundingBox" id="mask23">

     

       15
       15
       +
       <rect x="0" y="0" width="1" height="1" fill="#fff" />

     

       16
       16
       +
       </mask>

     

       17
       17
       +
       </defs>

     

       18
       18
       +
       <rect x="10" y="10" width="50" height="50" fill="#f00" />

     

       19
       19
       +
       <rect x="70" y="10" width="50" height="50" fill="#0f0" />

     

       20
       20
       +
       <rect x="130" y="10" width="50" height="50" fill="#00f" />

     

       21
       21
       +
       <rect x="190" y="10" width="50" height="50" fill="#fff" stroke="black" />

     

       22
       22
       +
       <g mask="url(#mask20)">

     

       23
       23
       +
       <circle cx="35" cy="115" r="25" fill="black" />

     

       24
       24
       +
       <text x="35" y="80" font-size="14" text-anchor="middle">Red</text>

     

       25
       25
       +
       </g>

     

       26
       26
       +
       <g mask="url(#mask21)">

     

       27
       27
       +
       <circle cx="95" cy="115" r="25" fill="black" />

     

       28
       28
       +
       <text x="95" y="80" font-size="14" text-anchor="middle">Green</text>

     

       29
       29
       +
       </g>

     

       30
       30
       +
       <g mask="url(#mask22)">

     

       31
       31
       +
       <circle cx="155" cy="115" r="25" fill="black" />

     

       32
       32
       +
       <text x="155" y="80" font-size="14" text-anchor="middle">Blue</text>

     

       33
       33
       +
       </g>

     

       34
       34
       +
       <g mask="url(#mask23)">

     

       35
       35
       +
       <circle cx="215" cy="115" r="25" fill="black" />

     

       36
       36
       +
       <text x="215" y="80" font-size="14" text-anchor="middle">White</text>

     

       37
       37
       +
       </g>

     

       38
       38
       +
       </svg>

+34

docs/img/05_mask3.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="250" height="100" viewBox="0 0 250 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <mask maskContentUnits="objectBoundingBox" id="mask30">

     

       6
       6
       +
       <rect x="0" y="0" width="1" height="1" fill-opacity="1.0" fill="white" />

     

       7
       7
       +
       </mask>

     

       8
       8
       +
       <mask maskContentUnits="objectBoundingBox" id="mask31">

     

       9
       9
       +
       <rect x="0" y="0" width="1" height="1" fill-opacity="0.75" fill="white" />

     

       10
       10
       +
       </mask>

     

       11
       11
       +
       <mask maskContentUnits="objectBoundingBox" id="mask32">

     

       12
       12
       +
       <rect x="0" y="0" width="1" height="1" fill-opacity="0.5" fill="white" />

     

       13
       13
       +
       </mask>

     

       14
       14
       +
       <mask maskContentUnits="objectBoundingBox" id="mask33">

     

       15
       15
       +
       <rect x="0" y="0" width="1" height="1" fill-opacity="0.25" fill="white" />

     

       16
       16
       +
       </mask>

     

       17
       17
       +
       </defs>

     

       18
       18
       +
       <g mask="url(#mask30)">

     

       19
       19
       +
       <circle cx="35" cy="35" r="25" />

     

       20
       20
       +
       <text x="35" y="80" font-size="14" text-anchor="middle">100%</text>

     

       21
       21
       +
       </g>

     

       22
       22
       +
       <g mask="url(#mask31)">

     

       23
       23
       +
       <circle cx="95" cy="35" r="25" />

     

       24
       24
       +
       <text x="95" y="80" font-size="14" text-anchor="middle">50%</text>

     

       25
       25
       +
       </g>

     

       26
       26
       +
       <g mask="url(#mask32)">

     

       27
       27
       +
       <circle cx="155" cy="35" r="25" />

     

       28
       28
       +
       <text x="155" y="80" font-size="14" text-anchor="middle">50%</text>

     

       29
       29
       +
       </g>

     

       30
       30
       +
       <g mask="url(#mask33)">

     

       31
       31
       +
       <circle cx="215" cy="35" r="25" />

     

       32
       32
       +
       <text x="215" y="80" font-size="14" text-anchor="middle">25%</text>

     

       33
       33
       +
       </g>

     

       34
       34
       +
       </svg>

+11

docs/img/05_radgrad.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="200" viewBox="0 0 400 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <radialGradient cx="200" cy="100" r="100" gradientUnits="userSpaceOnUse" id="grad20">

     

       6
       6
       +
       <stop offset="0" stop-color="green" stop-opacity="1" />

     

       7
       7
       +
       <stop offset="1" stop-color="orange" stop-opacity="1" />

     

       8
       8
       +
       </radialGradient>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <rect x="0" y="0" width="100%" height="100%" fill="url(#grad20)" />

     

       11
       11
       +
       </svg>

+24

docs/img/06_group.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="240" height="120" viewBox="0 0 240 120">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <g id="house" fill="none" stroke="black">

     

       7
       7
       +
       <rect x="6" y="50" width="60" height="60" />

     

       8
       8
       +
       <path d="M6,50 L36,9 L66,50" />

     

       9
       9
       +
       <path d="M36,110 L36,80 L50,80 L50,110" />

     

       10
       10
       +
       </g>

     

       11
       11
       +
       <g id="man" fill="none" stroke="blue">

     

       12
       12
       +
       <circle cx="85" cy="56" r="10" />

     

       13
       13
       +
       <path d="M85,66 L85,80" />

     

       14
       14
       +
       <path d="M76,104 L85,80 L94,104" />

     

       15
       15
       +
       <path d="M76,70 L85,76 L94,70" />

     

       16
       16
       +
       </g>

     

       17
       17
       +
       <g id="woman" fill="none" stroke="red">

     

       18
       18
       +
       <circle cx="110" cy="56" r="10" />

     

       19
       19
       +
       <path d="M110,66 L110,80 L100,90 L120,90 L110,80" />

     

       20
       20
       +
       <path d="M104,104 L108,90" />

     

       21
       21
       +
       <path d="M112,90 L116,104" />

     

       22
       22
       +
       <path d="M101,70 L110,76 L119,70" />

     

       23
       23
       +
       </g>

     

       24
       24
       +
       </svg>

docs/img/06_imag.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <image x="0" y="0" width="200" height="200" xlink:href="data:image/png;base64,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" />

     

       7
       7
       +
       </svg>

+14

docs/img/06_use.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="220" height="170" viewBox="0 0 220 170">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <g id="house" fill="none" stroke="black">

     

       6
       6
       +
       <rect x="6" y="50" width="60" height="60" />

     

       7
       7
       +
       <path d="M6,50 L36,9 L66,50" />

     

       8
       8
       +
       <path d="M36,110 L36,80 L50,80 L50,110" />

     

       9
       9
       +
       </g>

     

       10
       10
       +
       </defs>

     

       11
       11
       +
       <use xlink:href="#house" />

     

       12
       12
       +
       <use xlink:href="#house" x="100" y="50" />

     

       13
       13
       +
       <use xlink:href="#house" x="150" y="20" />

     

       14
       14
       +
       </svg>

docs/img/07_cart1.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M0,100 L0,0 L100,0" fill="none" stroke="green" stroke-width="2" />

     

       7
       7
       +
       <path d="M40,40 L100,40 L70,70 L40,70" fill="silver" stroke="black" stroke-width="2" />

     

       8
       8
       +
       <text x="5" y="95" font-size="12">downward y</text>

     

       9
       9
       +
       </svg>

+11

docs/img/07_cart2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <g transform="translate(0,100) scale(1,-1)">

     

       7
       7
       +
       <path d="M0,100 L0,0 L100,0" fill="none" stroke="green" stroke-width="2" />

     

       8
       8
       +
       <path d="M40,40 L100,40 L70,70 L40,70" fill="silver" stroke="black" stroke-width="2" />

     

       9
       9
       +
       <text x="5" y="95" font-size="12">upward y</text>

     

       10
       10
       +
       </g>

     

       11
       11
       +
       </svg>

docs/img/07_cart3.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="100" height="100" viewBox="0 0 100 100" transform="scale(1,-1)">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <path d="M0,100 L0,0 L100,0" fill="none" stroke="green" stroke-width="2" />

     

       7
       7
       +
       <path d="M40,40 L100,40 L70,70 L40,70" fill="silver" stroke="black" stroke-width="2" />

     

       8
       8
       +
       <text x="5" y="95" font-size="12">upward y</text>

     

       9
       9
       +
       </svg>

+10

docs/img/07_rota.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="0" y="0" width="200" height="200" stroke="gray" fill="none" />

     

       7
       7
       +
       <rect x="70" y="30" width="40" height="40" fill="silver" />

     

       8
       8
       +
       <rect x="70" y="30" width="40" height="40" fill="gray" transform="rotate(22.5)" />

     

       9
       9
       +
       <rect x="70" y="30" width="40" height="40" fill="black" transform="rotate(45)" />

     

       10
       10
       +
       </svg>

+17

docs/img/07_rota2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="200" viewBox="0 0 300 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <g id="arrow">

     

       6
       6
       +
       <path d="M110,100 L160,100" />

     

       7
       7
       +
       <path d="M160,100 L155,95 L155,105" />

     

       8
       8
       +
       </g>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <circle cx="100" cy="100" r="3" fill="black" />

     

       11
       11
       +
       <use xlink:href="#arrow" x="0" y="0" stroke="black" fill="black" />

     

       12
       12
       +
       <g stroke="red" fill="red">

     

       13
       13
       +
       <use xlink:href="#arrow" x="0" y="0" transform="rotate (60,100,100)" />

     

       14
       14
       +
       <use xlink:href="#arrow" x="0" y="0" transform="rotate (-90,100,100)" />

     

       15
       15
       +
       <use xlink:href="#arrow" x="0" y="0" transform="rotate (-150,100,100)" />

     

       16
       16
       +
       </g>

     

       17
       17
       +
       </svg>

+12

docs/img/07_scalcent.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="300" height="200" viewBox="0 0 300 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <rect x="70" y="80" width="60" height="40" stroke="black" fill="none" id="scalecenter0" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <circle cx="100" cy="100" r="4" fill="black" />

     

       8
       8
       +
       <use xlink:href="#scalecenter0" />

     

       9
       9
       +
       <use xlink:href="#scalecenter0" x="0" y="0" transform="translate(-100,-100) scale(2)" stroke-width="0.5" />

     

       10
       10
       +
       <use xlink:href="#scalecenter0" x="0" y="0" transform="translate(-150,-150) scale(2.5)" stroke-width="0.4" />

     

       11
       11
       +
       <use xlink:href="#scalecenter0" x="0" y="0" transform="translate(-200,-200) scale(3)" stroke-width="0.33" />

     

       12
       12
       +
       </svg>

docs/img/07_scale.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <rect x="0" y="0" width="40" height="40" fill="none" stroke-width="2" id="scale10" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <use xlink:href="#scale10" x="10" y="10" stroke="black" />

     

       8
       8
       +
       <use xlink:href="#scale10" x="10" y="10" stroke="red" transform="scale(2)" />

     

       9
       9
       +
       </svg>

docs/img/07_scale2.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <rect x="0" y="0" width="40" height="40" fill="none" stroke-width="2" id="scale20" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <use xlink:href="#scale20" x="10" y="10" stroke="black" />

     

       8
       8
       +
       <use xlink:href="#scale20" x="10" y="10" stroke="red" transform="scale(3,1.5)" />

     

       9
       9
       +
       </svg>

+23

docs/img/07_skew.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="100" viewBox="0 0 200 100" id-srefix="skew">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <g stroke="gray" stroke-dasharray="4 4">

     

       7
       7
       +
       <path d="M0,0 L200,0" />

     

       8
       8
       +
       <path d="M20,0 L20,90" />

     

       9
       9
       +
       <path d="M120,0 L120,90" />

     

       10
       10
       +
       </g>

     

       11
       11
       +
       <g transform="translate(20,0)">

     

       12
       12
       +
       <g transform="skewX(30)">

     

       13
       13
       +
       <path d="M50,0 L0,0 L0,50" stroke="black" fill="none" stroke-width="2" />

     

       14
       14
       +
       <text x="0" y="60" font-size="16">skewX</text>

     

       15
       15
       +
       </g>

     

       16
       16
       +
       </g>

     

       17
       17
       +
       <g transform="translate(120,0)">

     

       18
       18
       +
       <g transform="skewY(30)">

     

       19
       19
       +
       <path d="M50,0 L0,0 L0,50" stroke="black" fill="none" stroke-width="2" />

     

       20
       20
       +
       <text x="0" y="60" font-size="16">skewY</text>

     

       21
       21
       +
       </g>

     

       22
       22
       +
       </g>

     

       23
       23
       +
       </svg>

docs/img/07_trans.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="0" y="0" width="40" height="40" />

     

       7
       7
       +
       <rect x="0" y="0" width="40" height="40" fill="red" transform="translate(50,50)" />

     

       8
       8
       +
       </svg>

docs/img/example1.png

This is a binary file and will not be displayed.

+1307

docs/index.md

···

       1
       1
       +
       # Drawsvg Quick Reference

     

       2
       2
       +
       

     

       3
       3
       +
       Repository: [https://github.com/cduck/drawsvg](https://github.com/cduck/drawsvg)

     

       4
       4
       +
       

     

       5
       5
       +
       

     

       6
       6
       +
       ```python

     

       7
       7
       +
       import drawsvg as dw

     

       8
       8
       +
       ```

     

       9
       9
       +
       

     

       10
       10
       +
       

     

       11
       11
       +
       ## Canvas and Document Structure

     

       12
       12
       +
       

     

       13
       13
       +
       ```python

     

       14
       14
       +
       d = dw.Drawing(width, height, origin=(0, 0),

     

       15
       15
       +
                      context: drawsvg.types.Context = None, animation_config=None,

     

       16
       16
       +
                      id_prefix='d', **svg_args)

     

       17
       17
       +
       ```

     

       18
       18
       +
       

     

       19
       19
       +
       It is recommended to use a unique `id_prefix` for each svg if you embed multiple on a web page.

     

       20
       20
       +
       

     

       21
       21
       +
       ```python

     

       22
       22
       +
       d = dw.Drawing(400, 300, id_prefix='pic')

     

       23
       23
       +
       ```

     

       24
       24
       +
       

     

       25
       25
       +
       

     

       26
       26
       +
       ## Basic Shapes

     

       27
       27
       +
       

     

       28
       28
       +
       ### One Line

     

       29
       29
       +
       

     

       30
       30
       +
       ```python

     

       31
       31
       +
       dw.Line(sx, sy, ex, ey, **kwargs)

     

       32
       32
       +
       ```

     

       33
       33
       +
       

     

       34
       34
       +
       ```python

     

       35
       35
       +
       line = dw.Line(30, 30, 90, 90, stroke='black')

     

       36
       36
       +
       d.append(line)

     

       37
       37
       +
       ```

     

       38
       38
       +
       

     

       39
       39
       +
       ![svg](img/01_line.svg)

     

       40
       40
       +
       

     

       41
       41
       +
       

     

       42
       42
       +
       ### Multiple Lines

     

       43
       43
       +
       

     

       44
       44
       +
       This is SVG's `polyline` (but drawsvg renders as path with multiple L).

     

       45
       45
       +
       

     

       46
       46
       +
       ```python

     

       47
       47
       +
       dw.Lines(sx, sy, *points, close=False, **kwargs)

     

       48
       48
       +
       ```

     

       49
       49
       +
       

     

       50
       50
       +
       ```python

     

       51
       51
       +
       lines = dw.Lines(10, 90, 10, 10, 80, 90, 80, 10,

     

       52
       52
       +
                        fill='none', stroke='black')

     

       53
       53
       +
       d.append(lines)

     

       54
       54
       +
       ```

     

       55
       55
       +
       

     

       56
       56
       +
       ![svg](img/01_multilines.svg)

     

       57
       57
       +
       

     

       58
       58
       +
       

     

       59
       59
       +
       ```python

     

       60
       60
       +
       x = [30 + x*10 for x in range(20)]

     

       61
       61
       +
       y = [80, 20]*10

     

       62
       62
       +
       xy = [item for sublist in zip(x, y) for item in sublist]

     

       63
       63
       +
       d.append(dw.Lines(*xy, stroke='black', stroke_width=5, fill='none'))

     

       64
       64
       +
       ```

     

       65
       65
       +
       

     

       66
       66
       +
       ![svg](img/01_multilines2.svg)

     

       67
       67
       +
       

     

       68
       68
       +
       

     

       69
       69
       +
       ### Polygon

     

       70
       70
       +
       

     

       71
       71
       +
       SVG `Polygon` is drawsvg `Lines` with `close=True`.

     

       72
       72
       +
       

     

       73
       73
       +
       ```python

     

       74
       74
       +
       polygon = dw.Lines(15, 10, 55, 10, 45, 20, 5, 20,

     

       75
       75
       +
                          fill='red', stroke='black', close='true')

     

       76
       76
       +
       star = dw.Lines(48, 16, 16, 96, 96, 48, 0, 48, 88, 96,

     

       77
       77
       +
                       stroke='black', fill='none', close='true')

     

       78
       78
       +
       d.append(star)

     

       79
       79
       +
       ```

     

       80
       80
       +
       

     

       81
       81
       +
       ![svg](img/01_polygon.svg)

     

       82
       82
       +
       

     

       83
       83
       +
       

     

       84
       84
       +
       ### Rectangle

     

       85
       85
       +
       

     

       86
       86
       +
       ```python

     

       87
       87
       +
       dw.Rectangle(x, y, width, height, **kwargs)

     

       88
       88
       +
       ```

     

       89
       89
       +
       

     

       90
       90
       +
       ```python

     

       91
       91
       +
       # Black interior, no outline

     

       92
       92
       +
       d.append(dw.Rectangle(10, 10, 90, 150))

     

       93
       93
       +
       # No interior, black outline

     

       94
       94
       +
       d.append(dw.Rectangle(120, 10, 60, 120,

     

       95
       95
       +
                             fill='none', stroke='black'))

     

       96
       96
       +
       # Blue interior, thick semi-transparent red outline

     

       97
       97
       +
       d.append(dw.Rectangle(210, 10, 75, 90,

     

       98
       98
       +
                             fill='#0000ff', stroke='red',

     

       99
       99
       +
                             stroke_width=7, stroke_opacity=0.5))

     

       100
       100
       +
       # Semi-transparent yellow interior, dashed green outline

     

       101
       101
       +
       d.append(dw.Rectangle(300, 10, 105, 60,

     

       102
       102
       +
                             fill='yellow', fill_opacity=0.5,

     

       103
       103
       +
                             stroke='green', stroke_width=2,

     

       104
       104
       +
                             stroke_dasharray='5,2'))

     

       105
       105
       +
       ```

     

       106
       106
       +
       

     

       107
       107
       +
       ![svg](img/01_rect.svg)

     

       108
       108
       +
       

     

       109
       109
       +
       Rounded corners:

     

       110
       110
       +
       

     

       111
       111
       +
       ```python

     

       112
       112
       +
       # Define both rx and ry

     

       113
       113
       +
       d.append(dw.Rectangle(10, 10, 80, 180, rx='10', ry='10',

     

       114
       114
       +
                             stroke='black', fill='none'))

     

       115
       115
       +
       # If only one is given, it applies to both

     

       116
       116
       +
       d.append(dw.Rectangle(110, 10, 80, 180, ry='20',

     

       117
       117
       +
                             stroke='black', fill='none'))

     

       118
       118
       +
       d.append(dw.Rectangle(210, 10, 80, 180, rx='40',

     

       119
       119
       +
                             stroke='black', fill='none'))

     

       120
       120
       +
       # Rx and ry unequal

     

       121
       121
       +
       d.append(dw.Rectangle(310, 10, 80, 180, rx='30', ry='10',

     

       122
       122
       +
                             stroke='black', fill='none'))

     

       123
       123
       +
       d.append(dw.Rectangle(410, 10, 80, 180, rx='10', ry='30',

     

       124
       124
       +
                             stroke='black', fill='none'))

     

       125
       125
       +
       ```

     

       126
       126
       +
       

     

       127
       127
       +
       ![svg](img/01_rectround.svg)

     

       128
       128
       +
       

     

       129
       129
       +
       

     

       130
       130
       +
       ### Circle

     

       131
       131
       +
       

     

       132
       132
       +
       ```python

     

       133
       133
       +
       dw.Circle(cx, cy, r, **kwargs)

     

       134
       134
       +
       ```

     

       135
       135
       +
       

     

       136
       136
       +
       cx and cy point to circle's center, r refer to its radius

     

       137
       137
       +
       

     

       138
       138
       +
       ```python

     

       139
       139
       +
       d.append(dw.Circle(50, 50, 40))

     

       140
       140
       +
       d.append(dw.Circle(150, 50, 40,

     

       141
       141
       +
                          stroke='black', fill='none'))

     

       142
       142
       +
       d.append(dw.Circle(250, 50, 40,

     

       143
       143
       +
                          stroke='black', fill='none',

     

       144
       144
       +
                          stroke_width=15))

     

       145
       145
       +
       ```

     

       146
       146
       +
       

     

       147
       147
       +
       ![svg](img/01_circ.svg)

     

       148
       148
       +
       

     

       149
       149
       +
       

     

       150
       150
       +
       ### Ellipse

     

       151
       151
       +
       

     

       152
       152
       +
       ```python

     

       153
       153
       +
       dw.Ellipse(cx, cy, rx, ry, **kwarg)

     

       154
       154
       +
       ```

     

       155
       155
       +
       (cx,cy) points to the center and (rx,ry) tells its radius

     

       156
       156
       +
       

     

       157
       157
       +
       ```python

     

       158
       158
       +
       d.append(dw.Ellipse(50, 50, 50, 30))

     

       159
       159
       +
       d.append(dw.Ellipse(160, 50, 50, 30,

     

       160
       160
       +
                           stroke='black', fill='none'))

     

       161
       161
       +
       d.append(dw.Ellipse(250, 50, 30, 45,

     

       162
       162
       +
                           stroke='black',fill='none'))

     

       163
       163
       +
       ```

     

       164
       164
       +
       

     

       165
       165
       +
       ![svg](img/01_ellip.svg)

     

       166
       166
       +
       

     

       167
       167
       +
       

     

       168
       168
       +
       

     

       169
       169
       +
       ## Color and Painting Properties

     

       170
       170
       +
       

     

       171
       171
       +
       For a full list, see [W3C specifications](https://www.w3.org/TR/SVG11/styling.html).

     

       172
       172
       +
       

     

       173
       173
       +
       

     

       174
       174
       +
       ### fill and stroke\_color

     

       175
       175
       +
       

     

       176
       176
       +
       Some color keyword names are:

     

       177
       177
       +
       aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

     

       178
       178
       +
       

     

       179
       179
       +
       Also supported is `#rrggbb`, `#rgb` (hexadecimal), or `rgb(R,G,B)` with 0-255 or with 0-100% for each value.

     

       180
       180
       +
       

     

       181
       181
       +
       ```python

     

       182
       182
       +
       c = ['red', '#9f9', '#9999ff', 'rgb(255,128,64)', 'rgb(60%,20%,60%)']

     

       183
       183
       +
       for i in range(5):

     

       184
       184
       +
           y = (i + 1)*10

     

       185
       185
       +
           d.append(dw.Line(10, y, 80, y,

     

       186
       186
       +
                            stroke=c[i], stroke_width=5))

     

       187
       187
       +
       ```

     

       188
       188
       +
       

     

       189
       189
       +
       ![svg](img/02_fsc.svg)

     

       190
       190
       +
       

     

       191
       191
       +
       

     

       192
       192
       +
       ### fill\_opacity and stroke\_opacity

     

       193
       193
       +
       

     

       194
       194
       +
       Value range from 0 = transparent to 1 = solid.

     

       195
       195
       +
       

     

       196
       196
       +
       ```python

     

       197
       197
       +
       for i in range(5):

     

       198
       198
       +
           y = (i + 1)*10

     

       199
       199
       +
           d.append(dw.Line(0, y, 290, y,

     

       200
       200
       +
                            stroke='black', stroke_width=5,

     

       201
       201
       +
                            stroke_opacity=i/5 + 0.1))

     

       202
       202
       +
           d.append(dw.Rectangle(i*60, 70, 50, 50,

     

       203
       203
       +
                                 fill='red', fill_opacity=i/5+0.1))

     

       204
       204
       +
       ```

     

       205
       205
       +
       

     

       206
       206
       +
       ![svg](img/02_foso.svg)

     

       207
       207
       +
       

     

       208
       208
       +
       

     

       209
       209
       +
       ### stroke\_dasharray

     

       210
       210
       +
       

     

       211
       211
       +
       ```python

     

       212
       212
       +
       # Nine-pixel dash, five-pixel gap

     

       213
       213
       +
       d.append(dw.Line(10, 10, 100, 10,

     

       214
       214
       +
                        stroke='black', stroke_width=2,

     

       215
       215
       +
                        stroke_dasharray='9,5'))

     

       216
       216
       +
       # Five-pixel dash, three-pixel gap, nine-pixel dash, two-pixel gap

     

       217
       217
       +
       d.append(dw.Line(10, 20, 100, 20,

     

       218
       218
       +
                        stroke='black', stroke_width=2,

     

       219
       219
       +
                        stroke_dasharray='5,3,9,2'))

     

       220
       220
       +
       # Odd number of entries alternates dashes and gaps

     

       221
       221
       +
       d.append(dw.Line(10, 30, 100, 30,

     

       222
       222
       +
                        stroke='black', stroke_width=2,

     

       223
       223
       +
                        stroke_dasharray='9,3,5'))

     

       224
       224
       +
       ```

     

       225
       225
       +
       

     

       226
       226
       +
       ![svg](img/02_dash.svg)

     

       227
       227
       +
       

     

       228
       228
       +
       

     

       229
       229
       +
       ### stroke\_width

     

       230
       230
       +
       

     

       231
       231
       +
       ```python

     

       232
       232
       +
       for i in range(20):

     

       233
       233
       +
           d.append(dw.Line((i+1)*15, 10, (i+1)*15, 90,

     

       234
       234
       +
                            stroke='black', stroke_width=abs(10-i)+1))

     

       235
       235
       +
       ```

     

       236
       236
       +
       

     

       237
       237
       +
       ![svg](img/02_strokewdth.svg)

     

       238
       238
       +
       

     

       239
       239
       +
       

     

       240
       240
       +
       ### stroke\_linecap

     

       241
       241
       +
       

     

       242
       242
       +
       `stroke_linecap` can be set to `butt`, `round`, or `square`.

     

       243
       243
       +
       Note that the latter two extend beyond the end coordinates.

     

       244
       244
       +
       

     

       245
       245
       +
       ```python

     

       246
       246
       +
       d.append(dw.Line(10, 15, 50, 15,

     

       247
       247
       +
                        stroke='black', stroke_width=15,

     

       248
       248
       +
                        stroke_linecap='butt'))

     

       249
       249
       +
       d.append(dw.Line(10, 45, 50, 45,

     

       250
       250
       +
                        stroke='black', stroke_width=15,

     

       251
       251
       +
                        stroke_linecap='round'))

     

       252
       252
       +
       d.append(dw.Line(10, 75, 50, 75,

     

       253
       253
       +
                        stroke='black', stroke_width=15,

     

       254
       254
       +
                        stroke_linecap='square'))

     

       255
       255
       +
       # Guide lines

     

       256
       256
       +
       d.append(dw.Lines(10, 0, 10, 100, stroke='#999'))

     

       257
       257
       +
       d.append(dw.Lines(50, 0, 50, 100, stroke='#999'))

     

       258
       258
       +
       ```

     

       259
       259
       +
       

     

       260
       260
       +
       ![svg](img/02_linecap.svg)

     

       261
       261
       +
       

     

       262
       262
       +
       

     

       263
       263
       +
       ### stroke\_linejoin

     

       264
       264
       +
       

     

       265
       265
       +
       Define the way lines connect at a corner with `stroke-linejoin`: `miter` (pointed), `round`, or `bevel` (flat).

     

       266
       266
       +
       

     

       267
       267
       +
       ```python

     

       268
       268
       +
       d.append(dw.Line(0, 20, 300, 20, stroke='gray'))

     

       269
       269
       +
       g = dw.Group(stroke_width=20, stroke='black', fill='none')

     

       270
       270
       +
       g.append(dw.Lines(10, 80, 50, 20, 90, 80,

     

       271
       271
       +
                         stroke_linejoin='miter'))

     

       272
       272
       +
       g.append(dw.Lines(110, 80, 150, 20, 190, 80,

     

       273
       273
       +
                         stroke_linejoin='round'))

     

       274
       274
       +
       g.append(dw.Lines(210, 80, 250, 20, 290, 80,

     

       275
       275
       +
                         stroke_linejoin='bevel'))

     

       276
       276
       +
       d.append(g)

     

       277
       277
       +
       ```

     

       278
       278
       +
       

     

       279
       279
       +
       ![svg](img/02_join.svg)

     

       280
       280
       +
       

     

       281
       281
       +
       

     

       282
       282
       +
       ### stroke\_miterlimit

     

       283
       283
       +
       

     

       284
       284
       +
       When two line segments meet at a sharp angle and miter joins have been specified for `stroke-linejoin`,

     

       285
       285
       +
       it is possible for the miter to extend far beyond the thickness of the line stroking the path.

     

       286
       286
       +
       The `stroke-miterlimit` imposes a limit on the ratio of the miter length to the `stroke-width`.

     

       287
       287
       +
       When the limit is exceeded, the join is converted from a miter to a bevel.

     

       288
       288
       +
       (From [W3C doc](https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty))

     

       289
       289
       +
       

     

       290
       290
       +
       ```python

     

       291
       291
       +
       d.append(dw.Line(0, 30, 300, 30, stroke='gray'))

     

       292
       292
       +
       g = dw.Group(stroke_width=20, stroke='black',

     

       293
       293
       +
                    fill='none', stroke_linejoin='miter')

     

       294
       294
       +
       g.append(dw.Lines(10, 90, 40, 30, 70, 90))

     

       295
       295
       +
       g.append(dw.Lines(100, 90, 130, 30, 160, 90,

     

       296
       296
       +
                         stroke_miterlimit=2.3))

     

       297
       297
       +
       g.append(dw.Lines(190, 90, 220, 30, 250, 90,

     

       298
       298
       +
                         stroke_miterlimit=1))

     

       299
       299
       +
       d.append(g)

     

       300
       300
       +
       ```

     

       301
       301
       +
       

     

       302
       302
       +
       ![svg](img/02_mlimit.svg)

     

       303
       303
       +
       

     

       304
       304
       +
       

     

       305
       305
       +
       ## Path

     

       306
       306
       +
       

     

       307
       307
       +
       ```python

     

       308
       308
       +
       path = dw.Path(**kwargs)

     

       309
       309
       +
       ```

     

       310
       310
       +
       

     

       311
       311
       +
       The following Path specifiers are also available as lowercase characters.

     

       312
       312
       +
       In that case, their movements are relative to current location.

     

       313
       313
       +
       

     

       314
       314
       +
       

     

       315
       315
       +
       ### M: moveto

     

       316
       316
       +
       

     

       317
       317
       +
       ```python

     

       318
       318
       +
       path.M(x, y)

     

       319
       319
       +
       ```

     

       320
       320
       +
       

     

       321
       321
       +
       Move to `x, y` (and draw nothing).

     

       322
       322
       +
       

     

       323
       323
       +
       

     

       324
       324
       +
       ### L: lineto

     

       325
       325
       +
       

     

       326
       326
       +
       ```python

     

       327
       327
       +
       path.L(x, y)

     

       328
       328
       +
       ```

     

       329
       329
       +
       

     

       330
       330
       +
       Draw a straight line to `x, y`.

     

       331
       331
       +
       

     

       332
       332
       +
       ```python

     

       333
       333
       +
       g = dw.Group(stroke='black', fill='none')

     

       334
       334
       +
       

     

       335
       335
       +
       p = dw.Path()

     

       336
       336
       +
       p.M(10, 10).L(100, 10)

     

       337
       337
       +
       g.append(p)

     

       338
       338
       +
       

     

       339
       339
       +
       p = dw.Path()

     

       340
       340
       +
       p.M(10, 20).L(100, 20).L(100, 50)

     

       341
       341
       +
       g.append(p)

     

       342
       342
       +
       

     

       343
       343
       +
       p = dw.Path()

     

       344
       344
       +
       p.M(40, 60).L(10, 60).L(40, 42)

     

       345
       345
       +
       p.M(60, 60).L(90, 60).L(60, 42)

     

       346
       346
       +
       g.append(p)

     

       347
       347
       +
       

     

       348
       348
       +
       d.append(g)

     

       349
       349
       +
       ```

     

       350
       350
       +
       

     

       351
       351
       +
       ![svg](img/03_pL.svg)

     

       352
       352
       +
       

     

       353
       353
       +
       

     

       354
       354
       +
       ### H: horizontal line

     

       355
       355
       +
       

     

       356
       356
       +
       ```python

     

       357
       357
       +
       path.H(x)

     

       358
       358
       +
       ```

     

       359
       359
       +
       

     

       360
       360
       +
       Draw a horizontal line to the new `x` location.

     

       361
       361
       +
       

     

       362
       362
       +
       

     

       363
       363
       +
       ### V: vertical line

     

       364
       364
       +
       

     

       365
       365
       +
       ```python

     

       366
       366
       +
       path.V(y)

     

       367
       367
       +
       ```

     

       368
       368
       +
       

     

       369
       369
       +
       Draw a vertical line to the new `y` location.

     

       370
       370
       +
       

     

       371
       371
       +
       ```python

     

       372
       372
       +
       p = dw.Path(stroke='black', fill='none')

     

       373
       373
       +
       d.append(p.M(10, 10).H(100))

     

       374
       374
       +
       d.append(p.M(10, 20).H(100).V(50))

     

       375
       375
       +
       ```

     

       376
       376
       +
       ![svg](img/03_pHV.svg)

     

       377
       377
       +
       

     

       378
       378
       +
       

     

       379
       379
       +
       ### Q: quadratic Bézier curve (one control point)

     

       380
       380
       +
       

     

       381
       381
       +
       ```python

     

       382
       382
       +
       path.Q(x_ctl, y_ctl, x_end, y_end)

     

       383
       383
       +
       ```

     

       384
       384
       +
       

     

       385
       385
       +
       Draw a quadratic Bézier curve from current location to `x_end, y_end` by means of `x_ctl, y_ctl`.

     

       386
       386
       +
       

     

       387
       387
       +
       ```python

     

       388
       388
       +
       # Curve only (left)

     

       389
       389
       +
       p = dw.Path(stroke='black', fill='none', stroke_width=3)

     

       390
       390
       +
       d.append(p.M(30, 75).Q(240, 30, 300, 120))

     

       391
       391
       +
       # With control point and construction lines

     

       392
       392
       +
       d.append(dw.Use(p, 300, 0))

     

       393
       393
       +
       g = dw.Group(stroke='gray', fill='gray')

     

       394
       394
       +
       g.append(dw.Circle(330, 75, 3))

     

       395
       395
       +
       g.append(dw.Circle(600, 120, 3))

     

       396
       396
       +
       g.append(dw.Circle(540, 30, 3))

     

       397
       397
       +
       g.append(dw.Line(330, 75, 540, 30))

     

       398
       398
       +
       g.append(dw.Line(540, 30, 600, 120))

     

       399
       399
       +
       g.append(dw.Line(330, 75, 600, 120, stroke_dasharray='5,5'))

     

       400
       400
       +
       g.append(dw.Circle(435, 52.5, 3))

     

       401
       401
       +
       g.append(dw.Circle(570, 75, 3))

     

       402
       402
       +
       g.append(dw.Line(435, 52.5, 570, 75))

     

       403
       403
       +
       g.append(dw.Circle(502.5, 63.75, 4, fill='none'))

     

       404
       404
       +
       d.append(g)

     

       405
       405
       +
       ```

     

       406
       406
       +
       

     

       407
       407
       +
       ![svg](img/03_pQ.svg)

     

       408
       408
       +
       

     

       409
       409
       +
       

     

       410
       410
       +
       ### T: smooth quadratic Bézier curve (generated control point)

     

       411
       411
       +
       

     

       412
       412
       +
       ```python

     

       413
       413
       +
       path.T(x, y)

     

       414
       414
       +
       ```

     

       415
       415
       +
       

     

       416
       416
       +
       Draws a quadratic Bézier curve from the current point to (x, y).

     

       417
       417
       +
       The control point is assumed to be the reflection of the control point on the previous command relative to the current point.

     

       418
       418
       +
       If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.

     

       419
       419
       +
       (From [W3C Doc](https://www.w3.org/TR/SVG11/paths.html#PathDataQuadraticBezierCommands))

     

       420
       420
       +
       

     

       421
       421
       +
       ```python

     

       422
       422
       +
       # Curve sequence (left)

     

       423
       423
       +
       p = dw.Path(stroke='black', fill='none', stroke_width=3)

     

       424
       424
       +
       d.append(p.M(30, 60).Q(80, -10, 100, 60).Q(130, 25, 200, 40))

     

       425
       425
       +
       # With smooth continuation (right)

     

       426
       426
       +
       p = dw.Path(stroke='black', fill='none', stroke_width=3,

     

       427
       427
       +
                   transform='translate(200,0)')

     

       428
       428
       +
       d.append(p.M(30, 60).Q(80, -10, 100, 60).T(200, 40))

     

       429
       429
       +
       ```

     

       430
       430
       +
       

     

       431
       431
       +
       ![svg](img/03_pT.svg)

     

       432
       432
       +
       

     

       433
       433
       +
       

     

       434
       434
       +
       ### C: cubic Bézier curve (two control points)

     

       435
       435
       +
       

     

       436
       436
       +
       ```python

     

       437
       437
       +
       path.C(x_ctl_1, y_ctl_1, x_ctl_2, y_ctl_2, x_end, y_end)

     

       438
       438
       +
       ```

     

       439
       439
       +
       

     

       440
       440
       +
       Draw a cubic Bézier curve by means of two control points (one for start and one for end).

     

       441
       441
       +
       

     

       442
       442
       +
       ```python

     

       443
       443
       +
       pnt_1 = (40, 50)

     

       444
       444
       +
       pnt_2 = (110, 50)

     

       445
       445
       +
       ctl_1_x = (10, 60, 110, 110, 60, 110)

     

       446
       446
       +
       ctls_2 = ((140, 10), (90, 10), (40, 10), (40, 10), (90, 90), (40, 90))

     

       447
       447
       +
       

     

       448
       448
       +
       for i in range(6):

     

       449
       449
       +
           trans = f'translate({i*100},0)'

     

       450
       450
       +
           p = dw.Path(stroke='black', fill='none',

     

       451
       451
       +
                       stroke_width=3, transform=trans)

     

       452
       452
       +
           ctl_1 = (ctl_1_x[i], 10)

     

       453
       453
       +
           ctl_2 = ctls_2[i]

     

       454
       454
       +
           p.M(*pnt_1)

     

       455
       455
       +
           p.C(*ctl_1, *ctl_2, *pnt_2)

     

       456
       456
       +
           d.append(p)

     

       457
       457
       +
           g = dw.Group(stroke='gray', fill='gray',

     

       458
       458
       +
                        stroke_width=1, transform=trans)

     

       459
       459
       +
           g.append(dw.Circle(*ctl_1, 2))

     

       460
       460
       +
           g.append(dw.Circle(*ctl_2, 2))

     

       461
       461
       +
           g.append(dw.Line(*pnt_1, *ctl_1))

     

       462
       462
       +
           g.append(dw.Line(*pnt_2, *ctl_2))

     

       463
       463
       +
           d.append(g)

     

       464
       464
       +
       ```

     

       465
       465
       +
       

     

       466
       466
       +
       ![svg](img/03_pC.svg)

     

       467
       467
       +
       

     

       468
       468
       +
       

     

       469
       469
       +
       ### S: smooth cubic Bézier (one control point)

     

       470
       470
       +
       

     

       471
       471
       +
       Similar to `T` in quadratic Bézier curve. The first control point is calculated as reflection of the previous second control point.

     

       472
       472
       +
       

     

       473
       473
       +
       ```python

     

       474
       474
       +
       path.S(x_ctl_2, y_ctl_2, x_end, y_end)

     

       475
       475
       +
       ```

     

       476
       476
       +
       

     

       477
       477
       +
       ```python

     

       478
       478
       +
       pnt_1 = (30, 100)

     

       479
       479
       +
       pnt_2 = (100, 100)

     

       480
       480
       +
       pnt_3 = (200, 80)

     

       481
       481
       +
       ctl_1 = (50, 30)

     

       482
       482
       +
       ctl_2 = (70, 50)

     

       483
       483
       +
       ctl_3 = (150, 40)

     

       484
       484
       +
       

     

       485
       485
       +
       p = dw.Path(stroke='black', fill='none', stroke_width=3)

     

       486
       486
       +
       p.M(*pnt_1)

     

       487
       487
       +
       p.C(*ctl_1, *ctl_2, *pnt_2)

     

       488
       488
       +
       p.S(*ctl_3, *pnt_3)

     

       489
       489
       +
       d.append(p)

     

       490
       490
       +
       

     

       491
       491
       +
       for pnt, ctl in zip((pnt_1, pnt_2, pnt_3), (ctl_1, ctl_2, ctl_3)):

     

       492
       492
       +
           d.append(dw.Circle(*pnt, 4))

     

       493
       493
       +
           d.append(dw.Circle(*ctl, 2, stroke='gray', fill='gray'))

     

       494
       494
       +
           d.append(dw.Line(*pnt, *ctl, stroke='gray'))

     

       495
       495
       +
       ```

     

       496
       496
       +
       

     

       497
       497
       +
       ![svg](img/03_pS.svg)

     

       498
       498
       +
       

     

       499
       499
       +
       

     

       500
       500
       +
       ### A: elliptical Arc

     

       501
       501
       +
       

     

       502
       502
       +
       ```python

     

       503
       503
       +
       path.A(rx, ry, rot, largeArc, sweep, ex, ey)

     

       504
       504
       +
       

     

       505
       505
       +
           rx, ry: radius

     

       506
       506
       +
           rot: x-axis rotation

     

       507
       507
       +
           largeArc: True or False

     

       508
       508
       +
           sweep: True (positive) or False (negative) angle

     

       509
       509
       +
           ex, ey: end point

     

       510
       510
       +
       ```

     

       511
       511
       +
       

     

       512
       512
       +
       ```python

     

       513
       513
       +
       p = dw.Path(stroke='red')

     

       514
       514
       +
       d.append(p.M(125, 75).A(100, 50, rot=0, large_arc=0, sweep=0, ex=225, ey=125))

     

       515
       515
       +
       p = dw.Path(stroke='blue')

     

       516
       516
       +
       d.append(p.M(125, 75).A(100, 50, rot=0, large_arc=0, sweep=1, ex=225, ey=125))

     

       517
       517
       +
       p = dw.Path(stroke='rgb(0 80 255)',stroke_dasharray='5 3')

     

       518
       518
       +
       d.append(p.M(125, 75).A(100, 50, rot=0, large_arc=1, sweep=0, ex=225, ey=125))

     

       519
       519
       +
       p = dw.Path(stroke='rgb(255 80 0)',stroke_dasharray='5 3')

     

       520
       520
       +
       d.append(p.M(125, 75).A(100, 50, rot=0, large_arc=1, sweep=1, ex=225, ey=125))

     

       521
       521
       +
       ```

     

       522
       522
       +
       

     

       523
       523
       +
       ![svg](img/03_pA.svg)

     

       524
       524
       +
       

     

       525
       525
       +
       

     

       526
       526
       +
       ### Z: closepath

     

       527
       527
       +
       

     

       528
       528
       +
       ```python

     

       529
       529
       +
       path.Z()

     

       530
       530
       +
       ```

     

       531
       531
       +
       

     

       532
       532
       +
       Close the path.

     

       533
       533
       +
       

     

       534
       534
       +
       ```python

     

       535
       535
       +
       p = dw.Path(stroke='black', fill='none')

     

       536
       536
       +
       d.append(p.M(10, 10).h(30).v(50).h(-30).Z())

     

       537
       537
       +
       d.append(p.M(50, 10).h(30).v(50).Z())

     

       538
       538
       +
       ```

     

       539
       539
       +
       

     

       540
       540
       +
       ![svg](img/03_pZ.svg)

     

       541
       541
       +
       

     

       542
       542
       +
       

     

       543
       543
       +
       ## Text

     

       544
       544
       +
       ```python

     

       545
       545
       +
       dw.Text(text, fontSize, x=None, y=None, *, center=False,

     

       546
       546
       +
               line_height=1, line_offset=0, path=None,

     

       547
       547
       +
               start_offset=None, path_args=None, tspan_args=None,

     

       548
       548
       +
               cairo_fix=True, **kwargs)

     

       549
       549
       +
       ```

     

       550
       550
       +
       

     

       551
       551
       +
       ### Fill and Outline

     

       552
       552
       +
       

     

       553
       553
       +
       Default is black as fill color and no outline.

     

       554
       554
       +
       

     

       555
       555
       +
       ```python

     

       556
       556
       +
       # Reference lines

     

       557
       557
       +
       l = dw.Path(stroke='gray')

     

       558
       558
       +
       l.M(20, 0).V(370)

     

       559
       559
       +
       for i in range(1, 7):

     

       560
       560
       +
           l.M(10, i*60).H(500)

     

       561
       561
       +
       d.append(l)

     

       562
       562
       +
       

     

       563
       563
       +
       d.append(dw.Text('Simplest Text', font_size=50, x=20, y=60))

     

       564
       564
       +
       d.append(dw.Text('Outline / Filled', font_size=50, x=20, y=120, stroke='black'))

     

       565
       565
       +
       d.append(dw.Text('Too big stroke', font_size=50, x=20, y=180, stroke='black', stroke_width=5))

     

       566
       566
       +
       d.append(dw.Text('Outlined only', font_size=50, x=20, y=240, stroke='black', stroke_width=0.5, fill='none'))

     

       567
       567
       +
       d.append(dw.Text('Outlined and colored', font_size=50, x=20, y=300, stroke='black', fill='red'))

     

       568
       568
       +
       d.append(dw.Text('Colored fill only', font_size=50, x=20, y=360, fill='blue'))

     

       569
       569
       +
       ```

     

       570
       570
       +
       

     

       571
       571
       +
       ![svg](img/04_fill.svg)

     

       572
       572
       +
       

     

       573
       573
       +
       

     

       574
       574
       +
       ### Weight, Style, Decoration, Spacing

     

       575
       575
       +
       

     

       576
       576
       +
       ```python

     

       577
       577
       +
       d.append(dw.Text('bold', font_size=30, x=20, y=35, font_weight='bold'))

     

       578
       578
       +
       d.append(dw.Text('italic', font_size=30, x=20, y=75, font_style='italic'))

     

       579
       579
       +
       d.append(dw.Text('under', font_size=30, x=20, y=115, text_decoration='underline'))

     

       580
       580
       +
       d.append(dw.Text('over', font_size=30, x=20, y=155, text_decoration='overline'))

     

       581
       581
       +
       d.append(dw.Text('through', font_size=30, x=20, y=195, text_decoration='line-through'))

     

       582
       582
       +
       d.append(dw.Text('normal word space', font_size=30, x=200, y=35))

     

       583
       583
       +
       d.append(dw.Text('more word space', font_size=30, x=200, y=75, word_spacing=10))

     

       584
       584
       +
       d.append(dw.Text('less word space', font_size=30, x=200, y=115, word_spacing=-5))

     

       585
       585
       +
       d.append(dw.Text('wide letter space', font_size=30, x=200, y=155, letter_spacing=8))

     

       586
       586
       +
       d.append(dw.Text('narrow letter space', font_size=30, x=200, y=195, letter_spacing=-2))

     

       587
       587
       +
       ```

     

       588
       588
       +
       

     

       589
       589
       +
       ![svg](img/04_weight.svg)

     

       590
       590
       +
       

     

       591
       591
       +
       

     

       592
       592
       +
       ### Text Alignment

     

       593
       593
       +
       

     

       594
       594
       +
       Horizontal alignment (`text_anchor`) can be `'start'`, `'middle'` or `'end'`.

     

       595
       595
       +
       

     

       596
       596
       +
       Vertical alignment (`dominant_baseline`) can be `'auto'`, `'middle'` or `'hanging'`

     

       597
       597
       +
       (and more, see [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)).

     

       598
       598
       +
       

     

       599
       599
       +
       ```python

     

       600
       600
       +
       d.append(dw.Line(75, 100, 75, 0, stroke='gray'))

     

       601
       601
       +
       d.append(dw.Line(140, 30, 250, 30, stroke='gray'))

     

       602
       602
       +
       d.append(dw.Line(140, 60, 250, 60, stroke='gray'))

     

       603
       603
       +
       d.append(dw.Line(140, 90, 250, 90, stroke='gray'))

     

       604
       604
       +
       d.append(dw.Text('Start', 24, 75, 30, text_anchor='start'))

     

       605
       605
       +
       d.append(dw.Text('Middle', 24, 75, 60, text_anchor='middle'))

     

       606
       606
       +
       d.append(dw.Text('End', 24, 75, 90, text_anchor='end'))

     

       607
       607
       +
       d.append(dw.Text('Auto', 24, 150, 30, dominant_baseline='auto'))

     

       608
       608
       +
       d.append(dw.Text('Middle', 24, 150, 60, dominant_baseline='middle'))

     

       609
       609
       +
       d.append(dw.Text('Hanging', 24, 150, 90, dominant_baseline='hanging'))

     

       610
       610
       +
       ```

     

       611
       611
       +
       

     

       612
       612
       +
       ![svg](img/04_align.svg)

     

       613
       613
       +
       

     

       614
       614
       +
       

     

       615
       615
       +
       ### TSpan

     

       616
       616
       +
       

     

       617
       617
       +
       Continues a `Text` element.

     

       618
       618
       +
       

     

       619
       619
       +
       ```python

     

       620
       620
       +
       txt = dw.Text('Switch among ', 24, 10, 40)

     

       621
       621
       +
       txt.append(dw.TSpan('italic', font_style='italic'))

     

       622
       622
       +
       txt.append(dw.TSpan(', normal, and '))

     

       623
       623
       +
       txt.append(dw.TSpan('bold', font_weight='bold'))

     

       624
       624
       +
       txt.append(dw.TSpan(' text.'))

     

       625
       625
       +
       d.append(txt)

     

       626
       626
       +
       ```

     

       627
       627
       +
       

     

       628
       628
       +
       ![svg](img/04_tspan.svg)

     

       629
       629
       +
       

     

       630
       630
       +
       

     

       631
       631
       +
       ```python

     

       632
       632
       +
       txt = dw.Text('F', 24, 10, 30)

     

       633
       633
       +
       txt.append(dw.TSpan('a', dy=5))

     

       634
       634
       +
       txt.append(dw.TSpan('l', dy=31, dx=21))

     

       635
       635
       +
       txt.append(dw.TSpan('l', dy=89, dx=54))

     

       636
       636
       +
       d.append(txt)

     

       637
       637
       +
       ```

     

       638
       638
       +
       

     

       639
       639
       +
       ![svg](img/04_tspan2.svg)

     

       640
       640
       +
       

     

       641
       641
       +
       The same could be achieved by a list of dx/dy values:

     

       642
       642
       +
       

     

       643
       643
       +
       ```python

     

       644
       644
       +
       d.append(dw.Text('Fall', 24, 10, 30,

     

       645
       645
       +
                        dx='0,0,21,54', dy='0,5,21,54'))

     

       646
       646
       +
       ```

     

       647
       647
       +
       

     

       648
       648
       +
       ![svg](img/04_tspan3.svg)

     

       649
       649
       +
       

     

       650
       650
       +
       

     

       651
       651
       +
       ### Rotate

     

       652
       652
       +
       

     

       653
       653
       +
       Either one angle (degrees), or a list which is applied to all characters.

     

       654
       654
       +
       If the list is smaller than the number of characters, the last angle persists.

     

       655
       655
       +
       

     

       656
       656
       +
       ```python

     

       657
       657
       +
       d.append(dw.Text('Rotate', 20, 20, 20, letter_spacing=20, rotate='90'))

     

       658
       658
       +
       d.append(dw.Text('Rotate', 20, 20, 80, letter_spacing=20, rotate='0 90 180 270'))

     

       659
       659
       +
       ```

     

       660
       660
       +
       

     

       661
       661
       +
       ![svg](img/04_rot.svg)

     

       662
       662
       +
       

     

       663
       663
       +
       `TSpan` can also be used:

     

       664
       664
       +
       

     

       665
       665
       +
       ```python

     

       666
       666
       +
       import random

     

       667
       667
       +
       random.seed(1)

     

       668
       668
       +
       

     

       669
       669
       +
       txt = dw.Text('', 20, 20, 50, letter_spacing=20)

     

       670
       670
       +
       txt.append(dw.TSpan('R', rotate=random.randrange(360)))

     

       671
       671
       +
       txt.append(dw.TSpan('OT', rotate='50 20'))

     

       672
       672
       +
       rotate = ' '.join([str(random.randrange(360)) for i in range(3)])

     

       673
       673
       +
       txt.append(dw.TSpan('ATE', rotate=rotate))

     

       674
       674
       +
       d.append(txt)

     

       675
       675
       +
       ```

     

       676
       676
       +
       

     

       677
       677
       +
       ![svg](img/04_rot2.svg)

     

       678
       678
       +
       

     

       679
       679
       +
       

     

       680
       680
       +
       ### Setting Text Length

     

       681
       681
       +
       

     

       682
       682
       +
       ```python

     

       683
       683
       +
       s = 'Two words'

     

       684
       684
       +
       d.append(dw.Text(s, 20, 20, 30, textLength=250, lengthAdjust='spacing'))

     

       685
       685
       +
       d.append(dw.Text(s, 20, 20, 70, textLength=250, lengthAdjust='spacingAndGlyphs'))

     

       686
       686
       +
       d.append(dw.Text(s+' (normal length)', 20, 20, 110))

     

       687
       687
       +
       d.append(dw.Text(s, 20, 20, 150, textLength=80, lengthAdjust='spacing'))

     

       688
       688
       +
       d.append(dw.Text(s, 20, 20, 190, textLength=80, lengthAdjust='spacingAndGlyphs'))

     

       689
       689
       +
       

     

       690
       690
       +
       d.append(dw.Line(20, 10, 20, 195, stroke='gray'))

     

       691
       691
       +
       d.append(dw.Line(270, 80, 270, 10, stroke='gray'))

     

       692
       692
       +
       d.append(dw.Line(100, 130, 100, 195, stroke='gray'))

     

       693
       693
       +
       ```

     

       694
       694
       +
       

     

       695
       695
       +
       ![svg](img/04_len.svg)

     

       696
       696
       +
       

     

       697
       697
       +
       

     

       698
       698
       +
       ### Text on a Path

     

       699
       699
       +
       

     

       700
       700
       +
       ```python

     

       701
       701
       +
       curve_path = dw.Path(stroke='gray', fill='none')

     

       702
       702
       +
       curve_path.M(30, 50).C(50, 20, 70, 20, 120, 50).S(150, 10, 200, 50)

     

       703
       703
       +
       

     

       704
       704
       +
       round_corner = dw.Path(stroke='gray', fill='none')

     

       705
       705
       +
       round_corner.M(250, 30).L(300, 30).A(30, 30, 0, 0, 1, 330, 60).L(330, 110)

     

       706
       706
       +
       

     

       707
       707
       +
       sharp_corner = dw.Path(stroke='gray', fill='none')

     

       708
       708
       +
       sharp_corner.M(30, 110).L(100, 110).L(100, 160)

     

       709
       709
       +
       

     

       710
       710
       +
       discontinuous = dw.Path(stroke='gray', fill='none')

     

       711
       711
       +
       discontinuous.M(150, 110).A(40, 30, 0, 1, 0, 230, 110).M(250, 110).L(270, 140)

     

       712
       712
       +
       

     

       713
       713
       +
       center_curve = dw.Path(stroke='gray', fill='none')

     

       714
       714
       +
       center_curve.M(330, 130).L(330, 160).A(30, 30, 0, 0, 1, 300, 180).L(200, 180)

     

       715
       715
       +
       

     

       716
       716
       +
       d.append(curve_path)

     

       717
       717
       +
       d.append(round_corner)

     

       718
       718
       +
       d.append(sharp_corner)

     

       719
       719
       +
       d.append(discontinuous)

     

       720
       720
       +
       d.append(center_curve)

     

       721
       721
       +
       

     

       722
       722
       +
       t_cp = dw.Text('Following a cubic Bézier curve', 14, path=curve_path)

     

       723
       723
       +
       t_rc = dw.Text("Going 'round the bend", 14, path=round_corner)

     

       724
       724
       +
       t_sc = dw.Text('Making a quick turn', 14, path=sharp_corner)

     

       725
       725
       +
       t_dc = dw.Text('Text along a broken path', 14, path=discontinuous)

     

       726
       726
       +
       t_ct = dw.Text('centered', 14, path=center_curve, offset='50%', text_anchor='middle')

     

       727
       727
       +
       

     

       728
       728
       +
       d.append(t_cp)

     

       729
       729
       +
       d.append(t_rc)

     

       730
       730
       +
       d.append(t_sc)

     

       731
       731
       +
       d.append(t_dc)

     

       732
       732
       +
       d.append(t_ct)

     

       733
       733
       +
       ```

     

       734
       734
       +
       

     

       735
       735
       +
       ![svg](img/04_path.svg)

     

       736
       736
       +
       

     

       737
       737
       +
       

     

       738
       738
       +
       ### Multi Line Text

     

       739
       739
       +
       

     

       740
       740
       +
       This is a particular feature of drawsvg: A list of strings as input for Text()

     

       741
       741
       +
       is rendered as multi-line text.

     

       742
       742
       +
       

     

       743
       743
       +
       ```python

     

       744
       744
       +
       tl = ['this is', 'a', 'multiline text', 'given as a', 'list']

     

       745
       745
       +
       d.append(dw.Text(tl, 14, 50, 20, text_anchor='middle'))

     

       746
       746
       +
       

     

       747
       747
       +
       ts = 'this is\na\nmultiline text\ngiven as a\nstring'

     

       748
       748
       +
       d.append(dw.Text(ts, 14, 150, 20, text_anchor='middle'))

     

       749
       749
       +
       ```

     

       750
       750
       +
       

     

       751
       751
       +
       ![svg](img/04_multiline_text.svg)

     

       752
       752
       +
       

     

       753
       753
       +
       

     

       754
       754
       +
       ### Fonts

     

       755
       755
       +
       

     

       756
       756
       +
       Specify fonts via `font_family`.

     

       757
       757
       +
       

     

       758
       758
       +
       ```python

     

       759
       759
       +
       d.append(dw.Text('Some text in Times New Roman.', 30, 10, 35, font_family='Times New Roman'))

     

       760
       760
       +
       d.append(dw.Text('Some text in Arial Black.', 30, 10, 75, font_family='Arial Black'))

     

       761
       761
       +
       d.append(dw.Text('Some text in Georgia.', 30, 10, 115, font_family='Georgia'))

     

       762
       762
       +
       ```

     

       763
       763
       +
       

     

       764
       764
       +
       ![png](img/04_fonts1.png)

     

       765
       765
       +
       

     

       766
       766
       +
       Specify a default font.

     

       767
       767
       +
       

     

       768
       768
       +
       ```python

     

       769
       769
       +
       d = dw.Drawing(600, 120, font_family='Times New Roman')

     

       770
       770
       +
       d.append(dw.Text('Some text in global setting (Times New Roman).', 30, 10, 35))

     

       771
       771
       +
       d.append(dw.Text('Some text in Arial Black.', 30, 10, 75, font_family='Arial Black'))

     

       772
       772
       +
       d.append(dw.Text('Some text in Georgia.', 30, 10, 115, font_family='Georgia'))

     

       773
       773
       +
       ```

     

       774
       774
       +
       

     

       775
       775
       +
       ![png](img/04_fonts2.png)

     

       776
       776
       +
       

     

       777
       777
       +
       

     

       778
       778
       +
       

     

       779
       779
       +
       ## Gradient, Clip, Mask

     

       780
       780
       +
       

     

       781
       781
       +
       ### Linear Gradient

     

       782
       782
       +
       

     

       783
       783
       +
       ```python

     

       784
       784
       +
       gradient = dw.LinearGradient(x1, y1, x2, y2, gradientUnits='userSpaceOnUse', **kwargs)

     

       785
       785
       +
       gradient.add_stop(offset, color, opacity=None)

     

       786
       786
       +
       ```

     

       787
       787
       +
       

     

       788
       788
       +
       ```python

     

       789
       789
       +
       grad = dw.LinearGradient(150, 0, 0, 0)

     

       790
       790
       +
       grad.add_stop(0, 'green')

     

       791
       791
       +
       grad.add_stop(1, 'yellow')

     

       792
       792
       +
       d.append(dw.Rectangle(10, 10, 150, 60,

     

       793
       793
       +
                             stroke='black', fill=grad))

     

       794
       794
       +
       ```

     

       795
       795
       +
       

     

       796
       796
       +
       ![svg](img/05_lingrad.svg)

     

       797
       797
       +
       

     

       798
       798
       +
       

     

       799
       799
       +
       ### Radial Gradient

     

       800
       800
       +
       

     

       801
       801
       +
       ```python

     

       802
       802
       +
       gradient = dw.RadialGradient(cx, cy, r, **kwargs)

     

       803
       803
       +
       gradient.add_stop(offset, color, opacity=None)

     

       804
       804
       +
       ```

     

       805
       805
       +
       

     

       806
       806
       +
       ```python

     

       807
       807
       +
       gradient = dw.RadialGradient(200, 100, 100)

     

       808
       808
       +
       gradient.add_stop(0, 'green', 1)

     

       809
       809
       +
       gradient.add_stop(1, 'orange', 1)

     

       810
       810
       +
       bg = dw.Rectangle(x=0, y=0, width='100%', height='100%', fill=gradient)

     

       811
       811
       +
       d.append(bg)

     

       812
       812
       +
       ```

     

       813
       813
       +
       

     

       814
       814
       +
       ![svg](img/05_radgrad.svg)

     

       815
       815
       +
       

     

       816
       816
       +
       

     

       817
       817
       +
       ### Clip

     

       818
       818
       +
       

     

       819
       819
       +
       ```python

     

       820
       820
       +
       clip_name = dw.ClipPath()

     

       821
       821
       +
       ```

     

       822
       822
       +
       

     

       823
       823
       +
       To add shape as Clip, use `.append()` method.

     

       824
       824
       +
       To apply Clip, fill `clip_path` argument with `clip_name`.

     

       825
       825
       +
       

     

       826
       826
       +
       ```python

     

       827
       827
       +
       # Show both shapes as they are

     

       828
       828
       +
       d.append(dw.Rectangle(100, 100, 100, 100,

     

       829
       829
       +
                             stroke='gray', fill='none'))

     

       830
       830
       +
       d.append(dw.Circle(100, 100, 100,

     

       831
       831
       +
                          fill='none', stroke='gray', stroke_dasharray='5 5'))

     

       832
       832
       +
       # Apply rect as clip to circle

     

       833
       833
       +
       clip = dw.ClipPath()

     

       834
       834
       +
       clip.append(dw.Rectangle(100, 100, 100, 100))

     

       835
       835
       +
       d.append(dw.Circle(100, 100, 100,

     

       836
       836
       +
                          fill='cyan', clip_path=clip))

     

       837
       837
       +
       ```

     

       838
       838
       +
       

     

       839
       839
       +
       ![svg](img/05_clip.svg)

     

       840
       840
       +
       

     

       841
       841
       +
       Another example:

     

       842
       842
       +
       

     

       843
       843
       +
       ```python

     

       844
       844
       +
       # Draw a random path in the left half of the canvas

     

       845
       845
       +
       p = dw.Path(stroke='black', stroke_width=2, fill='none')

     

       846
       846
       +
       p.M(150, 150)

     

       847
       847
       +
       import random

     

       848
       848
       +
       random.seed(1)

     

       849
       849
       +
       for i in range(40):

     

       850
       850
       +
           p.L(random.randint(0, 300), random.randint(0, 200))

     

       851
       851
       +
       d.append(p)

     

       852
       852
       +
       

     

       853
       853
       +
       # Circle as clipping shape

     

       854
       854
       +
       circ = dw.Circle(150, 100, 75)

     

       855
       855
       +
       c = dw.ClipPath()

     

       856
       856
       +
       c.append(circ)

     

       857
       857
       +
       

     

       858
       858
       +
       # Repeat lines in the right half and apply clipping

     

       859
       859
       +
       d.append(dw.Use(p, 300, 0, clip_path=c))

     

       860
       860
       +
       ```

     

       861
       861
       +
       

     

       862
       862
       +
       ![svg](img/05_clip2.svg)

     

       863
       863
       +
       

     

       864
       864
       +
       Complex clip path:

     

       865
       865
       +
       

     

       866
       866
       +
       ```python

     

       867
       867
       +
       curve1 = dw.Path(stroke='black', stroke_width=1, stroke_dasharray='3 2', fill='none')

     

       868
       868
       +
       curve1.M(5, 55).C(25, 5, 45, -25, 75, 55).C(85, 85, 20, 105, 40, 55).Z()

     

       869
       869
       +
       

     

       870
       870
       +
       curveClip = dw.ClipPath()

     

       871
       871
       +
       curveClip.append(dw.Use(curve1, 0, 0))

     

       872
       872
       +
       

     

       873
       873
       +
       text1 = dw.Text('CLIP', 48, 20, 20, font_weight='bold', transform='rotate(60)',

     

       874
       874
       +
                       stroke='black', stroke_width=1, stroke_dasharray='3 2', fill='none')

     

       875
       875
       +
       textClip = dw.ClipPath()

     

       876
       876
       +
       textClip.append(dw.Use(text1, 0, 0))

     

       877
       877
       +
       

     

       878
       878
       +
       shapes = dw.Group()

     

       879
       879
       +
       shapes.append(dw.Rectangle(0, 50, 90, 60, fill='#999'))

     

       880
       880
       +
       shapes.append(dw.Circle(25, 25, 25, fill='#666'))

     

       881
       881
       +
       shapes.append(dw.Lines(30, 0, 80, 0, 80, 100, close='true', fill='#ccc'))

     

       882
       882
       +
       

     

       883
       883
       +
       # draw shapes with clip path

     

       884
       884
       +
       d.append(dw.Use(shapes, 0, 0, clip_path=curveClip))

     

       885
       885
       +
       

     

       886
       886
       +
       # show clip path

     

       887
       887
       +
       g = dw.Group(transform='translate(100,0)')

     

       888
       888
       +
       g.append(shapes)

     

       889
       889
       +
       g.append(dw.Use(curve1, 0, 0))

     

       890
       890
       +
       d.append(g)

     

       891
       891
       +
       

     

       892
       892
       +
       # draw shapes with text as clip path

     

       893
       893
       +
       d.append(dw.Use(shapes, 0, 150, clip_path=textClip))

     

       894
       894
       +
       

     

       895
       895
       +
       # show text clip path

     

       896
       896
       +
       g = dw.Group(transform='translate(100,150)')

     

       897
       897
       +
       g.append(shapes)

     

       898
       898
       +
       g.append(dw.Use(text1, 0, 0))

     

       899
       899
       +
       d.append(g)

     

       900
       900
       +
       ```

     

       901
       901
       +
       

     

       902
       902
       +
       ![svg](img/05_clip3.svg)

     

       903
       903
       +
       

     

       904
       904
       +
       

     

       905
       905
       +
       ### Mask

     

       906
       906
       +
       

     

       907
       907
       +
       ```python

     

       908
       908
       +
       mask_name = dw.Mask()

     

       909
       909
       +
       ```

     

       910
       910
       +
       

     

       911
       911
       +
       The transparency of the masking object is transfered to the masked object.

     

       912
       912
       +
       Opaque pixels of the mask produce opaque pixels of the masked object.

     

       913
       913
       +
       Transparent parts of the mask make the corresponding parts of the masked object invisible.

     

       914
       914
       +
       

     

       915
       915
       +
       ```python

     

       916
       916
       +
       gradient = dw.LinearGradient(*[0,0], *[1,0], gradientUnits='objectBoundingBox')

     

       917
       917
       +
       gradient.add_stop(0, 'white')

     

       918
       918
       +
       gradient.add_stop(1, 'black')

     

       919
       919
       +
       

     

       920
       920
       +
       mask = dw.Mask()

     

       921
       921
       +
       box = dw.Rectangle(30, 0, 100, 100, fill=gradient)

     

       922
       922
       +
       mask.append(box)

     

       923
       923
       +
       

     

       924
       924
       +
       # Initial shape

     

       925
       925
       +
       rect = dw.Rectangle(0, 0, 200, 100,

     

       926
       926
       +
                           fill='cyan', stroke='blue', stroke_width=2)

     

       927
       927
       +
       d.append(rect)

     

       928
       928
       +
       

     

       929
       929
       +
       # After mask

     

       930
       930
       +
       rect = dw.Rectangle(0, 0, 200, 100,

     

       931
       931
       +
                           fill='pink', stroke='red', stroke_width=2,

     

       932
       932
       +
                           mask=mask)

     

       933
       933
       +
       d.append(rect)

     

       934
       934
       +
       ```

     

       935
       935
       +
       

     

       936
       936
       +
       ![svg](img/05_mask.svg)

     

       937
       937
       +
       

     

       938
       938
       +
       Mask using opaque colors:

     

       939
       939
       +
       

     

       940
       940
       +
       ```python

     

       941
       941
       +
       # Define the masks

     

       942
       942
       +
       redmask = dw.Mask(maskContentUnits='objectBoundingBox')

     

       943
       943
       +
       redmask.append(dw.Rectangle(0, 0, 1, 1, fill='#f00'))

     

       944
       944
       +
       greenmask = dw.Mask(maskContentUnits='objectBoundingBox')

     

       945
       945
       +
       greenmask.append(dw.Rectangle(0, 0, 1, 1, fill='#0f0'))

     

       946
       946
       +
       bluemask = dw.Mask(maskContentUnits='objectBoundingBox')

     

       947
       947
       +
       bluemask.append(dw.Rectangle(0, 0, 1, 1, fill='#00f'))

     

       948
       948
       +
       whitemask = dw.Mask(maskContentUnits='objectBoundingBox')

     

       949
       949
       +
       whitemask.append(dw.Rectangle(0, 0, 1, 1, fill='#fff'))

     

       950
       950
       +
       

     

       951
       951
       +
       # Display the colors

     

       952
       952
       +
       d.append(dw.Rectangle(10, 10, 50, 50, fill='#f00'))

     

       953
       953
       +
       d.append(dw.Rectangle(70, 10, 50, 50, fill='#0f0'))

     

       954
       954
       +
       d.append(dw.Rectangle(130, 10, 50, 50, fill='#00f'))

     

       955
       955
       +
       d.append(dw.Rectangle(190, 10, 50, 50, fill='#fff', stroke='black'))

     

       956
       956
       +
       

     

       957
       957
       +
       # Mask

     

       958
       958
       +
       g = dw.Group(mask=redmask)

     

       959
       959
       +
       g.append(dw.Circle(35,115,25,fill='black'))

     

       960
       960
       +
       g.append(dw.Text('Red',14,35,80,text_anchor='middle'))

     

       961
       961
       +
       d.append(g)

     

       962
       962
       +
       g = dw.Group(mask=greenmask)

     

       963
       963
       +
       g.append(dw.Circle(95, 115, 25, fill='black'))

     

       964
       964
       +
       g.append(dw.Text('Green', 14, 95, 80, text_anchor='middle'))

     

       965
       965
       +
       d.append(g)

     

       966
       966
       +
       g = dw.Group(mask=bluemask)

     

       967
       967
       +
       g.append(dw.Circle(155, 115, 25, fill='black'))

     

       968
       968
       +
       g.append(dw.Text('Blue', 14, 155, 80, text_anchor='middle'))

     

       969
       969
       +
       d.append(g)

     

       970
       970
       +
       g = dw.Group(mask=whitemask)

     

       971
       971
       +
       g.append(dw.Circle(215, 115, 25, fill='black'))

     

       972
       972
       +
       g.append(dw.Text('White', 14, 215, 80, text_anchor='middle'))

     

       973
       973
       +
       d.append(g)

     

       974
       974
       +
       ```

     

       975
       975
       +
       

     

       976
       976
       +
       ![svg](img/05_mask2.svg)

     

       977
       977
       +
       

     

       978
       978
       +
       Mask alpha using opacity only:

     

       979
       979
       +
       

     

       980
       980
       +
       ```python

     

       981
       981
       +
       fullmask = dw.Mask(maskContentUnits='objectBoundingBox')

     

       982
       982
       +
       fullmask.append(dw.Rectangle(0, 0, 1, 1, fill_opacity=1.0, fill='white'))

     

       983
       983
       +
       three_fourths = dw.Mask(maskContentUnits='objectBoundingBox')

     

       984
       984
       +
       three_fourths.append(dw.Rectangle(0, 0, 1, 1, fill_opacity=0.75, fill='white'))

     

       985
       985
       +
       one_half = dw.Mask(maskContentUnits='objectBoundingBox')

     

       986
       986
       +
       one_half.append(dw.Rectangle(0, 0, 1, 1, fill_opacity=0.5, fill='white'))

     

       987
       987
       +
       one_fourth = dw.Mask(maskContentUnits='objectBoundingBox')

     

       988
       988
       +
       one_fourth.append(dw.Rectangle(0, 0, 1, 1, fill_opacity=0.25, fill='white'))

     

       989
       989
       +
       

     

       990
       990
       +
       g = dw.Group(mask=fullmask)

     

       991
       991
       +
       g.append(dw.Circle(35, 35, 25))

     

       992
       992
       +
       g.append(dw.Text('100%', 14, 35, 80, text_anchor='middle'))

     

       993
       993
       +
       d.append(g)

     

       994
       994
       +
       g = dw.Group(mask=three_fourths)

     

       995
       995
       +
       g.append(dw.Circle(95, 35, 25))

     

       996
       996
       +
       g.append(dw.Text('50%', 14, 95, 80, text_anchor='middle'))

     

       997
       997
       +
       d.append(g)

     

       998
       998
       +
       g = dw.Group(mask=one_half)

     

       999
       999
       +
       g.append(dw.Circle(155, 35, 25))

     

       1000
       1000
       +
       g.append(dw.Text('50%', 14, 155, 80, text_anchor='middle'))

     

       1001
       1001
       +
       d.append(g)

     

       1002
       1002
       +
       g = dw.Group(mask=one_fourth)

     

       1003
       1003
       +
       g.append(dw.Circle(215, 35, 25))

     

       1004
       1004
       +
       g.append(dw.Text('25%', 14, 215, 80, text_anchor='middle'))

     

       1005
       1005
       +
       d.append(g)

     

       1006
       1006
       +
       ```

     

       1007
       1007
       +
       

     

       1008
       1008
       +
       ![svg](img/05_mask3.svg)

     

       1009
       1009
       +
       

     

       1010
       1010
       +
       

     

       1011
       1011
       +
       ## Group, Use, Defs, Image

     

       1012
       1012
       +
       

     

       1013
       1013
       +
       ### Group

     

       1014
       1014
       +
       

     

       1015
       1015
       +
       ```python

     

       1016
       1016
       +
       dw.Group(**kwargs)

     

       1017
       1017
       +
       ```

     

       1018
       1018
       +
       

     

       1019
       1019
       +
       Any style specified in the g tag will apply to all child elements in the group.

     

       1020
       1020
       +
       

     

       1021
       1021
       +
       ```python

     

       1022
       1022
       +
       g_house = dw.Group(id='house', fill='none', stroke='black')

     

       1023
       1023
       +
       g_house.append(dw.Rectangle(6, 50, 60, 60))

     

       1024
       1024
       +
       g_house.append(dw.Lines(6, 50, 36, 9, 66, 50))

     

       1025
       1025
       +
       g_house.append(dw.Lines(36, 110, 36, 80, 50, 80, 50, 110))

     

       1026
       1026
       +
       d.append(g_house)

     

       1027
       1027
       +
       

     

       1028
       1028
       +
       g_man = dw.Group(id='man', fill='none', stroke='blue')

     

       1029
       1029
       +
       g_man.append(dw.Circle(85, 56, 10))

     

       1030
       1030
       +
       g_man.append(dw.Line(85, 66, 85, 80))

     

       1031
       1031
       +
       g_man.append(dw.Lines(76, 104, 85, 80, 94, 104))

     

       1032
       1032
       +
       g_man.append(dw.Lines(76, 70, 85, 76, 94, 70))

     

       1033
       1033
       +
       d.append(g_man)

     

       1034
       1034
       +
       

     

       1035
       1035
       +
       g_woman = dw.Group(id='woman', fill='none', stroke='red')

     

       1036
       1036
       +
       g_woman.append(dw.Circle(110, 56, 10))

     

       1037
       1037
       +
       g_woman.append(dw.Lines(110, 66, 110, 80, 100, 90, 120, 90, 110, 80))

     

       1038
       1038
       +
       g_woman.append(dw.Line(104, 104, 108, 90))

     

       1039
       1039
       +
       g_woman.append(dw.Line(112, 90, 116, 104))

     

       1040
       1040
       +
       g_woman.append(dw.Lines(101, 70, 110, 76, 119, 70))

     

       1041
       1041
       +
       d.append(g_woman)

     

       1042
       1042
       +
       ```

     

       1043
       1043
       +
       

     

       1044
       1044
       +
       ![svg](img/06_group.svg)

     

       1045
       1045
       +
       

     

       1046
       1046
       +
       

     

       1047
       1047
       +
       ### Use

     

       1048
       1048
       +
       

     

       1049
       1049
       +
       ```python

     

       1050
       1050
       +
       dw.Use(other_elem, x, y, **kwargs)

     

       1051
       1051
       +
       ```

     

       1052
       1052
       +
       

     

       1053
       1053
       +
       ```python

     

       1054
       1054
       +
       g_house = dw.Group(id='house', fill='none', stroke='black')

     

       1055
       1055
       +
       g_house.append(dw.Rectangle(6, 50, 60, 60))

     

       1056
       1056
       +
       g_house.append(dw.Lines(6, 50, 36, 9, 66, 50))

     

       1057
       1057
       +
       g_house.append(dw.Lines(36, 110, 36, 80, 50, 80, 50, 110))

     

       1058
       1058
       +
       d.append(g_house)

     

       1059
       1059
       +
       

     

       1060
       1060
       +
       # Use id which is set

     

       1061
       1061
       +
       d.append(dw.Use('house', 100, 50))

     

       1062
       1062
       +
       # Or use variable name

     

       1063
       1063
       +
       d.append(dw.Use(g_house, 150, 20))

     

       1064
       1064
       +
       ```

     

       1065
       1065
       +
       

     

       1066
       1066
       +
       ![svg](img/06_use.svg)

     

       1067
       1067
       +
       

     

       1068
       1068
       +
       

     

       1069
       1069
       +
       ### Defs

     

       1070
       1070
       +
       

     

       1071
       1071
       +
       Elements that are not appended to the drawing but are referenced by other elements will automatically be included in `<defs></defs>`.

     

       1072
       1072
       +
       ([source](https://github.com/cduck/drawsvg/issues/46))

     

       1073
       1073
       +
       

     

       1074
       1074
       +
       ```python

     

       1075
       1075
       +
       d = dw.Drawing(200, 200, id_prefix='defs')

     

       1076
       1076
       +
       

     

       1077
       1077
       +
       # Do not append `bond` to the drawing

     

       1078
       1078
       +
       bond = dw.Line(0, 0, 10, 10, stroke='black')

     

       1079
       1079
       +
       

     

       1080
       1080
       +
       # `bond` is automatically added into <defs>

     

       1081
       1081
       +
       # A default `id` is generated if one isn't set

     

       1082
       1082
       +
       d.append(dw.Use(bond, 20, 50))

     

       1083
       1083
       +
       d.append(dw.Use(bond, 50, 50))

     

       1084
       1084
       +
       d.append(dw.Use(bond, 80, 50))

     

       1085
       1085
       +
       

     

       1086
       1086
       +
       print(d.as_svg())

     

       1087
       1087
       +
       ```

     

       1088
       1088
       +
       

     

       1089
       1089
       +
       Output:

     

       1090
       1090
       +
       

     

       1091
       1091
       +
       ```svg

     

       1092
       1092
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       1093
       1093
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       1094
       1094
       +
            width="200" height="200" viewBox="0 0 200 200">

     

       1095
       1095
       +
       <defs>

     

       1096
       1096
       +
       <path d="M0,0 L10,10" stroke="black" id="defs0" />

     

       1097
       1097
       +
       </defs>

     

       1098
       1098
       +
       <use xlink:href="#defs0" x="20" y="50" />

     

       1099
       1099
       +
       <use xlink:href="#defs0" x="50" y="50" />

     

       1100
       1100
       +
       <use xlink:href="#defs0" x="80" y="50" />

     

       1101
       1101
       +
       </svg>

     

       1102
       1102
       +
       ```

     

       1103
       1103
       +
       

     

       1104
       1104
       +
       

     

       1105
       1105
       +
       ### Image

     

       1106
       1106
       +
       

     

       1107
       1107
       +
       ```python

     

       1108
       1108
       +
       dw.Image(x, y, width, height, path=None, data=None,

     

       1109
       1109
       +
                embed=False, mimeType=None, **kwargs)

     

       1110
       1110
       +
       ```

     

       1111
       1111
       +
       

     

       1112
       1112
       +
       ```python

     

       1113
       1113
       +
       d.append(dw.Image(0, 0, 200, 200, 'example1.png', embed=True))

     

       1114
       1114
       +
       ```

     

       1115
       1115
       +
       

     

       1116
       1116
       +
       ![svg](img/06_imag.svg)

     

       1117
       1117
       +
       

     

       1118
       1118
       +
       

     

       1119
       1119
       +
       ## Transformations

     

       1120
       1120
       +
       

     

       1121
       1121
       +
       ### Translate

     

       1122
       1122
       +
       

     

       1123
       1123
       +
       ```python

     

       1124
       1124
       +
       transform = 'translate(x,y)'

     

       1125
       1125
       +
       ```

     

       1126
       1126
       +
       

     

       1127
       1127
       +
       This attribute can be added to many objects. Simple example:

     

       1128
       1128
       +
       

     

       1129
       1129
       +
       ```python

     

       1130
       1130
       +
       d.append(dw.Rectangle(0, 0, 40, 40))

     

       1131
       1131
       +
       d.append(dw.Rectangle(0, 0, 40, 40, fill='red', transform='translate(50,50)'))

     

       1132
       1132
       +
       ```

     

       1133
       1133
       +
       

     

       1134
       1134
       +
       ![svg](img/07_trans.svg)

     

       1135
       1135
       +
       

     

       1136
       1136
       +
       

     

       1137
       1137
       +
       ### Scale

     

       1138
       1138
       +
       

     

       1139
       1139
       +
       ```python

     

       1140
       1140
       +
       transform = 'scale(x_mult[, y_mult])'

     

       1141
       1141
       +
       ```

     

       1142
       1142
       +
       

     

       1143
       1143
       +
       Note that scaling also affects stroke width.

     

       1144
       1144
       +
       

     

       1145
       1145
       +
       ```python

     

       1146
       1146
       +
       square = dw.Rectangle(0, 0, 40, 40, fill='none', stroke_width=2)

     

       1147
       1147
       +
       d.append(dw.Use(square, 10, 10, stroke='black'))

     

       1148
       1148
       +
       d.append(dw.Use(square, 10, 10, stroke='red', transform='scale(2)'))

     

       1149
       1149
       +
       ```

     

       1150
       1150
       +
       

     

       1151
       1151
       +
       ![svg](img/07_scale.svg)

     

       1152
       1152
       +
       

     

       1153
       1153
       +
       It is possible to specify x and y scale separately:

     

       1154
       1154
       +
       

     

       1155
       1155
       +
       ```python

     

       1156
       1156
       +
       square = dw.Rectangle(0, 0, 40, 40, fill='none', stroke_width=2)

     

       1157
       1157
       +
       d.append(dw.Use(square, 10, 10, stroke='black'))

     

       1158
       1158
       +
       d.append(dw.Use(square, 10, 10, stroke='red', transform='scale(3,1.5)'))

     

       1159
       1159
       +
       ```

     

       1160
       1160
       +
       

     

       1161
       1161
       +
       ![svg](img/07_scale2.svg)

     

       1162
       1162
       +
       

     

       1163
       1163
       +
       Scaling around a center point:

     

       1164
       1164
       +
       

     

       1165
       1165
       +
       ```python

     

       1166
       1166
       +
       # Center of scaling: (100, 100)

     

       1167
       1167
       +
       d.append(dw.Circle(100, 100, 4, fill='black'))

     

       1168
       1168
       +
       # Non-scaled rectangle

     

       1169
       1169
       +
       rect = dw.Rectangle(70, 80, 60, 40, stroke='black', fill='none')

     

       1170
       1170
       +
       d.append(rect)

     

       1171
       1171
       +
       # Scaled rectangles

     

       1172
       1172
       +
       d.append(dw.Use(rect, 0, 0, transform='translate(-100,-100) scale(2)', stroke_width=0.5))

     

       1173
       1173
       +
       d.append(dw.Use(rect, 0, 0, transform='translate(-150,-150) scale(2.5)', stroke_width=0.4))

     

       1174
       1174
       +
       d.append(dw.Use(rect, 0, 0, transform='translate(-200,-200) scale(3)', stroke_width=0.33))

     

       1175
       1175
       +
       ```

     

       1176
       1176
       +
       

     

       1177
       1177
       +
       ![svg](img/07_scalcent.svg)

     

       1178
       1178
       +
       

     

       1179
       1179
       +
       

     

       1180
       1180
       +
       ### Rotate

     

       1181
       1181
       +
       

     

       1182
       1182
       +
       ```python

     

       1183
       1183
       +
       transform = 'rotate(angle,cx=0,cy=0)'

     

       1184
       1184
       +
       ```

     

       1185
       1185
       +
       

     

       1186
       1186
       +
       `angle` counts clockwise in degrees.

     

       1187
       1187
       +
       `cx`/`cy` are the center of rotation.

     

       1188
       1188
       +
       

     

       1189
       1189
       +
       ```python

     

       1190
       1190
       +
       # Show frame border

     

       1191
       1191
       +
       d.append(dw.Rectangle(0, 0, 200, 200, stroke='gray', fill='none'))

     

       1192
       1192
       +
       # Rotation is around (0, 0)

     

       1193
       1193
       +
       d.append(dw.Rectangle(70, 30, 40, 40, fill='silver'))

     

       1194
       1194
       +
       d.append(dw.Rectangle(70, 30, 40, 40, fill='gray', transform='rotate(22.5)'))

     

       1195
       1195
       +
       d.append(dw.Rectangle(70, 30, 40, 40, fill='black', transform='rotate(45)'))

     

       1196
       1196
       +
       ```

     

       1197
       1197
       +
       

     

       1198
       1198
       +
       ![svg](img/07_rota.svg)

     

       1199
       1199
       +
       

     

       1200
       1200
       +
       ```python

     

       1201
       1201
       +
       # Center of rotation

     

       1202
       1202
       +
       d.append(dw.Circle(100, 100, 3, fill='black'))

     

       1203
       1203
       +
       # Non-rotated arrow

     

       1204
       1204
       +
       arrow = dw.Group(id='arrow')

     

       1205
       1205
       +
       arrow.append(dw.Line(110, 100, 160, 100))

     

       1206
       1206
       +
       arrow.append(dw.Lines(160, 100, 155, 95, 155, 105))

     

       1207
       1207
       +
       d.append(dw.Use(arrow, 0, 0, stroke='black', fill='black'))

     

       1208
       1208
       +
       # Rotated arrows

     

       1209
       1209
       +
       g = dw.Group(stroke='red', fill='red')

     

       1210
       1210
       +
       g.append(dw.Use(arrow, 0, 0, transform='rotate (60,100,100)'))

     

       1211
       1211
       +
       g.append(dw.Use(arrow, 0, 0, transform='rotate (-90,100,100)'))

     

       1212
       1212
       +
       g.append(dw.Use(arrow, 0, 0, transform='rotate (-150,100,100)'))

     

       1213
       1213
       +
       d.append(g)

     

       1214
       1214
       +
       ```

     

       1215
       1215
       +
       

     

       1216
       1216
       +
       ![svg](img/07_rota2.svg)

     

       1217
       1217
       +
       

     

       1218
       1218
       +
       

     

       1219
       1219
       +
       ### Skew

     

       1220
       1220
       +
       

     

       1221
       1221
       +
       ```python

     

       1222
       1222
       +
       transform = 'skewX(angle)'

     

       1223
       1223
       +
       transform = 'skewY(angle)'

     

       1224
       1224
       +
       ```

     

       1225
       1225
       +
       

     

       1226
       1226
       +
       ```python

     

       1227
       1227
       +
       g = dw.Group(stroke='gray', stroke_dasharray='4 4')

     

       1228
       1228
       +
       g.append(dw.Line(0, 0, 200, 0))

     

       1229
       1229
       +
       g.append(dw.Line(20, 0, 20, 90))

     

       1230
       1230
       +
       g.append(dw.Line(120, 0, 120, 90))

     

       1231
       1231
       +
       d.append(g)

     

       1232
       1232
       +
       

     

       1233
       1233
       +
       h = dw.Group(transform='translate(20,0)')

     

       1234
       1234
       +
       h1 = dw.Group(transform='skewX(30)')

     

       1235
       1235
       +
       h1.append(dw.Lines(50, 0, 0, 0, 0, 50,

     

       1236
       1236
       +
                          stroke='black', fill='none', stroke_width=2))

     

       1237
       1237
       +
       h1.append(dw.Text('skewX', 16, 0, 60))

     

       1238
       1238
       +
       h.append(h1)

     

       1239
       1239
       +
       d.append(h)

     

       1240
       1240
       +
       

     

       1241
       1241
       +
       i = dw.Group(transform='translate(120,0)')

     

       1242
       1242
       +
       i1 = dw.Group(transform='skewY(30)')

     

       1243
       1243
       +
       i1.append(dw.Lines(50, 0, 0, 0, 0, 50,

     

       1244
       1244
       +
                          stroke='black', fill='none', stroke_width=2))

     

       1245
       1245
       +
       i1.append(dw.Text('skewY', 16, 0, 60))

     

       1246
       1246
       +
       i.append(i1)

     

       1247
       1247
       +
       d.append(i)

     

       1248
       1248
       +
       ```

     

       1249
       1249
       +
       

     

       1250
       1250
       +
       ![svg](img/07_skew.svg)

     

       1251
       1251
       +
       

     

       1252
       1252
       +
       

     

       1253
       1253
       +
       ### Cartesian Coordinates

     

       1254
       1254
       +
       

     

       1255
       1255
       +
       A drawing which can be translated to Cartesian coordinates

     

       1256
       1256
       +
       (where y-coordinates increase upward, not downward)

     

       1257
       1257
       +
       by setting the translate-y value to the drawing's height, and also applying `scale(1,-1)`.

     

       1258
       1258
       +
       

     

       1259
       1259
       +
       Trapezoid with origin to top left (the default):

     

       1260
       1260
       +
       

     

       1261
       1261
       +
       ```python

     

       1262
       1262
       +
       d.append(dw.Lines(0, 100, 0, 0, 100, 0,

     

       1263
       1263
       +
                         fill='none', stroke='green', stroke_width=2))

     

       1264
       1264
       +
       d.append(dw.Lines(40, 40, 100, 40, 70, 70, 40, 70,

     

       1265
       1265
       +
                         fill='silver', stroke='black', stroke_width=2))

     

       1266
       1266
       +
       d.append(dw.Text('downward y', 12, 5, 95))

     

       1267
       1267
       +
       ```

     

       1268
       1268
       +
       

     

       1269
       1269
       +
       ![svg](img/07_cart1.svg)

     

       1270
       1270
       +
       

     

       1271
       1271
       +
       Translated origin to bottom left and upward-y:

     

       1272
       1272
       +
       

     

       1273
       1273
       +
       ```python

     

       1274
       1274
       +
       g = dw.Group(transform='translate(0,100) scale(1,-1)')

     

       1275
       1275
       +
       g.append(dw.Lines(0, 100, 0, 0, 100, 0,

     

       1276
       1276
       +
                         fill='none', stroke='green', stroke_width=2))

     

       1277
       1277
       +
       g.append(dw.Lines(40, 40, 100, 40, 70, 70, 40, 70,

     

       1278
       1278
       +
                         fill='silver', stroke='black', stroke_width=2))

     

       1279
       1279
       +
       g.append(dw.Text('upward y', 12, 5, 95))

     

       1280
       1280
       +
       d.append(g)

     

       1281
       1281
       +
       ```

     

       1282
       1282
       +
       

     

       1283
       1283
       +
       ![svg](img/07_cart2.svg)

     

       1284
       1284
       +
       

     

       1285
       1285
       +
       Alternatively, apply `scale(1,-1)` to the whole drawing:

     

       1286
       1286
       +
       

     

       1287
       1287
       +
       ```python

     

       1288
       1288
       +
       d = dw.Drawing(100, 100, id_prefix='cart3', transform='scale(1,-1)')

     

       1289
       1289
       +
       d.append(dw.Lines(0, 100, 0, 0, 100, 0,

     

       1290
       1290
       +
                         fill='none', stroke='green', stroke_width=2))

     

       1291
       1291
       +
       d.append(dw.Lines(40, 40, 100, 40, 70, 70, 40, 70,

     

       1292
       1292
       +
                         fill='silver', stroke='black', stroke_width=2))

     

       1293
       1293
       +
       d.append(dw.Text('upward y', 12, 5, 95))

     

       1294
       1294
       +
       ```

     

       1295
       1295
       +
       

     

       1296
       1296
       +
       ![svg](img/07_cart3.svg)

     

       1297
       1297
       +
       

     

       1298
       1298
       +
       

     

       1299
       1299
       +
       ## Credits

     

       1300
       1300
       +
       

     

       1301
       1301
       +
       Written by joachim heintz 2023.  Edited by Casey Duckering.

     

       1302
       1302
       +
       

     

       1303
       1303
       +
       Most examples are based on J. David Eisenberg, SVG Essentials, O'Reilly 2002.

     

       1304
       1304
       +
       

     

       1305
       1305
       +
       Thanks to [Ahmad Aufar Husaini](https://github.com/aufarah) for his fork (draw2Svg) and for providing some documentation [here](https://draw2svg.netlify.app/) (some examples are used in this Quick Reference).

     

       1306
       1306
       +
       

     

       1307
       1307
       +
       Thanks to [Casey Duckering](https://github.com/cduck) for drawsvg and many helpful explanations on its [discussion page](https://github.com/cduck/drawsvg/discussions).

-72

drawSvg/__init__.py

···

       1
       1
       -
       '''

     

       2
       2
       -
       A library for creating SVG files or just drawings that can be displayed in

     

       3
       3
       -
       iPython notebooks

     

       4
       4
       -
       

     

       5
       5
       -
       Example:

     

       6
       6
       -
       ```

     

       7
       7
       -
           d = draw.Drawing(200, 100, origin='center')

     

       8
       8
       -
       

     

       9
       9
       -
           d.append(draw.Lines(-80, -45,

     

       10
       10
       -
                               70, -49,

     

       11
       11
       -
                               95, 49,

     

       12
       12
       -
                               -90, 40,

     

       13
       13
       -
                               close=False,

     

       14
       14
       -
                       fill='#eeee00',

     

       15
       15
       -
                       stroke='black'))

     

       16
       16
       -
       

     

       17
       17
       -
           d.append(draw.Rectangle(0,0,40,50, fill='#1248ff'))

     

       18
       18
       -
           d.append(draw.Circle(-40, -10, 30,

     

       19
       19
       -
                       fill='red', stroke_width=2, stroke='black'))

     

       20
       20
       -
       

     

       21
       21
       -
           p = draw.Path(stroke_width=2, stroke='green',

     

       22
       22
       -
                         fill='black', fill_opacity=0.5)

     

       23
       23
       -
           p.M(-30,5)  # Start path at point (-30, 5)

     

       24
       24
       -
           p.l(60,30)  # Draw line to (60, 30)

     

       25
       25
       -
           p.h(-70)    # Draw horizontal line to x=-70

     

       26
       26
       -
           p.Z()       # Draw line to start

     

       27
       27
       -
           d.append(p)

     

       28
       28
       -
       

     

       29
       29
       -
           d.append(draw.ArcLine(60,-20,20,60,270,

     

       30
       30
       -
                       stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       31
       31
       -
           d.append(draw.Arc(60,-20,20,60,270,cw=False,

     

       32
       32
       -
                       stroke='green', stroke_width=3, fill='none'))

     

       33
       33
       -
           d.append(draw.Arc(60,-20,20,270,60,cw=True,

     

       34
       34
       -
                       stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       35
       35
       -
       

     

       36
       36
       -
           d.setPixelScale(2)  # Set number of pixels per geometry unit

     

       37
       37
       -
           #d.setRenderSize(400,200)  # Alternative to setPixelScale

     

       38
       38
       -
           d.saveSvg('example.svg')

     

       39
       39
       -
           d.savePng('example.png')

     

       40
       40
       -
       

     

       41
       41
       -
           # Display in iPython notebook

     

       42
       42
       -
           d.rasterize()  # Display as PNG

     

       43
       43
       -
           d  # Display as SVG

     

       44
       44
       -
       ```

     

       45
       45
       -
       '''

     

       46
       46
       -
       

     

       47
       47
       -
       from .defs import *

     

       48
       48
       -
       from .raster import Raster

     

       49
       49
       -
       from .drawing import Drawing

     

       50
       50
       -
       from .elements import *

     

       51
       51
       -
       from .video import (

     

       52
       52
       -
           render_svg_frames,

     

       53
       53
       -
           save_video,

     

       54
       54
       -
       )

     

       55
       55
       -
       from .animation import (

     

       56
       56
       -
           Animation,

     

       57
       57
       -
           animate_video,

     

       58
       58
       -
           animate_jupyter,

     

       59
       59
       -
       )

     

       60
       60
       -
       

     

       61
       61
       -
       

     

       62
       62
       -
       # Make all elements available in the elements module

     

       63
       63
       -
       from . import defs

     

       64
       64
       -
       from . import elements

     

       65
       65
       -
       def registerElement(name, elem):

     

       66
       66
       -
           setattr(elements, name, elem)

     

       67
       67
       -
       elementsDir = dir(elements)

     

       68
       68
       -
       for k in dir(defs):

     

       69
       69
       -
           if k.startswith('_'): continue

     

       70
       70
       -
           if k in elementsDir: continue

     

       71
       71
       -
           registerElement(k, getattr(defs, k))

     

       72
       72
       -

-104

drawSvg/animation.py

···

       1
       1
       -
       import time

     

       2
       2
       -
       

     

       3
       3
       -
       from . import video

     

       4
       4
       -
       

     

       5
       5
       -
       

     

       6
       6
       -
       class Animation:

     

       7
       7
       -
           def __init__(self, draw_func=None, callback=None):

     

       8
       8
       -
               self.frames = []

     

       9
       9
       -
               if draw_func is None:

     

       10
       10
       -
                   draw_func = lambda d:d

     

       11
       11
       -
               self.draw_func = draw_func

     

       12
       12
       -
               if callback is None:

     

       13
       13
       -
                   callback = lambda d:None

     

       14
       14
       -
               self.callback = callback

     

       15
       15
       -
       

     

       16
       16
       -
           def append_frame(self, frame):

     

       17
       17
       -
               self.frames.append(frame)

     

       18
       18
       -
               self.callback(frame)

     

       19
       19
       -
       

     

       20
       20
       -
           def draw_frame(self, *args, **kwargs):

     

       21
       21
       -
               frame = self.draw_func(*args, **kwargs)

     

       22
       22
       -
               self.append_frame(frame)

     

       23
       23
       -
               return frame

     

       24
       24
       -
       

     

       25
       25
       -
           def save_video(self, file, **kwargs):

     

       26
       26
       -
               video.save_video(self.frames, file, **kwargs)

     

       27
       27
       -
       

     

       28
       28
       -
       

     

       29
       29
       -
       class AnimationContext:

     

       30
       30
       -
           def __init__(self, draw_func=None, out_file=None,

     

       31
       31
       -
                        jupyter=False, pause=False, clear=True, delay=0, disable=False,

     

       32
       32
       -
                        video_args=None, _patch_delay=0.05):

     

       33
       33
       -
               self.jupyter = jupyter

     

       34
       34
       -
               self.disable = disable

     

       35
       35
       -
               if self.jupyter and not self.disable:

     

       36
       36
       -
                   from IPython import display

     

       37
       37
       -
                   self._jupyter_clear_output = display.clear_output

     

       38
       38
       -
                   self._jupyter_display = display.display

     

       39
       39
       -
                   callback = self.draw_jupyter_frame

     

       40
       40
       -
               else:

     

       41
       41
       -
                   callback = None

     

       42
       42
       -
               self.anim = Animation(draw_func, callback=callback)

     

       43
       43
       -
               self.out_file = out_file

     

       44
       44
       -
               self.pause = pause

     

       45
       45
       -
               self.clear = clear

     

       46
       46
       -
               self.delay = delay

     

       47
       47
       -
               if video_args is None:

     

       48
       48
       -
                   video_args = {}

     

       49
       49
       -
               self.video_args = video_args

     

       50
       50
       -
               self._patch_delay = _patch_delay

     

       51
       51
       -
       

     

       52
       52
       -
           def draw_jupyter_frame(self, frame):

     

       53
       53
       -
               if self.clear:

     

       54
       54
       -
                   self._jupyter_clear_output(wait=True)

     

       55
       55
       -
               self._jupyter_display(frame)

     

       56
       56
       -
               if self.pause:

     

       57
       57
       -
                   # Patch.  Jupyter sometimes clears the input field otherwise.

     

       58
       58
       -
                   time.sleep(self._patch_delay)

     

       59
       59
       -
                   input('Next?')

     

       60
       60
       -
               elif self.delay != 0:

     

       61
       61
       -
                   time.sleep(self.delay)

     

       62
       62
       -
       

     

       63
       63
       -
           def __enter__(self):

     

       64
       64
       -
               return self.anim

     

       65
       65
       -
       

     

       66
       66
       -
           def __exit__(self, exc_type, exc_value, exc_traceback):

     

       67
       67
       -
               if exc_value is None:

     

       68
       68
       -
                   # No error

     

       69
       69
       -
                   if self.out_file is not None and not self.disable:

     

       70
       70
       -
                       self.anim.save_video(self.out_file, **self.video_args)

     

       71
       71
       -
       

     

       72
       72
       -
       

     

       73
       73
       -
       def animate_video(out_file, draw_func=None, jupyter=False, **video_args):

     

       74
       74
       -
           '''

     

       75
       75
       -
           Returns a context manager that stores frames and saves a video when the

     

       76
       76
       -
           context exits.

     

       77
       77
       -
       

     

       78
       78
       -
           Example:

     

       79
       79
       -
           ```

     

       80
       80
       -
           with animate_video('video.mp4') as anim:

     

       81
       81
       -
               while True:

     

       82
       82
       -
                   ...

     

       83
       83
       -
                   anim.draw_frame(...)

     

       84
       84
       -
           ```

     

       85
       85
       -
           '''

     

       86
       86
       -
           return AnimationContext(draw_func=draw_func, out_file=out_file,

     

       87
       87
       -
                                   jupyter=jupyter, video_args=video_args)

     

       88
       88
       -
       

     

       89
       89
       -
       

     

       90
       90
       -
       def animate_jupyter(draw_func=None, pause=False, clear=True, delay=0.1,

     

       91
       91
       -
                           **kwargs):

     

       92
       92
       -
           '''

     

       93
       93
       -
           Returns a context manager that displays frames in a Jupyter notebook.

     

       94
       94
       -
       

     

       95
       95
       -
           Example:

     

       96
       96
       -
           ```

     

       97
       97
       -
           with animate_jupyter(delay=0.5) as anim:

     

       98
       98
       -
               while True:

     

       99
       99
       -
                   ...

     

       100
       100
       -
                   anim.draw_frame(...)

     

       101
       101
       -
           ```

     

       102
       102
       -
           '''

     

       103
       103
       -
           return AnimationContext(draw_func=draw_func, jupyter=True, pause=pause,

     

       104
       104
       -
                                   clear=clear, delay=delay, **kwargs)

-199

drawSvg/color.py

···

       1
       1
       -
       

     

       2
       2
       -
       import math

     

       3
       3
       -
       import numpy as np

     

       4
       4
       -
       import pwkit.colormaps  # pip3 install pwkit

     

       5
       5
       -
       

     

       6
       6
       -
       

     

       7
       7
       -
       # Most calculations from http://www.chilliant.com/rgb2hsv.html

     

       8
       8
       -
       

     

       9
       9
       -
       

     

       10
       10
       -
       def limit(v, low=0, high=1):

     

       11
       11
       -
           return max(min(v, high), low)

     

       12
       12
       -
       

     

       13
       13
       -
       class Srgb:

     

       14
       14
       -
           LUMA_WEIGHTS = (0.299, 0.587, 0.114)

     

       15
       15
       -
           def __init__(self, r, g, b):

     

       16
       16
       -
               self.r = float(r)

     

       17
       17
       -
               self.g = float(g)

     

       18
       18
       -
               self.b = float(b)

     

       19
       19
       -
           def __iter__(self):

     

       20
       20
       -
               return iter((self.r, self.g, self.b))

     

       21
       21
       -
           def __repr__(self):

     

       22
       22
       -
               return 'RGB({}, {}, {})'.format(self.r, self.g, self.b)

     

       23
       23
       -
           def __str__(self):

     

       24
       24
       -
               return 'rgb({}%,{}%,{}%)'.format(self.r*100, self.g*100, self.b*100)

     

       25
       25
       -
           def luma(self, wts=None):

     

       26
       26
       -
               if wts is None: wts = self.LUMA_WEIGHTS

     

       27
       27
       -
               rw, gw, bw = wts

     

       28
       28
       -
               return rw*self.r + gw*self.g + bw*self.b

     

       29
       29
       -
           def toSrgb(self):

     

       30
       30
       -
               return self

     

       31
       31
       -
           @staticmethod

     

       32
       32
       -
           def fromHue(h):

     

       33
       33
       -
               h = h % 1

     

       34
       34
       -
               r = abs(h * 6 - 3) - 1

     

       35
       35
       -
               g = 2 - abs(h * 6 - 2)

     

       36
       36
       -
               b = 2 - abs(h * 6 - 4)

     

       37
       37
       -
               return Srgb(limit(r), limit(g), limit(b))

     

       38
       38
       -
       

     

       39
       39
       -
       class Hsl:

     

       40
       40
       -
           def __init__(self, h, s, l):

     

       41
       41
       -
               self.h = float(h) % 1

     

       42
       42
       -
               self.s = float(s)

     

       43
       43
       -
               self.l = float(l)

     

       44
       44
       -
           def __iter__(self):

     

       45
       45
       -
               return iter((self.h, self.s, self.l))

     

       46
       46
       -
           def __repr__(self):

     

       47
       47
       -
               return 'HSL({}, {}, {})'.format(self.h, self.s, self.l)

     

       48
       48
       -
           def __str__(self):

     

       49
       49
       -
               r, g, b = self.toSrgb()

     

       50
       50
       -
               return 'rgb({}%,{}%,{}%)'.format(round(r*100), round(g*100), round(b*100))

     

       51
       51
       -
           def toSrgb(self):

     

       52
       52
       -
               hs = Srgb.fromHue(self.h)

     

       53
       53
       -
               c = (1 - abs(2 * self.l - 1)) * self.s

     

       54
       54
       -
               return Srgb(

     

       55
       55
       -
                   (hs.r - 0.5) * c + self.l,

     

       56
       56
       -
                   (hs.g - 0.5) * c + self.l,

     

       57
       57
       -
                   (hs.b - 0.5) * c + self.l

     

       58
       58
       -
               )

     

       59
       59
       -
       

     

       60
       60
       -
       class Hsv:

     

       61
       61
       -
           def __init__(self, h, s, v):

     

       62
       62
       -
               self.h = float(h) % 1

     

       63
       63
       -
               self.s = float(s)

     

       64
       64
       -
               self.v = float(v)

     

       65
       65
       -
           def __iter__(self):

     

       66
       66
       -
               return iter((self.h, self.s, self.v))

     

       67
       67
       -
           def __repr__(self):

     

       68
       68
       -
               return 'HSV({}, {}, {})'.format(self.h, self.s, self.v)

     

       69
       69
       -
           def __str__(self):

     

       70
       70
       -
               r, g, b = self.toSrgb()

     

       71
       71
       -
               return 'rgb({}%,{}%,{}%)'.format(round(r*100), round(g*100), round(b*100))

     

       72
       72
       -
           def toSrgb(self):

     

       73
       73
       -
               hs = Srgb.fromHue(self.h)

     

       74
       74
       -
               c = self.v * self.s

     

       75
       75
       -
               hp = self.h * 6

     

       76
       76
       -
               x = c * (1 - abs(hp % 2 - 1))

     

       77
       77
       -
               if hp < 1:

     

       78
       78
       -
                   r1, g1, b1 = c, x, 0

     

       79
       79
       -
               elif hp < 2:

     

       80
       80
       -
                   r1, g1, b1 = x, c, 0

     

       81
       81
       -
               elif hp < 3:

     

       82
       82
       -
                   r1, g1, b1 = 0, c, x

     

       83
       83
       -
               elif hp < 4:

     

       84
       84
       -
                   r1, g1, b1 = 0, x, c

     

       85
       85
       -
               elif hp < 5:

     

       86
       86
       -
                   r1, g1, b1 = x, 0, c

     

       87
       87
       -
               else:

     

       88
       88
       -
                   r1, g1, b1 = c, 0, x

     

       89
       89
       -
               m = self.v - c

     

       90
       90
       -
               return Srgb(r1+m, g1+m, b1+m)

     

       91
       91
       -
       

     

       92
       92
       -
       class Sin:

     

       93
       93
       -
           def __init__(self, h, s, l):

     

       94
       94
       -
               self.h = float(h) % 1

     

       95
       95
       -
               self.s = float(s)

     

       96
       96
       -
               self.l = float(l)

     

       97
       97
       -
           def __iter__(self):

     

       98
       98
       -
               return iter((self.h, self.s, self.l))

     

       99
       99
       -
           def __repr__(self):

     

       100
       100
       -
               return 'Sin({}, {}, {})'.format(self.h, self.s, self.l)

     

       101
       101
       -
           def __str__(self):

     

       102
       102
       -
               r, g, b = self.toSrgb()

     

       103
       103
       -
               return 'rgb({}%,{}%,{}%)'.format(round(r*100), round(g*100), round(b*100))

     

       104
       104
       -
           def toSrgb(self):

     

       105
       105
       -
               h = self.h

     

       106
       106
       -
               scale = self.s / 2

     

       107
       107
       -
               shift = self.l #* (1-2*scale)

     

       108
       108
       -
               return Srgb(

     

       109
       109
       -
                   shift + scale * math.cos(math.pi*2 * (h - 0/6)),

     

       110
       110
       -
                   shift + scale * math.cos(math.pi*2 * (h - 2/6)),

     

       111
       111
       -
                   shift + scale * math.cos(math.pi*2 * (h - 4/6)),

     

       112
       112
       -
               )

     

       113
       113
       -
       

     

       114
       114
       -
       class Hcy:

     

       115
       115
       -
           HCY_WEIGHTS = Srgb.LUMA_WEIGHTS

     

       116
       116
       -
           def __init__(self, h, c, y):

     

       117
       117
       -
               self.h = float(h) % 1

     

       118
       118
       -
               self.c = float(c)

     

       119
       119
       -
               self.y = float(y)

     

       120
       120
       -
           def __iter__(self):

     

       121
       121
       -
               return iter((self.h, self.c, self.y))

     

       122
       122
       -
           def __repr__(self):

     

       123
       123
       -
               return 'HCY({}, {}, {})'.format(self.h, self.c, self.y)

     

       124
       124
       -
           def __str__(self):

     

       125
       125
       -
               r, g, b = self.toSrgb()

     

       126
       126
       -
               return 'rgb({}%,{}%,{}%)'.format(r*100, g*100, b*100)

     

       127
       127
       -
           def toSrgb(self):

     

       128
       128
       -
               hs = Srgb.fromHue(self.h)

     

       129
       129
       -
               y = hs.luma(wts=self.HCY_WEIGHTS)

     

       130
       130
       -
               c = self.c

     

       131
       131
       -
               if self.y < y:

     

       132
       132
       -
                   c *= self.y / y

     

       133
       133
       -
               elif y < 1:

     

       134
       134
       -
                   c *= (1 - self.y) / (1 - y)

     

       135
       135
       -
               return Srgb(

     

       136
       136
       -
                   (hs.r - y) * c + self.y,

     

       137
       137
       -
                   (hs.g - y) * c + self.y,

     

       138
       138
       -
                   (hs.b - y) * c + self.y,

     

       139
       139
       -
               )

     

       140
       140
       -
           @staticmethod

     

       141
       141
       -
           def _rgbToHcv(srgb):

     

       142
       142
       -
               if srgb.g < srgb.b:

     

       143
       143
       -
                   p = (srgb.b, srgb.g, -1., 2./3.)

     

       144
       144
       -
               else:

     

       145
       145
       -
                   p = (srgb.g, srgb.b, 0., -1./3.)

     

       146
       146
       -
               if srgb.r < p[0]:

     

       147
       147
       -
                   q = (p[0], p[1], p[3], srgb.r)

     

       148
       148
       -
               else:

     

       149
       149
       -
                   q = (srgb.r, p[1], p[2], p[0])

     

       150
       150
       -
               c = q[0] - min(q[3], q[1])

     

       151
       151
       -
               h = abs((q[3] - q[1]) / (6*c + 1e-10) + q[2])

     

       152
       152
       -
               return (h, c, q[0])

     

       153
       153
       -
           @classmethod

     

       154
       154
       -
           def fromSrgb(cls, srgb):

     

       155
       155
       -
               hcv = list(cls._rgbToHcv(srgb))

     

       156
       156
       -
               rw, gw, bw = cls.HCY_WEIGHTS

     

       157
       157
       -
               y = rw*srgb.r + gw*srgb.g + bw*srgb.b

     

       158
       158
       -
               hs = Srgb.fromHue(hcv[0])

     

       159
       159
       -
               z = rw*hs.r + gw*hs.g + bw*hs.b

     

       160
       160
       -
               if y < z:

     

       161
       161
       -
                   hcv[1] *= z / (y + 1e-10)

     

       162
       162
       -
               else:

     

       163
       163
       -
                   hcv[1] *= (1 - z) / (1 - y + 1e-10)

     

       164
       164
       -
               return Hcy(hcv[0], hcv[1], y)

     

       165
       165
       -
       

     

       166
       166
       -
       class Cielab:

     

       167
       167
       -
           REF_WHITE = (0.95047, 1., 1.08883)

     

       168
       168
       -
           def __init__(self, l, a, b):

     

       169
       169
       -
               self.l = float(l)

     

       170
       170
       -
               self.a = float(a)

     

       171
       171
       -
               self.b = float(b)

     

       172
       172
       -
           def __iter__(self):

     

       173
       173
       -
               return iter((self.l, self.a, self.b))

     

       174
       174
       -
           def __repr__(self):

     

       175
       175
       -
               return 'CIELAB({}, {}, {})'.format(self.l, self.a, self.b)

     

       176
       176
       -
           def __str__(self):

     

       177
       177
       -
               r, g, b = self.toSrgb()

     

       178
       178
       -
               return 'rgb({}%,{}%,{}%)'.format(round(r*100), round(g*100), round(b*100))

     

       179
       179
       -
           def toSrgb(self):

     

       180
       180
       -
               inArr = np.array((*self.l,), dtype=float)

     

       181
       181
       -
               xyz = pwkit.colormaps.cielab_to_xyz(inArr, self.REF_WHITE)

     

       182
       182
       -
               linSrgb = pwkit.colormaps.xyz_to_linsrgb(xyz)

     

       183
       183
       -
               r, g, b = pwkit.colormaps.linsrgb_to_srgb(linSrgb)

     

       184
       184
       -
               return Srgb(r, g, b)

     

       185
       185
       -
           @classmethod

     

       186
       186
       -
           def fromSrgb(cls, srgb, refWhite=None):

     

       187
       187
       -
               if refWhite is None: refWhite = cls.REF_WHITE

     

       188
       188
       -
               inArr = np.array((*srgb,), dtype=float)

     

       189
       189
       -
               linSrgb = pwkit.colormaps.srgb_to_linsrgb(inArr)

     

       190
       190
       -
               xyz = pwkit.colormaps.linsrgb_to_xyz(linSrgb)

     

       191
       191
       -
               l, a, b = pwkit.colormaps.xyz_to_cielab(xyz, refWhite)

     

       192
       192
       -
               return Cielab(l, a, b)

     

       193
       193
       -
           def toSrgb(self):

     

       194
       194
       -
               inArr = np.array((self.l, self.a, self.b))

     

       195
       195
       -
               xyz = pwkit.colormaps.cielab_to_xyz(inArr, self.REF_WHITE)

     

       196
       196
       -
               linSrgb = pwkit.colormaps.xyz_to_linsrgb(xyz)

     

       197
       197
       -
               r, g, b = pwkit.colormaps.linsrgb_to_srgb(linSrgb)

     

       198
       198
       -
               return Srgb(r, g, b)

     

       199
       199
       -

-76

drawSvg/defs.py

···

       1
       1
       -
       

     

       2
       2
       -
       from .elements import DrawingElement, DrawingParentElement

     

       3
       3
       -
       

     

       4
       4
       -
       

     

       5
       5
       -
       class DrawingDef(DrawingParentElement):

     

       6
       6
       -
           ''' Parent class of SVG nodes that must be direct children of <defs> '''

     

       7
       7
       -
           def getSvgDefs(self):

     

       8
       8
       -
               return (self,)

     

       9
       9
       -
       

     

       10
       10
       -
       class DrawingDefSub(DrawingParentElement):

     

       11
       11
       -
           ''' Parent class of SVG nodes that are meant to be descendants of a Def '''

     

       12
       12
       -
           pass

     

       13
       13
       -
       

     

       14
       14
       -
       class LinearGradient(DrawingDef):

     

       15
       15
       -
           ''' A linear gradient to use as a fill or other color

     

       16
       16
       -
       

     

       17
       17
       -
               Has <stop> nodes as children. '''

     

       18
       18
       -
           TAG_NAME = 'linearGradient'

     

       19
       19
       -
           def __init__(self, x1, y1, x2, y2, gradientUnits='userSpaceOnUse', **kwargs):

     

       20
       20
       -
               yShift = 0

     

       21
       21
       -
               if gradientUnits != 'userSpaceOnUse':

     

       22
       22
       -
                   yShift = 1

     

       23
       23
       -
               try: y1 = yShift - y1

     

       24
       24
       -
               except TypeError: pass

     

       25
       25
       -
               try: y2 = yShift - y2

     

       26
       26
       -
               except TypeError: pass

     

       27
       27
       -
               super().__init__(x1=x1, y1=y1, x2=x2, y2=y2, gradientUnits=gradientUnits,

     

       28
       28
       -
                                **kwargs)

     

       29
       29
       -
           def addStop(self, offset, color, opacity=None, **kwargs):

     

       30
       30
       -
               stop = GradientStop(offset=offset, stop_color=color,

     

       31
       31
       -
                                   stop_opacity=opacity, **kwargs)

     

       32
       32
       -
               self.append(stop)

     

       33
       33
       -
       

     

       34
       34
       -
       class RadialGradient(DrawingDef):

     

       35
       35
       -
           ''' A radial gradient to use as a fill or other color

     

       36
       36
       -
       

     

       37
       37
       -
               Has <stop> nodes as children. '''

     

       38
       38
       -
           TAG_NAME = 'radialGradient'

     

       39
       39
       -
           def __init__(self, cx, cy, r, gradientUnits='userSpaceOnUse', fy=None, **kwargs):

     

       40
       40
       -
               yShift = 0

     

       41
       41
       -
               if gradientUnits != 'userSpaceOnUse':

     

       42
       42
       -
                   yShift = 1

     

       43
       43
       -
               try: cy = yShift - cy

     

       44
       44
       -
               except TypeError: pass

     

       45
       45
       -
               try: fy = yShift - fy

     

       46
       46
       -
               except TypeError: pass

     

       47
       47
       -
               super().__init__(cx=cx, cy=cy, r=r, gradientUnits=gradientUnits,

     

       48
       48
       -
                                fy=fy, **kwargs)

     

       49
       49
       -
           def addStop(self, offset, color, opacity=None, **kwargs):

     

       50
       50
       -
               stop = GradientStop(offset=offset, stop_color=color,

     

       51
       51
       -
                                   stop_opacity=opacity, **kwargs)

     

       52
       52
       -
               self.append(stop)

     

       53
       53
       -
       

     

       54
       54
       -
       class GradientStop(DrawingDefSub):

     

       55
       55
       -
           ''' A control point for a radial or linear gradient '''

     

       56
       56
       -
           TAG_NAME = 'stop'

     

       57
       57
       -
           hasContent = False

     

       58
       58
       -
       

     

       59
       59
       -
       class ClipPath(DrawingDef):

     

       60
       60
       -
           ''' A shape used to crop another element by not drawing outside of this

     

       61
       61
       -
               shape

     

       62
       62
       -
       

     

       63
       63
       -
               Has regular drawing elements as children. '''

     

       64
       64
       -
           TAG_NAME = 'clipPath'

     

       65
       65
       -
       

     

       66
       66
       -
       class Filter(DrawingDef):

     

       67
       67
       -
           ''' A filter to apply to geometry

     

       68
       68
       -
       

     

       69
       69
       -
               For example a blur filter. '''

     

       70
       70
       -
           TAG_NAME = 'filter'

     

       71
       71
       -
       

     

       72
       72
       -
       class FilterItem(DrawingDefSub):

     

       73
       73
       -
           ''' A child of Filter with any tag name'''

     

       74
       74
       -
           def __init__(self, tag_name, **args):

     

       75
       75
       -
               super().__init__(**args)

     

       76
       76
       -
               self.TAG_NAME = tag_name

-146

drawSvg/drawing.py

···

       1
       1
       -
       

     

       2
       2
       -
       from io import StringIO

     

       3
       3
       -
       

     

       4
       4
       -
       from . import Raster

     

       5
       5
       -
       from . import elements as elementsModule

     

       6
       6
       -
       

     

       7
       7
       -
       

     

       8
       8
       -
       class Drawing:

     

       9
       9
       -
           ''' A canvas to draw on

     

       10
       10
       -
       

     

       11
       11
       -
               Supports iPython: If a Drawing is the last line of a cell, it will be

     

       12
       12
       -
               displayed as an SVG below. '''

     

       13
       13
       -
           def __init__(self, width, height, origin=(0,0), **svgArgs):

     

       14
       14
       -
               assert float(width) == width

     

       15
       15
       -
               assert float(height) == height

     

       16
       16
       -
               self.width = width

     

       17
       17
       -
               self.height = height

     

       18
       18
       -
               if origin == 'center':

     

       19
       19
       -
                   self.viewBox = (-width/2, -height/2, width, height)

     

       20
       20
       -
               else:

     

       21
       21
       -
                   origin = tuple(origin)

     

       22
       22
       -
                   assert len(origin) == 2

     

       23
       23
       -
                   self.viewBox = origin + (width, height)

     

       24
       24
       -
               self.viewBox = (self.viewBox[0], -self.viewBox[1]-self.viewBox[3],

     

       25
       25
       -
                               self.viewBox[2], self.viewBox[3])

     

       26
       26
       -
               self.elements = []

     

       27
       27
       -
               self.otherDefs = []

     

       28
       28
       -
               self.pixelScale = 1

     

       29
       29
       -
               self.renderWidth = None

     

       30
       30
       -
               self.renderHeight = None

     

       31
       31
       -
               self.svgArgs = svgArgs

     

       32
       32
       -
           def setRenderSize(self, w=None, h=None):

     

       33
       33
       -
               self.renderWidth = w

     

       34
       34
       -
               self.renderHeight = h

     

       35
       35
       -
               return self

     

       36
       36
       -
           def setPixelScale(self, s=1):

     

       37
       37
       -
               self.renderWidth = None

     

       38
       38
       -
               self.renderHeight = None

     

       39
       39
       -
               self.pixelScale = s

     

       40
       40
       -
               return self

     

       41
       41
       -
           def calcRenderSize(self):

     

       42
       42
       -
               if self.renderWidth is None and self.renderHeight is None:

     

       43
       43
       -
                   return (self.width * self.pixelScale,

     

       44
       44
       -
                           self.height * self.pixelScale)

     

       45
       45
       -
               elif self.renderWidth is None:

     

       46
       46
       -
                   s = self.renderHeight / self.height

     

       47
       47
       -
                   return self.width * s, self.renderHeight

     

       48
       48
       -
               elif self.renderHeight is None:

     

       49
       49
       -
                   s = self.renderWidth / self.width

     

       50
       50
       -
                   return self.renderWidth, self.height * s

     

       51
       51
       -
               else:

     

       52
       52
       -
                   return self.renderWidth, self.renderHeight

     

       53
       53
       -
           def draw(self, obj, **kwargs):

     

       54
       54
       -
               if not hasattr(obj, 'writeSvgElement'):

     

       55
       55
       -
                   elements = obj.toDrawables(elements=elementsModule, **kwargs)

     

       56
       56
       -
               else:

     

       57
       57
       -
                   assert len(kwargs) == 0

     

       58
       58
       -
                   elements = (obj,)

     

       59
       59
       -
               self.extend(elements)

     

       60
       60
       -
           def append(self, element):

     

       61
       61
       -
               self.elements.append(element)

     

       62
       62
       -
           def extend(self, iterable):

     

       63
       63
       -
               self.elements.extend(iterable)

     

       64
       64
       -
           def insert(self, i, element):

     

       65
       65
       -
               self.elements.insert(i, element)

     

       66
       66
       -
           def remove(self, element):

     

       67
       67
       -
               self.elements.remove(element)

     

       68
       68
       -
           def clear(self):

     

       69
       69
       -
               self.elements.clear()

     

       70
       70
       -
           def index(self, *args, **kwargs):

     

       71
       71
       -
               self.elements.index(*args, **kwargs)

     

       72
       72
       -
           def count(self, element):

     

       73
       73
       -
               self.elements.count(element)

     

       74
       74
       -
           def reverse(self):

     

       75
       75
       -
               self.elements.reverse()

     

       76
       76
       -
           def drawDef(self, obj, **kwargs):

     

       77
       77
       -
               if not hasattr(obj, 'writeSvgElement'):

     

       78
       78
       -
                   elements = obj.toDrawables(elements=elementsModule, **kwargs)

     

       79
       79
       -
               else:

     

       80
       80
       -
                   assert len(kwargs) == 0

     

       81
       81
       -
                   elements = (obj,)

     

       82
       82
       -
               self.otherDefs.extend(elements)

     

       83
       83
       -
           def appendDef(self, element):

     

       84
       84
       -
               self.otherDefs.append(element)

     

       85
       85
       -
           def asSvg(self, outputFile=None):

     

       86
       86
       -
               returnString = outputFile is None

     

       87
       87
       -
               if returnString:

     

       88
       88
       -
                   outputFile = StringIO()

     

       89
       89
       -
               imgWidth, imgHeight = self.calcRenderSize()

     

       90
       90
       -
               startStr = '''<?xml version="1.0" encoding="UTF-8"?>

     

       91
       91
       -
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       92
       92
       -
            width="{}" height="{}" viewBox="{} {} {} {}"'''.format(

     

       93
       93
       -
                   imgWidth, imgHeight, *self.viewBox)

     

       94
       94
       -
               endStr = '</svg>'

     

       95
       95
       -
               outputFile.write(startStr)

     

       96
       96
       -
               elementsModule.writeXmlNodeArgs(self.svgArgs, outputFile)

     

       97
       97
       -
               outputFile.write('>\n<defs>\n')

     

       98
       98
       -
               # Write definition elements

     

       99
       99
       -
               idIndex = 0

     

       100
       100
       -
               def idGen(base='d'):

     

       101
       101
       -
                   nonlocal idIndex

     

       102
       102
       -
                   idStr = base + str(idIndex)

     

       103
       103
       -
                   idIndex += 1

     

       104
       104
       -
                   return idStr

     

       105
       105
       -
               prevSet = set((id(defn) for defn in self.otherDefs))

     

       106
       106
       -
               def isDuplicate(obj):

     

       107
       107
       -
                   nonlocal prevSet

     

       108
       108
       -
                   dup = id(obj) in prevSet

     

       109
       109
       -
                   prevSet.add(id(obj))

     

       110
       110
       -
                   return dup

     

       111
       111
       -
               for element in self.otherDefs:

     

       112
       112
       -
                   try:

     

       113
       113
       -
                       element.writeSvgElement(outputFile)

     

       114
       114
       -
                       outputFile.write('\n')

     

       115
       115
       -
                   except AttributeError:

     

       116
       116
       -
                       pass

     

       117
       117
       -
               for element in self.elements:

     

       118
       118
       -
                   try:

     

       119
       119
       -
                       element.writeSvgDefs(idGen, isDuplicate, outputFile)

     

       120
       120
       -
                   except AttributeError:

     

       121
       121
       -
                       pass

     

       122
       122
       -
               outputFile.write('</defs>\n')

     

       123
       123
       -
               # Write normal elements

     

       124
       124
       -
               for element in self.elements:

     

       125
       125
       -
                   try:

     

       126
       126
       -
                       element.writeSvgElement(outputFile)

     

       127
       127
       -
                       outputFile.write('\n')

     

       128
       128
       -
                   except AttributeError:

     

       129
       129
       -
                       pass

     

       130
       130
       -
               outputFile.write(endStr)

     

       131
       131
       -
               if returnString:

     

       132
       132
       -
                   return outputFile.getvalue()

     

       133
       133
       -
           def saveSvg(self, fname):

     

       134
       134
       -
               with open(fname, 'w') as f:

     

       135
       135
       -
                   self.asSvg(outputFile=f)

     

       136
       136
       -
           def savePng(self, fname):

     

       137
       137
       -
               self.rasterize(toFile=fname)

     

       138
       138
       -
           def rasterize(self, toFile=None):

     

       139
       139
       -
               if toFile:

     

       140
       140
       -
                   return Raster.fromSvgToFile(self.asSvg(), toFile)

     

       141
       141
       -
               else:

     

       142
       142
       -
                   return Raster.fromSvg(self.asSvg())

     

       143
       143
       -
           def _repr_svg_(self):

     

       144
       144
       -
               ''' Display in Jupyter notebook '''

     

       145
       145
       -
               return self.asSvg()

     

       146
       146
       -

-365

drawSvg/elements.py

···

       1
       1
       -
       

     

       2
       2
       -
       import sys

     

       3
       3
       -
       import math

     

       4
       4
       -
       import os.path

     

       5
       5
       -
       import base64

     

       6
       6
       -
       import warnings

     

       7
       7
       -
       import xml.sax.saxutils as xml

     

       8
       8
       -
       

     

       9
       9
       -
       from . import defs

     

       10
       10
       -
       

     

       11
       11
       -
       elementsModule = sys.modules[__name__]

     

       12
       12
       -
       

     

       13
       13
       -
       # TODO: Support drawing ellipses without manually using Path

     

       14
       14
       -
       

     

       15
       15
       -
       def writeXmlNodeArgs(args, outputFile):

     

       16
       16
       -
           for k, v in args.items():

     

       17
       17
       -
               if v is None: continue

     

       18
       18
       -
               k = k.replace('__', ':')

     

       19
       19
       -
               k = k.replace('_', '-')

     

       20
       20
       -
               if k[-1]=='-':

     

       21
       21
       -
                   k = k[:-1]

     

       22
       22
       -
               if isinstance(v, defs.DrawingElement):

     

       23
       23
       -
                   if k == 'xlink:href':

     

       24
       24
       -
                       v = '#{}'.format(v.id)

     

       25
       25
       -
                   else:

     

       26
       26
       -
                       v = 'url(#{})'.format(v.id)

     

       27
       27
       -
               outputFile.write(' {}="{}"'.format(k,v))

     

       28
       28
       -
       

     

       29
       29
       -
       

     

       30
       30
       -
       class DrawingElement:

     

       31
       31
       -
           ''' Base class for drawing elements

     

       32
       32
       -
       

     

       33
       33
       -
               Subclasses must implement writeSvgElement '''

     

       34
       34
       -
           def writeSvgElement(self, outputFile):

     

       35
       35
       -
               raise NotImplementedError('Abstract base class')

     

       36
       36
       -
           def getSvgDefs(self):

     

       37
       37
       -
               return ()

     

       38
       38
       -
           def writeSvgDefs(self, idGen, isDuplicate, outputFile):

     

       39
       39
       -
               for defn in self.getSvgDefs():

     

       40
       40
       -
                   if isDuplicate(defn): continue

     

       41
       41
       -
                   defn.writeSvgDefs(idGen, isDuplicate, outputFile)

     

       42
       42
       -
                   defn.id = idGen()

     

       43
       43
       -
                   defn.writeSvgElement(outputFile)

     

       44
       44
       -
                   outputFile.write('\n')

     

       45
       45
       -
           def __eq__(self, other):

     

       46
       46
       -
               return self is other

     

       47
       47
       -
       

     

       48
       48
       -
       class DrawingBasicElement(DrawingElement):

     

       49
       49
       -
           ''' Base class for SVG drawing elements that are a single node with no

     

       50
       50
       -
               child nodes '''

     

       51
       51
       -
           TAG_NAME = '_'

     

       52
       52
       -
           hasContent = False

     

       53
       53
       -
           def __init__(self, **args):

     

       54
       54
       -
               self.args = args

     

       55
       55
       -
           @property

     

       56
       56
       -
           def id(self):

     

       57
       57
       -
               return self.args.get('id', None)

     

       58
       58
       -
           @id.setter

     

       59
       59
       -
           def id(self, newId):

     

       60
       60
       -
               self.args['id'] = newId

     

       61
       61
       -
           def writeSvgElement(self, outputFile):

     

       62
       62
       -
               outputFile.write('<')

     

       63
       63
       -
               outputFile.write(self.TAG_NAME)

     

       64
       64
       -
               writeXmlNodeArgs(self.args, outputFile)

     

       65
       65
       -
               if not self.hasContent:

     

       66
       66
       -
                   outputFile.write(' />')

     

       67
       67
       -
               else:

     

       68
       68
       -
                   outputFile.write('>')

     

       69
       69
       -
                   self.writeContent(outputFile)

     

       70
       70
       -
                   outputFile.write('</')

     

       71
       71
       -
                   outputFile.write(self.TAG_NAME)

     

       72
       72
       -
                   outputFile.write('>')

     

       73
       73
       -
           def writeContent(self, outputFile):

     

       74
       74
       -
               ''' Override in a subclass to add data between the start and end

     

       75
       75
       -
                   tags.  This will not be called if hasContent is False. '''

     

       76
       76
       -
               raise RuntimeError('This element has no content')

     

       77
       77
       -
           def getSvgDefs(self):

     

       78
       78
       -
               return [v for v in self.args.values()

     

       79
       79
       -
                       if isinstance(v, defs.DrawingElement)]

     

       80
       80
       -
           def __eq__(self, other):

     

       81
       81
       -
               if isinstance(other, type(self)):

     

       82
       82
       -
                   return (self.TAG_NAME == other.TAG_NAME and

     

       83
       83
       -
                           self.args == other.args)

     

       84
       84
       -
               return False

     

       85
       85
       -
       

     

       86
       86
       -
       class DrawingParentElement(DrawingBasicElement):

     

       87
       87
       -
           ''' Base class for SVG elements that can have child nodes '''

     

       88
       88
       -
           hasContent = True

     

       89
       89
       -
           def __init__(self, children=(), **args):

     

       90
       90
       -
               super().__init__(**args)

     

       91
       91
       -
               self.children = list(children)

     

       92
       92
       -
               if len(self.children) > 0:

     

       93
       93
       -
                   self.checkChildrenAllowed()

     

       94
       94
       -
           def checkChildrenAllowed(self):

     

       95
       95
       -
               if not self.hasContent:

     

       96
       96
       -
                   raise RuntimeError('{} does not support children'.format(type(self)))

     

       97
       97
       -
           def draw(self, obj, **kwargs):

     

       98
       98
       -
               if not hasattr(obj, 'writeSvgElement'):

     

       99
       99
       -
                   elements = obj.toDrawables(elements=elementsModule, **kwargs)

     

       100
       100
       -
                   self.extend(elements)

     

       101
       101
       -
               else:

     

       102
       102
       -
                   assert len(kwargs) == 0

     

       103
       103
       -
                   self.append(obj)

     

       104
       104
       -
           def append(self, element):

     

       105
       105
       -
               self.checkChildrenAllowed()

     

       106
       106
       -
               self.children.append(element)

     

       107
       107
       -
           def extend(self, iterable):

     

       108
       108
       -
               self.checkChildrenAllowed()

     

       109
       109
       -
               self.children.extend(iterable)

     

       110
       110
       -
           def writeContent(self, outputFile):

     

       111
       111
       -
               outputFile.write('\n')

     

       112
       112
       -
               for child in self.children:

     

       113
       113
       -
                   child.writeSvgElement(outputFile)

     

       114
       114
       -
                   outputFile.write('\n')

     

       115
       115
       -
           def writeSvgDefs(self, idGen, isDuplicate, outputFile):

     

       116
       116
       -
               super().writeSvgDefs(idGen, isDuplicate, outputFile)

     

       117
       117
       -
               for child in self.children:

     

       118
       118
       -
                   child.writeSvgDefs(idGen, isDuplicate, outputFile)

     

       119
       119
       -
       

     

       120
       120
       -
       class NoElement(DrawingElement):

     

       121
       121
       -
           ''' A drawing element that has no effect '''

     

       122
       122
       -
           def __init__(self): pass

     

       123
       123
       -
           def writeSvgElement(self, outputFile):

     

       124
       124
       -
               pass

     

       125
       125
       -
           def __eq__(self, other):

     

       126
       126
       -
               if isinstance(other, type(self)):

     

       127
       127
       -
                   return True

     

       128
       128
       -
               return False

     

       129
       129
       -
       

     

       130
       130
       -
       class Group(DrawingParentElement):

     

       131
       131
       -
           ''' A group of drawing elements

     

       132
       132
       -
       

     

       133
       133
       -
               Any transform will apply to its children and other attributes will be

     

       134
       134
       -
               inherited by its children. '''

     

       135
       135
       -
           TAG_NAME = 'g'

     

       136
       136
       -
       

     

       137
       137
       -
       class Use(DrawingBasicElement):

     

       138
       138
       -
           ''' A copy of another element

     

       139
       139
       -
       

     

       140
       140
       -
               The other element becomes an SVG def shared between all Use elements

     

       141
       141
       -
               that reference it. '''

     

       142
       142
       -
           TAG_NAME = 'use'

     

       143
       143
       -
           def __init__(self, otherElem, x, y, **kwargs):

     

       144
       144
       -
               y = -y

     

       145
       145
       -
               if isinstance(otherElem, str) and not otherElem.startswith('#'):

     

       146
       146
       -
                   otherElem = '#' + otherElem

     

       147
       147
       -
               super().__init__(xlink__href=otherElem, x=x, y=y, **kwargs)

     

       148
       148
       -
       

     

       149
       149
       -
       class Image(DrawingBasicElement):

     

       150
       150
       -
           ''' A linked or embedded raster image '''

     

       151
       151
       -
           TAG_NAME = 'image'

     

       152
       152
       -
           MIME_MAP = {

     

       153
       153
       -
               '.bm':  'image/bmp',

     

       154
       154
       -
               '.bmp': 'image/bmp',

     

       155
       155
       -
               '.gif': 'image/gif',

     

       156
       156
       -
               '.jpeg':'image/jpeg',

     

       157
       157
       -
               '.jpg': 'image/jpeg',

     

       158
       158
       -
               '.png': 'image/png',

     

       159
       159
       -
               '.tif': 'image/tiff',

     

       160
       160
       -
               '.tiff':'image/tiff',

     

       161
       161
       -
               '.pdf': 'application/pdf',

     

       162
       162
       -
               '.txt': 'text/plain',

     

       163
       163
       -
           }

     

       164
       164
       -
           MIME_DEFAULT = 'image/png'

     

       165
       165
       -
           def __init__(self, x, y, width, height, path=None, data=None, embed=False,

     

       166
       166
       -
                        mimeType=None, **kwargs):

     

       167
       167
       -
               ''' Specify either the path or data argument.  If path is used and

     

       168
       168
       -
                   embed is True, the image file is embedded in a data URI. '''

     

       169
       169
       -
               if path is None and data is None:

     

       170
       170
       -
                   raise ValueError('Either path or data arguments must be given')

     

       171
       171
       -
               if mimeType is None and path is not None:

     

       172
       172
       -
                       ext = os.path.splitext(path)[1].lower()

     

       173
       173
       -
                       if ext in self.MIME_MAP:

     

       174
       174
       -
                           mimeType = self.MIME_MAP[ext]

     

       175
       175
       -
                       else:

     

       176
       176
       -
                           mimeType = self.MIME_DEFAULT

     

       177
       177
       -
                           warnings.warn('Unknown image file type "{}"'.format(ext), Warning)

     

       178
       178
       -
               if mimeType is None:

     

       179
       179
       -
                   mimeType = self.MIME_DEFAULT

     

       180
       180
       -
                   warnings.warn('Unspecified image type; assuming png'.format(ext), Warning)

     

       181
       181
       -
               if data is not None:

     

       182
       182
       -
                   embed = True

     

       183
       183
       -
               if embed and data is None:

     

       184
       184
       -
                   with open(path, 'rb') as f:

     

       185
       185
       -
                       data = f.read()

     

       186
       186
       -
               if not embed:

     

       187
       187
       -
                   uri = path

     

       188
       188
       -
               else:

     

       189
       189
       -
                   encData = base64.b64encode(data).decode()

     

       190
       190
       -
                   uri = 'data:{};base64,{}'.format(mimeType, encData)

     

       191
       191
       -
               super().__init__(x=x, y=-y-height, width=width, height=height,

     

       192
       192
       -
                                xlink__href=uri, **kwargs)

     

       193
       193
       -
       

     

       194
       194
       -
       class Text(DrawingBasicElement):

     

       195
       195
       -
           ''' Text

     

       196
       196
       -
       

     

       197
       197
       -
               Additional keyword arguments are output as additional arguments to the

     

       198
       198
       -
               SVG node e.g. fill="red", font_size=20, text_anchor="middle". '''

     

       199
       199
       -
           TAG_NAME = 'text'

     

       200
       200
       -
           hasContent = True

     

       201
       201
       -
           def __init__(self, text, fontSize, x, y, center=False, **kwargs):

     

       202
       202
       -
               if center:

     

       203
       203
       -
                   if 'text_anchor' not in kwargs:

     

       204
       204
       -
                       kwargs['text_anchor'] = 'middle'

     

       205
       205
       -
                   try:

     

       206
       206
       -
                       fontSize = float(fontSize)

     

       207
       207
       -
                       translate = 'translate(0,{})'.format(fontSize*0.5*center)

     

       208
       208
       -
                       if 'transform' in kwargs:

     

       209
       209
       -
                           kwargs['transform'] = translate + ' ' + kwargs['transform']

     

       210
       210
       -
                       else:

     

       211
       211
       -
                           kwargs['transform'] = translate

     

       212
       212
       -
                   except TypeError:

     

       213
       213
       -
                       pass

     

       214
       214
       -
               super().__init__(x=x, y=-y, font_size=fontSize, **kwargs)

     

       215
       215
       -
               self.escapedText = xml.escape(text)

     

       216
       216
       -
           def writeContent(self, outputFile):

     

       217
       217
       -
               outputFile.write(self.escapedText)

     

       218
       218
       -
       

     

       219
       219
       -
       class Rectangle(DrawingBasicElement):

     

       220
       220
       -
           ''' A rectangle

     

       221
       221
       -
       

     

       222
       222
       -
               Additional keyword arguments are output as additional arguments to the

     

       223
       223
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       224
       224
       -
           TAG_NAME = 'rect'

     

       225
       225
       -
           def __init__(self, x, y, width, height, **kwargs):

     

       226
       226
       -
               super().__init__(x=x, y=-y-height, width=width, height=height,

     

       227
       227
       -
                   **kwargs)

     

       228
       228
       -
       

     

       229
       229
       -
       class Circle(DrawingBasicElement):

     

       230
       230
       -
           ''' A circle

     

       231
       231
       -
       

     

       232
       232
       -
               Additional keyword arguments are output as additional properties to the

     

       233
       233
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       234
       234
       -
           TAG_NAME = 'circle'

     

       235
       235
       -
           def __init__(self, cx, cy, r, **kwargs):

     

       236
       236
       -
               super().__init__(cx=cx, cy=-cy, r=r, **kwargs)

     

       237
       237
       -
       

     

       238
       238
       -
       class Ellipse(DrawingBasicElement):

     

       239
       239
       -
           ''' An ellipse

     

       240
       240
       -
       

     

       241
       241
       -
               Additional keyword arguments are output as additional properties to the

     

       242
       242
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       243
       243
       -
           TAG_NAME = 'ellipse'

     

       244
       244
       -
           def __init__(self, cx, cy, rx, ry, **kwargs):

     

       245
       245
       -
               super().__init__(cx=cx, cy=-cy, rx=rx, ry=ry, **kwargs)

     

       246
       246
       -
       

     

       247
       247
       -
       class ArcLine(Circle):

     

       248
       248
       -
           ''' An arc

     

       249
       249
       -
       

     

       250
       250
       -
               In most cases, use Arc instead of ArcLine.  ArcLine uses the

     

       251
       251
       -
               stroke-dasharray SVG property to make the edge of a circle look like

     

       252
       252
       -
               an arc.

     

       253
       253
       -
       

     

       254
       254
       -
               Additional keyword arguments are output as additional arguments to the

     

       255
       255
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       256
       256
       -
           def __init__(self, cx, cy, r, startDeg, endDeg, **kwargs):

     

       257
       257
       -
               if endDeg - startDeg == 360:

     

       258
       258
       -
                   super().__init__(cx, cy, r, **kwargs)

     

       259
       259
       -
                   return

     

       260
       260
       -
               startDeg, endDeg = (-endDeg) % 360, (-startDeg) % 360

     

       261
       261
       -
               arcDeg = (endDeg - startDeg) % 360

     

       262
       262
       -
               def arcLen(deg): return math.radians(deg) * r

     

       263
       263
       -
               wholeLen = 2 * math.pi * r

     

       264
       264
       -
               if endDeg == startDeg:

     

       265
       265
       -
                   offset = 1

     

       266
       266
       -
                   dashes = "0 {}".format(wholeLen+2)

     

       267
       267
       -
               #elif endDeg >= startDeg:

     

       268
       268
       -
               elif True:

     

       269
       269
       -
                   startLen = arcLen(startDeg)

     

       270
       270
       -
                   arcLen = arcLen(arcDeg)

     

       271
       271
       -
                   offLen = wholeLen - arcLen

     

       272
       272
       -
                   offset = -startLen

     

       273
       273
       -
                   dashes = "{} {}".format(arcLen, offLen)

     

       274
       274
       -
               #else:

     

       275
       275
       -
               #    firstLen = arcLen(endDeg)

     

       276
       276
       -
               #    secondLen = arcLen(360-startDeg)

     

       277
       277
       -
               #    gapLen = wholeLen - firstLen - secondLen

     

       278
       278
       -
               #    offset = 0

     

       279
       279
       -
               #    dashes = "{} {} {}".format(firstLen, gapLen, secondLen)

     

       280
       280
       -
               super().__init__(cx, cy, r, stroke_dasharray=dashes,

     

       281
       281
       -
                                stroke_dashoffset=offset, **kwargs)

     

       282
       282
       -
       

     

       283
       283
       -
       class Path(DrawingBasicElement):

     

       284
       284
       -
           ''' An arbitrary path

     

       285
       285
       -
       

     

       286
       286
       -
               Path Supports building an SVG path by calling instance methods

     

       287
       287
       -
               corresponding to path commands.

     

       288
       288
       -
       

     

       289
       289
       -
               Additional keyword arguments are output as additional properties to the

     

       290
       290
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       291
       291
       -
           TAG_NAME = 'path'

     

       292
       292
       -
           def __init__(self, d='', **kwargs):

     

       293
       293
       -
               super().__init__(d=d, **kwargs)

     

       294
       294
       -
           def append(self, commandStr, *args):

     

       295
       295
       -
               if len(self.args['d']) > 0:

     

       296
       296
       -
                   commandStr = ' ' + commandStr

     

       297
       297
       -
               if len(args) > 0:

     

       298
       298
       -
                   commandStr = commandStr + ','.join(map(str, args))

     

       299
       299
       -
               self.args['d'] += commandStr

     

       300
       300
       -
           def M(self, x, y): self.append('M', x, -y)

     

       301
       301
       -
           def m(self, dx, dy): self.append('m', dx, -dy)

     

       302
       302
       -
           def L(self, x, y): self.append('L', x, -y)

     

       303
       303
       -
           def l(self, dx, dy): self.append('l', dx, -dy)

     

       304
       304
       -
           def H(self, x): self.append('H', x)

     

       305
       305
       -
           def h(self, dx): self.append('h', dx)

     

       306
       306
       -
           def V(self, y): self.append('V', -y)

     

       307
       307
       -
           def v(self, dy): self.append('v', -dy)

     

       308
       308
       -
           def Z(self): self.append('Z')

     

       309
       309
       -
           def C(self, cx1, cy1, cx2, cy2, ex, ey):

     

       310
       310
       -
               self.append('C', cx1, -cy1, cx2, -cy2, ex, -ey)

     

       311
       311
       -
           def c(self, cx1, cy1, cx2, cy2, ex, ey):

     

       312
       312
       -
               self.append('c', cx1, -cy1, cx2, -cy2, ex, -ey)

     

       313
       313
       -
           def S(self, cx2, cy2, ex, ey): self.append('S', cx2, -cy2, ex, -ey)

     

       314
       314
       -
           def s(self, cx2, cy2, ex, ey): self.append('s', cx2, -cy2, ex, -ey)

     

       315
       315
       -
           def Q(self, cx, cy, ex, ey): self.append('Q', cx, -cy, ex, -ey)

     

       316
       316
       -
           def q(self, cx, cy, ex, ey): self.append('q', cx, -cy, ex, -ey)

     

       317
       317
       -
           def T(self, ex, ey): self.append('T', ex, -ey)

     

       318
       318
       -
           def t(self, ex, ey): self.append('t', ex, -ey)

     

       319
       319
       -
           def A(self, rx, ry, rot, largeArc, sweep, ex, ey):

     

       320
       320
       -
               self.append('A', rx, ry, rot, int(bool(largeArc)), int(bool(sweep)), ex, -ey)

     

       321
       321
       -
           def a(self, rx, ry, rot, largeArc, sweep, ex, ey):

     

       322
       322
       -
               self.append('a', rx, ry, rot, int(bool(largeArc)), int(bool(sweep)), ex, -ey)

     

       323
       323
       -
           def arc(self, cx, cy, r, startDeg, endDeg, cw=False, includeM=True, includeL=False):

     

       324
       324
       -
               ''' Uses A() to draw a circular arc '''

     

       325
       325
       -
               largeArc = (endDeg - startDeg) % 360 > 180

     

       326
       326
       -
               startRad, endRad = startDeg*math.pi/180, endDeg*math.pi/180

     

       327
       327
       -
               sx, sy = r*math.cos(startRad), r*math.sin(startRad)

     

       328
       328
       -
               ex, ey = r*math.cos(endRad), r*math.sin(endRad)

     

       329
       329
       -
               if includeL:

     

       330
       330
       -
                   self.L(cx+sx, cy+sy)

     

       331
       331
       -
               elif includeM:

     

       332
       332
       -
                   self.M(cx+sx, cy+sy)

     

       333
       333
       -
               self.A(r, r, 0, largeArc ^ cw, cw, cx+ex, cy+ey)

     

       334
       334
       -
       

     

       335
       335
       -
       class Lines(Path):

     

       336
       336
       -
           ''' A sequence of connected lines (or a polygon)

     

       337
       337
       -
       

     

       338
       338
       -
               Additional keyword arguments are output as additional properties to the

     

       339
       339
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       340
       340
       -
           def __init__(self, sx, sy, *points, close=False, **kwargs):

     

       341
       341
       -
               super().__init__(d='', **kwargs)

     

       342
       342
       -
               self.M(sx, sy)

     

       343
       343
       -
               assert len(points) % 2 == 0

     

       344
       344
       -
               for i in range(len(points) // 2):

     

       345
       345
       -
                   self.L(points[2*i], points[2*i+1])

     

       346
       346
       -
               if close:

     

       347
       347
       -
                   self.Z()

     

       348
       348
       -
       

     

       349
       349
       -
       class Line(Lines):

     

       350
       350
       -
           ''' A line

     

       351
       351
       -
       

     

       352
       352
       -
               Additional keyword arguments are output as additional properties to the

     

       353
       353
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       354
       354
       -
           def __init__(self, sx, sy, ex, ey, **kwargs):

     

       355
       355
       -
               super().__init__(sx, sy, ex, ey, close=False, **kwargs)

     

       356
       356
       -
       

     

       357
       357
       -
       class Arc(Path):

     

       358
       358
       -
           ''' An arc

     

       359
       359
       -
       

     

       360
       360
       -
               Additional keyword arguments are output as additional properties to the

     

       361
       361
       -
               SVG node e.g. fill="red", stroke="#ff4477", stroke_width=2. '''

     

       362
       362
       -
           def __init__(self, cx, cy, r, startDeg, endDeg, cw=False, **kwargs):

     

       363
       363
       -
               super().__init__(d='', **kwargs)

     

       364
       364
       -
               self.arc(cx, cy, r, startDeg, endDeg, cw=cw, includeM=True)

     

       365
       365
       -

-7

drawSvg/missing.py

···

       1
       1
       -
       

     

       2
       2
       -
       class MissingModule:

     

       3
       3
       -
           def __init__(self, errorMsg):

     

       4
       4
       -
               self.errorMsg = errorMsg

     

       5
       5
       -
           def __getattr__(self, name):

     

       6
       6
       -
               raise RuntimeError(self.errorMsg)

     

       7
       7
       -

-56

drawSvg/raster.py

···

       1
       1
       -
       

     

       2
       2
       -
       import io

     

       3
       3
       -
       import warnings

     

       4
       4
       -
       from .missing import MissingModule

     

       5
       5
       -
       

     

       6
       6
       -
       

     

       7
       7
       -
       try:

     

       8
       8
       -
           import cairosvg

     

       9
       9
       -
       except OSError as e:

     

       10
       10
       -
           msg = (

     

       11
       11
       -
               'Failed to import CairoSVG. '

     

       12
       12
       -
               'drawSvg will be unable to output PNG or other raster image formats. '

     

       13
       13
       -
               'See https://github.com/cduck/drawSvg#prerequisites for more details.\n'

     

       14
       14
       -
               'Original OSError: {}'.format(e)

     

       15
       15
       -
           )

     

       16
       16
       -
           cairosvg = MissingModule(msg)

     

       17
       17
       -
           warnings.warn(msg, RuntimeWarning)

     

       18
       18
       -
       except ImportError as e:

     

       19
       19
       -
           msg = (

     

       20
       20
       -
               'CairoSVG will need to be installed to rasterize images: Install with `pip3 install cairosvg`\n'

     

       21
       21
       -
               'Original ImportError: {}'.format(e)

     

       22
       22
       -
           )

     

       23
       23
       -
           cairosvg = MissingModule(msg)

     

       24
       24
       -
           warnings.warn(msg, RuntimeWarning)

     

       25
       25
       -
       

     

       26
       26
       -
       

     

       27
       27
       -
       class Raster:

     

       28
       28
       -
           def __init__(self, pngData=None, pngFile=None):

     

       29
       29
       -
               self.pngData = pngData

     

       30
       30
       -
               self.pngFile = pngFile

     

       31
       31
       -
           def savePng(self, fname):

     

       32
       32
       -
               with open(fname, 'wb') as f:

     

       33
       33
       -
                   f.write(self.pngData)

     

       34
       34
       -
           @staticmethod

     

       35
       35
       -
           def fromSvg(svgData):

     

       36
       36
       -
               pngData = cairosvg.svg2png(bytestring=svgData)

     

       37
       37
       -
               return Raster(pngData)

     

       38
       38
       -
           @staticmethod

     

       39
       39
       -
           def fromSvgToFile(svgData, outFile):

     

       40
       40
       -
               cairosvg.svg2png(bytestring=svgData, write_to=outFile)

     

       41
       41
       -
               return Raster(None, pngFile=outFile)

     

       42
       42
       -
           def _repr_png_(self):

     

       43
       43
       -
               if self.pngData:

     

       44
       44
       -
                   return self.pngData

     

       45
       45
       -
               elif self.pngFile:

     

       46
       46
       -
                   try:

     

       47
       47
       -
                       with open(self.pngFile, 'rb') as f:

     

       48
       48
       -
                           return f.read()

     

       49
       49
       -
                   except TypeError:

     

       50
       50
       -
                       pass

     

       51
       51
       -
                   try:

     

       52
       52
       -
                       self.pngFile.seek(0)

     

       53
       53
       -
                       return self.pngFile.read()

     

       54
       54
       -
                   except io.UnsupportedOperation:

     

       55
       55
       -
                       pass

     

       56
       56
       -

-54

drawSvg/video.py

···

       1
       1
       -
       import numpy as np

     

       2
       2
       -
       import imageio

     

       3
       3
       -
       

     

       4
       4
       -
       from .drawing import Drawing

     

       5
       5
       -
       

     

       6
       6
       -
       

     

       7
       7
       -
       def render_svg_frames(frames, align_bottom=False, align_right=False,

     

       8
       8
       -
                             bg=(255,)*4, **kwargs):

     

       9
       9
       -
           arr_frames = [imageio.imread(d.rasterize().pngData)

     

       10
       10
       -
                         for d in frames]

     

       11
       11
       -
           max_width = max(map(lambda arr:arr.shape[1], arr_frames))

     

       12
       12
       -
           max_height = max(map(lambda arr:arr.shape[0], arr_frames))

     

       13
       13
       -
       

     

       14
       14
       -
           def mod_frame(arr):

     

       15
       15
       -
               new_arr = np.zeros((max_height, max_width) + arr.shape[2:],

     

       16
       16
       -
                                  dtype=arr.dtype)

     

       17
       17
       -
               new_arr[:,:] = bg[:new_arr.shape[-1]]

     

       18
       18
       -
               if align_bottom:

     

       19
       19
       -
                   slice0 = slice(-arr.shape[0], None)

     

       20
       20
       -
               else:

     

       21
       21
       -
                   slice0 = slice(None, arr.shape[0])

     

       22
       22
       -
               if align_right:

     

       23
       23
       -
                   slice1 = slice(-arr.shape[1], None)

     

       24
       24
       -
               else:

     

       25
       25
       -
                   slice1 = slice(None, arr.shape[1])

     

       26
       26
       -
               new_arr[slice0, slice1] = arr

     

       27
       27
       -
               return new_arr

     

       28
       28
       -
           return list(map(mod_frame, arr_frames))

     

       29
       29
       -
       

     

       30
       30
       -
       def save_video(frames, file, **kwargs):

     

       31
       31
       -
           '''

     

       32
       32
       -
           Save a series of drawings as a GIF or video.

     

       33
       33
       -
       

     

       34
       34
       -
           Arguments:

     

       35
       35
       -
               frames: A list of `Drawing`s or a list of `numpy.array`s.

     

       36
       36
       -
               file: File name or file like object to write the video to.  The

     

       37
       37
       -
                   extension determines the output format.

     

       38
       38
       -
               align_bottom: If frames are different sizes, align the bottoms of each

     

       39
       39
       -
                   frame in the video.

     

       40
       40
       -
               align_right: If frames are different sizes, align the right edge of each

     

       41
       41
       -
                   frame in the video.

     

       42
       42
       -
               bg: If frames are different sizes, fill the background with this color.

     

       43
       43
       -
                   (default is white: (255, 255, 255, 255))

     

       44
       44
       -
               duration: If writing a GIF, sets the duration of each frame.

     

       45
       45
       -
               fps: If writing a video, sets the frame rate in FPS.

     

       46
       46
       -
               **kwargs: Other arguments to imageio.mimsave().

     

       47
       47
       -
       

     

       48
       48
       -
           '''

     

       49
       49
       -
           if isinstance(frames[0], Drawing):

     

       50
       50
       -
               frames = render_svg_frames(frames, **kwargs)

     

       51
       51
       -
           kwargs.pop('align_bottom', None)

     

       52
       52
       -
           kwargs.pop('align_right', None)

     

       53
       53
       -
           kwargs.pop('bg', None)

     

       54
       54
       -
           imageio.mimsave(file, frames, **kwargs)

-2

drawSvg/widgets/__init__.py

···

       1
       1
       -
       from .drawing_widget import DrawingWidget

     

       2
       2
       -
       from .async_animation import AsyncAnimation

-155

drawSvg/widgets/async_animation.py

···

       1
       1
       -
       import time

     

       2
       2
       -
       

     

       3
       3
       -
       from ..drawing import Drawing

     

       4
       4
       -
       from .drawing_widget import DrawingWidget

     

       5
       5
       -
       

     

       6
       6
       -
       

     

       7
       7
       -
       class AsyncAnimation(DrawingWidget):

     

       8
       8
       -
           '''AsyncAnimation is a Jupyter notebook widget for asynchronously displaying

     

       9
       9
       -
           an animation.

     

       10
       10
       -
       

     

       11
       11
       -
           Example:

     

       12
       12
       -
               # Jupyter cell 1:

     

       13
       13
       -
               widget = AsyncAnimation(fps=10)

     

       14
       14
       -
               widget

     

       15
       15
       -
               # [Animation is displayed here]

     

       16
       16
       -
       

     

       17
       17
       -
               # Jupyter cell 2:

     

       18
       18
       -
               global_variable = 'a'

     

       19
       19
       -
               @widget.set_draw_frame  # Animation above is automatically updated

     

       20
       20
       -
               def draw_frame(secs=0):

     

       21
       21
       -
                   # Draw something...

     

       22
       22
       -
                   d = draw.Drawing(300, 40)

     

       23
       23
       -
                   d.append(draw.Text(global_variable, 20, 0, 10))

     

       24
       24
       -
                   d.append(draw.Text(str(secs), 20, 30, 10))

     

       25
       25
       -
                   return d

     

       26
       26
       -
       

     

       27
       27
       -
               # Jupyter cell 3:

     

       28
       28
       -
               global_variable = 'b'  # Animation above now displays 'b'

     

       29
       29
       -
       

     

       30
       30
       -
           Attributes:

     

       31
       31
       -
               fps: The animation frame rate (frames per second).

     

       32
       32
       -
               draw_frame: A function that takes a single argument (animation time) and

     

       33
       33
       -
                   returns a Drawing.

     

       34
       34
       -
               paused: While True, the animation will not run.  Only the current frame

     

       35
       35
       -
                   will be shown.

     

       36
       36
       -
               disable: While True, the widget will not be interactive and the

     

       37
       37
       -
                   animation will not update.

     

       38
       38
       -
               click_pause: If True, clicking the drawing will pause or resume the

     

       39
       39
       -
                   animation.

     

       40
       40
       -
               mousemove_pause: If True, moving the mouse up across the drawing will

     

       41
       41
       -
                   pause the animation and moving the mouse down will resume it.

     

       42
       42
       -
               mousemove_y_threshold: Controls the sensitivity of mousemove_pause in

     

       43
       43
       -
                   web browser pixels.

     

       44
       44
       -
           '''

     

       45
       45
       -
       

     

       46
       46
       -
           def __init__(self, fps=10, draw_frame=None, *, paused=False, disable=False,

     

       47
       47
       -
                        click_pause=True, mousemove_pause=False,

     

       48
       48
       -
                        mousemove_y_threshold=10):

     

       49
       49
       -
               self._fps = fps

     

       50
       50
       -
               self._paused = paused

     

       51
       51
       -
               if draw_frame is None:

     

       52
       52
       -
                   def draw_frame(secs):

     

       53
       53
       -
                       return Drawing(0, 0)

     

       54
       54
       -
               self._draw_frame = draw_frame

     

       55
       55
       -
               self._last_secs = 0

     

       56
       56
       -
               self.click_pause = click_pause

     

       57
       57
       -
               self.mousemove_pause = mousemove_pause

     

       58
       58
       -
               self.mousemove_y_threshold = mousemove_y_threshold

     

       59
       59
       -
               self._start_time = 0

     

       60
       60
       -
               self._stop_time = 0

     

       61
       61
       -
               self._y_loc = 0

     

       62
       62
       -
               self._y_max = 0

     

       63
       63
       -
               self._y_min = 0

     

       64
       64
       -
               if self._paused:

     

       65
       65
       -
                   frame_delay = -1

     

       66
       66
       -
               else:

     

       67
       67
       -
                   frame_delay = 1000 // self._fps

     

       68
       68
       -
                   self._start_time = time.monotonic()

     

       69
       69
       -
               initial_drawing = self.draw_frame(0)

     

       70
       70
       -
               super().__init__(initial_drawing, throttle=True, disable=disable,

     

       71
       71
       -
                                frame_delay=frame_delay)

     

       72
       72
       -
       

     

       73
       73
       -
               # Register callbacks

     

       74
       74
       -
               @self.mousedown

     

       75
       75
       -
               def mousedown(self, x, y, info):

     

       76
       76
       -
                   if not self.click_pause:

     

       77
       77
       -
                       return

     

       78
       78
       -
                   self._y_min = self._y_max = self._y_loc

     

       79
       79
       -
                   self.paused = not self.paused

     

       80
       80
       -
       

     

       81
       81
       -
               @self.mousemove

     

       82
       82
       -
               def mousemove(self, x, y, info):

     

       83
       83
       -
                   self._y_loc += info['movementY']

     

       84
       84
       -
                   if not self.mousemove_pause:

     

       85
       85
       -
                       self._y_min = self._y_max = self._y_loc

     

       86
       86
       -
                       return

     

       87
       87
       -
                   self._y_max = max(self._y_max, self._y_loc)

     

       88
       88
       -
                   self._y_min = min(self._y_min, self._y_loc)

     

       89
       89
       -
                   thresh = self.mousemove_y_threshold

     

       90
       90
       -
                   invert = thresh < 0

     

       91
       91
       -
                   thresh = max(0.01, abs(thresh))

     

       92
       92
       -
                   down_triggered = self._y_loc - self._y_min >= thresh

     

       93
       93
       -
                   up_triggered = self._y_max - self._y_loc >= thresh

     

       94
       94
       -
                   if down_triggered:

     

       95
       95
       -
                       self._y_min = self._y_loc

     

       96
       96
       -
                   if up_triggered:

     

       97
       97
       -
                       self._y_max = self._y_loc

     

       98
       98
       -
                   if invert:

     

       99
       99
       -
                       down_triggered, up_triggered = up_triggered, down_triggered

     

       100
       100
       -
                   if down_triggered:

     

       101
       101
       -
                       self.paused = False

     

       102
       102
       -
                   if up_triggered:

     

       103
       103
       -
                       self.paused = True

     

       104
       104
       -
       

     

       105
       105
       -
               @self.timed

     

       106
       106
       -
               def timed(self, info):

     

       107
       107
       -
                   secs = time.monotonic() - self._start_time

     

       108
       108
       -
                   self.drawing = self.draw_frame(secs)

     

       109
       109
       -
                   self._last_secs = secs

     

       110
       110
       -
       

     

       111
       111
       -
               @self.on_exception

     

       112
       112
       -
               def on_exception(self, e):

     

       113
       113
       -
                   self.paused = True

     

       114
       114
       -
       

     

       115
       115
       -
           @property

     

       116
       116
       -
           def fps(self):

     

       117
       117
       -
               return self._fps

     

       118
       118
       -
       

     

       119
       119
       -
           @fps.setter

     

       120
       120
       -
           def fps(self, new_fps):

     

       121
       121
       -
               self._fps = new_fps

     

       122
       122
       -
               if self.paused:

     

       123
       123
       -
                   return

     

       124
       124
       -
               self.frame_delay = 1000 // self._fps

     

       125
       125
       -
       

     

       126
       126
       -
           @property

     

       127
       127
       -
           def paused(self):

     

       128
       128
       -
               return self._paused

     

       129
       129
       -
       

     

       130
       130
       -
           @paused.setter

     

       131
       131
       -
           def paused(self, new_paused):

     

       132
       132
       -
               if bool(self._paused) == bool(new_paused):

     

       133
       133
       -
                   return

     

       134
       134
       -
               self._paused = new_paused

     

       135
       135
       -
               if self._paused:

     

       136
       136
       -
                   self.frame_delay = -1

     

       137
       137
       -
                   self._stop_time = time.monotonic()

     

       138
       138
       -
               else:

     

       139
       139
       -
                   self._start_time += time.monotonic() - self._stop_time

     

       140
       140
       -
                   self.frame_delay = 1000 // self._fps

     

       141
       141
       -
       

     

       142
       142
       -
           @property

     

       143
       143
       -
           def draw_frame(self):

     

       144
       144
       -
               return self._draw_frame

     

       145
       145
       -
       

     

       146
       146
       -
           @draw_frame.setter

     

       147
       147
       -
           def draw_frame(self, new_draw_frame):

     

       148
       148
       -
               self._draw_frame = new_draw_frame

     

       149
       149
       -
               if self.paused:

     

       150
       150
       -
                   # Redraw if paused

     

       151
       151
       -
                   self.drawing = self._draw_frame(self._last_secs)

     

       152
       152
       -
       

     

       153
       153
       -
           def set_draw_frame(self, new_draw_frame):

     

       154
       154
       -
               self.draw_frame = new_draw_frame

     

       155
       155
       -
               return new_draw_frame

-120

drawSvg/widgets/drawing_javascript.py

···

       1
       1
       -
       javascript = '''

     

       2
       2
       -
       require.undef('drawingview');

     

       3
       3
       -
       

     

       4
       4
       -
       define('drawingview', ['@jupyter-widgets/base'], function(widgets) {

     

       5
       5
       -
           var DrawingView = widgets.DOMWidgetView.extend({

     

       6
       6
       -
               render: function() {

     

       7
       7
       -
                   this.container = document.createElement('a');

     

       8
       8
       -
                   this.image_changed();

     

       9
       9
       -
                   this.container.appendChild(this.svg_view);

     

       10
       10
       -
                   this.el.appendChild(this.container);

     

       11
       11
       -
                   this.model.on('change:_image', this.image_changed, this);

     

       12
       12
       -
                   this.model.on('change:_mousemove_blocked', this.block_changed,

     

       13
       13
       -
                                 this);

     

       14
       14
       -
                   this.model.on('change:frame_delay', this.delay_changed,

     

       15
       15
       -
                                 this);

     

       16
       16
       -
                   this.model.on('change:_frame_blocked', this.delay_changed,

     

       17
       17
       -
                                 this);

     

       18
       18
       -
                   this.model.on('change:disable', this.delay_changed,

     

       19
       19
       -
                                 this);

     

       20
       20
       -
                   this.delay_changed();

     

       21
       21
       -
               },

     

       22
       22
       -
               image_changed: function() {

     

       23
       23
       -
                   this.container.innerHTML = this.model.get('_image');

     

       24
       24
       -
                   this.svg_view = this.container.getElementsByTagName('svg')[0];

     

       25
       25
       -
                   this.cursor_point = this.svg_view.createSVGPoint();

     

       26
       26
       -
                   this.register_events();

     

       27
       27
       -
               },

     

       28
       28
       -
               last_move: null,

     

       29
       29
       -
               last_mousemove_blocked: null,

     

       30
       30
       -
               last_timer: null,

     

       31
       31
       -
               block_changed: function() {

     

       32
       32
       -
                   var widget = this;

     

       33
       33
       -
                   window.setTimeout(function() {

     

       34
       34
       -
                       if (widget.model.get('_mousemove_blocked')

     

       35
       35
       -
                               != widget.last_mousemove_blocked && widget.last_move) {

     

       36
       36
       -
                           widget.send_mouse_event('mousemove', widget.last_move);

     

       37
       37
       -
                       }

     

       38
       38
       -
                   }, 0);

     

       39
       39
       -
               },

     

       40
       40
       -
               send_mouse_event: function(name, e) {

     

       41
       41
       -
                   this.last_move = null;

     

       42
       42
       -
                   if (this.model.get('disable')) {

     

       43
       43
       -
                       return;

     

       44
       44
       -
                   }

     

       45
       45
       -
       

     

       46
       46
       -
                   this.cursor_point.x = e.clientX;

     

       47
       47
       -
                   this.cursor_point.y = e.clientY;

     

       48
       48
       -
                   var svg_pt = this.cursor_point.matrixTransform(

     

       49
       49
       -
                                   this.svg_view.getScreenCTM().inverse());

     

       50
       50
       -
       

     

       51
       51
       -
                   this.send({

     

       52
       52
       -
                       name: name,

     

       53
       53
       -
                       x: svg_pt.x,

     

       54
       54
       -
                       y: -svg_pt.y,

     

       55
       55
       -
                       type: e.type,

     

       56
       56
       -
                       button: e.button,

     

       57
       57
       -
                       buttons: e.buttons,

     

       58
       58
       -
                       shiftKey: e.shiftKey,

     

       59
       59
       -
                       altKey: e.altKey,

     

       60
       60
       -
                       ctrlKey: e.ctrlKey,

     

       61
       61
       -
                       metaKey: e.metaKey,

     

       62
       62
       -
                       clientX: e.clientX,

     

       63
       63
       -
                       clientY: e.clientY,

     

       64
       64
       -
                       movementX: e.movementX,

     

       65
       65
       -
                       movementY: e.movementY,

     

       66
       66
       -
                       timeStamp: e.timeStamp,

     

       67
       67
       -
                       targetId: e.target ? e.target.id : null,

     

       68
       68
       -
                       currentTargetId: e.currentTarget ? e.currentTarget.id : null,

     

       69
       69
       -
                       relatedTargetId: e.relatedTarget ? e.relatedTarget.id : null,

     

       70
       70
       -
                   });

     

       71
       71
       -
               },

     

       72
       72
       -
               delay_changed: function() {

     

       73
       73
       -
                   var widget = this;

     

       74
       74
       -
                   window.clearTimeout(widget.last_timer);

     

       75
       75
       -
                   if (widget.model.get('disable')) {

     

       76
       76
       -
                       return;

     

       77
       77
       -
                   }

     

       78
       78
       -
                   var delay = widget.model.get('frame_delay');

     

       79
       79
       -
                   if (delay > 0) {

     

       80
       80
       -
                       widget.last_timer = window.setTimeout(function() {

     

       81
       81
       -
                           widget.send_timed_event('timed');

     

       82
       82
       -
                       }, delay);

     

       83
       83
       -
                   }

     

       84
       84
       -
               },

     

       85
       85
       -
               send_timed_event: function(name) {

     

       86
       86
       -
                   if (this.model.get('disable')) {

     

       87
       87
       -
                       return;

     

       88
       88
       -
                   }

     

       89
       89
       -
       

     

       90
       90
       -
                   this.send({

     

       91
       91
       -
                       name: name,

     

       92
       92
       -
                   });

     

       93
       93
       -
               },

     

       94
       94
       -
               register_events: function() {

     

       95
       95
       -
                   var widget = this;

     

       96
       96
       -
                   this.svg_view.addEventListener('mousedown', function(e) {

     

       97
       97
       -
                       e.preventDefault();

     

       98
       98
       -
                       widget.send_mouse_event('mousedown', e);

     

       99
       99
       -
                   });

     

       100
       100
       -
                   this.svg_view.addEventListener('mousemove', function(e) {

     

       101
       101
       -
                       e.preventDefault();

     

       102
       102
       -
                       if (widget.model.get('_mousemove_blocked')

     

       103
       103
       -
                               == widget.last_mousemove_blocked) {

     

       104
       104
       -
                           widget.last_move = e;

     

       105
       105
       -
                       } else {

     

       106
       106
       -
                           widget.send_mouse_event('mousemove', e);

     

       107
       107
       -
                       }

     

       108
       108
       -
                   });

     

       109
       109
       -
                   this.svg_view.addEventListener('mouseup', function(e) {

     

       110
       110
       -
                       e.preventDefault();

     

       111
       111
       -
                       widget.send_mouse_event('mouseup', e);

     

       112
       112
       -
                   });

     

       113
       113
       -
               }

     

       114
       114
       -
           });

     

       115
       115
       -
       

     

       116
       116
       -
           return {

     

       117
       117
       -
               DrawingView: DrawingView

     

       118
       118
       -
           };

     

       119
       119
       -
       });

     

       120
       120
       -
       '''

-160

drawSvg/widgets/drawing_widget.py

···

       1
       1
       -
       from ipywidgets import widgets

     

       2
       2
       -
       from traitlets import Unicode, Bool, Int

     

       3
       3
       -
       

     

       4
       4
       -
       

     

       5
       5
       -
       # Register front end javascript

     

       6
       6
       -
       from IPython import display

     

       7
       7
       -
       from . import drawing_javascript

     

       8
       8
       -
       display.display(display.Javascript(drawing_javascript.javascript))

     

       9
       9
       -
       del drawing_javascript

     

       10
       10
       -
       

     

       11
       11
       -
       

     

       12
       12
       -
       class DrawingWidget(widgets.DOMWidget):

     

       13
       13
       -
           _view_name = Unicode('DrawingView').tag(sync=True)

     

       14
       14
       -
           _view_module = Unicode('drawingview').tag(sync=True)

     

       15
       15
       -
           _view_module_version = Unicode('0.1.0').tag(sync=True)

     

       16
       16
       -
           _image = Unicode().tag(sync=True)

     

       17
       17
       -
           _mousemove_blocked = Int(0).tag(sync=True)

     

       18
       18
       -
           _frame_blocked = Int(0).tag(sync=True)

     

       19
       19
       -
           throttle = Bool(True).tag(sync=True)

     

       20
       20
       -
           disable = Bool(False).tag(sync=True)

     

       21
       21
       -
           frame_delay = Int(-1).tag(sync=True)

     

       22
       22
       -
       

     

       23
       23
       -
           def __init__(self, drawing, throttle=True, disable=False, frame_delay=-1):

     

       24
       24
       -
               '''

     

       25
       25
       -
               DrawingWidget is an interactive Jupyter notebook widget.  It works

     

       26
       26
       -
               similarly to displaying a Drawing as a cell output but DrawingWidget

     

       27
       27
       -
               can register callbacks for user mouse events.  Within a callback modify

     

       28
       28
       -
               the drawing then call .refresh() to update the output in real time.

     

       29
       29
       -
       

     

       30
       30
       -
               Arguments:

     

       31
       31
       -
                   drawing: The initial Drawing to display.  Call .refresh() after

     

       32
       32
       -
                       modifying or just assign a new Drawing.

     

       33
       33
       -
                   throttle: If True, limit the rate of mousemove events.  For drawings

     

       34
       34
       -
                       with many elements, this will significantly reduce lag.

     

       35
       35
       -
                   disable: While True, mouse events will be disabled.

     

       36
       36
       -
                   frame_delay: If greater than or equal to zero, a timed callback will

     

       37
       37
       -
                       occur frame_delay milliseconds after the previous drawing

     

       38
       38
       -
                       update.

     

       39
       39
       -
               '''

     

       40
       40
       -
               super().__init__()

     

       41
       41
       -
               self.throttle = throttle

     

       42
       42
       -
               self.disable = disable

     

       43
       43
       -
               self.frame_delay = frame_delay

     

       44
       44
       -
               self.drawing = drawing

     

       45
       45
       -
               self.mousedown_callbacks = []

     

       46
       46
       -
               self.mousemove_callbacks = []

     

       47
       47
       -
               self.mouseup_callbacks = []

     

       48
       48
       -
               self.timed_callbacks = []

     

       49
       49
       -
               self.exception_callbacks = []

     

       50
       50
       -
       

     

       51
       51
       -
               self.on_msg(self._receive_msg)

     

       52
       52
       -
       

     

       53
       53
       -
           @property

     

       54
       54
       -
           def drawing(self):

     

       55
       55
       -
               return self._drawing

     

       56
       56
       -
       

     

       57
       57
       -
           @drawing.setter

     

       58
       58
       -
           def drawing(self, drawing):

     

       59
       59
       -
               self._drawing = drawing

     

       60
       60
       -
               self.refresh()

     

       61
       61
       -
       

     

       62
       62
       -
           def refresh(self):

     

       63
       63
       -
               '''

     

       64
       64
       -
               Redraw the displayed output with the current value of self.drawing.

     

       65
       65
       -
               '''

     

       66
       66
       -
               self._image = self.drawing.asSvg()

     

       67
       67
       -
       

     

       68
       68
       -
           def _receive_msg(self, _, content, buffers):

     

       69
       69
       -
               if not isinstance(content, dict):

     

       70
       70
       -
                   return

     

       71
       71
       -
               name = content.get('name')

     

       72
       72
       -
               callbacks = {

     

       73
       73
       -
                   'mousedown': self.mousedown_callbacks,

     

       74
       74
       -
                   'mousemove': self.mousemove_callbacks,

     

       75
       75
       -
                   'mouseup': self.mouseup_callbacks,

     

       76
       76
       -
                   'timed': self.timed_callbacks,

     

       77
       77
       -
               }.get(name, ())

     

       78
       78
       -
               try:

     

       79
       79
       -
                   if callbacks:

     

       80
       80
       -
                       if name == 'timed':

     

       81
       81
       -
                           self._call_handlers(callbacks, content)

     

       82
       82
       -
                       else:

     

       83
       83
       -
                           self._call_handlers(callbacks, content.get('x'),

     

       84
       84
       -
                                               content.get('y'), content)

     

       85
       85
       -
               except BaseException as e:

     

       86
       86
       -
                   suppress = any(

     

       87
       87
       -
                       handler(self, e)

     

       88
       88
       -
                       for handler in self.exception_callbacks

     

       89
       89
       -
                   )

     

       90
       90
       -
                   if not suppress:

     

       91
       91
       -
                       raise

     

       92
       92
       -
               finally:

     

       93
       93
       -
                   if name == 'timed':

     

       94
       94
       -
                       self._frame_blocked += 1

     

       95
       95
       -
                   else:

     

       96
       96
       -
                       self._mousemove_blocked += 1

     

       97
       97
       -
       

     

       98
       98
       -
       

     

       99
       99
       -
           def mousedown(self, handler, remove=False):

     

       100
       100
       -
               '''

     

       101
       101
       -
               Register (or unregister) a handler for the mousedown event.

     

       102
       102
       -
       

     

       103
       103
       -
               Arguments:

     

       104
       104
       -
                   remove: If True, unregister, otherwise register.

     

       105
       105
       -
               '''

     

       106
       106
       -
               self.on_msg

     

       107
       107
       -
               self._register_handler(

     

       108
       108
       -
                   self.mousedown_callbacks, handler, remove=remove)

     

       109
       109
       -
       

     

       110
       110
       -
           def mousemove(self, handler, remove=False):

     

       111
       111
       -
               '''

     

       112
       112
       -
               Register (or unregister) a handler for the mousemove event.

     

       113
       113
       -
       

     

       114
       114
       -
               Arguments:

     

       115
       115
       -
                   remove: If True, unregister, otherwise register.

     

       116
       116
       -
               '''

     

       117
       117
       -
               self._register_handler(

     

       118
       118
       -
                   self.mousemove_callbacks, handler, remove=remove)

     

       119
       119
       -
       

     

       120
       120
       -
           def mouseup(self, handler, remove=False):

     

       121
       121
       -
               '''

     

       122
       122
       -
               Register (or unregister) a handler for the mouseup event.

     

       123
       123
       -
       

     

       124
       124
       -
               Arguments:

     

       125
       125
       -
                   remove: If True, unregister, otherwise register.

     

       126
       126
       -
               '''

     

       127
       127
       -
               self._register_handler(

     

       128
       128
       -
                   self.mouseup_callbacks, handler, remove=remove)

     

       129
       129
       -
       

     

       130
       130
       -
           def timed(self, handler, remove=False):

     

       131
       131
       -
               '''

     

       132
       132
       -
               Register (or unregister) a handler for the timed event.

     

       133
       133
       -
       

     

       134
       134
       -
               Arguments:

     

       135
       135
       -
                   remove: If True, unregister, otherwise register.

     

       136
       136
       -
               '''

     

       137
       137
       -
               self._register_handler(

     

       138
       138
       -
                   self.timed_callbacks, handler, remove=remove)

     

       139
       139
       -
       

     

       140
       140
       -
           def on_exception(self, handler, remove=False):

     

       141
       141
       -
               '''

     

       142
       142
       -
               Register (or unregister) a handler for exceptions in other handlers.

     

       143
       143
       -
       

     

       144
       144
       -
               If any handler returns True, the exception is suppressed.

     

       145
       145
       -
       

     

       146
       146
       -
               Arguments:

     

       147
       147
       -
                   remove: If True, unregister, otherwise register.

     

       148
       148
       -
               '''

     

       149
       149
       -
               self._register_handler(

     

       150
       150
       -
                   self.exception_callbacks, handler, remove=remove)

     

       151
       151
       -
       

     

       152
       152
       -
           def _register_handler(self, callback_list, handler, remove=False):

     

       153
       153
       -
               if remove:

     

       154
       154
       -
                   callback_list.remove(handler)

     

       155
       155
       -
               else:

     

       156
       156
       -
                   callback_list.append(handler)

     

       157
       157
       -
       

     

       158
       158
       -
           def _call_handlers(self, callback_list, *args, **kwargs):

     

       159
       159
       -
               for callback in callback_list:

     

       160
       160
       -
                   callback(self, *args, **kwargs)

+99

drawsvg/__init__.py

···

       1
       1
       +
       '''

     

       2
       2
       +
       A library for creating SVG files or just drawings that can be displayed in

     

       3
       3
       +
       Jupyter notebooks

     

       4
       4
       +
       

     

       5
       5
       +
       Example:

     

       6
       6
       +
       ```

     

       7
       7
       +
           import drawsvg as draw

     

       8
       8
       +
       

     

       9
       9
       +
           d = draw.Drawing(200, 100, origin='center')

     

       10
       10
       +
       

     

       11
       11
       +
           # Draw an irregular polygon

     

       12
       12
       +
           d.append(draw.Lines(-80, 45,

     

       13
       13
       +
                                70, 49,

     

       14
       14
       +
                                95, -49,

     

       15
       15
       +
                               -90, -40,

     

       16
       16
       +
                               close=False,

     

       17
       17
       +
                       fill='#eeee00',

     

       18
       18
       +
                       stroke='black'))

     

       19
       19
       +
       

     

       20
       20
       +
           # Draw a rectangle

     

       21
       21
       +
           r = draw.Rectangle(-80, -50, 40, 50, fill='#1248ff')

     

       22
       22
       +
           r.append_title("Our first rectangle")  # Add a tooltip

     

       23
       23
       +
           d.append(r)

     

       24
       24
       +
       

     

       25
       25
       +
           # Draw a circle

     

       26
       26
       +
           d.append(draw.Circle(-40, 10, 30,

     

       27
       27
       +
                   fill='red', stroke_width=2, stroke='black'))

     

       28
       28
       +
       

     

       29
       29
       +
           # Draw an arbitrary path (a triangle in this case)

     

       30
       30
       +
           p = draw.Path(stroke_width=2, stroke='lime', fill='black', fill_opacity=0.2)

     

       31
       31
       +
           p.M(-10, -20)  # Start path at point (-10, -20)

     

       32
       32
       +
           p.C(30, 10, 30, -50, 70, -20)  # Draw a curve to (70, -20)

     

       33
       33
       +
           d.append(p)

     

       34
       34
       +
       

     

       35
       35
       +
           # Draw text

     

       36
       36
       +
           d.append(draw.Text('Basic text', 8, -10, -35, fill='blue'))  # 8pt text at (-10, -35)

     

       37
       37
       +
           d.append(draw.Text('Path text', 8, path=p, text_anchor='start', line_height=1))

     

       38
       38
       +
           d.append(draw.Text(['Multi-line', 'text'], 8, path=p, text_anchor='end', center=True))

     

       39
       39
       +
       

     

       40
       40
       +
           # Draw multiple circular arcs

     

       41
       41
       +
           d.append(draw.ArcLine(60, 20, 20, 60, 270,

     

       42
       42
       +
                   stroke='red', stroke_width=5, fill='red', fill_opacity=0.2))

     

       43
       43
       +
           d.append(draw.Arc(60, 20, 20, 60, 270, cw=False,

     

       44
       44
       +
                   stroke='green', stroke_width=3, fill='none'))

     

       45
       45
       +
           d.append(draw.Arc(60, 20, 20, 270, 60, cw=True,

     

       46
       46
       +
                   stroke='blue', stroke_width=1, fill='black', fill_opacity=0.3))

     

       47
       47
       +
       

     

       48
       48
       +
           # Draw arrows

     

       49
       49
       +
           arrow = draw.Marker(-0.1, -0.51, 0.9, 0.5, scale=4, orient='auto')

     

       50
       50
       +
           arrow.append(draw.Lines(-0.1, 0.5, -0.1, -0.5, 0.9, 0, fill='red', close=True))

     

       51
       51
       +
           p = draw.Path(stroke='red', stroke_width=2, fill='none',

     

       52
       52
       +
                   marker_end=arrow)  # Add an arrow to the end of a path

     

       53
       53
       +
           p.M(20, 40).L(20, 27).L(0, 20)  # Chain multiple path commands

     

       54
       54
       +
           d.append(p)

     

       55
       55
       +
           d.append(draw.Line(30, 20, 0, 10,

     

       56
       56
       +
                   stroke='red', stroke_width=2, fill='none',

     

       57
       57
       +
                   marker_end=arrow))  # Add an arrow to the end of a line

     

       58
       58
       +
       

     

       59
       59
       +
           d.set_pixel_scale(2)  # Set number of pixels per geometry unit

     

       60
       60
       +
           #d.set_render_size(400, 200)  # Alternative to set_pixel_scale

     

       61
       61
       +
           d.save_svg('example.svg')

     

       62
       62
       +
           d.save_png('example.png')

     

       63
       63
       +
       

     

       64
       64
       +
           # Display in Jupyter notebook

     

       65
       65
       +
           d.rasterize()  # Display as PNG

     

       66
       66
       +
           d  # Display as SVG

     

       67
       67
       +
       ```

     

       68
       68
       +
       '''

     

       69
       69
       +
       

     

       70
       70
       +
       from .defs import *

     

       71
       71
       +
       from .raster import Raster

     

       72
       72
       +
       from .drawing import Drawing

     

       73
       73
       +
       from .types import (

     

       74
       74
       +
           Context,

     

       75
       75
       +
           DrawingElement,

     

       76
       76
       +
           DrawingBasicElement,

     

       77
       77
       +
           DrawingParentElement,

     

       78
       78
       +
       )

     

       79
       79
       +
       from .elements import *

     

       80
       80
       +
       from .video import (

     

       81
       81
       +
           render_svg_frames,

     

       82
       82
       +
           save_video,

     

       83
       83
       +
       )

     

       84
       84
       +
       from .frame_animation import (

     

       85
       85
       +
           FrameAnimation,

     

       86
       86
       +
           frame_animate_video,

     

       87
       87
       +
           frame_animate_jupyter,

     

       88
       88
       +
           frame_animate_spritesheet,

     

       89
       89
       +
       )

     

       90
       90
       +
       from .native_animation import (

     

       91
       91
       +
           SyncedAnimationConfig,

     

       92
       92
       +
           animate_element_sequence,

     

       93
       93
       +
           animate_text_sequence,

     

       94
       94
       +
       )

     

       95
       95
       +
       from .url_encode import (

     

       96
       96
       +
           bytes_as_data_uri,

     

       97
       97
       +
           svg_as_data_uri,

     

       98
       98
       +
           svg_as_utf8_data_uri,

     

       99
       99
       +
       )

+205

drawsvg/color.py

···

       1
       1
       +
       import math

     

       2
       2
       +
       

     

       3
       3
       +
       try:

     

       4
       4
       +
           import numpy as np

     

       5
       5
       +
           import pwkit.colormaps

     

       6
       6
       +
       except ImportError as e:

     

       7
       7
       +
           raise ImportError(

     

       8
       8
       +
               'Optional dependencies not installed. '

     

       9
       9
       +
               'Install with `python3 -m pip install "drawsvg[all]"` '

     

       10
       10
       +
               'or `python3 -m pip install "drawsvg[color]"`. '

     

       11
       11
       +
               'See https://github.com/cduck/drawsvg#full-feature-install '

     

       12
       12
       +
               'for more details.'

     

       13
       13
       +
           ) from e

     

       14
       14
       +
       

     

       15
       15
       +
       

     

       16
       16
       +
       # Most calculations from http://www.chilliant.com/rgb2hsv.html

     

       17
       17
       +
       

     

       18
       18
       +
       

     

       19
       19
       +
       def limit(v, low=0, high=1):

     

       20
       20
       +
           return max(min(v, high), low)

     

       21
       21
       +
       

     

       22
       22
       +
       class Srgb:

     

       23
       23
       +
           LUMA_WEIGHTS = (0.299, 0.587, 0.114)

     

       24
       24
       +
           def __init__(self, r, g, b):

     

       25
       25
       +
               self.r = float(r)

     

       26
       26
       +
               self.g = float(g)

     

       27
       27
       +
               self.b = float(b)

     

       28
       28
       +
           def __iter__(self):

     

       29
       29
       +
               return iter((self.r, self.g, self.b))

     

       30
       30
       +
           def __repr__(self):

     

       31
       31
       +
               return 'RGB({}, {}, {})'.format(self.r, self.g, self.b)

     

       32
       32
       +
           def __str__(self):

     

       33
       33
       +
               return 'rgb({}%,{}%,{}%)'.format(self.r*100, self.g*100, self.b*100)

     

       34
       34
       +
           def luma(self, wts=None):

     

       35
       35
       +
               if wts is None: wts = self.LUMA_WEIGHTS

     

       36
       36
       +
               rw, gw, bw = wts

     

       37
       37
       +
               return rw*self.r + gw*self.g + bw*self.b

     

       38
       38
       +
           def to_srgb(self):

     

       39
       39
       +
               return self

     

       40
       40
       +
           @staticmethod

     

       41
       41
       +
           def from_hue(h):

     

       42
       42
       +
               h = h % 1

     

       43
       43
       +
               r = abs(h * 6 - 3) - 1

     

       44
       44
       +
               g = 2 - abs(h * 6 - 2)

     

       45
       45
       +
               b = 2 - abs(h * 6 - 4)

     

       46
       46
       +
               return Srgb(limit(r), limit(g), limit(b))

     

       47
       47
       +
       

     

       48
       48
       +
       class Hsl:

     

       49
       49
       +
           def __init__(self, h, s, l):

     

       50
       50
       +
               self.h = float(h) % 1

     

       51
       51
       +
               self.s = float(s)

     

       52
       52
       +
               self.l = float(l)

     

       53
       53
       +
           def __iter__(self):

     

       54
       54
       +
               return iter((self.h, self.s, self.l))

     

       55
       55
       +
           def __repr__(self):

     

       56
       56
       +
               return 'HSL({}, {}, {})'.format(self.h, self.s, self.l)

     

       57
       57
       +
           def __str__(self):

     

       58
       58
       +
               r, g, b = self.to_srgb()

     

       59
       59
       +
               return 'rgb({}%,{}%,{}%)'.format(

     

       60
       60
       +
                       round(r*100, 2), round(g*100, 2), round(b*100, 2))

     

       61
       61
       +
           def to_srgb(self):

     

       62
       62
       +
               hs = Srgb.from_hue(self.h)

     

       63
       63
       +
               c = (1 - abs(2 * self.l - 1)) * self.s

     

       64
       64
       +
               return Srgb(

     

       65
       65
       +
                   (hs.r - 0.5) * c + self.l,

     

       66
       66
       +
                   (hs.g - 0.5) * c + self.l,

     

       67
       67
       +
                   (hs.b - 0.5) * c + self.l

     

       68
       68
       +
               )

     

       69
       69
       +
       

     

       70
       70
       +
       class Hsv:

     

       71
       71
       +
           def __init__(self, h, s, v):

     

       72
       72
       +
               self.h = float(h) % 1

     

       73
       73
       +
               self.s = float(s)

     

       74
       74
       +
               self.v = float(v)

     

       75
       75
       +
           def __iter__(self):

     

       76
       76
       +
               return iter((self.h, self.s, self.v))

     

       77
       77
       +
           def __repr__(self):

     

       78
       78
       +
               return 'HSV({}, {}, {})'.format(self.h, self.s, self.v)

     

       79
       79
       +
           def __str__(self):

     

       80
       80
       +
               r, g, b = self.to_srgb()

     

       81
       81
       +
               return 'rgb({}%,{}%,{}%)'.format(

     

       82
       82
       +
                       round(r*100, 2), round(g*100, 2), round(b*100, 2))

     

       83
       83
       +
           def to_srgb(self):

     

       84
       84
       +
               hs = Srgb.from_hue(self.h)

     

       85
       85
       +
               c = self.v * self.s

     

       86
       86
       +
               hp = self.h * 6

     

       87
       87
       +
               x = c * (1 - abs(hp % 2 - 1))

     

       88
       88
       +
               if hp < 1:

     

       89
       89
       +
                   r1, g1, b1 = c, x, 0

     

       90
       90
       +
               elif hp < 2:

     

       91
       91
       +
                   r1, g1, b1 = x, c, 0

     

       92
       92
       +
               elif hp < 3:

     

       93
       93
       +
                   r1, g1, b1 = 0, c, x

     

       94
       94
       +
               elif hp < 4:

     

       95
       95
       +
                   r1, g1, b1 = 0, x, c

     

       96
       96
       +
               elif hp < 5:

     

       97
       97
       +
                   r1, g1, b1 = x, 0, c

     

       98
       98
       +
               else:

     

       99
       99
       +
                   r1, g1, b1 = c, 0, x

     

       100
       100
       +
               m = self.v - c

     

       101
       101
       +
               return Srgb(r1+m, g1+m, b1+m)

     

       102
       102
       +
       

     

       103
       103
       +
       class Sin:

     

       104
       104
       +
           def __init__(self, h, s, l):

     

       105
       105
       +
               self.h = float(h) % 1

     

       106
       106
       +
               self.s = float(s)

     

       107
       107
       +
               self.l = float(l)

     

       108
       108
       +
           def __iter__(self):

     

       109
       109
       +
               return iter((self.h, self.s, self.l))

     

       110
       110
       +
           def __repr__(self):

     

       111
       111
       +
               return 'Sin({}, {}, {})'.format(self.h, self.s, self.l)

     

       112
       112
       +
           def __str__(self):

     

       113
       113
       +
               r, g, b = self.to_srgb()

     

       114
       114
       +
               return 'rgb({}%,{}%,{}%)'.format(

     

       115
       115
       +
                       round(r*100, 2), round(g*100, 2), round(b*100, 2))

     

       116
       116
       +
           def to_srgb(self):

     

       117
       117
       +
               h = self.h

     

       118
       118
       +
               scale = self.s / 2

     

       119
       119
       +
               shift = self.l #* (1-2*scale)

     

       120
       120
       +
               return Srgb(

     

       121
       121
       +
                   shift + scale * math.cos(math.pi*2 * (h - 0/6)),

     

       122
       122
       +
                   shift + scale * math.cos(math.pi*2 * (h - 2/6)),

     

       123
       123
       +
                   shift + scale * math.cos(math.pi*2 * (h - 4/6)),

     

       124
       124
       +
               )

     

       125
       125
       +
       

     

       126
       126
       +
       class Hcy:

     

       127
       127
       +
           HCY_WEIGHTS = Srgb.LUMA_WEIGHTS

     

       128
       128
       +
           def __init__(self, h, c, y):

     

       129
       129
       +
               self.h = float(h) % 1

     

       130
       130
       +
               self.c = float(c)

     

       131
       131
       +
               self.y = float(y)

     

       132
       132
       +
           def __iter__(self):

     

       133
       133
       +
               return iter((self.h, self.c, self.y))

     

       134
       134
       +
           def __repr__(self):

     

       135
       135
       +
               return 'HCY({}, {}, {})'.format(self.h, self.c, self.y)

     

       136
       136
       +
           def __str__(self):

     

       137
       137
       +
               r, g, b = self.to_srgb()

     

       138
       138
       +
               return 'rgb({}%,{}%,{}%)'.format(r*100, g*100, b*100)

     

       139
       139
       +
           def to_srgb(self):

     

       140
       140
       +
               hs = Srgb.from_hue(self.h)

     

       141
       141
       +
               y = hs.luma(wts=self.HCY_WEIGHTS)

     

       142
       142
       +
               c = self.c

     

       143
       143
       +
               if self.y < y:

     

       144
       144
       +
                   c *= self.y / y

     

       145
       145
       +
               elif y < 1:

     

       146
       146
       +
                   c *= (1 - self.y) / (1 - y)

     

       147
       147
       +
               return Srgb(

     

       148
       148
       +
                   (hs.r - y) * c + self.y,

     

       149
       149
       +
                   (hs.g - y) * c + self.y,

     

       150
       150
       +
                   (hs.b - y) * c + self.y,

     

       151
       151
       +
               )

     

       152
       152
       +
           @staticmethod

     

       153
       153
       +
           def _rgb_to_hcv(srgb):

     

       154
       154
       +
               if srgb.g < srgb.b:

     

       155
       155
       +
                   p = (srgb.b, srgb.g, -1., 2./3.)

     

       156
       156
       +
               else:

     

       157
       157
       +
                   p = (srgb.g, srgb.b, 0., -1./3.)

     

       158
       158
       +
               if srgb.r < p[0]:

     

       159
       159
       +
                   q = (p[0], p[1], p[3], srgb.r)

     

       160
       160
       +
               else:

     

       161
       161
       +
                   q = (srgb.r, p[1], p[2], p[0])

     

       162
       162
       +
               c = q[0] - min(q[3], q[1])

     

       163
       163
       +
               h = abs((q[3] - q[1]) / (6*c + 1e-10) + q[2])

     

       164
       164
       +
               return (h, c, q[0])

     

       165
       165
       +
           @classmethod

     

       166
       166
       +
           def from_srgb(cls, srgb):

     

       167
       167
       +
               hcv = list(cls._rgb_to_hcv(srgb))

     

       168
       168
       +
               rw, gw, bw = cls.HCY_WEIGHTS

     

       169
       169
       +
               y = rw*srgb.r + gw*srgb.g + bw*srgb.b

     

       170
       170
       +
               hs = Srgb.from_hue(hcv[0])

     

       171
       171
       +
               z = rw*hs.r + gw*hs.g + bw*hs.b

     

       172
       172
       +
               if y < z:

     

       173
       173
       +
                   hcv[1] *= z / (y + 1e-10)

     

       174
       174
       +
               else:

     

       175
       175
       +
                   hcv[1] *= (1 - z) / (1 - y + 1e-10)

     

       176
       176
       +
               return Hcy(hcv[0], hcv[1], y)

     

       177
       177
       +
       

     

       178
       178
       +
       class Cielab:

     

       179
       179
       +
           REF_WHITE = (0.95047, 1., 1.08883)

     

       180
       180
       +
           def __init__(self, l, a, b):

     

       181
       181
       +
               self.l = float(l)

     

       182
       182
       +
               self.a = float(a)

     

       183
       183
       +
               self.b = float(b)

     

       184
       184
       +
           def __iter__(self):

     

       185
       185
       +
               return iter((self.l, self.a, self.b))

     

       186
       186
       +
           def __repr__(self):

     

       187
       187
       +
               return 'CIELAB({}, {}, {})'.format(self.l, self.a, self.b)

     

       188
       188
       +
           def __str__(self):

     

       189
       189
       +
               r, g, b = self.to_srgb()

     

       190
       190
       +
               return 'rgb({}%,{}%,{}%)'.format(

     

       191
       191
       +
                       round(r*100, 2), round(g*100, 2), round(b*100, 2))

     

       192
       192
       +
           def to_srgb(self):

     

       193
       193
       +
               in_arr = np.array((self.l, self.a, self.b))

     

       194
       194
       +
               xyz = pwkit.colormaps.cielab_to_xyz(in_arr, self.REF_WHITE)

     

       195
       195
       +
               lin_srgb = pwkit.colormaps.xyz_to_linsrgb(xyz)

     

       196
       196
       +
               r, g, b = pwkit.colormaps.linsrgb_to_srgb(lin_srgb)

     

       197
       197
       +
               return Srgb(r, g, b)

     

       198
       198
       +
           @classmethod

     

       199
       199
       +
           def from_srgb(cls, srgb, ref_white=None):

     

       200
       200
       +
               if ref_white is None: ref_white = cls.REF_WHITE

     

       201
       201
       +
               in_arr = np.array((*srgb,), dtype=float)

     

       202
       202
       +
               lin_srgb = pwkit.colormaps.srgb_to_linsrgb(in_arr)

     

       203
       203
       +
               xyz = pwkit.colormaps.linsrgb_to_xyz(lin_srgb)

     

       204
       204
       +
               l, a, b = pwkit.colormaps.xyz_to_cielab(xyz, ref_white)

     

       205
       205
       +
               return Cielab(l, a, b)

+116

drawsvg/defs.py

···

       1
       1
       +
       from .elements import DrawingElement, DrawingParentElement

     

       2
       2
       +
       

     

       3
       3
       +
       

     

       4
       4
       +
       class DrawingDef(DrawingParentElement):

     

       5
       5
       +
           '''Parent class of SVG nodes that must be direct children of <defs>.'''

     

       6
       6
       +
           def get_svg_defs(self):

     

       7
       7
       +
               return (self,)

     

       8
       8
       +
       

     

       9
       9
       +
       class DrawingDefSub(DrawingParentElement):

     

       10
       10
       +
           '''Parent class of SVG nodes that are meant to be descendants of a Def.'''

     

       11
       11
       +
           pass

     

       12
       12
       +
       

     

       13
       13
       +
       class LinearGradient(DrawingDef):

     

       14
       14
       +
           '''

     

       15
       15
       +
           A linear gradient to use as a fill or other color.

     

       16
       16
       +
       

     

       17
       17
       +
           Has <stop> nodes as children, added with `.add_stop()`.

     

       18
       18
       +
           '''

     

       19
       19
       +
           TAG_NAME = 'linearGradient'

     

       20
       20
       +
           def __init__(self, x1, y1, x2, y2, gradientUnits='userSpaceOnUse',

     

       21
       21
       +
                        **kwargs):

     

       22
       22
       +
               super().__init__(x1=x1, y1=y1, x2=x2, y2=y2,

     

       23
       23
       +
                                gradientUnits=gradientUnits, **kwargs)

     

       24
       24
       +
           def add_stop(self, offset, color, opacity=None, **kwargs):

     

       25
       25
       +
               stop = GradientStop(offset=offset, stop_color=color,

     

       26
       26
       +
                                   stop_opacity=opacity, **kwargs)

     

       27
       27
       +
               self.append(stop)

     

       28
       28
       +
               return stop

     

       29
       29
       +
       

     

       30
       30
       +
       class RadialGradient(DrawingDef):

     

       31
       31
       +
           '''

     

       32
       32
       +
           A radial gradient to use as a fill or other color.

     

       33
       33
       +
       

     

       34
       34
       +
           Has <stop> nodes as children, added with `.add_stop()`.

     

       35
       35
       +
           '''

     

       36
       36
       +
           TAG_NAME = 'radialGradient'

     

       37
       37
       +
           def __init__(self, cx, cy, r, gradientUnits='userSpaceOnUse', fy=None,

     

       38
       38
       +
                        **kwargs):

     

       39
       39
       +
               super().__init__(cx=cx, cy=cy, r=r, gradientUnits=gradientUnits,

     

       40
       40
       +
                                fy=fy, **kwargs)

     

       41
       41
       +
           def add_stop(self, offset, color, opacity=None, **kwargs):

     

       42
       42
       +
               stop = GradientStop(offset=offset, stop_color=color,

     

       43
       43
       +
                                   stop_opacity=opacity, **kwargs)

     

       44
       44
       +
               self.append(stop)

     

       45
       45
       +
               return stop

     

       46
       46
       +
       

     

       47
       47
       +
       class GradientStop(DrawingDefSub):

     

       48
       48
       +
           '''A control point for a radial or linear gradient.'''

     

       49
       49
       +
           TAG_NAME = 'stop'

     

       50
       50
       +
           has_content = False

     

       51
       51
       +
       

     

       52
       52
       +
       class Pattern(DrawingDef):

     

       53
       53
       +
           '''

     

       54
       54
       +
           A repeating pattern of other drawing elements to use as a fill or other

     

       55
       55
       +
           color.

     

       56
       56
       +
       

     

       57
       57
       +
           Width and height specify the repetition period.  Append regular drawing

     

       58
       58
       +
           elements to create the pattern.

     

       59
       59
       +
           '''

     

       60
       60
       +
           TAG_NAME = 'pattern'

     

       61
       61
       +
           def __init__(self, width, height, x=None, y=None,

     

       62
       62
       +
                        patternUnits='userSpaceOnUse', **kwargs):

     

       63
       63
       +
               super().__init__(width=width, height=height, x=x, y=y,

     

       64
       64
       +
                                patternUnits=patternUnits, **kwargs)

     

       65
       65
       +
       

     

       66
       66
       +
       class ClipPath(DrawingDef):

     

       67
       67
       +
           '''

     

       68
       68
       +
           A shape used to crop another element by not drawing outside of this shape.

     

       69
       69
       +
       

     

       70
       70
       +
           Has regular drawing elements as children.

     

       71
       71
       +
           '''

     

       72
       72
       +
           TAG_NAME = 'clipPath'

     

       73
       73
       +
       

     

       74
       74
       +
       class Mask(DrawingDef):

     

       75
       75
       +
           '''

     

       76
       76
       +
           A drawing where the gray value and transparency are used to control the

     

       77
       77
       +
           transparency of another shape.

     

       78
       78
       +
       

     

       79
       79
       +
           Has regular drawing elements as children.

     

       80
       80
       +
           '''

     

       81
       81
       +
           TAG_NAME = 'mask'

     

       82
       82
       +
       

     

       83
       83
       +
       class Filter(DrawingDef):

     

       84
       84
       +
           '''

     

       85
       85
       +
           A filter to apply to geometry.

     

       86
       86
       +
       

     

       87
       87
       +
           For example a blur filter.

     

       88
       88
       +
           '''

     

       89
       89
       +
           TAG_NAME = 'filter'

     

       90
       90
       +
       

     

       91
       91
       +
       class FilterItem(DrawingDefSub):

     

       92
       92
       +
           '''A child of Filter with any tag name.'''

     

       93
       93
       +
           def __init__(self, tag_name, **args):

     

       94
       94
       +
               super().__init__(**args)

     

       95
       95
       +
               self.TAG_NAME = tag_name

     

       96
       96
       +
       

     

       97
       97
       +
       class Marker(DrawingDef):

     

       98
       98
       +
           '''

     

       99
       99
       +
           A small drawing that can be placed at the ends of (or along) a path.

     

       100
       100
       +
       

     

       101
       101
       +
           This can be used for arrow heads or points on a graph for example.

     

       102
       102
       +
           By default, units are multiples of stroke width.

     

       103
       103
       +
           '''

     

       104
       104
       +
           TAG_NAME = 'marker'

     

       105
       105
       +
           def __init__(self, minx, miny, maxx, maxy, scale=1, orient='auto',

     

       106
       106
       +
                        **kwargs):

     

       107
       107
       +
               width = maxx - minx

     

       108
       108
       +
               height = maxy - miny

     

       109
       109
       +
               kwargs = {

     

       110
       110
       +
                   'markerWidth': width if scale == 1 else float(width) * scale,

     

       111
       111
       +
                   'markerHeight': height if scale == 1 else float(height) * scale,

     

       112
       112
       +
                   'viewBox': '{} {} {} {}'.format(minx, miny, width, height),

     

       113
       113
       +
                   'orient': orient,

     

       114
       114
       +
                   **kwargs,

     

       115
       115
       +
               }

     

       116
       116
       +
               super().__init__(**kwargs)

+445

drawsvg/drawing.py

···

       1
       1
       +
       import dataclasses

     

       2
       2
       +
       from io import StringIO

     

       3
       3
       +
       from collections import defaultdict

     

       4
       4
       +
       import random

     

       5
       5
       +
       import string

     

       6
       6
       +
       import xml.sax.saxutils as xml

     

       7
       7
       +
       

     

       8
       8
       +
       from . import (

     

       9
       9
       +
           types, elements as elements_module, raster, video, jupyter,

     

       10
       10
       +
           native_animation, font_embed,

     

       11
       11
       +
       )

     

       12
       12
       +
       

     

       13
       13
       +
       

     

       14
       14
       +
       XML_HEADER = '<?xml version="1.0" encoding="UTF-8"?>\n'

     

       15
       15
       +
       SVG_START = ('<svg xmlns="http://www.w3.org/2000/svg" '

     

       16
       16
       +
                    'xmlns:xlink="http://www.w3.org/1999/xlink"\n    ')

     

       17
       17
       +
       SVG_END = '</svg>'

     

       18
       18
       +
       SVG_CSS_FMT = '<style>/*<![CDATA[*/{}/*]]>*/</style>'

     

       19
       19
       +
       SVG_JS_FMT = '<script>/*<![CDATA[*/{}/*]]>*/</script>'

     

       20
       20
       +
       

     

       21
       21
       +
       

     

       22
       22
       +
       class Drawing:

     

       23
       23
       +
           '''

     

       24
       24
       +
           A vector drawing.

     

       25
       25
       +
       

     

       26
       26
       +
           Append shapes and other elements with `.append()`.  The default coordinate

     

       27
       27
       +
           system origin is at the top-left corner with x-values increasing to the

     

       28
       28
       +
           right and y-values increasing downward.

     

       29
       29
       +
       

     

       30
       30
       +
           Supports Jupyter: If a Drawing is the last line of a cell, it will be

     

       31
       31
       +
           displayed as an SVG below.

     

       32
       32
       +
           '''

     

       33
       33
       +
           def __init__(self, width, height, origin=(0,0), context: types.Context=None,

     

       34
       34
       +
                        animation_config=None, id_prefix='d', **svg_args):

     

       35
       35
       +
               if context is None:

     

       36
       36
       +
                   context = types.Context()

     

       37
       37
       +
               if animation_config is not None:

     

       38
       38
       +
                   context = dataclasses.replace(

     

       39
       39
       +
                           context, animation_config=animation_config)

     

       40
       40
       +
               self.width = width

     

       41
       41
       +
               self.height = height

     

       42
       42
       +
               if isinstance(origin, str):

     

       43
       43
       +
                   if context.invert_y and origin.startswith('bottom-'):

     

       44
       44
       +
                       origin = origin.replace('bottom-', 'top-')

     

       45
       45
       +
                   elif context.invert_y and origin.startswith('top-'):

     

       46
       46
       +
                       origin = origin.replace('top-', 'bottom-')

     

       47
       47
       +
                   self.view_box = {

     

       48
       48
       +
                       'center': (-width/2, -height/2, width, height),

     

       49
       49
       +
                       'top-left': (0, 0, width, height),

     

       50
       50
       +
                       'top-right': (-width, 0, width, height),

     

       51
       51
       +
                       'bottom-left': (0, -height, width, height),

     

       52
       52
       +
                       'bottom-right': (-width, -height, width, height),

     

       53
       53
       +
                   }[origin]

     

       54
       54
       +
               else:

     

       55
       55
       +
                   origin = tuple(origin)

     

       56
       56
       +
                   if len(origin) != 2:

     

       57
       57
       +
                       raise ValueError(

     

       58
       58
       +
                               "origin must be the string 'center', 'top-left', ..., "

     

       59
       59
       +
                               "'bottom-right' or a tuple (x, y)")

     

       60
       60
       +
                   self.view_box = origin + (width, height)

     

       61
       61
       +
               self.elements = []

     

       62
       62
       +
               self.ordered_elements = defaultdict(list)

     

       63
       63
       +
               self.other_defs = []

     

       64
       64
       +
               self.css_list = []

     

       65
       65
       +
               self.js_list = []

     

       66
       66
       +
               self.pixel_scale = 1

     

       67
       67
       +
               self.render_width = None

     

       68
       68
       +
               self.render_height = None

     

       69
       69
       +
               self.context = context

     

       70
       70
       +
               self.id_prefix = str(id_prefix)

     

       71
       71
       +
               self.svg_args = {}

     

       72
       72
       +
               self._cached_context = None

     

       73
       73
       +
               self._cached_extra_prepost_with_context = None

     

       74
       74
       +
               for k, v in svg_args.items():

     

       75
       75
       +
                   k = k.replace('__', ':')

     

       76
       76
       +
                   k = k.replace('_', '-')

     

       77
       77
       +
                   if k[-1] == '-':

     

       78
       78
       +
                       k = k[:-1]

     

       79
       79
       +
                   self.svg_args[k] = v

     

       80
       80
       +
           def set_render_size(self, w=None, h=None):

     

       81
       81
       +
               self.render_width = w

     

       82
       82
       +
               self.render_height = h

     

       83
       83
       +
               return self

     

       84
       84
       +
           def set_pixel_scale(self, s=1):

     

       85
       85
       +
               self.render_width = None

     

       86
       86
       +
               self.render_height = None

     

       87
       87
       +
               self.pixel_scale = s

     

       88
       88
       +
               return self

     

       89
       89
       +
           def calc_render_size(self):

     

       90
       90
       +
               if self.render_width is None and self.render_height is None:

     

       91
       91
       +
                   return (self.width * self.pixel_scale,

     

       92
       92
       +
                           self.height * self.pixel_scale)

     

       93
       93
       +
               elif self.render_width is None:

     

       94
       94
       +
                   s = self.render_height / self.height

     

       95
       95
       +
                   return self.width * s, self.render_height

     

       96
       96
       +
               elif self.render_height is None:

     

       97
       97
       +
                   s = self.render_width / self.width

     

       98
       98
       +
                   return self.render_width, self.height * s

     

       99
       99
       +
               else:

     

       100
       100
       +
                   return self.render_width, self.render_height

     

       101
       101
       +
           def draw(self, obj, *, z=None, **kwargs):

     

       102
       102
       +
               '''Add any object that knows how to draw itself to the drawing.

     

       103
       103
       +
       

     

       104
       104
       +
               This object must implement the `to_drawables(**kwargs)` method

     

       105
       105
       +
               that returns a `DrawingElement` or list of elements.

     

       106
       106
       +
               '''

     

       107
       107
       +
               if obj is None:

     

       108
       108
       +
                   return

     

       109
       109
       +
               if not hasattr(obj, 'write_svg_element'):

     

       110
       110
       +
                   elements = obj.to_drawables(**kwargs)

     

       111
       111
       +
               else:

     

       112
       112
       +
                   if len(kwargs) > 0:

     

       113
       113
       +
                       raise ValueError('unexpected kwargs')

     

       114
       114
       +
                   elements = obj

     

       115
       115
       +
               if hasattr(elements, 'write_svg_element'):

     

       116
       116
       +
                   self.append(elements, z=z)

     

       117
       117
       +
               else:

     

       118
       118
       +
                   self.extend(elements, z=z)

     

       119
       119
       +
           def append(self, element, *, z=None):

     

       120
       120
       +
               '''Add any `DrawingElement` to the drawing.

     

       121
       121
       +
       

     

       122
       122
       +
               Do not append a `DrawingDef` referenced by other elements.  These are

     

       123
       123
       +
               included automatically.  Use `.append_def()` for an unreferenced

     

       124
       124
       +
               `DrawingDef`.

     

       125
       125
       +
               '''

     

       126
       126
       +
               if z is not None:

     

       127
       127
       +
                   self.ordered_elements[z].append(element)

     

       128
       128
       +
               else:

     

       129
       129
       +
                   self.elements.append(element)

     

       130
       130
       +
           def extend(self, iterable, *, z=None):

     

       131
       131
       +
               if z is not None:

     

       132
       132
       +
                   self.ordered_elements[z].extend(iterable)

     

       133
       133
       +
               else:

     

       134
       134
       +
                   self.elements.extend(iterable)

     

       135
       135
       +
           def insert(self, i, element):

     

       136
       136
       +
               '''Inserts a top-level element at the given array index.'''

     

       137
       137
       +
               self.elements.insert(i, element)

     

       138
       138
       +
           def remove(self, element):

     

       139
       139
       +
               '''Removes a top-level element (except those with a z-index).'''

     

       140
       140
       +
               self.elements.remove(element)

     

       141
       141
       +
           def clear(self):

     

       142
       142
       +
               '''Clears all drawing elements, with or without a z-index, but keeps

     

       143
       143
       +
               defs-type elements added with `append_def()`.

     

       144
       144
       +
               '''

     

       145
       145
       +
               self.elements.clear()

     

       146
       146
       +
               self.ordered_elements.clear()

     

       147
       147
       +
           def index(self, *args, **kwargs):

     

       148
       148
       +
               '''Finds the array-index of a top-level element (except those with a

     

       149
       149
       +
               z-index).

     

       150
       150
       +
               '''

     

       151
       151
       +
               return self.elements.index(*args, **kwargs)

     

       152
       152
       +
           def count(self, element):

     

       153
       153
       +
               '''Counts the number of top-level elements (except those with a z-index

     

       154
       154
       +
               ).

     

       155
       155
       +
               '''

     

       156
       156
       +
               return self.elements.count(element)

     

       157
       157
       +
           def reverse(self):

     

       158
       158
       +
               '''Reverses the order of all elements (except those with a z-index).'''

     

       159
       159
       +
               self.elements.reverse()

     

       160
       160
       +
           def draw_def(self, obj, **kwargs):

     

       161
       161
       +
               if not hasattr(obj, 'write_svg_element'):

     

       162
       162
       +
                   elements = obj.to_drawables(**kwargs)

     

       163
       163
       +
               else:

     

       164
       164
       +
                   if len(kwargs) > 0:

     

       165
       165
       +
                       raise ValueError('unexpected kwargs')

     

       166
       166
       +
                   elements = obj

     

       167
       167
       +
               if hasattr(elements, 'write_svg_element'):

     

       168
       168
       +
                   self.append_def(elements)

     

       169
       169
       +
               else:

     

       170
       170
       +
                   self.other_defs.extend(elements)

     

       171
       171
       +
           def append_def(self, element):

     

       172
       172
       +
               self.other_defs.append(element)

     

       173
       173
       +
           def append_title(self, text, **kwargs):

     

       174
       174
       +
               self.append(elements_module.Title(text, **kwargs))

     

       175
       175
       +
           def append_css(self, css_text):

     

       176
       176
       +
               self.css_list.append(css_text)

     

       177
       177
       +
           def embed_google_font(self, family, text=None, display='swap', **kwargs):

     

       178
       178
       +
               '''Download SVG-embeddable CSS from Google fonts.

     

       179
       179
       +
       

     

       180
       180
       +
               Args:

     

       181
       181
       +
                   family: Name of font family or list of font families.

     

       182
       182
       +
                   text: The set of characters required from the font.  Only a font

     

       183
       183
       +
                       subset with these characters will be downloaded.

     

       184
       184
       +
                   display: The font-display CSS value.

     

       185
       185
       +
                   **kwargs: Other URL parameters sent to

     

       186
       186
       +
                       https://fonts.googleapis.com/css?...

     

       187
       187
       +
               '''

     

       188
       188
       +
               self.append_css(font_embed.download_google_font_css(

     

       189
       189
       +
                       family, text=text, display=display, **kwargs))

     

       190
       190
       +
           def append_javascript(self, js_text, onload=None):

     

       191
       191
       +
               if onload:

     

       192
       192
       +
                   if self.svg_args.get('onload'):

     

       193
       193
       +
                       self.svg_args['onload'] = f'{self.svg_args["onload"]};{onload}'

     

       194
       194
       +
                   else:

     

       195
       195
       +
                       self.svg_args['onload'] = onload

     

       196
       196
       +
               self.js_list.append(js_text)

     

       197
       197
       +
           def all_elements(self, context=None):

     

       198
       198
       +
               '''Return self.elements, self.ordered_elements, and extras as a single

     

       199
       199
       +
               list.

     

       200
       200
       +
               '''

     

       201
       201
       +
               extra_pre, extra_post = (

     

       202
       202
       +
                       self._extra_prepost_with_context_avoid_recompute(

     

       203
       203
       +
                           context=context))

     

       204
       204
       +
               output = list(extra_pre)

     

       205
       205
       +
               output.extend(self.elements)

     

       206
       206
       +
               for z in sorted(self.ordered_elements):

     

       207
       207
       +
                   output.extend(self.ordered_elements[z])

     

       208
       208
       +
               output.extend(extra_post)

     

       209
       209
       +
               return output

     

       210
       210
       +
           def _extra_prepost_with_context_avoid_recompute(self, context=None):

     

       211
       211
       +
               if (self._cached_extra_prepost_with_context is not None

     

       212
       212
       +
                       and self._cached_context == context):

     

       213
       213
       +
                   return self._cached_extra_prepost_with_context

     

       214
       214
       +
               self._cached_context = context

     

       215
       215
       +
               self._cached_extra_prepost_with_context = (

     

       216
       216
       +
                       self._extra_prepost_children_with_context(context))

     

       217
       217
       +
               return self._cached_extra_prepost_with_context

     

       218
       218
       +
           def _extra_prepost_children_with_context(self, context=None):

     

       219
       219
       +
               if context is None:

     

       220
       220
       +
                   context = self.context

     

       221
       221
       +
               return context.extra_prepost_drawing_elements(self)

     

       222
       222
       +
           def all_css(self, context=None):

     

       223
       223
       +
               if context is None:

     

       224
       224
       +
                   context = self.context

     

       225
       225
       +
               return list(context.extra_css(self)) + self.css_list

     

       226
       226
       +
           def all_javascript(self, context=None):

     

       227
       227
       +
               if context is None:

     

       228
       228
       +
                   context = self.context

     

       229
       229
       +
               return list(context.extra_javascript(self)) + self.js_list

     

       230
       230
       +
           def as_svg(self, output_file=None, randomize_ids=False, header=XML_HEADER,

     

       231
       231
       +
                      skip_js=False, skip_css=False, context=None):

     

       232
       232
       +
               if output_file is None:

     

       233
       233
       +
                   with StringIO() as f:

     

       234
       234
       +
                       self.as_svg(

     

       235
       235
       +
                               f, randomize_ids=randomize_ids, header=header,

     

       236
       236
       +
                               skip_js=skip_js, skip_css=skip_css, context=context)

     

       237
       237
       +
                       return f.getvalue()

     

       238
       238
       +
               if context is None:

     

       239
       239
       +
                   context = self.context

     

       240
       240
       +
               output_file.write(header)

     

       241
       241
       +
               img_width, img_height = self.calc_render_size()

     

       242
       242
       +
               svg_args = dict(

     

       243
       243
       +
                       width=img_width, height=img_height,

     

       244
       244
       +
                       viewBox=' '.join(map(str, self.view_box)))

     

       245
       245
       +
               svg_args.update(self.svg_args)

     

       246
       246
       +
               output_file.write(SVG_START)

     

       247
       247
       +
               context.write_svg_document_args(self, svg_args, output_file)

     

       248
       248
       +
               output_file.write('>\n')

     

       249
       249
       +
               css_list = self.all_css(context)

     

       250
       250
       +
               if css_list and not skip_css:

     

       251
       251
       +
                   output_file.write(SVG_CSS_FMT.format(elements_module.escape_cdata(

     

       252
       252
       +
                           '\n'.join(css_list))))

     

       253
       253
       +
                   output_file.write('\n')

     

       254
       254
       +
               output_file.write('<defs>\n')

     

       255
       255
       +
               # Write definition elements

     

       256
       256
       +
               id_prefix = self.id_prefix

     

       257
       257
       +
               id_prefix = self._random_id() if randomize_ids else self.id_prefix

     

       258
       258
       +
               id_index = 0

     

       259
       259
       +
               def id_gen(base=''):

     

       260
       260
       +
                   nonlocal id_index

     

       261
       261
       +
                   id_str = f'{id_prefix}{base}{id_index}'

     

       262
       262
       +
                   id_index += 1

     

       263
       263
       +
                   return id_str

     

       264
       264
       +
               id_map = defaultdict(id_gen)

     

       265
       265
       +
               prev_set = set()

     

       266
       266
       +
               def is_duplicate(obj):

     

       267
       267
       +
                   nonlocal prev_set

     

       268
       268
       +
                   dup = id(obj) in prev_set

     

       269
       269
       +
                   prev_set.add(id(obj))

     

       270
       270
       +
                   return dup

     

       271
       271
       +
               for element in self.other_defs:

     

       272
       272
       +
                   if hasattr(element, 'write_svg_element'):

     

       273
       273
       +
                       local = types.LocalContext(

     

       274
       274
       +
                               context, element, self, self.other_defs)

     

       275
       275
       +
                       element.write_svg_element(

     

       276
       276
       +
                               id_map, is_duplicate, output_file, local, False)

     

       277
       277
       +
                       output_file.write('\n')

     

       278
       278
       +
               all_elements = self.all_elements(context=context)

     

       279
       279
       +
               for element in all_elements:

     

       280
       280
       +
                   if hasattr(element, 'write_svg_defs'):

     

       281
       281
       +
                       local = types.LocalContext(context, element, self, all_elements)

     

       282
       282
       +
                       element.write_svg_defs(

     

       283
       283
       +
                               id_map, is_duplicate, output_file, local, False)

     

       284
       284
       +
               output_file.write('</defs>\n')

     

       285
       285
       +
               # Generate ids for normal elements

     

       286
       286
       +
               prev_def_set = set(prev_set)

     

       287
       287
       +
               for element in all_elements:

     

       288
       288
       +
                   if hasattr(element, 'write_svg_element'):

     

       289
       289
       +
                       local = types.LocalContext(context, element, self, all_elements)

     

       290
       290
       +
                       element.write_svg_element(

     

       291
       291
       +
                               id_map, is_duplicate, output_file, local, True)

     

       292
       292
       +
               prev_set = prev_def_set

     

       293
       293
       +
               # Write normal elements

     

       294
       294
       +
               for element in all_elements:

     

       295
       295
       +
                   if hasattr(element, 'write_svg_element'):

     

       296
       296
       +
                       local = types.LocalContext(context, element, self, all_elements)

     

       297
       297
       +
                       element.write_svg_element(

     

       298
       298
       +
                               id_map, is_duplicate, output_file, local, False)

     

       299
       299
       +
                       output_file.write('\n')

     

       300
       300
       +
               js_list = self.all_javascript(context)

     

       301
       301
       +
               if js_list and not skip_js:

     

       302
       302
       +
                   output_file.write(SVG_JS_FMT.format(elements_module.escape_cdata(

     

       303
       303
       +
                           '\n'.join(js_list))))

     

       304
       304
       +
                   output_file.write('\n')

     

       305
       305
       +
               output_file.write(SVG_END)

     

       306
       306
       +
           def as_html(self, output_file=None, title=None, randomize_ids=False,

     

       307
       307
       +
                       context=None, fix_embed_iframe=False):

     

       308
       308
       +
               if output_file is None:

     

       309
       309
       +
                   with StringIO() as f:

     

       310
       310
       +
                       self.as_html(

     

       311
       311
       +
                               f, title=title, randomize_ids=randomize_ids,

     

       312
       312
       +
                               context=context, fix_embed_iframe=fix_embed_iframe)

     

       313
       313
       +
                       return f.getvalue()

     

       314
       314
       +
               output_file.write('<!DOCTYPE html>\n')

     

       315
       315
       +
               output_file.write('<head>\n')

     

       316
       316
       +
               output_file.write('<meta charset="utf-8">\n')

     

       317
       317
       +
               if title is not None:

     

       318
       318
       +
                   output_file.write(f'<title>{xml.escape(title)}</title>\n')

     

       319
       319
       +
               # Prevent iframe scroll bar

     

       320
       320
       +
               if fix_embed_iframe:

     

       321
       321
       +
                   fix = self.calc_render_size()[1] / 2

     

       322
       322
       +
                   output_file.write(f'''<style>

     

       323
       323
       +
       html,body {{

     

       324
       324
       +
         margin: 0;

     

       325
       325
       +
         height: 100%;

     

       326
       326
       +
       }}

     

       327
       327
       +
       svg {{

     

       328
       328
       +
         margin-bottom: {-fix}px;

     

       329
       329
       +
       }}

     

       330
       330
       +
       </style>''')

     

       331
       331
       +
               output_file.write('</head>\n<body>\n')

     

       332
       332
       +
               self.as_svg(

     

       333
       333
       +
                       output_file, randomize_ids=randomize_ids, header="",

     

       334
       334
       +
                       skip_css=False, skip_js=False, context=context)

     

       335
       335
       +
               output_file.write('\n</body>\n</html>\n')

     

       336
       336
       +
           @staticmethod

     

       337
       337
       +
           def _random_id(length=8):

     

       338
       338
       +
               return (random.choice(string.ascii_letters)

     

       339
       339
       +
                       + ''.join(random.choices(

     

       340
       340
       +
                           string.ascii_letters+string.digits, k=length-1)))

     

       341
       341
       +
           def save_svg(self, fname, encoding='utf-8', context=None):

     

       342
       342
       +
               with open(fname, 'w', encoding=encoding) as f:

     

       343
       343
       +
                   self.as_svg(output_file=f, context=context)

     

       344
       344
       +
           def save_html(self, fname, title=None, encoding='utf-8', context=None):

     

       345
       345
       +
               with open(fname, 'w', encoding=encoding) as f:

     

       346
       346
       +
                   self.as_html(output_file=f, title=title, context=context)

     

       347
       347
       +
           def save_png(self, fname, context=None):

     

       348
       348
       +
               self.rasterize(to_file=fname, context=context)

     

       349
       349
       +
           def rasterize(self, to_file=None, context=None):

     

       350
       350
       +
               if to_file is not None:

     

       351
       351
       +
                   return raster.Raster.from_svg_to_file(

     

       352
       352
       +
                           self.as_svg(context=context), to_file)

     

       353
       353
       +
               else:

     

       354
       354
       +
                   return raster.Raster.from_svg(self.as_svg(context=context))

     

       355
       355
       +
           def as_animation_frames(self, fps=10, duration=None, context=None):

     

       356
       356
       +
               '''Returns a list of synced animation frames that can be converted to a

     

       357
       357
       +
               video.'''

     

       358
       358
       +
               if context is None:

     

       359
       359
       +
                   context = self.context

     

       360
       360
       +
               config = context.animation_config

     

       361
       361
       +
               if duration is None and config is not None:

     

       362
       362
       +
                   duration = config.duration

     

       363
       363
       +
               if duration is None:

     

       364
       364
       +
                   raise ValueError('unknown animation duration, specify duration')

     

       365
       365
       +
               if config is None:

     

       366
       366
       +
                   config = native_animation.SyncedAnimationConfig(duration)

     

       367
       367
       +
               frames = []

     

       368
       368
       +
               for i in range(int(duration * fps + 1)):

     

       369
       369
       +
                   time = i / fps

     

       370
       370
       +
                   frame_context = dataclasses.replace(

     

       371
       371
       +
                           context,

     

       372
       372
       +
                           animation_config=dataclasses.replace(

     

       373
       373
       +
                               config,

     

       374
       374
       +
                               freeze_frame_at=time,

     

       375
       375
       +
                               show_playback_controls=False))

     

       376
       376
       +
                   frames.append(self.display_inline(context=frame_context))

     

       377
       377
       +
               return frames

     

       378
       378
       +
           def save_video(self, fname, fps=10, duration=None, mime_type=None,

     

       379
       379
       +
                          file_type=None, context=None, verbose=False):

     

       380
       380
       +
               self.as_video(

     

       381
       381
       +
                       fname, fps=fps, duration=duration, mime_type=mime_type,

     

       382
       382
       +
                       file_type=file_type, context=context, verbose=verbose)

     

       383
       383
       +
           def save_gif(self, fname, fps=10, duration=None, context=None,

     

       384
       384
       +
                        verbose=False):

     

       385
       385
       +
               self.as_gif(

     

       386
       386
       +
                       fname, fps=fps, duration=duration, context=context,

     

       387
       387
       +
                       verbose=verbose)

     

       388
       388
       +
           def save_mp4(self, fname, fps=10, duration=None, context=None,

     

       389
       389
       +
                        verbose=False):

     

       390
       390
       +
               self.as_mp4(

     

       391
       391
       +
                       fname, fps=fps, duration=duration, context=context,

     

       392
       392
       +
                       verbose=verbose)

     

       393
       393
       +
           def save_spritesheet(self, fname, fps=10, duration=None, context=None,

     

       394
       394
       +
                                row_length=None, verbose=False):

     

       395
       395
       +
               self.as_spritesheet(

     

       396
       396
       +
                       fname, fps=fps, duration=duration, context=context,

     

       397
       397
       +
                       row_length=row_length, verbose=verbose)

     

       398
       398
       +
           def as_video(self, to_file=None, fps=10, duration=None,

     

       399
       399
       +
                        mime_type=None, file_type=None, context=None, verbose=False):

     

       400
       400
       +
               if file_type is None and mime_type is None:

     

       401
       401
       +
                   if to_file is None or '.' not in str(to_file):

     

       402
       402
       +
                       file_type = 'mp4'

     

       403
       403
       +
                   else:

     

       404
       404
       +
                       file_type = str(to_file).split('.')[-1]

     

       405
       405
       +
               if file_type is None:

     

       406
       406
       +
                   file_type = mime_type.split('/')[-1]

     

       407
       407
       +
               elif mime_type is None:

     

       408
       408
       +
                   mime_type = f'video/{file_type}'

     

       409
       409
       +
               frames = self.as_animation_frames(

     

       410
       410
       +
                       fps=fps, duration=duration, context=context)

     

       411
       411
       +
               return video.RasterVideo.from_frames(

     

       412
       412
       +
                       frames, to_file=to_file, fps=fps, mime_type=mime_type,

     

       413
       413
       +
                       file_type=file_type, verbose=verbose)

     

       414
       414
       +
           def as_gif(self, to_file=None, fps=10, duration=None, context=None,

     

       415
       415
       +
                      verbose=False):

     

       416
       416
       +
               return self.as_video(

     

       417
       417
       +
                       to_file=to_file, fps=fps, duration=duration, context=context,

     

       418
       418
       +
                       mime_type='image/gif', file_type='gif', verbose=verbose)

     

       419
       419
       +
           def as_mp4(self, to_file=None, fps=10, duration=None, context=None,

     

       420
       420
       +
                      verbose=False):

     

       421
       421
       +
               return self.as_video(

     

       422
       422
       +
                       to_file=to_file, fps=fps, duration=duration, context=context,

     

       423
       423
       +
                       mime_type='video/mp4', file_type='mp4', verbose=verbose)

     

       424
       424
       +
           def as_spritesheet(self, to_file=None, fps=10, duration=None, context=None,

     

       425
       425
       +
                      row_length=None, verbose=False):

     

       426
       426
       +
               frames = self.as_animation_frames(

     

       427
       427
       +
                       fps=fps, duration=duration, context=context)

     

       428
       428
       +
               sheet = video.render_spritesheet(

     

       429
       429
       +
                       frames, row_length=row_length, verbose=verbose)

     

       430
       430
       +
               return raster.Raster.from_arr(sheet, out_file=to_file)

     

       431
       431
       +
           def _repr_svg_(self):

     

       432
       432
       +
               '''Display in Jupyter notebook.'''

     

       433
       433
       +
               return self.as_svg(randomize_ids=True)

     

       434
       434
       +
           def display_inline(self, context=None):

     

       435
       435
       +
               '''Display inline in the Jupyter web page.'''

     

       436
       436
       +
               return jupyter.JupyterSvgInline(self.as_svg(

     

       437
       437
       +
                       randomize_ids=True, context=context))

     

       438
       438
       +
           def display_iframe(self, context=None):

     

       439
       439
       +
               '''Display within an iframe the Jupyter web page.'''

     

       440
       440
       +
               w, h = self.calc_render_size()

     

       441
       441
       +
               html = self.as_html(fix_embed_iframe=True, context=context)

     

       442
       442
       +
               return jupyter.JupyterSvgFrame(html, w, h, mime='text/html')

     

       443
       443
       +
           def display_image(self, context=None):

     

       444
       444
       +
               '''Display within an img in the Jupyter web page.'''

     

       445
       445
       +
               return jupyter.JupyterSvgImage(self.as_svg(context=context))

+623

drawsvg/elements.py

···

       1
       1
       +
       import math

     

       2
       2
       +
       import os.path

     

       3
       3
       +
       import warnings

     

       4
       4
       +
       import xml.sax.saxutils as xml

     

       5
       5
       +
       

     

       6
       6
       +
       from . import url_encode

     

       7
       7
       +
       from .types import (

     

       8
       8
       +
           DrawingElement, DrawingBasicElement, DrawingParentElement, LocalContext

     

       9
       9
       +
       )

     

       10
       10
       +
       

     

       11
       11
       +
       

     

       12
       12
       +
       def escape_cdata(content):

     

       13
       13
       +
           return content.replace(']]>', ']]]]><![CDATA[>')

     

       14
       14
       +
       

     

       15
       15
       +
       

     

       16
       16
       +
       class NoElement(DrawingElement):

     

       17
       17
       +
           ''' A drawing element that has no effect '''

     

       18
       18
       +
           def __init__(self):

     

       19
       19
       +
               pass

     

       20
       20
       +
           def write_svg_element(self, id_map, is_duplicate, output_file, dry_run,

     

       21
       21
       +
                                 lcontext, force_dup=False):

     

       22
       22
       +
               pass

     

       23
       23
       +
           def __eq__(self, other):

     

       24
       24
       +
               if isinstance(other, type(self)):

     

       25
       25
       +
                   return True

     

       26
       26
       +
               return False

     

       27
       27
       +
       

     

       28
       28
       +
       class Group(DrawingParentElement):

     

       29
       29
       +
           '''A group of drawing elements.

     

       30
       30
       +
       

     

       31
       31
       +
           Any transform will apply to its children and other attributes will be

     

       32
       32
       +
           inherited by its children.

     

       33
       33
       +
           '''

     

       34
       34
       +
           TAG_NAME = 'g'

     

       35
       35
       +
       

     

       36
       36
       +
       class Raw(DrawingElement):

     

       37
       37
       +
           '''Raw unescaped text to include in the SVG output.

     

       38
       38
       +
       

     

       39
       39
       +
           Special XML characters like '<' and '&' in the content may have unexpected

     

       40
       40
       +
           effects or completely break the resulting SVG.

     

       41
       41
       +
           '''

     

       42
       42
       +
           has_content = True

     

       43
       43
       +
           def __init__(self, content, defs=()):

     

       44
       44
       +
               super().__init__()

     

       45
       45
       +
               self.content = content

     

       46
       46
       +
               self.defs = defs

     

       47
       47
       +
               self.id = None

     

       48
       48
       +
           def write_svg_element(self, id_map, is_duplicate, output_file, lcontext,

     

       49
       49
       +
                                 dry_run, force_dup=False):

     

       50
       50
       +
               if dry_run:

     

       51
       51
       +
                   return

     

       52
       52
       +
               output_file.write(self.content)

     

       53
       53
       +
           def get_svg_defs(self):

     

       54
       54
       +
               return self.defs

     

       55
       55
       +
           def check_children_allowed(self):

     

       56
       56
       +
               raise RuntimeError('{} does not support children'.format(type(self)))

     

       57
       57
       +
       

     

       58
       58
       +
       class Use(DrawingBasicElement):

     

       59
       59
       +
           '''A copy of another element, drawn at a given position

     

       60
       60
       +
       

     

       61
       61
       +
           The referenced element becomes an SVG def shared between all Use elements

     

       62
       62
       +
           that reference it.  Useful for drawings with many copies of similar shapes.

     

       63
       63
       +
           Additional arguments like `fill='red'` will be used as the default for this

     

       64
       64
       +
           copy of the shapes.

     

       65
       65
       +
           '''

     

       66
       66
       +
           TAG_NAME = 'use'

     

       67
       67
       +
           def __init__(self, other_elem, x, y, **kwargs):

     

       68
       68
       +
               if isinstance(other_elem, str) and not other_elem.startswith('#'):

     

       69
       69
       +
                   other_elem = '#' + other_elem

     

       70
       70
       +
               super().__init__(xlink__href=other_elem, x=x, y=y, **kwargs)

     

       71
       71
       +
       

     

       72
       72
       +
       class Animate(DrawingBasicElement):

     

       73
       73
       +
           '''Animation for a specific property of another element.

     

       74
       74
       +
       

     

       75
       75
       +
           This should be added as a child of the element to animate.  Otherwise the

     

       76
       76
       +
           referenced other element and this element must both be added to the drawing.

     

       77
       77
       +
       

     

       78
       78
       +
           Useful SVG attributes:

     

       79
       79
       +
           - repeatCount: 0, 1, ..., 'indefinite'

     

       80
       80
       +
           '''

     

       81
       81
       +
           TAG_NAME = 'animate'

     

       82
       82
       +
           def __init__(self, attributeName, dur, from_or_values=None, to=None,

     

       83
       83
       +
                        begin=None, other_elem=None, **kwargs):

     

       84
       84
       +
               if to is None:

     

       85
       85
       +
                   values = from_or_values

     

       86
       86
       +
                   from_ = None

     

       87
       87
       +
               else:

     

       88
       88
       +
                   values = None

     

       89
       89
       +
                   from_ = from_or_values

     

       90
       90
       +
               if isinstance(other_elem, str) and not other_elem.startswith('#'):

     

       91
       91
       +
                   other_elem = '#' + other_elem

     

       92
       92
       +
               args = dict(

     

       93
       93
       +
                       attributeName=attributeName, dur=dur, begin=begin, from_=from_,

     

       94
       94
       +
                       to=to, values=values)

     

       95
       95
       +
               args.update(kwargs)

     

       96
       96
       +
               super().__init__(xlink__href=other_elem, **args)

     

       97
       97
       +
       

     

       98
       98
       +
           def get_svg_defs(self):

     

       99
       99
       +
               return [v for k, v in self.args.items()

     

       100
       100
       +
                       if isinstance(v, DrawingElement)

     

       101
       101
       +
                       if k != 'xlink:href']

     

       102
       102
       +
       

     

       103
       103
       +
           def get_linked_elems(self):

     

       104
       104
       +
               elem = self.args['xlink:href']

     

       105
       105
       +
               return (elem,) if elem is not None else ()

     

       106
       106
       +
       

     

       107
       107
       +
       class _Mpath(DrawingBasicElement):

     

       108
       108
       +
           '''Used by AnimateMotion.'''

     

       109
       109
       +
           TAG_NAME = 'mpath'

     

       110
       110
       +
           def __init__(self, other_path, **kwargs):

     

       111
       111
       +
               super().__init__(xlink__href=other_path, **kwargs)

     

       112
       112
       +
       

     

       113
       113
       +
       class AnimateMotion(Animate):

     

       114
       114
       +
           '''Animation for the motion of another element along a path.

     

       115
       115
       +
       

     

       116
       116
       +
           This should be added as a child of the element to animate.  Otherwise the

     

       117
       117
       +
           referenced other element and this element must both be added to the drawing.

     

       118
       118
       +
           '''

     

       119
       119
       +
           TAG_NAME = 'animateMotion'

     

       120
       120
       +
           def __init__(self, path, dur, from_or_values=None, to=None, begin=None,

     

       121
       121
       +
                        other_elem=None, **kwargs):

     

       122
       122
       +
               use_mpath = False

     

       123
       123
       +
               if isinstance(path, DrawingElement):

     

       124
       124
       +
                   use_mpath = True

     

       125
       125
       +
                   path_elem = path

     

       126
       126
       +
                   path = None

     

       127
       127
       +
               kwargs.setdefault('attributeName', None)

     

       128
       128
       +
               super().__init__(dur=dur, from_or_values=from_or_values, to=to,

     

       129
       129
       +
                                begin=begin, path=path, other_elem=other_elem,

     

       130
       130
       +
                                **kwargs)

     

       131
       131
       +
               if use_mpath:

     

       132
       132
       +
                   self.children.append(_Mpath(path_elem))

     

       133
       133
       +
       

     

       134
       134
       +
       class AnimateTransform(Animate):

     

       135
       135
       +
           '''Animation for the transform property of another element.

     

       136
       136
       +
       

     

       137
       137
       +
           This should be added as a child of the element to animate.  Otherwise the

     

       138
       138
       +
           referenced other element and this element must both be added to the drawing.

     

       139
       139
       +
           '''

     

       140
       140
       +
           TAG_NAME = 'animateTransform'

     

       141
       141
       +
           def __init__(self, type, dur, from_or_values, to=None, begin=None,

     

       142
       142
       +
                        attributeName='transform', other_elem=None, **kwargs):

     

       143
       143
       +
               super().__init__(attributeName, dur=dur, from_or_values=from_or_values,

     

       144
       144
       +
                                to=to, begin=begin, type=type, other_elem=other_elem,

     

       145
       145
       +
                                **kwargs)

     

       146
       146
       +
       

     

       147
       147
       +
       class Set(Animate):

     

       148
       148
       +
           '''Animation for a specific property of another element that sets the new

     

       149
       149
       +
           value without a transition.

     

       150
       150
       +
       

     

       151
       151
       +
           This should be added as a child of the element to animate.  Otherwise the

     

       152
       152
       +
           referenced other element and this element must both be added to the drawing.

     

       153
       153
       +
           '''

     

       154
       154
       +
           TAG_NAME = 'set'

     

       155
       155
       +
           def __init__(self, attributeName, dur, to=None, begin=None,

     

       156
       156
       +
                        other_elem=None, **kwargs):

     

       157
       157
       +
               super().__init__(attributeName, dur=dur, from_or_values=None,

     

       158
       158
       +
                                to=to, begin=begin, other_elem=other_elem, **kwargs)

     

       159
       159
       +
       

     

       160
       160
       +
       class Discard(Animate):

     

       161
       161
       +
           '''Animation configuration specifying when it is safe to discard another

     

       162
       162
       +
           element.

     

       163
       163
       +
       

     

       164
       164
       +
           Use this when an element will no longer be visible after an animation.

     

       165
       165
       +
           This should be added as a child of the element to animate.  Otherwise the

     

       166
       166
       +
           referenced other element and this element must both be added to the drawing.

     

       167
       167
       +
           '''

     

       168
       168
       +
           TAG_NAME = 'discard'

     

       169
       169
       +
           def __init__(self, attributeName, begin=None, **kwargs):

     

       170
       170
       +
               kwargs.setdefault('attributeName', None)

     

       171
       171
       +
               kwargs.setdefault('to', None)

     

       172
       172
       +
               kwargs.setdefault('dur', None)

     

       173
       173
       +
               super().__init__(from_or_values=None, begin=begin, other_elem=None,

     

       174
       174
       +
                                **kwargs)

     

       175
       175
       +
       

     

       176
       176
       +
       class Image(DrawingBasicElement):

     

       177
       177
       +
           '''A linked or embedded image.'''

     

       178
       178
       +
           TAG_NAME = 'image'

     

       179
       179
       +
           MIME_MAP = {

     

       180
       180
       +
               '.bm':  'image/bmp',

     

       181
       181
       +
               '.bmp': 'image/bmp',

     

       182
       182
       +
               '.gif': 'image/gif',

     

       183
       183
       +
               '.jpeg':'image/jpeg',

     

       184
       184
       +
               '.jpg': 'image/jpeg',

     

       185
       185
       +
               '.png': 'image/png',

     

       186
       186
       +
               '.svg': 'image/svg+xml',

     

       187
       187
       +
               '.tif': 'image/tiff',

     

       188
       188
       +
               '.tiff':'image/tiff',

     

       189
       189
       +
               '.pdf': 'application/pdf',

     

       190
       190
       +
               '.txt': 'text/plain',

     

       191
       191
       +
           }

     

       192
       192
       +
           MIME_DEFAULT = 'image/png'

     

       193
       193
       +
           def __init__(self, x, y, width, height, path=None, data=None, embed=False,

     

       194
       194
       +
                        mime_type=None, **kwargs):

     

       195
       195
       +
               '''

     

       196
       196
       +
               Specify either the path or data argument.  If path is used and embed is

     

       197
       197
       +
               True, the image file is embedded in a data URI.

     

       198
       198
       +
               '''

     

       199
       199
       +
               if path is None and data is None:

     

       200
       200
       +
                   raise ValueError('Either path or data arguments must be given')

     

       201
       201
       +
               if embed:

     

       202
       202
       +
                   if mime_type is None and path is not None:

     

       203
       203
       +
                       ext = os.path.splitext(path)[1].lower()

     

       204
       204
       +
                       if ext in self.MIME_MAP:

     

       205
       205
       +
                           mime_type = self.MIME_MAP[ext]

     

       206
       206
       +
                       else:

     

       207
       207
       +
                           mime_type = self.MIME_DEFAULT

     

       208
       208
       +
                           warnings.warn('Unknown image file type "{}"'.format(ext),

     

       209
       209
       +
                                         Warning)

     

       210
       210
       +
                   if mime_type is None:

     

       211
       211
       +
                       mime_type = self.MIME_DEFAULT

     

       212
       212
       +
                       warnings.warn('Unspecified image type; assuming png', Warning)

     

       213
       213
       +
               if data is not None:

     

       214
       214
       +
                   embed = True

     

       215
       215
       +
               if embed and data is None:

     

       216
       216
       +
                   with open(path, 'rb') as f:

     

       217
       217
       +
                       data = f.read()

     

       218
       218
       +
               if not embed:

     

       219
       219
       +
                   uri = path

     

       220
       220
       +
               else:

     

       221
       221
       +
                   uri = url_encode.bytes_as_data_uri(data, mime=mime_type)

     

       222
       222
       +
               super().__init__(x=x, y=y, width=width, height=height, xlink__href=uri,

     

       223
       223
       +
                                **kwargs)

     

       224
       224
       +
       

     

       225
       225
       +
       class Text(DrawingParentElement):

     

       226
       226
       +
           '''A line or multiple lines of text, optionally placed along a path.

     

       227
       227
       +
       

     

       228
       228
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       229
       229
       +
           node e.g. fill='red', font_size=20, letter_spacing=1.5.

     

       230
       230
       +
       

     

       231
       231
       +
           Useful SVG attributes:

     

       232
       232
       +
           - text_anchor: start, middle, end

     

       233
       233
       +
           - dominant_baseline:

     

       234
       234
       +
               auto, central, middle, hanging, text-top, mathematical, ...

     

       235
       235
       +
           See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

     

       236
       236
       +
       

     

       237
       237
       +
           CairoSVG bug with letter spacing text on a path: The first two letters are

     

       238
       238
       +
           always spaced as if letter_spacing=1.

     

       239
       239
       +
           '''

     

       240
       240
       +
           TAG_NAME = 'text'

     

       241
       241
       +
           has_content = True

     

       242
       242
       +
           def __new__(cls, text='', *args, path=None, id=None, _skip_check=False,

     

       243
       243
       +
                       **kwargs):

     

       244
       244
       +
               # Check for the special case of multi-line text on a path

     

       245
       245
       +
               # This is inconsistently implemented by renderers so we return a group

     

       246
       246
       +
               # of single-line text on paths instead.

     

       247
       247
       +
               if path is not None and not _skip_check:

     

       248
       248
       +
                   text, _ = cls._handle_text_argument(text, True)

     

       249
       249
       +
                   if len(text) > 1:

     

       250
       250
       +
                       # Special case

     

       251
       251
       +
                       g = Group(id=id)

     

       252
       252
       +
                       for i, line in enumerate(text):

     

       253
       253
       +
                           subtext = [None] * len(text)

     

       254
       254
       +
                           subtext[i] = line

     

       255
       255
       +
                           g.append(Text(subtext, *args, path=path, _skip_check=True,

     

       256
       256
       +
                                         **kwargs))

     

       257
       257
       +
                       return g

     

       258
       258
       +
               return super().__new__(cls)

     

       259
       259
       +
           def __init__(self, text, font_size, x=None, y=None, *, center=False,

     

       260
       260
       +
                        line_height=1, line_offset=0, path=None, start_offset=None,

     

       261
       261
       +
                        path_args=None, tspan_args=None, cairo_fix=True,

     

       262
       262
       +
                        _skip_check=False, **kwargs):

     

       263
       263
       +
               # Check argument requirements

     

       264
       264
       +
               if path is None:

     

       265
       265
       +
                   if x is None or y is None:

     

       266
       266
       +
                       raise TypeError(

     

       267
       267
       +
                               "__init__() missing required arguments: 'x' and 'y' "

     

       268
       268
       +
                               "are required unless 'path' is specified")

     

       269
       269
       +
               else:

     

       270
       270
       +
                   if x is not None or y is not None:

     

       271
       271
       +
                       raise TypeError(

     

       272
       272
       +
                               "__init__() conflicting arguments: 'x' and 'y' "

     

       273
       273
       +
                               "should not be used when 'path' is specified")

     

       274
       274
       +
               if path_args is None:

     

       275
       275
       +
                   path_args = {}

     

       276
       276
       +
               if start_offset is not None:

     

       277
       277
       +
                   path_args.setdefault('startOffset', start_offset)

     

       278
       278
       +
               if tspan_args is None:

     

       279
       279
       +
                   tspan_args = {}

     

       280
       280
       +
               on_path = path is not None

     

       281
       281
       +
       

     

       282
       282
       +
               text, single_line = self._handle_text_argument(

     

       283
       283
       +
                       text, force_multi=on_path)

     

       284
       284
       +
               num_lines = len(text)

     

       285
       285
       +
       

     

       286
       286
       +
               # Text alignment

     

       287
       287
       +
               if center:

     

       288
       288
       +
                   kwargs.setdefault('text_anchor', 'middle')

     

       289
       289
       +
                   if path is None and single_line:

     

       290
       290
       +
                       kwargs.setdefault('dominant_baseline', 'central')

     

       291
       291
       +
                   else:

     

       292
       292
       +
                       line_offset += 0.5

     

       293
       293
       +
                   line_offset -= line_height * (num_lines - 1) / 2

     

       294
       294
       +
               # Text alignment on a path

     

       295
       295
       +
               if on_path:

     

       296
       296
       +
                   if kwargs.get('text_anchor') == 'start':

     

       297
       297
       +
                       path_args.setdefault('startOffset', '0')

     

       298
       298
       +
                   elif kwargs.get('text_anchor') == 'middle':

     

       299
       299
       +
                       path_args.setdefault('startOffset', '50%')

     

       300
       300
       +
                   elif kwargs.get('text_anchor') == 'end':

     

       301
       301
       +
                       if cairo_fix and 'startOffset' not in path_args:

     

       302
       302
       +
                           # Fix CairoSVG not drawing the last character with aligned

     

       303
       303
       +
                           # right

     

       304
       304
       +
                           tspan_args.setdefault('dx', -1)

     

       305
       305
       +
                       path_args.setdefault('startOffset', '100%')

     

       306
       306
       +
       

     

       307
       307
       +
               super().__init__(x=x, y=y, font_size=font_size, **kwargs)

     

       308
       308
       +
               self._text_path = None

     

       309
       309
       +
               if single_line:

     

       310
       310
       +
                   self.escaped_text = xml.escape(text[0])

     

       311
       311
       +
               else:

     

       312
       312
       +
                   # Add elements for each line of text

     

       313
       313
       +
                   self.escaped_text = ''

     

       314
       314
       +
                   if path is None:

     

       315
       315
       +
                       # Text is an iterable

     

       316
       316
       +
                       for i, line in enumerate(text):

     

       317
       317
       +
                           dy = '{}em'.format(line_offset if i == 0 else line_height)

     

       318
       318
       +
                           self.append_line(line, x=x, dy=dy, **tspan_args)

     

       319
       319
       +
                   else:

     

       320
       320
       +
                       self._text_path = _TextPath(path, **path_args)

     

       321
       321
       +
                       assert sum(bool(line) for line in text) <= 1, (

     

       322
       322
       +
                               'Logic error, __new__ should handle multi-line paths')

     

       323
       323
       +
                       for i, line in enumerate(text):

     

       324
       324
       +
                           if line is None or len(line) == 0:

     

       325
       325
       +
                               continue

     

       326
       326
       +
                           dy = '{}em'.format(line_offset + i*line_height)

     

       327
       327
       +
                           tspan = TSpan(line, dy=dy, **tspan_args)

     

       328
       328
       +
                           self._text_path.append(tspan)

     

       329
       329
       +
                       self.append(self._text_path)

     

       330
       330
       +
           @staticmethod

     

       331
       331
       +
           def _handle_text_argument(text, force_multi=False):

     

       332
       332
       +
               # Handle multi-line text (contains '\n' or is a list of strings)

     

       333
       333
       +
               if isinstance(text, str):

     

       334
       334
       +
                   single_line = '\n' not in text and not force_multi

     

       335
       335
       +
                   if single_line:

     

       336
       336
       +
                       text = (text,)

     

       337
       337
       +
                   else:

     

       338
       338
       +
                       text = tuple(text.splitlines())

     

       339
       339
       +
               else:

     

       340
       340
       +
                   single_line = False

     

       341
       341
       +
                   text = tuple(text)

     

       342
       342
       +
               return text, single_line

     

       343
       343
       +
           def write_content(self, id_map, is_duplicate, output_file, lcontext,

     

       344
       344
       +
                             dry_run):

     

       345
       345
       +
               if dry_run:

     

       346
       346
       +
                   return

     

       347
       347
       +
               output_file.write(self.escaped_text)

     

       348
       348
       +
           def write_children_content(self, id_map, is_duplicate, output_file,

     

       349
       349
       +
                                      lcontext, dry_run):

     

       350
       350
       +
               children = self.all_children(lcontext=lcontext)

     

       351
       351
       +
               for child in children:

     

       352
       352
       +
                   local = LocalContext(lcontext.context, child, self, children)

     

       353
       353
       +
                   child.write_svg_element(

     

       354
       354
       +
                           id_map, is_duplicate, output_file, local, dry_run)

     

       355
       355
       +
           def append_line(self, line, **kwargs):

     

       356
       356
       +
               if self._text_path is not None:

     

       357
       357
       +
                   raise ValueError('appendLine is not supported for text on a path')

     

       358
       358
       +
               self.append(TSpan(line, **kwargs))

     

       359
       359
       +
       

     

       360
       360
       +
       class _TextPath(DrawingParentElement):

     

       361
       361
       +
           TAG_NAME = 'textPath'

     

       362
       362
       +
           has_content = True

     

       363
       363
       +
           def __init__(self, path, **kwargs):

     

       364
       364
       +
               super().__init__(xlink__href=path, **kwargs)

     

       365
       365
       +
       

     

       366
       366
       +
       class _TextContainingElement(DrawingBasicElement):

     

       367
       367
       +
           ''' A private parent class used for elements that only have plain text

     

       368
       368
       +
               content. '''

     

       369
       369
       +
           has_content = True

     

       370
       370
       +
           def __init__(self, text, **kwargs):

     

       371
       371
       +
               super().__init__(**kwargs)

     

       372
       372
       +
               self.escaped_text = xml.escape(text)

     

       373
       373
       +
           def write_content(self, id_map, is_duplicate, output_file, lcontext,

     

       374
       374
       +
                             dry_run):

     

       375
       375
       +
               if dry_run:

     

       376
       376
       +
                   return

     

       377
       377
       +
               output_file.write(self.escaped_text)

     

       378
       378
       +
       

     

       379
       379
       +
       class TSpan(_TextContainingElement):

     

       380
       380
       +
           ''' A line of text within the Text element. '''

     

       381
       381
       +
           TAG_NAME = 'tspan'

     

       382
       382
       +
       

     

       383
       383
       +
       class Title(_TextContainingElement):

     

       384
       384
       +
           '''A title element.

     

       385
       385
       +
       

     

       386
       386
       +
           This element can be appended with shape.append_title("Your title!"), which

     

       387
       387
       +
           can be useful for adding a tooltip or on-hover text display to an element.

     

       388
       388
       +
           '''

     

       389
       389
       +
           TAG_NAME = 'title'

     

       390
       390
       +
       

     

       391
       391
       +
       class Rectangle(DrawingBasicElement):

     

       392
       392
       +
           '''A rectangle.

     

       393
       393
       +
       

     

       394
       394
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       395
       395
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       396
       396
       +
           '''

     

       397
       397
       +
           TAG_NAME = 'rect'

     

       398
       398
       +
           def __init__(self, x, y, width, height, **kwargs):

     

       399
       399
       +
               super().__init__(x=x, y=y, width=width, height=height, **kwargs)

     

       400
       400
       +
       

     

       401
       401
       +
       class Circle(DrawingBasicElement):

     

       402
       402
       +
           '''A circle.

     

       403
       403
       +
       

     

       404
       404
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       405
       405
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       406
       406
       +
           '''

     

       407
       407
       +
           TAG_NAME = 'circle'

     

       408
       408
       +
           def __init__(self, cx, cy, r, **kwargs):

     

       409
       409
       +
               super().__init__(cx=cx, cy=cy, r=r, **kwargs)

     

       410
       410
       +
       

     

       411
       411
       +
       class Ellipse(DrawingBasicElement):

     

       412
       412
       +
           '''An ellipse.

     

       413
       413
       +
       

     

       414
       414
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       415
       415
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       416
       416
       +
           '''

     

       417
       417
       +
           TAG_NAME = 'ellipse'

     

       418
       418
       +
           def __init__(self, cx, cy, rx, ry, **kwargs):

     

       419
       419
       +
               super().__init__(cx=cx, cy=cy, rx=rx, ry=ry, **kwargs)

     

       420
       420
       +
       

     

       421
       421
       +
       class ArcLine(Circle):

     

       422
       422
       +
           '''An arc.

     

       423
       423
       +
       

     

       424
       424
       +
           In most cases, use Arc instead of ArcLine.  ArcLine uses the

     

       425
       425
       +
           stroke-dasharray SVG property to make the edge of a circle look like an arc.

     

       426
       426
       +
       

     

       427
       427
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       428
       428
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       429
       429
       +
           '''

     

       430
       430
       +
           def __init__(self, cx, cy, r, start_deg, end_deg, **kwargs):

     

       431
       431
       +
               if end_deg - start_deg == 360:

     

       432
       432
       +
                   super().__init__(cx, cy, r, **kwargs)

     

       433
       433
       +
                   return

     

       434
       434
       +
               start_deg, end_deg = (-end_deg) % 360, (-start_deg) % 360

     

       435
       435
       +
               arc_deg = (end_deg - start_deg) % 360

     

       436
       436
       +
               def arc_len(deg):

     

       437
       437
       +
                   return math.radians(deg) * r

     

       438
       438
       +
               whole_len = 2 * math.pi * r

     

       439
       439
       +
               if end_deg == start_deg:

     

       440
       440
       +
                   offset = 1

     

       441
       441
       +
                   dashes = "0 {}".format(whole_len+2)

     

       442
       442
       +
               else:

     

       443
       443
       +
                   start_len = arc_len(start_deg)

     

       444
       444
       +
                   arc_len = arc_len(arc_deg)

     

       445
       445
       +
                   off_len = whole_len - arc_len

     

       446
       446
       +
                   offset = -start_len

     

       447
       447
       +
                   dashes = "{} {}".format(arc_len, off_len)

     

       448
       448
       +
               super().__init__(cx, cy, r, stroke_dasharray=dashes,

     

       449
       449
       +
                                stroke_dashoffset=offset, **kwargs)

     

       450
       450
       +
       

     

       451
       451
       +
       class Path(DrawingBasicElement):

     

       452
       452
       +
           '''An arbitrary path.

     

       453
       453
       +
       

     

       454
       454
       +
           Path Supports building an SVG path by calling instance methods corresponding

     

       455
       455
       +
           to path commands.

     

       456
       456
       +
       

     

       457
       457
       +
           Complete descriptions of path commands:

     

       458
       458
       +
           https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands

     

       459
       459
       +
       

     

       460
       460
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       461
       461
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       462
       462
       +
           '''

     

       463
       463
       +
           TAG_NAME = 'path'

     

       464
       464
       +
           def __init__(self, d='', **kwargs):

     

       465
       465
       +
               super().__init__(d=d, **kwargs)

     

       466
       466
       +
           def append(self, command_str, *args):

     

       467
       467
       +
               if len(self.args['d']) > 0:

     

       468
       468
       +
                   command_str = ' ' + command_str

     

       469
       469
       +
               if len(args) > 0:

     

       470
       470
       +
                   command_str = command_str + ','.join(map(str, args))

     

       471
       471
       +
               self.args['d'] += command_str

     

       472
       472
       +
               return self

     

       473
       473
       +
           def M(self, x, y):

     

       474
       474
       +
               '''Start a new curve section from this point.'''

     

       475
       475
       +
               return self.append('M', x, y)

     

       476
       476
       +
           def m(self, dx, dy):

     

       477
       477
       +
               '''Start a new curve section from this point (relative coordinates).'''

     

       478
       478
       +
               return self.append('m', dx, dy)

     

       479
       479
       +
           def L(self, x, y):

     

       480
       480
       +
               '''Draw a line to this point.'''

     

       481
       481
       +
               return self.append('L', x, y)

     

       482
       482
       +
           def l(self, dx, dy):

     

       483
       483
       +
               '''Draw a line to this point (relative coordinates).'''

     

       484
       484
       +
               return self.append('l', dx, dy)

     

       485
       485
       +
           def H(self, x):

     

       486
       486
       +
               '''Draw a horizontal line to this x coordinate.'''

     

       487
       487
       +
               return self.append('H', x)

     

       488
       488
       +
           def h(self, dx):

     

       489
       489
       +
               '''Draw a horizontal line to this relative x coordinate.'''

     

       490
       490
       +
               return self.append('h', dx)

     

       491
       491
       +
           def V(self, y):

     

       492
       492
       +
               '''Draw a horizontal line to this y coordinate.'''

     

       493
       493
       +
               return self.append('V', y)

     

       494
       494
       +
           def v(self, dy):

     

       495
       495
       +
               '''Draw a horizontal line to this relative y coordinate.'''

     

       496
       496
       +
               return self.append('v', dy)

     

       497
       497
       +
           def Z(self):

     

       498
       498
       +
               '''Draw a line back to the previous m or M point.'''

     

       499
       499
       +
               return self.append('Z')

     

       500
       500
       +
           def C(self, cx1, cy1, cx2, cy2, ex, ey):

     

       501
       501
       +
               '''Draw a cubic Bezier curve.'''

     

       502
       502
       +
               return self.append('C', cx1, cy1, cx2, cy2, ex, ey)

     

       503
       503
       +
           def c(self, cx1, cy1, cx2, cy2, ex, ey):

     

       504
       504
       +
               '''Draw a cubic Bezier curve (relative coordinates).'''

     

       505
       505
       +
               return self.append('c', cx1, cy1, cx2, cy2, ex, ey)

     

       506
       506
       +
           def S(self, cx2, cy2, ex, ey):

     

       507
       507
       +
               '''Draw a cubic Bezier curve, transitioning smoothly from the previous.

     

       508
       508
       +
               '''

     

       509
       509
       +
               return self.append('S', cx2, cy2, ex, ey)

     

       510
       510
       +
           def s(self, cx2, cy2, ex, ey):

     

       511
       511
       +
               '''Draw a cubic Bezier curve, transitioning smoothly from the previous

     

       512
       512
       +
               (relative coordinates).

     

       513
       513
       +
               '''

     

       514
       514
       +
               return self.append('s', cx2, cy2, ex, ey)

     

       515
       515
       +
           def Q(self, cx, cy, ex, ey):

     

       516
       516
       +
               '''Draw a quadratic Bezier curve.'''

     

       517
       517
       +
               return self.append('Q', cx, cy, ex, ey)

     

       518
       518
       +
           def q(self, cx, cy, ex, ey):

     

       519
       519
       +
               '''Draw a quadratic Bezier curve (relative coordinates).'''

     

       520
       520
       +
               return self.append('q', cx, cy, ex, ey)

     

       521
       521
       +
           def T(self, ex, ey):

     

       522
       522
       +
               '''Draw a quadratic Bezier curve, transitioning soothly from the

     

       523
       523
       +
               previous.

     

       524
       524
       +
               '''

     

       525
       525
       +
               return self.append('T', ex, ey)

     

       526
       526
       +
           def t(self, ex, ey):

     

       527
       527
       +
               '''Draw a quadratic Bezier curve, transitioning soothly from the

     

       528
       528
       +
               previous (relative coordinates).

     

       529
       529
       +
               '''

     

       530
       530
       +
               return self.append('t', ex, ey)

     

       531
       531
       +
           def A(self, rx, ry, rot, large_arc, sweep, ex, ey):

     

       532
       532
       +
               '''Draw a circular or elliptical arc.

     

       533
       533
       +
       

     

       534
       534
       +
               See

     

       535
       535
       +
               https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve

     

       536
       536
       +
               '''

     

       537
       537
       +
               return self.append('A', rx, ry, rot, int(bool(large_arc)),

     

       538
       538
       +
                                  int(bool(sweep)), ex, ey)

     

       539
       539
       +
           def a(self, rx, ry, rot, large_arc, sweep, ex, ey):

     

       540
       540
       +
               '''Draw a circular or elliptical arc (relative coordinates).

     

       541
       541
       +
       

     

       542
       542
       +
               See

     

       543
       543
       +
               https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve

     

       544
       544
       +
               '''

     

       545
       545
       +
               return self.append('a', rx, ry, rot, int(bool(large_arc)),

     

       546
       546
       +
                                  int(bool(sweep)), ex, ey)

     

       547
       547
       +
           def arc(self, cx, cy, r, start_deg, end_deg, cw=True, include_m=True,

     

       548
       548
       +
                   include_l=False):

     

       549
       549
       +
               '''Draw a circular arc, controlled by center, radius, and start/end

     

       550
       550
       +
               degrees.

     

       551
       551
       +
       

     

       552
       552
       +
               Angles rotate from the x-axis towards the positive y-axis.

     

       553
       553
       +
               '''

     

       554
       554
       +
               large_arc = ((end_deg - start_deg) % 360 <= 180) ^ cw

     

       555
       555
       +
               start_rad, end_rad = start_deg*math.pi/180, end_deg*math.pi/180

     

       556
       556
       +
               sx, sy = r*math.cos(start_rad), r*math.sin(start_rad)

     

       557
       557
       +
               ex, ey = r*math.cos(end_rad), r*math.sin(end_rad)

     

       558
       558
       +
               if include_l:

     

       559
       559
       +
                   self.L(cx+sx, cy+sy)

     

       560
       560
       +
               elif include_m:

     

       561
       561
       +
                   self.M(cx+sx, cy+sy)

     

       562
       562
       +
               return self.A(r, r, 0, large_arc, cw, cx+ex, cy+ey)

     

       563
       563
       +
       

     

       564
       564
       +
       class Lines(Path):

     

       565
       565
       +
           '''A sequence of connected lines (or a polygon).

     

       566
       566
       +
       

     

       567
       567
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       568
       568
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       569
       569
       +
           '''

     

       570
       570
       +
           def __init__(self, sx, sy, *points, close=False, **kwargs):

     

       571
       571
       +
               super().__init__(d='', **kwargs)

     

       572
       572
       +
               self.M(sx, sy)

     

       573
       573
       +
               if len(points) % 2 != 0:

     

       574
       574
       +
                   raise TypeError(

     

       575
       575
       +
                           'expected an even number of positional arguments x0, y0, '

     

       576
       576
       +
                           'x1, y1, ...')

     

       577
       577
       +
               for i in range(len(points) // 2):

     

       578
       578
       +
                   self.L(points[2*i], points[2*i+1])

     

       579
       579
       +
               if close:

     

       580
       580
       +
                   self.Z()

     

       581
       581
       +
       

     

       582
       582
       +
       class Line(Lines):

     

       583
       583
       +
           '''A simple line.

     

       584
       584
       +
       

     

       585
       585
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       586
       586
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       587
       587
       +
           '''

     

       588
       588
       +
           def __init__(self, sx, sy, ex, ey, **kwargs):

     

       589
       589
       +
               super().__init__(sx, sy, ex, ey, close=False, **kwargs)

     

       590
       590
       +
       

     

       591
       591
       +
       class Arc(Path):

     

       592
       592
       +
           '''A circular arc.

     

       593
       593
       +
       

     

       594
       594
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       595
       595
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       596
       596
       +
           '''

     

       597
       597
       +
           def __init__(self, cx, cy, r, start_deg, end_deg, cw=False, **kwargs):

     

       598
       598
       +
               super().__init__(d='', **kwargs)

     

       599
       599
       +
               self.arc(cx, cy, r, start_deg, end_deg, cw=cw, include_m=True)

     

       600
       600
       +
       

     

       601
       601
       +
       class ForeignObject(DrawingBasicElement):

     

       602
       602
       +
           '''A foreign object, i.e. for embedding HTML.

     

       603
       603
       +
       

     

       604
       604
       +
           In the context of SVG embedded in an HTML document, the XHTML namespace

     

       605
       605
       +
           could be omitted in the foreignObject content, but it is mandatory in the

     

       606
       606
       +
           context of an SVG document.

     

       607
       607
       +
       

     

       608
       608
       +
           This element works best when viewing the SVG in a browser. Drawing.rasterize()

     

       609
       609
       +
           and Drawing.save_png() are unable to display this element.

     

       610
       610
       +
       

     

       611
       611
       +
           Additional keyword arguments are output as additional arguments to the SVG

     

       612
       612
       +
           node e.g. fill="red", stroke="#ff4477", stroke_width=2.

     

       613
       613
       +
           '''

     

       614
       614
       +
           TAG_NAME = 'foreignObject'

     

       615
       615
       +
           has_content = True

     

       616
       616
       +
           def __init__(self, content, **kwargs):

     

       617
       617
       +
               super().__init__(**kwargs)

     

       618
       618
       +
               self.content = content

     

       619
       619
       +
           def write_content(self, id_map, is_duplicate, output_file, lcontext,

     

       620
       620
       +
                             dry_run):

     

       621
       621
       +
               if dry_run:

     

       622
       622
       +
                   return

     

       623
       623
       +
               output_file.write(self.content)

+48

drawsvg/font_embed.py

···

       1
       1
       +
       import urllib.request, urllib.parse

     

       2
       2
       +
       import re

     

       3
       3
       +
       

     

       4
       4
       +
       from . import url_encode

     

       5
       5
       +
       

     

       6
       6
       +
       

     

       7
       7
       +
       def download_url(url):

     

       8
       8
       +
           with urllib.request.urlopen(url) as r:

     

       9
       9
       +
               return r.read()

     

       10
       10
       +
       

     

       11
       11
       +
       def download_url_to_data_uri(url, mime='application/octet-stream'):

     

       12
       12
       +
           data = download_url(url)

     

       13
       13
       +
           return url_encode.bytes_as_data_uri(data, strip_chars='', mime=mime)

     

       14
       14
       +
       

     

       15
       15
       +
       def embed_css_resources(css):

     

       16
       16
       +
           '''Replace all URLs in the CSS string with downloaded data URIs.'''

     

       17
       17
       +
           regex = re.compile(r'url\((https?://[^)]*)\)')

     

       18
       18
       +
           def repl(match):

     

       19
       19
       +
               url = match[1]

     

       20
       20
       +
               uri = download_url_to_data_uri(url)

     

       21
       21
       +
               return f'url({uri})'

     

       22
       22
       +
           embedded, _ = regex.subn(repl, css)

     

       23
       23
       +
           return embedded

     

       24
       24
       +
       

     

       25
       25
       +
       def download_google_font_css(family, text=None, display='swap', **kwargs):

     

       26
       26
       +
           '''Download SVG-embeddable CSS from Google fonts.

     

       27
       27
       +
       

     

       28
       28
       +
           Args:

     

       29
       29
       +
               family: Name of font family or list of font families.

     

       30
       30
       +
               text: The set of characters required from the font.  Only a font subset

     

       31
       31
       +
                   with these characters will be downloaded.

     

       32
       32
       +
               display: The font-display CSS value.

     

       33
       33
       +
               **kwargs: Other URL parameters sent to

     

       34
       34
       +
                   https://fonts.googleapis.com/css?...

     

       35
       35
       +
           '''

     

       36
       36
       +
           if not isinstance(family, str):

     

       37
       37
       +
               family = '|'.join(family)  # Request a list of families

     

       38
       38
       +
           args = dict(family=family, display=display)

     

       39
       39
       +
           if text is not None:

     

       40
       40
       +
               if not isinstance(text, str):

     

       41
       41
       +
                   text = ''.join(text)

     

       42
       42
       +
               args['text'] = text

     

       43
       43
       +
           args.update(kwargs)

     

       44
       44
       +
           params = urllib.parse.urlencode(args)

     

       45
       45
       +
           url = f'https://fonts.googleapis.com/css?{params}'

     

       46
       46
       +
           with urllib.request.urlopen(url) as r:

     

       47
       47
       +
               css = r.read().decode('utf-8')

     

       48
       48
       +
           return embed_css_resources(css)

+130

drawsvg/frame_animation.py

···

       1
       1
       +
       import time

     

       2
       2
       +
       

     

       3
       3
       +
       from . import video

     

       4
       4
       +
       

     

       5
       5
       +
       

     

       6
       6
       +
       class FrameAnimation:

     

       7
       7
       +
           def __init__(self, draw_func=None, callback=None):

     

       8
       8
       +
               self.frames = []

     

       9
       9
       +
               if draw_func is None:

     

       10
       10
       +
                   draw_func = lambda d:d

     

       11
       11
       +
               self.draw_func = draw_func

     

       12
       12
       +
               if callback is None:

     

       13
       13
       +
                   callback = lambda d:None

     

       14
       14
       +
               self.callback = callback

     

       15
       15
       +
       

     

       16
       16
       +
           def append_frame(self, frame):

     

       17
       17
       +
               self.frames.append(frame)

     

       18
       18
       +
               self.callback(frame)

     

       19
       19
       +
       

     

       20
       20
       +
           def draw_frame(self, *args, **kwargs):

     

       21
       21
       +
               frame = self.draw_func(*args, **kwargs)

     

       22
       22
       +
               self.append_frame(frame)

     

       23
       23
       +
               return frame

     

       24
       24
       +
       

     

       25
       25
       +
           def save_video(self, file, **kwargs):

     

       26
       26
       +
               video.save_video(self.frames, file, **kwargs)

     

       27
       27
       +
       

     

       28
       28
       +
           def save_spritesheet(self, file, **kwargs):

     

       29
       29
       +
               video.save_spritesheet(self.frames, file, **kwargs)

     

       30
       30
       +
       

     

       31
       31
       +
       

     

       32
       32
       +
       class FrameAnimationContext:

     

       33
       33
       +
           def __init__(self, draw_func=None, out_file=None,

     

       34
       34
       +
                        jupyter=False, spritesheet=False, pause=False,

     

       35
       35
       +
                        clear=True, delay=0, disable=False, video_args=None,

     

       36
       36
       +
                        _patch_delay=0.05):

     

       37
       37
       +
               self.jupyter = jupyter

     

       38
       38
       +
               self.spritesheet = spritesheet

     

       39
       39
       +
               self.disable = disable

     

       40
       40
       +
               if self.jupyter and not self.disable:

     

       41
       41
       +
                   from IPython import display

     

       42
       42
       +
                   self._jupyter_clear_output = display.clear_output

     

       43
       43
       +
                   self._jupyter_display = display.display

     

       44
       44
       +
                   callback = self.draw_jupyter_frame

     

       45
       45
       +
               else:

     

       46
       46
       +
                   callback = None

     

       47
       47
       +
               self.anim = FrameAnimation(draw_func, callback=callback)

     

       48
       48
       +
               self.out_file = out_file

     

       49
       49
       +
               self.pause = pause

     

       50
       50
       +
               self.clear = clear

     

       51
       51
       +
               self.delay = delay

     

       52
       52
       +
               if video_args is None:

     

       53
       53
       +
                   video_args = {}

     

       54
       54
       +
               self.video_args = video_args

     

       55
       55
       +
               self._patch_delay = _patch_delay

     

       56
       56
       +
       

     

       57
       57
       +
           def draw_jupyter_frame(self, frame):

     

       58
       58
       +
               if self.clear:

     

       59
       59
       +
                   self._jupyter_clear_output(wait=True)

     

       60
       60
       +
               self._jupyter_display(frame)

     

       61
       61
       +
               if self.pause:

     

       62
       62
       +
                   # Patch.  Jupyter sometimes clears the input field otherwise.

     

       63
       63
       +
                   time.sleep(self._patch_delay)

     

       64
       64
       +
                   input('Next?')

     

       65
       65
       +
               elif self.delay != 0:

     

       66
       66
       +
                   time.sleep(self.delay)

     

       67
       67
       +
       

     

       68
       68
       +
           def __enter__(self):

     

       69
       69
       +
               return self.anim

     

       70
       70
       +
       

     

       71
       71
       +
           def __exit__(self, exc_type, exc_value, exc_traceback):

     

       72
       72
       +
               if exc_value is None:

     

       73
       73
       +
                   # No error

     

       74
       74
       +
                   if self.out_file is not None and not self.disable:

     

       75
       75
       +
                       if self.spritesheet:

     

       76
       76
       +
                           self.anim.save_spritesheet(self.out_file, **self.video_args)

     

       77
       77
       +
                       else:

     

       78
       78
       +
                           self.anim.save_video(self.out_file, **self.video_args)

     

       79
       79
       +
       

     

       80
       80
       +
       

     

       81
       81
       +
       def frame_animate_video(out_file, draw_func=None, jupyter=False, **video_args):

     

       82
       82
       +
           '''

     

       83
       83
       +
           Returns a context manager that stores frames and saves a video when the

     

       84
       84
       +
           context exits.

     

       85
       85
       +
       

     

       86
       86
       +
           Example:

     

       87
       87
       +
           ```

     

       88
       88
       +
           with frame_animate_video('video.mp4') as anim:

     

       89
       89
       +
               while True:

     

       90
       90
       +
                   ...

     

       91
       91
       +
                   anim.draw_frame(...)

     

       92
       92
       +
           ```

     

       93
       93
       +
           '''

     

       94
       94
       +
           return FrameAnimationContext(draw_func=draw_func, out_file=out_file,

     

       95
       95
       +
                                        jupyter=jupyter, video_args=video_args)

     

       96
       96
       +
       

     

       97
       97
       +
       def frame_animate_spritesheet(out_file, draw_func=None, jupyter=False,

     

       98
       98
       +
                                     **video_args):

     

       99
       99
       +
           '''

     

       100
       100
       +
           Returns a context manager that stores frames and saves a spritesheet when

     

       101
       101
       +
           the context exits.

     

       102
       102
       +
       

     

       103
       103
       +
           Example:

     

       104
       104
       +
           ```

     

       105
       105
       +
           with frame_animate_spritesheet('sheet.png', row_length=10) as anim:

     

       106
       106
       +
               while True:

     

       107
       107
       +
                   ...

     

       108
       108
       +
                   anim.draw_frame(...)

     

       109
       109
       +
           ```

     

       110
       110
       +
           '''

     

       111
       111
       +
           return FrameAnimationContext(draw_func=draw_func, out_file=out_file,

     

       112
       112
       +
                                       jupyter=jupyter, spritesheet=True,

     

       113
       113
       +
                                       video_args=video_args)

     

       114
       114
       +
       

     

       115
       115
       +
       

     

       116
       116
       +
       def frame_animate_jupyter(draw_func=None, pause=False, clear=True, delay=0.1,

     

       117
       117
       +
                                 **kwargs):

     

       118
       118
       +
           '''

     

       119
       119
       +
           Returns a context manager that displays frames in a Jupyter notebook.

     

       120
       120
       +
       

     

       121
       121
       +
           Example:

     

       122
       122
       +
           ```

     

       123
       123
       +
           with frame_animate_jupyter(delay=0.5) as anim:

     

       124
       124
       +
               while True:

     

       125
       125
       +
                   ...

     

       126
       126
       +
                   anim.draw_frame(...)

     

       127
       127
       +
           ```

     

       128
       128
       +
           '''

     

       129
       129
       +
           return FrameAnimationContext(draw_func=draw_func, jupyter=True, pause=pause,

     

       130
       130
       +
                                        clear=clear, delay=delay, **kwargs)

+41

drawsvg/jupyter.py

···

       1
       1
       +
       import dataclasses

     

       2
       2
       +
       

     

       3
       3
       +
       from . import url_encode

     

       4
       4
       +
       from . import raster

     

       5
       5
       +
       

     

       6
       6
       +
       

     

       7
       7
       +
       class _Rasterizable:

     

       8
       8
       +
           def rasterize(self, to_file=None):

     

       9
       9
       +
               if to_file is not None:

     

       10
       10
       +
                   return raster.Raster.from_svg_to_file(self.svg, to_file)

     

       11
       11
       +
               else:

     

       12
       12
       +
                   return raster.Raster.from_svg(self.svg)

     

       13
       13
       +
       

     

       14
       14
       +
       @dataclasses.dataclass

     

       15
       15
       +
       class JupyterSvgInline(_Rasterizable):

     

       16
       16
       +
           '''Jupyter-displayable SVG displayed inline on the Jupyter web page.'''

     

       17
       17
       +
           svg: str

     

       18
       18
       +
           def _repr_html_(self):

     

       19
       19
       +
               return self.svg

     

       20
       20
       +
       

     

       21
       21
       +
       @dataclasses.dataclass

     

       22
       22
       +
       class JupyterSvgImage(_Rasterizable):

     

       23
       23
       +
           '''Jupyter-displayable SVG displayed within an img tag on the Jupyter web

     

       24
       24
       +
           page.

     

       25
       25
       +
           '''

     

       26
       26
       +
           svg: str

     

       27
       27
       +
           def _repr_html_(self):

     

       28
       28
       +
               uri = url_encode.svg_as_utf8_data_uri(self.svg)

     

       29
       29
       +
               return '<img src="{}">'.format(uri)

     

       30
       30
       +
       

     

       31
       31
       +
       @dataclasses.dataclass

     

       32
       32
       +
       class JupyterSvgFrame:

     

       33
       33
       +
           '''Jupyter-displayable SVG displayed within an HTML iframe.'''

     

       34
       34
       +
           svg: str

     

       35
       35
       +
           width: float

     

       36
       36
       +
           height: float

     

       37
       37
       +
           mime: str = 'image/svg+xml'

     

       38
       38
       +
           def _repr_html_(self):

     

       39
       39
       +
               uri = url_encode.svg_as_data_uri(self.svg, mime=self.mime)

     

       40
       40
       +
               return (f'<iframe src="{uri}" width="{self.width}" '

     

       41
       41
       +
                       f'height="{self.height}" style="border:0" />')

drawsvg/native_animation/__init__.py

···

       1
       1
       +
       from .synced_animation import (

     

       2
       2
       +
           SyncedAnimationConfig,

     

       3
       3
       +
           AnimatedAttributeTimeline,

     

       4
       4
       +
           AnimationHelperData,

     

       5
       5
       +
           animate_element_sequence,

     

       6
       6
       +
           animate_text_sequence,

     

       7
       7
       +
       )

     

       8
       8
       +
       from .playback_control_ui import draw_scrub

+120

drawsvg/native_animation/playback_control_js.py

···

       1
       1
       +
       SVG_ONLOAD = 'svgOnLoad(event)'

     

       2
       2
       +
       SVG_JS_CONTENT = '''

     

       3
       3
       +
       /* Animation playback controls generated by drawsvg */

     

       4
       4
       +
       /* https://github.com/cduck/drawsvg/ */

     

       5
       5
       +
       function svgOnLoad(event) {

     

       6
       6
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       7
       7
       +
           if (event && event.target && event.target.ownerDocument) {

     

       8
       8
       +
               svgSetup(event.target.ownerDocument);

     

       9
       9
       +
           } else if (document && document.currentScript

     

       10
       10
       +
                      && document.currentScript.parentElement) {

     

       11
       11
       +
               svgSetup(document.currentScript.parentElement);

     

       12
       12
       +
           }

     

       13
       13
       +
       }

     

       14
       14
       +
       function svgSetup(doc) {

     

       15
       15
       +
           var svgRoot = doc.documentElement || doc;

     

       16
       16
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       17
       17
       +
           /* Block multiple setups */

     

       18
       18
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       19
       19
       +
               return;

     

       20
       20
       +
           }

     

       21
       21
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       22
       22
       +
           var scrubContainer = doc.getElementById("scrub");

     

       23
       23
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       24
       24
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       25
       25
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       26
       26
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       27
       27
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       28
       28
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       29
       29
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       30
       30
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       31
       31
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       32
       32
       +
           var paused = false;

     

       33
       33
       +
           var dragXOffset = 0;

     

       34
       34
       +
           var point = svgRoot.createSVGPoint();

     

       35
       35
       +
       

     

       36
       36
       +
           function screenToSvgX(p) {

     

       37
       37
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       38
       38
       +
               point.x = p.x;

     

       39
       39
       +
               point.y = p.y;

     

       40
       40
       +
               return point.matrixTransform(matrix).x;

     

       41
       41
       +
           };

     

       42
       42
       +
           function screenToProgress(p) {

     

       43
       43
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       44
       44
       +
               point.x = p.x;

     

       45
       45
       +
               point.y = p.y;

     

       46
       46
       +
               var x = point.matrixTransform(matrix).x;

     

       47
       47
       +
               if (x <= scrubXMin) {

     

       48
       48
       +
                   return scrubStartDelay / scrubTotalDur;

     

       49
       49
       +
               }

     

       50
       50
       +
               if (x >= scrubXMax) {

     

       51
       51
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       52
       52
       +
               }

     

       53
       53
       +
               return (scrubStartDelay/scrubTotalDur

     

       54
       54
       +
                       + (x - dragXOffset - scrubXMin)

     

       55
       55
       +
                         / (scrubXMax - scrubXMin)

     

       56
       56
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       57
       57
       +
                         / scrubTotalDur);

     

       58
       58
       +
           };

     

       59
       59
       +
           function currentScrubX() {

     

       60
       60
       +
               return scrubKnob.cx.animVal.value;

     

       61
       61
       +
           };

     

       62
       62
       +
           function pause() {

     

       63
       63
       +
               svgRoot.pauseAnimations();

     

       64
       64
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       65
       65
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       66
       66
       +
               paused = true;

     

       67
       67
       +
           };

     

       68
       68
       +
           function play() {

     

       69
       69
       +
               svgRoot.unpauseAnimations();

     

       70
       70
       +
               scrubPause.setAttribute("visibility", "visible");

     

       71
       71
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       72
       72
       +
               paused = false;

     

       73
       73
       +
           };

     

       74
       74
       +
           function scrub(playbackFraction) {

     

       75
       75
       +
               var t = scrubTotalDur * playbackFraction;

     

       76
       76
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       77
       77
       +
               var limit = scrubTotalDur - 10e-3;

     

       78
       78
       +
               if (t < 0) t = 0;

     

       79
       79
       +
               else if (t > limit) t = limit;

     

       80
       80
       +
               svgRoot.setCurrentTime(t);

     

       81
       81
       +
           };

     

       82
       82
       +
           function mousedown(e) {

     

       83
       83
       +
               svgRoot.pauseAnimations();

     

       84
       84
       +
               if (e.target == scrubKnob) {

     

       85
       85
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       86
       86
       +
               } else {

     

       87
       87
       +
                   dragXOffset = 0;

     

       88
       88
       +
               }

     

       89
       89
       +
               scrub(screenToProgress(e));

     

       90
       90
       +
               /* Global document listeners */

     

       91
       91
       +
               document.addEventListener('mousemove', mousemove);

     

       92
       92
       +
               document.addEventListener('mouseup', mouseup);

     

       93
       93
       +
               e.preventDefault();

     

       94
       94
       +
           };

     

       95
       95
       +
           function mouseup(e) {

     

       96
       96
       +
               dragXOffset = 0;

     

       97
       97
       +
               document.removeEventListener('mousemove', mousemove);

     

       98
       98
       +
               document.removeEventListener('mouseup', mouseup);

     

       99
       99
       +
               if (!paused) {

     

       100
       100
       +
                   svgRoot.unpauseAnimations();

     

       101
       101
       +
               }

     

       102
       102
       +
               e.preventDefault();

     

       103
       103
       +
           };

     

       104
       104
       +
           function mousemove(e) {

     

       105
       105
       +
               scrub(screenToProgress(e));

     

       106
       106
       +
           };

     

       107
       107
       +
           scrubPause.addEventListener("click", pause);

     

       108
       108
       +
           scrubPlay.addEventListener("click", play);

     

       109
       109
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       110
       110
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       111
       111
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       112
       112
       +
           if (scrubPauseOnLoad) {

     

       113
       113
       +
               pause();

     

       114
       114
       +
               scrub(0);

     

       115
       115
       +
           } else {

     

       116
       116
       +
               play();

     

       117
       117
       +
           }

     

       118
       118
       +
       };

     

       119
       119
       +
       svgOnLoad();

     

       120
       120
       +
       '''

+87

drawsvg/native_animation/playback_control_ui.py

···

       1
       1
       +
       from .. import elements as draw

     

       2
       2
       +
       

     

       3
       3
       +
       

     

       4
       4
       +
       def draw_scrub(config: 'SyncedAnimationConfig', hidden=False) -> 'Group':

     

       5
       5
       +
           hpad = config.bar_hpad

     

       6
       6
       +
           bar_x = config.controls_x + hpad

     

       7
       7
       +
           bar_y = config.controls_center_y

     

       8
       8
       +
           bar_width = config.controls_width - 2*hpad

     

       9
       9
       +
           knob_rad = config.knob_rad

     

       10
       10
       +
           pause_width = config.pause_width

     

       11
       11
       +
           pause_corner_rad = config.pause_corner_rad

     

       12
       12
       +
           g = draw.Group(id='scrub', visibility='hidden' if hidden else None)

     

       13
       13
       +
           g.append(draw.Line(

     

       14
       14
       +
                   bar_x, bar_y, bar_x+bar_width, bar_y,

     

       15
       15
       +
                   stroke=config.bar_color,

     

       16
       16
       +
                   stroke_width=config.bar_thickness,

     

       17
       17
       +
                   stroke_linecap='round'))

     

       18
       18
       +
           progress = draw.Rectangle(

     

       19
       19
       +
                   bar_x, bar_y, 0, 0.001,

     

       20
       20
       +
                   stroke=config.bar_past_color,

     

       21
       21
       +
                   stroke_width=config.bar_thickness,

     

       22
       22
       +
                   stroke_linejoin='round')

     

       23
       23
       +
           g.append(progress)

     

       24
       24
       +
           g_capture = draw.Group(

     

       25
       25
       +
                   id='scrub-capture',

     

       26
       26
       +
                   data_xmin=bar_x,

     

       27
       27
       +
                   data_xmax=bar_x+bar_width,

     

       28
       28
       +
                   data_totaldur=config.total_duration,

     

       29
       29
       +
                   data_startdelay=config.start_delay,

     

       30
       30
       +
                   data_enddelay=config.end_delay,

     

       31
       31
       +
                   data_pauseonload=int(bool(config.pause_on_load)))

     

       32
       32
       +
           g_capture.append(draw.Rectangle(

     

       33
       33
       +
                   bar_x-config.bar_thickness/2, bar_y-config.controls_height/2,

     

       34
       34
       +
                   bar_width+config.bar_thickness, config.controls_height,

     

       35
       35
       +
                   fill='rgba(255,255,255,0)'))

     

       36
       36
       +
           knob = draw.Circle(

     

       37
       37
       +
                   bar_x, bar_y, knob_rad, fill=config.knob_fill,

     

       38
       38
       +
                   id='scrub-knob',

     

       39
       39
       +
                   visibility='hidden')

     

       40
       40
       +
           g_capture.append(knob)

     

       41
       41
       +
           g.append(g_capture)

     

       42
       42
       +
           g_play = draw.Group(id='scrub-play', visibility='hidden')

     

       43
       43
       +
           g_play.append(draw.Rectangle(

     

       44
       44
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/2 + pause_corner_rad,

     

       45
       45
       +
                   bar_y - pause_width/2 + pause_corner_rad,

     

       46
       46
       +
                   pause_width - pause_corner_rad*2,

     

       47
       47
       +
                   pause_width - pause_corner_rad*2,

     

       48
       48
       +
                   fill=config.pause_color,

     

       49
       49
       +
                   stroke=config.pause_color,

     

       50
       50
       +
                   stroke_width=pause_corner_rad*2,

     

       51
       51
       +
                   stroke_linejoin='round'))

     

       52
       52
       +
           g_play.append(draw.Path(fill=config.pause_icon_color)

     

       53
       53
       +
                   .M(bar_x - hpad/2 - knob_rad/2 - pause_width/4,

     

       54
       54
       +
                      bar_y - pause_width/4)

     

       55
       55
       +
                   .v(pause_width/2)

     

       56
       56
       +
                   .l(pause_width/4*2, -pause_width/4)

     

       57
       57
       +
                   .Z())

     

       58
       58
       +
           g.append(g_play)

     

       59
       59
       +
           g_pause = draw.Group(id='scrub-pause', visibility='hidden')

     

       60
       60
       +
           g_pause.append(draw.Rectangle(

     

       61
       61
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/2 + pause_corner_rad,

     

       62
       62
       +
                   bar_y - pause_width/2 + pause_corner_rad,

     

       63
       63
       +
                   pause_width - pause_corner_rad*2,

     

       64
       64
       +
                   pause_width - pause_corner_rad*2,

     

       65
       65
       +
                   fill=config.pause_color,

     

       66
       66
       +
                   stroke=config.pause_color,

     

       67
       67
       +
                   stroke_width=pause_corner_rad*2,

     

       68
       68
       +
                   stroke_linejoin='round'))

     

       69
       69
       +
           g_pause.append(draw.Rectangle(

     

       70
       70
       +
                   bar_x - hpad/2 - knob_rad/2 - pause_width/16*3,

     

       71
       71
       +
                   bar_y - pause_width/4,

     

       72
       72
       +
                   pause_width/8,

     

       73
       73
       +
                   pause_width/2,

     

       74
       74
       +
                   fill=config.pause_icon_color))

     

       75
       75
       +
           g_pause.append(draw.Rectangle(

     

       76
       76
       +
                   bar_x - hpad/2 - knob_rad/2 + pause_width/16,

     

       77
       77
       +
                   bar_y - pause_width/4,

     

       78
       78
       +
                   pause_width/8,

     

       79
       79
       +
                   pause_width/2,

     

       80
       80
       +
                   fill=config.pause_icon_color))

     

       81
       81
       +
           g.append(g_pause)

     

       82
       82
       +
       

     

       83
       83
       +
           progress.add_key_frame(0, width=0)

     

       84
       84
       +
           progress.add_key_frame(config.duration, width=bar_width)

     

       85
       85
       +
           knob.add_key_frame(0, cx=bar_x)

     

       86
       86
       +
           knob.add_key_frame(config.duration, cx=bar_x+bar_width)

     

       87
       87
       +
           return g

+352

drawsvg/native_animation/synced_animation.py

···

       1
       1
       +
       from typing import Any, Callable, Dict, List, Optional, Union

     

       2
       2
       +
       

     

       3
       3
       +
       import dataclasses

     

       4
       4
       +
       from collections import defaultdict

     

       5
       5
       +
       from numbers import Number

     

       6
       6
       +
       

     

       7
       7
       +
       from .. import elements, types

     

       8
       8
       +
       from . import playback_control_ui, playback_control_js

     

       9
       9
       +
       

     

       10
       10
       +
       

     

       11
       11
       +
       @dataclasses.dataclass

     

       12
       12
       +
       class SyncedAnimationConfig:

     

       13
       13
       +
           # Animation settings

     

       14
       14
       +
           duration: float

     

       15
       15
       +
           start_delay: float = 0

     

       16
       16
       +
           end_delay: float = 0

     

       17
       17
       +
           repeat_count: Union[int, str] = 'indefinite'

     

       18
       18
       +
           fill: str = 'freeze'

     

       19
       19
       +
           freeze_frame_at: Optional[float] = None

     

       20
       20
       +
       

     

       21
       21
       +
           # Playback controls

     

       22
       22
       +
           show_playback_progress: bool = False

     

       23
       23
       +
           show_playback_controls: bool = False  # Adds JavaScript to the drawing

     

       24
       24
       +
           pause_on_load: bool = False

     

       25
       25
       +
           controls_width: Optional[float] = None

     

       26
       26
       +
           controls_height: float = 20

     

       27
       27
       +
           controls_x: Optional[float] = None

     

       28
       28
       +
           controls_center_y: Optional[float] = None

     

       29
       29
       +
       

     

       30
       30
       +
           # Playback control style

     

       31
       31
       +
           bar_thickness: float = 4

     

       32
       32
       +
           bar_hpad: float = 32

     

       33
       33
       +
           bar_color: str = '#ccc'

     

       34
       34
       +
           bar_past_color: str = '#05f'

     

       35
       35
       +
           knob_rad: float = 6

     

       36
       36
       +
           knob_fill: str = '#05f'

     

       37
       37
       +
           pause_width: float = 16

     

       38
       38
       +
           pause_corner_rad: float = 4

     

       39
       39
       +
           pause_color: str = '#05f'

     

       40
       40
       +
           pause_icon_color: str = '#eee'

     

       41
       41
       +
       

     

       42
       42
       +
           # Advanced configuration

     

       43
       43
       +
           controls_js: str = 'DEFAULT'

     

       44
       44
       +
           controls_js_onload: str = playback_control_js.SVG_ONLOAD

     

       45
       45
       +
           controls_draw_function: Callable[['SyncedAnimationConfig', bool], 'Group'

     

       46
       46
       +
                   ] = playback_control_ui.draw_scrub

     

       47
       47
       +
       

     

       48
       48
       +
           @property

     

       49
       49
       +
           def total_duration(self):

     

       50
       50
       +
               return self.start_delay + self.duration + self.end_delay

     

       51
       51
       +
       

     

       52
       52
       +
           def extra_css(self, d, context):

     

       53
       53
       +
               return []

     

       54
       54
       +
       

     

       55
       55
       +
           def extra_javascript(self, d, context):

     

       56
       56
       +
               config = self._with_filled_defaults(d, context)

     

       57
       57
       +
               if self.show_playback_controls:

     

       58
       58
       +
                   return [config.controls_js]

     

       59
       59
       +
               return []

     

       60
       60
       +
       

     

       61
       61
       +
           def extra_onload_js(self, d, context):

     

       62
       62
       +
               config = self._with_filled_defaults(d, context)

     

       63
       63
       +
               if self.show_playback_controls:

     

       64
       64
       +
                   return [config.controls_js_onload]

     

       65
       65
       +
               return []

     

       66
       66
       +
       

     

       67
       67
       +
           def extra_drawing_elements(self, d, context):

     

       68
       68
       +
               config = self._with_filled_defaults(d, context)

     

       69
       69
       +
               if self.show_playback_progress or self.show_playback_controls:

     

       70
       70
       +
                   # Control UI

     

       71
       71
       +
                   controls = config.controls_draw_function(

     

       72
       72
       +
                           config, hidden=not self.show_playback_progress)

     

       73
       73
       +
                   return [controls]

     

       74
       74
       +
               return []

     

       75
       75
       +
       

     

       76
       76
       +
           def _with_filled_defaults(self, d, context):

     

       77
       77
       +
               # By default place the controls along the bottom edge

     

       78
       78
       +
               width = d.view_box[2]

     

       79
       79
       +
               x = d.view_box[0]

     

       80
       80
       +
               if context.invert_y:

     

       81
       81
       +
                   y = d.view_box[1] + self.controls_height/2

     

       82
       82
       +
               else:

     

       83
       83
       +
                   y = d.view_box[1] + d.view_box[3] - self.controls_height/2

     

       84
       84
       +
               js = playback_control_js.SVG_JS_CONTENT

     

       85
       85
       +
               if self.controls_width is not None:

     

       86
       86
       +
                   width = self.controls_width

     

       87
       87
       +
                   x += (d.view_box[2] - width) / 2

     

       88
       88
       +
               if self.controls_x is not None:

     

       89
       89
       +
                   x = self.controls_x

     

       90
       90
       +
               if self.controls_center_y is not None:

     

       91
       91
       +
                   y = self.controls_center_y

     

       92
       92
       +
               if self.controls_js != 'DEFAULT':

     

       93
       93
       +
                   js = self.controls_js

     

       94
       94
       +
               return dataclasses.replace(

     

       95
       95
       +
                       self, controls_width=width, controls_x=x, controls_center_y=y,

     

       96
       96
       +
                       controls_js=js)

     

       97
       97
       +
       

     

       98
       98
       +
           def override_args(self, args, lcontext):

     

       99
       99
       +
               if (self.freeze_frame_at is not None

     

       100
       100
       +
                       and hasattr(lcontext.element, 'animation_data')):

     

       101
       101
       +
                   args = dict(args)

     

       102
       102
       +
                   data = lcontext.element.animation_data

     

       103
       103
       +
                   args.update(data.interpolate_at_time(self.freeze_frame_at))

     

       104
       104
       +
               return args

     

       105
       105
       +
       

     

       106
       106
       +
       

     

       107
       107
       +
       @dataclasses.dataclass

     

       108
       108
       +
       class AnimatedAttributeTimeline:

     

       109
       109
       +
           name: str

     

       110
       110
       +
           animate_attrs: Optional[Dict[str, Any]] = None

     

       111
       111
       +
           times: List[float] = dataclasses.field(default_factory=list)

     

       112
       112
       +
           values: List[Any] = dataclasses.field(default_factory=list)

     

       113
       113
       +
       

     

       114
       114
       +
           def __post_init__(self):

     

       115
       115
       +
               self.name = types.normalize_attribute_name(self.name)

     

       116
       116
       +
       

     

       117
       117
       +
           def append(self, time, value):

     

       118
       118
       +
               if self.times and time < self.times[-1]:

     

       119
       119
       +
                   raise ValueError('out-of-order key frame times')

     

       120
       120
       +
               self.times.append(time)

     

       121
       121
       +
               self.values.append(value)

     

       122
       122
       +
       

     

       123
       123
       +
           def extend(self, times, values):

     

       124
       124
       +
               if len(times) != len(values):

     

       125
       125
       +
                   raise ValueError('times and values lists are mismatched lengths')

     

       126
       126
       +
               if len(self.times) and len(times) and times[0] < self.times[-1]:

     

       127
       127
       +
                   raise ValueError('out-of-order key frame times')

     

       128
       128
       +
               if list(times) != sorted(times):

     

       129
       129
       +
                   raise ValueError('out-of-order key frame times')

     

       130
       130
       +
               self.times.extend(times)

     

       131
       131
       +
               self.values.extend(values)

     

       132
       132
       +
       

     

       133
       133
       +
           def interpolate_at_time(self, at_time):

     

       134
       134
       +
               return linear_interpolate_value(self.times, self.values, at_time)

     

       135
       135
       +
       

     

       136
       136
       +
           def as_animate_element(self, config: Optional[SyncedAnimationConfig]=None):

     

       137
       137
       +
               if config is not None:

     

       138
       138
       +
                   total_duration = (

     

       139
       139
       +
                           config.start_delay + config.duration + config.end_delay)

     

       140
       140
       +
                   start_delay = config.start_delay

     

       141
       141
       +
                   repeat_count = config.repeat_count

     

       142
       142
       +
                   fill = config.fill

     

       143
       143
       +
               else:

     

       144
       144
       +
                   total_duration = self.times[-1]

     

       145
       145
       +
                   start_delay = 0

     

       146
       146
       +
                   repeat_count = 1

     

       147
       147
       +
                   fill = 'freeze'

     

       148
       148
       +
               dur_str = f'{total_duration}s'

     

       149
       149
       +
               values = self.values

     

       150
       150
       +
               times = self.times

     

       151
       151
       +
               key_times = ';'.join(

     

       152
       152
       +
                   str(max(0, min(1, round(

     

       153
       153
       +
                           (start_delay + t) / total_duration, 3))))

     

       154
       154
       +
                   for t in times

     

       155
       155
       +
               )

     

       156
       156
       +
               values_str = ';'.join(map(str, values))

     

       157
       157
       +
               if not key_times.startswith('0;'):

     

       158
       158
       +
                   key_times = '0;' + key_times

     

       159
       159
       +
                   values_str = f'{values[0]};' + values_str

     

       160
       160
       +
               if not key_times.endswith(';1'):

     

       161
       161
       +
                   key_times = key_times + ';1'

     

       162
       162
       +
                   values_str = values_str + f';{values[-1]}'

     

       163
       163
       +
               attrs = dict(

     

       164
       164
       +
                       dur=dur_str,

     

       165
       165
       +
                       values=values_str,

     

       166
       166
       +
                       keyTimes=key_times,

     

       167
       167
       +
                       repeatCount=repeat_count,

     

       168
       168
       +
                       fill=fill)

     

       169
       169
       +
               attrs.update(self.animate_attrs or {})

     

       170
       170
       +
               anim = elements.Animate(self.name, **attrs)

     

       171
       171
       +
               return anim

     

       172
       172
       +
       

     

       173
       173
       +
       

     

       174
       174
       +
       class AnimationHelperData:

     

       175
       175
       +
           def __init__(self):

     

       176
       176
       +
               self.attr_timelines = {}

     

       177
       177
       +
       

     

       178
       178
       +
           def add_key_frame(self, time, animation_args=None, **attr_values):

     

       179
       179
       +
               for attr, val in attr_values.items():

     

       180
       180
       +
                   attr = types.normalize_attribute_name(attr)

     

       181
       181
       +
                   timeline = self.attr_timelines.get(attr)

     

       182
       182
       +
                   if timeline is None:

     

       183
       183
       +
                       timeline = AnimatedAttributeTimeline(attr, animation_args)

     

       184
       184
       +
                       self.attr_timelines[attr] = timeline

     

       185
       185
       +
                   timeline.append(time, val)

     

       186
       186
       +
       

     

       187
       187
       +
           def add_attribute_key_sequence(self, attr, times, values, *,

     

       188
       188
       +
                                          animation_args=None):

     

       189
       189
       +
               attr = types.normalize_attribute_name(attr)

     

       190
       190
       +
               timeline = self.attr_timelines.get(attr)

     

       191
       191
       +
               if timeline is None:

     

       192
       192
       +
                   timeline = AnimatedAttributeTimeline(attr, animation_args)

     

       193
       193
       +
                   self.attr_timelines[attr] = timeline

     

       194
       194
       +
               timeline.extend(times, values)

     

       195
       195
       +
       

     

       196
       196
       +
           def interpolate_at_time(self, at_time):

     

       197
       197
       +
               return {

     

       198
       198
       +
                   name: timeline.interpolate_at_time(at_time)

     

       199
       199
       +
                   for name, timeline in self.attr_timelines.items()

     

       200
       200
       +
               }

     

       201
       201
       +
       

     

       202
       202
       +
           def _timelines_adjusted_for_context(self, lcontext=None):

     

       203
       203
       +
               all_timelines = dict(self.attr_timelines)

     

       204
       204
       +
               if lcontext is not None and lcontext.context.invert_y:

     

       205
       205
       +
                   # Invert cy, y1, y2, ...

     

       206
       206
       +
                   for name, timeline in self.attr_timelines.items():

     

       207
       207
       +
                       if name != 'y' and lcontext.context.is_attr_inverted(name):

     

       208
       208
       +
                           inv_timeline = AnimatedAttributeTimeline(

     

       209
       209
       +
                                   timeline.name, timeline.animate_attrs,

     

       210
       210
       +
                                   timeline.times, [-v for v in timeline.values])

     

       211
       211
       +
                           all_timelines[name] = inv_timeline

     

       212
       212
       +
                   # Invert -y - height

     

       213
       213
       +
                   y_attrs = None

     

       214
       214
       +
                   if 'height' in all_timelines.keys():

     

       215
       215
       +
                       height_timeline = all_timelines['height']

     

       216
       216
       +
                       htimes = height_timeline.times

     

       217
       217
       +
                       hvalues = height_timeline.values

     

       218
       218
       +
                       y_attrs = height_timeline.animate_attrs

     

       219
       219
       +
                   else:

     

       220
       220
       +
                       height_timeline = None

     

       221
       221
       +
                       htimes = [0]

     

       222
       222
       +
                       hvalues = [lcontext.element.args.get('height', 0)]

     

       223
       223
       +
                   if 'y' in all_timelines.keys():

     

       224
       224
       +
                       y_timeline = all_timelines['y']

     

       225
       225
       +
                       ytimes = y_timeline.times

     

       226
       226
       +
                       yvalues = y_timeline.values

     

       227
       227
       +
                       y_attrs = y_timeline.animate_attrs

     

       228
       228
       +
                   else:

     

       229
       229
       +
                       y_timeline = None

     

       230
       230
       +
                       ytimes = [0]

     

       231
       231
       +
                       yvalues = [lcontext.element.args.get('y', 0)]

     

       232
       232
       +
                   if y_timeline is not None or height_timeline is not None:

     

       233
       233
       +
                       ytimes, yvalues = _merge_timeline_inverted_y_values(

     

       234
       234
       +
                               ytimes, yvalues, htimes, hvalues,

     

       235
       235
       +
                               linear_interpolate_value, linear_interpolate_value)

     

       236
       236
       +
                       if ytimes is not None:

     

       237
       237
       +
                           y_timeline = AnimatedAttributeTimeline(

     

       238
       238
       +
                                   'y', y_attrs, ytimes, yvalues)

     

       239
       239
       +
                           all_timelines['y'] = y_timeline

     

       240
       240
       +
               return all_timelines

     

       241
       241
       +
       

     

       242
       242
       +
           def children_with_context(self, lcontext=None):

     

       243
       243
       +
               if (lcontext is not None

     

       244
       244
       +
                       and lcontext.context.animation_config is not None

     

       245
       245
       +
                       and lcontext.context.animation_config.freeze_frame_at

     

       246
       246
       +
                           is not None):

     

       247
       247
       +
                   return []  # Don't animate if frame is frozen

     

       248
       248
       +
               all_timelines = self._timelines_adjusted_for_context(lcontext)

     

       249
       249
       +
               return [

     

       250
       250
       +
                   timeline.as_animate_element(lcontext.context.animation_config)

     

       251
       251
       +
                   for timeline in all_timelines.values()

     

       252
       252
       +
               ]

     

       253
       253
       +
       

     

       254
       254
       +
       

     

       255
       255
       +
       def linear_interpolate_value(times, values, at_time):

     

       256
       256
       +
           if len(times) == 0:

     

       257
       257
       +
               return 0

     

       258
       258
       +
           idx = sum(t <= at_time for t in times)

     

       259
       259
       +
           if idx >= len(times):

     

       260
       260
       +
               return values[-1]

     

       261
       261
       +
           elif idx <= 0:

     

       262
       262
       +
               return values[0]

     

       263
       263
       +
           elif at_time == times[idx-1]:

     

       264
       264
       +
               return values[idx-1]

     

       265
       265
       +
           elif isinstance(values[idx], Number) and isinstance(values[idx-1], Number):

     

       266
       266
       +
               fraction = (at_time-times[idx-1]) / (times[idx]-times[idx-1])

     

       267
       267
       +
               return values[idx-1] * (1-fraction) + (values[idx] * fraction)

     

       268
       268
       +
           else:

     

       269
       269
       +
               return values[idx-1]

     

       270
       270
       +
       

     

       271
       271
       +
       def _merge_timeline_inverted_y_values(ytimes, yvalues, htimes, hvalues,

     

       272
       272
       +
                                             yinterpolate, hinterpolate):

     

       273
       273
       +
           if len(yvalues) == 1:

     

       274
       274
       +
               try:

     

       275
       275
       +
                   return htimes, [-yvalues[0]-h for h in hvalues]

     

       276
       276
       +
               except TypeError:

     

       277
       277
       +
                   return None, None

     

       278
       278
       +
           elif len(hvalues) == 1:

     

       279
       279
       +
               try:

     

       280
       280
       +
                   return ytimes, [-y-hvalues[0] for y in yvalues]

     

       281
       281
       +
               except TypeError:

     

       282
       282
       +
                   return None, None

     

       283
       283
       +
           elif ytimes == htimes:

     

       284
       284
       +
               try:

     

       285
       285
       +
                   return ytimes, [-y-h for y, h in zip(yvalues, hvalues)]

     

       286
       286
       +
               except TypeError:

     

       287
       287
       +
                   return None, None

     

       288
       288
       +
           try:

     

       289
       289
       +
               # Offset y-value by height if invert_y

     

       290
       290
       +
               # Merge key_times for y and height animations

     

       291
       291
       +
               new_times = []

     

       292
       292
       +
               new_values = []

     

       293
       293
       +
               hi = yi = 0

     

       294
       294
       +
               inf = float('inf')

     

       295
       295
       +
               ht = htimes[0] if len(htimes) else inf

     

       296
       296
       +
               yt = ytimes[0] if len(ytimes) else inf

     

       297
       297
       +
               while ht < inf and yt < inf:

     

       298
       298
       +
                   if yt < ht:

     

       299
       299
       +
                       h_val = hinterpolate(htimes, hvalues, yt)

     

       300
       300
       +
                       new_times.append(yt)

     

       301
       301
       +
                       new_values.append(-yvalues[yi] - h_val)

     

       302
       302
       +
                       yi += 1

     

       303
       303
       +
                   elif ht < yt:

     

       304
       304
       +
                       y_val = yinterpolate(ytimes, yvalues, ht)

     

       305
       305
       +
                       new_times.append(ht)

     

       306
       306
       +
                       new_values.append(-y_val - hvalues[hi])

     

       307
       307
       +
                       hi += 1

     

       308
       308
       +
                   else:

     

       309
       309
       +
                       new_times.append(yt)

     

       310
       310
       +
                       new_values.append(-yvalues[yi] - hvalues[hi])

     

       311
       311
       +
                       yi += 1

     

       312
       312
       +
                       hi += 1

     

       313
       313
       +
                   yt = ytimes[yi] if yi < len(ytimes) else inf

     

       314
       314
       +
                   ht = htimes[hi] if hi < len(htimes) else inf

     

       315
       315
       +
               return new_times, new_values

     

       316
       316
       +
           except TypeError:

     

       317
       317
       +
               return None, None

     

       318
       318
       +
       

     

       319
       319
       +
       def animate_element_sequence(times, element_sequence):

     

       320
       320
       +
           '''Animate a list of elements to appear one-at-a-time in sequence.

     

       321
       321
       +
       

     

       322
       322
       +
           Elements should already be added to the drawing before using this.

     

       323
       323
       +
           '''

     

       324
       324
       +
           for i, elem in enumerate(element_sequence):

     

       325
       325
       +
               if elem is None:

     

       326
       326
       +
                   continue  # Draw nothing during this time

     

       327
       327
       +
               key_times = [times[i]]

     

       328
       328
       +
               values = ['visible']

     

       329
       329
       +
               if i > 0:

     

       330
       330
       +
                   key_times.insert(0, times[i-1])

     

       331
       331
       +
                   values.insert(0, 'hidden')

     

       332
       332
       +
               if i < len(element_sequence) - 1:

     

       333
       333
       +
                   key_times.append(times[i+1])

     

       334
       334
       +
                   values.append('hidden')

     

       335
       335
       +
               elem.add_attribute_key_sequence('visibility', key_times, values)

     

       336
       336
       +
       

     

       337
       337
       +
       def animate_text_sequence(container, times: List[float], values: List[str],

     

       338
       338
       +
                                 *text_args, kwargs_list=None, **text_kwargs):

     

       339
       339
       +
           '''Animate a sequence of text to appear one-at-a-time in sequence.

     

       340
       340
       +
       

     

       341
       341
       +
           Multiple `Text` elements will be appended to the given `container`.

     

       342
       342
       +
           '''

     

       343
       343
       +
           if kwargs_list is None:

     

       344
       344
       +
               kwargs_list = [None] * len(values)

     

       345
       345
       +
           new_elements = []

     

       346
       346
       +
           for val, current_kw in zip(values, kwargs_list):

     

       347
       347
       +
               kwargs = dict(text_kwargs)

     

       348
       348
       +
               if current_kw is not None:

     

       349
       349
       +
                   kwargs.update(current_kw)

     

       350
       350
       +
               new_elements.append(elements.Text(val, *text_args, **kwargs))

     

       351
       351
       +
           animate_element_sequence(times, new_elements)

     

       352
       352
       +
           container.extend(new_elements)

+94

drawsvg/raster.py

···

       1
       1
       +
       import base64

     

       2
       2
       +
       import io

     

       3
       3
       +
       import warnings

     

       4
       4
       +
       

     

       5
       5
       +
       from .url_encode import bytes_as_data_uri

     

       6
       6
       +
       

     

       7
       7
       +
       def delay_import_cairo():

     

       8
       8
       +
           try:

     

       9
       9
       +
               import cairosvg

     

       10
       10
       +
           except OSError as e:

     

       11
       11
       +
               raise ImportError(

     

       12
       12
       +
                   'Failed to load CairoSVG. '

     

       13
       13
       +
                   'drawSvg will be unable to output PNG or other raster image '

     

       14
       14
       +
                   'formats. '

     

       15
       15
       +
                   'See https://github.com/cduck/drawsvg#full-feature-install '

     

       16
       16
       +
                   'for more details.'

     

       17
       17
       +
               ) from e

     

       18
       18
       +
           except ImportError as e:

     

       19
       19
       +
               raise ImportError(

     

       20
       20
       +
                   'CairoSVG will need to be installed to rasterize images. '

     

       21
       21
       +
                   'Install with `python3 -m pip install "drawsvg[all]"` '

     

       22
       22
       +
                   'or `python3 -m pip install "drawsvg[raster]"`. '

     

       23
       23
       +
                   'See https://github.com/cduck/drawsvg#full-feature-install '

     

       24
       24
       +
                   'for more details.'

     

       25
       25
       +
               ) from e

     

       26
       26
       +
           return cairosvg

     

       27
       27
       +
       

     

       28
       28
       +
       def delay_import_imageio():

     

       29
       29
       +
           try:

     

       30
       30
       +
               import imageio

     

       31
       31
       +
           except ImportError as e:

     

       32
       32
       +
               raise ImportError(

     

       33
       33
       +
                   'Optional dependencies not installed. '

     

       34
       34
       +
                   'Install with `python3 -m pip install "drawsvg[all]"` '

     

       35
       35
       +
                   'or `python3 -m pip install "drawsvg[raster]"`. '

     

       36
       36
       +
                   'See https://github.com/cduck/drawsvg#full-feature-install '

     

       37
       37
       +
                   'for more details.'

     

       38
       38
       +
               ) from e

     

       39
       39
       +
           return imageio

     

       40
       40
       +
       

     

       41
       41
       +
       

     

       42
       42
       +
       class Raster:

     

       43
       43
       +
           def __init__(self, png_data=None, png_file=None):

     

       44
       44
       +
               self.png_data = png_data

     

       45
       45
       +
               self.png_file = png_file

     

       46
       46
       +
           def save_png(self, fname):

     

       47
       47
       +
               with open(fname, 'wb') as f:

     

       48
       48
       +
                   f.write(self.png_data)

     

       49
       49
       +
           @staticmethod

     

       50
       50
       +
           def from_svg(svg_data):

     

       51
       51
       +
               cairosvg = delay_import_cairo()

     

       52
       52
       +
               png_data = cairosvg.svg2png(bytestring=svg_data)

     

       53
       53
       +
               return Raster(png_data)

     

       54
       54
       +
           @staticmethod

     

       55
       55
       +
           def from_svg_to_file(svg_data, out_file):

     

       56
       56
       +
               cairosvg = delay_import_cairo()

     

       57
       57
       +
               cairosvg.svg2png(bytestring=svg_data, write_to=out_file)

     

       58
       58
       +
               return Raster(None, png_file=out_file)

     

       59
       59
       +
           @staticmethod

     

       60
       60
       +
           def from_arr(arr, out_file=None):

     

       61
       61
       +
               imageio = delay_import_imageio()

     

       62
       62
       +
               if out_file is None:

     

       63
       63
       +
                   with io.BytesIO() as f:

     

       64
       64
       +
                       imageio.imwrite(f, arr, format='png')

     

       65
       65
       +
                       f.seek(0)

     

       66
       66
       +
                       return Raster(f.read())

     

       67
       67
       +
               else:

     

       68
       68
       +
                   imageio.imwrite(out_file, arr, format='png')

     

       69
       69
       +
                   return Raster(None, png_file=out_file)

     

       70
       70
       +
           def _repr_png_(self):

     

       71
       71
       +
               if self.png_data:

     

       72
       72
       +
                   return self.png_data

     

       73
       73
       +
               elif self.png_file:

     

       74
       74
       +
                   try:

     

       75
       75
       +
                       with open(self.png_file, 'rb') as f:

     

       76
       76
       +
                           return f.read()

     

       77
       77
       +
                   except TypeError:

     

       78
       78
       +
                       pass

     

       79
       79
       +
                   try:

     

       80
       80
       +
                       self.png_file.seek(0)

     

       81
       81
       +
                       return self.png_file.read()

     

       82
       82
       +
                   except io.UnsupportedOperation:

     

       83
       83
       +
                       pass

     

       84
       84
       +
           def as_data_uri(self):

     

       85
       85
       +
               if self.png_data:

     

       86
       86
       +
                   data = self.png_data

     

       87
       87
       +
               else:

     

       88
       88
       +
                   try:

     

       89
       89
       +
                       with open(self.png_file, 'rb') as f:

     

       90
       90
       +
                           data = f.read()

     

       91
       91
       +
                   except TypeError:

     

       92
       92
       +
                       self.png_file.seek(0)

     

       93
       93
       +
                       data = self.png_file.read()

     

       94
       94
       +
               return bytes_as_data_uri(data, mime='image/png')

+376

drawsvg/types.py

···

       1
       1
       +
       from typing import Optional, Sequence, Union

     

       2
       2
       +
       

     

       3
       3
       +
       from collections import defaultdict

     

       4
       4
       +
       import dataclasses

     

       5
       5
       +
       

     

       6
       6
       +
       from . import elements

     

       7
       7
       +
       from .native_animation import SyncedAnimationConfig, AnimationHelperData

     

       8
       8
       +
       

     

       9
       9
       +
       

     

       10
       10
       +
       @dataclasses.dataclass(frozen=True)

     

       11
       11
       +
       class Context:

     

       12
       12
       +
           '''Additional drawing configuration that can modify element's SVG output.'''

     

       13
       13
       +
           invert_y: bool = False

     

       14
       14
       +
           animation_config: Optional[SyncedAnimationConfig] = None

     

       15
       15
       +
       

     

       16
       16
       +
           def extra_prepost_drawing_elements(self, d):

     

       17
       17
       +
               pre, post = [], []

     

       18
       18
       +
               if self.animation_config:

     

       19
       19
       +
                   post.extend(self.animation_config.extra_drawing_elements(

     

       20
       20
       +
                           d, context=self))

     

       21
       21
       +
               return pre, post

     

       22
       22
       +
       

     

       23
       23
       +
           def extra_css(self, d):

     

       24
       24
       +
               if self.animation_config:

     

       25
       25
       +
                   return self.animation_config.extra_css(d, context=self)

     

       26
       26
       +
               return []

     

       27
       27
       +
       

     

       28
       28
       +
           def extra_javascript(self, d):

     

       29
       29
       +
               if self.animation_config:

     

       30
       30
       +
                   return self.animation_config.extra_javascript(d, context=self)

     

       31
       31
       +
               return []

     

       32
       32
       +
       

     

       33
       33
       +
           def extra_onload_js(self, d):

     

       34
       34
       +
               if self.animation_config:

     

       35
       35
       +
                   return self.animation_config.extra_onload_js(d, context=self)

     

       36
       36
       +
               return []

     

       37
       37
       +
       

     

       38
       38
       +
           def override_view_box(self, view_box):

     

       39
       39
       +
               if self.invert_y:

     

       40
       40
       +
                   if isinstance(view_box, str):

     

       41
       41
       +
                       view_box = tuple(map(float, view_box.split()))

     

       42
       42
       +
                       return ' '.join(map(str, self.override_view_box(view_box)))

     

       43
       43
       +
                   x, y, w, h = view_box

     

       44
       44
       +
                   view_box = (x, -y-h, w, h)

     

       45
       45
       +
               return view_box

     

       46
       46
       +
       

     

       47
       47
       +
           def is_attr_inverted(self, name):

     

       48
       48
       +
               return self.invert_y and name in ('y', 'cy', 'y1', 'y2')

     

       49
       49
       +
       

     

       50
       50
       +
           def override_args(self, args):

     

       51
       51
       +
               args = dict(args)

     

       52
       52
       +
               if self.invert_y:

     

       53
       53
       +
                   for y_like_arg in ('cy', 'y1', 'y2'):

     

       54
       54
       +
                       if y_like_arg in args:

     

       55
       55
       +
                           # Flip y for circle, ellipse, line, gradient, etc.

     

       56
       56
       +
                           try:

     

       57
       57
       +
                               args[y_like_arg] = -args[y_like_arg]

     

       58
       58
       +
                           except TypeError:

     

       59
       59
       +
                               pass

     

       60
       60
       +
                   if 'y' in args:

     

       61
       61
       +
                       # Flip y for most elements

     

       62
       62
       +
                       try:

     

       63
       63
       +
                           args['y'] = -args['y']

     

       64
       64
       +
                           if 'height' in args:

     

       65
       65
       +
                               args['y'] -= args['height']

     

       66
       66
       +
                       except TypeError:

     

       67
       67
       +
                           pass

     

       68
       68
       +
                   if 'viewBox' in args:

     

       69
       69
       +
                       # Flip y for SVG, marker, or other viewBox

     

       70
       70
       +
                       try:

     

       71
       71
       +
                           args['viewBox'] = self.override_view_box(args['viewBox'])

     

       72
       72
       +
                       except (TypeError, ValueError):

     

       73
       73
       +
                           pass

     

       74
       74
       +
                   if 'd' in args:

     

       75
       75
       +
                       # Flip y for paths

     

       76
       76
       +
                       try:

     

       77
       77
       +
                           new_commands = []

     

       78
       78
       +
                           for cmd in args['d'].split():

     

       79
       79
       +
                               name = cmd[:1]

     

       80
       80
       +
                               vals = [float(s) if '.' in s else int(s)

     

       81
       81
       +
                                       for s in  cmd[1:].split(',') if s]

     

       82
       82
       +
                               if name in 'vV':

     

       83
       83
       +
                                   vals = [-y for y in vals]

     

       84
       84
       +
                               elif name in 'hH':

     

       85
       85
       +
                                   pass

     

       86
       86
       +
                               elif name in 'aA':

     

       87
       87
       +
                                   if len(vals) >= 7:

     

       88
       88
       +
                                       vals[6] = -vals[6]

     

       89
       89
       +
                                       vals[4] = int(bool(not vals[4]))

     

       90
       90
       +
                               else:

     

       91
       91
       +
                                   vals[1::2] = [-y for y in vals[1::2]]

     

       92
       92
       +
                               val_str = ','.join(map(str, vals))

     

       93
       93
       +
                               new_commands.append(name + val_str)

     

       94
       94
       +
                           args['d'] = ' '.join(new_commands)

     

       95
       95
       +
                       except (TypeError, ValueError):

     

       96
       96
       +
                           pass

     

       97
       97
       +
                   if ('cx' in args and 'cy' in args and 'r' in args

     

       98
       98
       +
                           and 'stroke-dashoffset' in args

     

       99
       99
       +
                           and 'stroke-dasharray' in args):

     

       100
       100
       +
                       # Flip ArcLine (drawn with stroke-dasharray)

     

       101
       101
       +
                       try:

     

       102
       102
       +
                           length = float(

     

       103
       103
       +
                                   args['stroke-dasharray'].split(maxsplit=1)[0])

     

       104
       104
       +
                           offset = float(args['stroke-dashoffset'])

     

       105
       105
       +
                           offset = length - offset

     

       106
       106
       +
                           args['stroke-dashoffset'] = offset

     

       107
       107
       +
                       except KeyError: pass

     

       108
       108
       +
                       except (TypeError, ValueError, IndexError):

     

       109
       109
       +
                           pass

     

       110
       110
       +
                           raise

     

       111
       111
       +
               return args

     

       112
       112
       +
       

     

       113
       113
       +
           def write_svg_document_args(self, d, args, output_file):

     

       114
       114
       +
               '''Called by Drawing during SVG output of the <svg> tag.'''

     

       115
       115
       +
               args['viewBox'] = self.override_view_box(args['viewBox'])

     

       116
       116
       +
               onload_list = self.extra_onload_js(d)

     

       117
       117
       +
               onload_list.extend(args.get('onload', '').split(';'))

     

       118
       118
       +
               onload = ';'.join(onload_list)

     

       119
       119
       +
               if onload:

     

       120
       120
       +
                   args['onload'] = onload

     

       121
       121
       +
               self._write_tag_args(args, output_file)

     

       122
       122
       +
       

     

       123
       123
       +
           def _write_tag_args(self, args, output_file, id_map=None):

     

       124
       124
       +
               '''Called by an element during SVG output of its tag.'''

     

       125
       125
       +
               for k, v in args.items():

     

       126
       126
       +
                   if v is None: continue

     

       127
       127
       +
                   if isinstance(v, DrawingElement):

     

       128
       128
       +
                       mapped_id = v.id

     

       129
       129
       +
                       if id_map is not None and id(v) in id_map:

     

       130
       130
       +
                           mapped_id = id_map[id(v)]

     

       131
       131
       +
                       if mapped_id is None:

     

       132
       132
       +
                           continue

     

       133
       133
       +
                       if k == 'xlink:href':

     

       134
       134
       +
                           v = '#{}'.format(mapped_id)

     

       135
       135
       +
                       else:

     

       136
       136
       +
                           v = 'url(#{})'.format(mapped_id)

     

       137
       137
       +
                   output_file.write(' {}="{}"'.format(k,v))

     

       138
       138
       +
       

     

       139
       139
       +
       

     

       140
       140
       +
       @dataclasses.dataclass(frozen=True)

     

       141
       141
       +
       class LocalContext:

     

       142
       142
       +
           context: Context

     

       143
       143
       +
           element: 'DrawingElement'

     

       144
       144
       +
           parent: Union['DrawingElement', 'Drawing']

     

       145
       145
       +
           siblings: Sequence['DrawingElement'] = ()

     

       146
       146
       +
       

     

       147
       147
       +
           def write_tag_args(self, args, output_file, id_map=None):

     

       148
       148
       +
               '''Called by an element during SVG output of its tag.'''

     

       149
       149
       +
               if self.context.animation_config is not None:

     

       150
       150
       +
                   args = self.context.animation_config.override_args(args, self)

     

       151
       151
       +
               self.context._write_tag_args(

     

       152
       152
       +
                       self.context.override_args(args), output_file, id_map=id_map)

     

       153
       153
       +
       

     

       154
       154
       +
       

     

       155
       155
       +
       class DrawingElement:

     

       156
       156
       +
           '''Base class for drawing elements.

     

       157
       157
       +
       

     

       158
       158
       +
           Subclasses must implement write_svg_element.

     

       159
       159
       +
           '''

     

       160
       160
       +
           def write_svg_element(self, id_map, is_duplicate, output_file, lcontext,

     

       161
       161
       +
                                 dry_run, force_dup=False):

     

       162
       162
       +
               raise NotImplementedError('Abstract base class')

     

       163
       163
       +
           def get_svg_defs(self):

     

       164
       164
       +
               return ()

     

       165
       165
       +
           def get_linked_elems(self):

     

       166
       166
       +
               return ()

     

       167
       167
       +
           def write_svg_defs(self, id_map, is_duplicate, output_file, lcontext,

     

       168
       168
       +
                              dry_run):

     

       169
       169
       +
               for defn in self.get_svg_defs():

     

       170
       170
       +
                   local = LocalContext(lcontext.context, defn, self, ())

     

       171
       171
       +
                   if is_duplicate(defn):

     

       172
       172
       +
                       continue

     

       173
       173
       +
                   defn.write_svg_defs(

     

       174
       174
       +
                           id_map, is_duplicate, output_file, local, dry_run)

     

       175
       175
       +
                   if defn.id is None:

     

       176
       176
       +
                       id_map[id(defn)]

     

       177
       177
       +
                   defn.write_svg_element(

     

       178
       178
       +
                           id_map, is_duplicate, output_file, local, dry_run,

     

       179
       179
       +
                           force_dup=True)

     

       180
       180
       +
                   if not dry_run:

     

       181
       181
       +
                       output_file.write('\n')

     

       182
       182
       +
           def __eq__(self, other):

     

       183
       183
       +
               return self is other

     

       184
       184
       +
       

     

       185
       185
       +
       

     

       186
       186
       +
       class DrawingBasicElement(DrawingElement):

     

       187
       187
       +
           '''Base class for SVG drawing elements that are a single node with no child

     

       188
       188
       +
           nodes.

     

       189
       189
       +
           '''

     

       190
       190
       +
           TAG_NAME = '_'

     

       191
       191
       +
           has_content = False

     

       192
       192
       +
           def __init__(self, **args):

     

       193
       193
       +
               self.args = {}

     

       194
       194
       +
               for k, v in args.items():

     

       195
       195
       +
                   self.args[normalize_attribute_name(k)] = v

     

       196
       196
       +
               self.children = []

     

       197
       197
       +
               self.ordered_children = defaultdict(list)

     

       198
       198
       +
               self.animation_data = AnimationHelperData()

     

       199
       199
       +
               self._cached_context = None

     

       200
       200
       +
               self._cached_extra_children_with_context = None

     

       201
       201
       +
           def check_children_allowed(self):

     

       202
       202
       +
               if not self.has_content:

     

       203
       203
       +
                   raise RuntimeError(

     

       204
       204
       +
                           '{} does not support children'.format(type(self)))

     

       205
       205
       +
           def _extra_children_with_context_avoid_recompute(self, lcontext=None):

     

       206
       206
       +
               if (self._cached_extra_children_with_context is not None

     

       207
       207
       +
                       and self._cached_context == lcontext.context):

     

       208
       208
       +
                   return self._cached_extra_children_with_context

     

       209
       209
       +
               self._cached_context = lcontext.context

     

       210
       210
       +
               self._cached_extra_children_with_context = (

     

       211
       211
       +
                       self.extra_children_with_context(lcontext))

     

       212
       212
       +
               return self._cached_extra_children_with_context

     

       213
       213
       +
           def extra_children_with_context(self, lcontext=None):

     

       214
       214
       +
               return self.animation_data.children_with_context(lcontext)

     

       215
       215
       +
           def all_children(self, lcontext=None):

     

       216
       216
       +
               '''Return self.children and self.ordered_children as a single list.'''

     

       217
       217
       +
               output = list(self.children)

     

       218
       218
       +
               for z in sorted(self.ordered_children):

     

       219
       219
       +
                   output.extend(self.ordered_children[z])

     

       220
       220
       +
               output.extend(

     

       221
       221
       +
                       self._extra_children_with_context_avoid_recompute(lcontext))

     

       222
       222
       +
               return output

     

       223
       223
       +
           @property

     

       224
       224
       +
           def id(self):

     

       225
       225
       +
               return self.args.get('id', None)

     

       226
       226
       +
           def write_svg_element(self, id_map, is_duplicate, output_file, lcontext,

     

       227
       227
       +
                                 dry_run, force_dup=False):

     

       228
       228
       +
               children = self.all_children(lcontext=lcontext)

     

       229
       229
       +
               if dry_run:

     

       230
       230
       +
                   if is_duplicate(self) and self.id is None:

     

       231
       231
       +
                       id_map[id(self)]

     

       232
       232
       +
                   for elem in self.get_linked_elems():

     

       233
       233
       +
                       if elem.id is None:

     

       234
       234
       +
                           id_map[id(elem.id)]

     

       235
       235
       +
                   if self.has_content:

     

       236
       236
       +
                       self.write_content(

     

       237
       237
       +
                               id_map, is_duplicate, output_file, lcontext, dry_run)

     

       238
       238
       +
                   if children is not None and len(children):

     

       239
       239
       +
                       self.write_children_content(

     

       240
       240
       +
                               id_map, is_duplicate, output_file, lcontext, dry_run)

     

       241
       241
       +
                   return

     

       242
       242
       +
               if is_duplicate(self) and not force_dup:

     

       243
       243
       +
                   mapped_id = self.id

     

       244
       244
       +
                   if id_map is not None and id(self) in id_map:

     

       245
       245
       +
                       mapped_id = id_map[id(self)]

     

       246
       246
       +
                   output_file.write('<use xlink:href="#{}" />'.format(mapped_id))

     

       247
       247
       +
                   return

     

       248
       248
       +
               output_file.write('<')

     

       249
       249
       +
               output_file.write(self.TAG_NAME)

     

       250
       250
       +
               override_args = self.args

     

       251
       251
       +
               if id(self) in id_map:

     

       252
       252
       +
                   override_args = dict(override_args)

     

       253
       253
       +
                   override_args['id'] = id_map[id(self)]

     

       254
       254
       +
               lcontext.write_tag_args(override_args, output_file, id_map)

     

       255
       255
       +
               if not self.has_content and (children is None or len(children) == 0):

     

       256
       256
       +
                   output_file.write(' />')

     

       257
       257
       +
               else:

     

       258
       258
       +
                   output_file.write('>')

     

       259
       259
       +
                   if self.has_content:

     

       260
       260
       +
                       self.write_content(

     

       261
       261
       +
                               id_map, is_duplicate, output_file, lcontext, dry_run)

     

       262
       262
       +
                   if children is not None and len(children):

     

       263
       263
       +
                       self.write_children_content(

     

       264
       264
       +
                               id_map, is_duplicate, output_file, lcontext, dry_run)

     

       265
       265
       +
                   output_file.write('</')

     

       266
       266
       +
                   output_file.write(self.TAG_NAME)

     

       267
       267
       +
                   output_file.write('>')

     

       268
       268
       +
           def write_content(self, id_map, is_duplicate, output_file, lcontext,

     

       269
       269
       +
                             dry_run):

     

       270
       270
       +
               '''Override in a subclass to add data between the start and end tags.

     

       271
       271
       +
       

     

       272
       272
       +
               This will not be called if has_content is False.

     

       273
       273
       +
               '''

     

       274
       274
       +
               raise RuntimeError('This element has no content')

     

       275
       275
       +
           def write_children_content(self, id_map, is_duplicate, output_file,

     

       276
       276
       +
                                      lcontext, dry_run):

     

       277
       277
       +
               '''Override in a subclass to add data between the start and end tags.

     

       278
       278
       +
       

     

       279
       279
       +
               This will not be called if has_content is False.

     

       280
       280
       +
               '''

     

       281
       281
       +
               children = self.all_children(lcontext=lcontext)

     

       282
       282
       +
               if dry_run:

     

       283
       283
       +
                   for child in children:

     

       284
       284
       +
                       local = LocalContext(lcontext.context, child, self, children)

     

       285
       285
       +
                       child.write_svg_element(

     

       286
       286
       +
                               id_map, is_duplicate, output_file, local, dry_run)

     

       287
       287
       +
                   return

     

       288
       288
       +
               output_file.write('\n')

     

       289
       289
       +
               for child in children:

     

       290
       290
       +
                   local = LocalContext(lcontext.context, child, self, children)

     

       291
       291
       +
                   child.write_svg_element(

     

       292
       292
       +
                           id_map, is_duplicate, output_file, local, dry_run)

     

       293
       293
       +
                   output_file.write('\n')

     

       294
       294
       +
           def get_svg_defs(self):

     

       295
       295
       +
               return [v for v in self.args.values()

     

       296
       296
       +
                       if isinstance(v, DrawingElement)]

     

       297
       297
       +
           def write_svg_defs(self, id_map, is_duplicate, output_file, lcontext,

     

       298
       298
       +
                              dry_run):

     

       299
       299
       +
               super().write_svg_defs(

     

       300
       300
       +
                       id_map, is_duplicate, output_file, lcontext, dry_run)

     

       301
       301
       +
               children = self.all_children(lcontext=lcontext)

     

       302
       302
       +
               for child in children:

     

       303
       303
       +
                   local = LocalContext(lcontext.context, child, self, children)

     

       304
       304
       +
                   child.write_svg_defs(

     

       305
       305
       +
                           id_map, is_duplicate, output_file, local, dry_run)

     

       306
       306
       +
           def __eq__(self, other):

     

       307
       307
       +
               if isinstance(other, type(self)):

     

       308
       308
       +
                   return (self.TAG_NAME == other.TAG_NAME and

     

       309
       309
       +
                           self.args == other.args and

     

       310
       310
       +
                           self.children == other.children and

     

       311
       311
       +
                           self.ordered_children == other.ordered_children)

     

       312
       312
       +
               return False

     

       313
       313
       +
           def append_anim(self, animate_element):

     

       314
       314
       +
               self.children.append(animate_element)

     

       315
       315
       +
           def extend_anim(self, animate_iterable):

     

       316
       316
       +
               self.children.extend(animate_iterable)

     

       317
       317
       +
           def append_title(self, text, **kwargs):

     

       318
       318
       +
               self.children.append(elements.Title(text, **kwargs))

     

       319
       319
       +
           def add_key_frame(self, time, animation_args=None, **attr_values):

     

       320
       320
       +
               self._cached_extra_children_with_context = None

     

       321
       321
       +
               self.animation_data.add_key_frame(

     

       322
       322
       +
                       time, animation_args=animation_args, **attr_values)

     

       323
       323
       +
           def add_attribute_key_sequence(self, attr, times, values, *,

     

       324
       324
       +
                                          animation_args=None):

     

       325
       325
       +
               self._cached_extra_children_with_context = None

     

       326
       326
       +
               self.animation_data.add_attribute_key_sequence(

     

       327
       327
       +
                       attr, times, values, animation_args=animation_args)

     

       328
       328
       +
       

     

       329
       329
       +
       

     

       330
       330
       +
       class DrawingParentElement(DrawingBasicElement):

     

       331
       331
       +
           '''Base class for SVG elements that can have child nodes.'''

     

       332
       332
       +
           has_content = True

     

       333
       333
       +
           def __init__(self, children=(), ordered_children=None, **args):

     

       334
       334
       +
               super().__init__(**args)

     

       335
       335
       +
               self.children = list(children)

     

       336
       336
       +
               if ordered_children is not None and len(ordered_children):

     

       337
       337
       +
                   self.ordered_children.update(

     

       338
       338
       +
                       (z, list(v)) for z, v in ordered_children.items())

     

       339
       339
       +
               if self.children or self.ordered_children:

     

       340
       340
       +
                   self.check_children_allowed()

     

       341
       341
       +
           def draw(self, obj, *, z=None, **kwargs):

     

       342
       342
       +
               if obj is None:

     

       343
       343
       +
                   return

     

       344
       344
       +
               if not hasattr(obj, 'write_svg_element'):

     

       345
       345
       +
                   elements = obj.to_drawables(**kwargs)

     

       346
       346
       +
               else:

     

       347
       347
       +
                   if len(kwargs) > 0:

     

       348
       348
       +
                       raise ValueError('unexpected kwargs')

     

       349
       349
       +
                   elements = obj

     

       350
       350
       +
               if hasattr(elements, 'write_svg_element'):

     

       351
       351
       +
                   self.append(elements, z=z)

     

       352
       352
       +
               else:

     

       353
       353
       +
                   self.extend(elements, z=z)

     

       354
       354
       +
           def append(self, element, *, z=None):

     

       355
       355
       +
               self.check_children_allowed()

     

       356
       356
       +
               if z is not None:

     

       357
       357
       +
                   self.ordered_children[z].append(element)

     

       358
       358
       +
               else:

     

       359
       359
       +
                   self.children.append(element)

     

       360
       360
       +
           def extend(self, iterable, *, z=None):

     

       361
       361
       +
               self.check_children_allowed()

     

       362
       362
       +
               if z is not None:

     

       363
       363
       +
                   self.ordered_children[z].extend(iterable)

     

       364
       364
       +
               else:

     

       365
       365
       +
                   self.children.extend(iterable)

     

       366
       366
       +
           def write_content(self, id_map, is_duplicate, output_file, lcontext,

     

       367
       367
       +
                             dry_run):

     

       368
       368
       +
               pass

     

       369
       369
       +
       

     

       370
       370
       +
       

     

       371
       371
       +
       def normalize_attribute_name(name):

     

       372
       372
       +
           name = name.replace('__', ':')

     

       373
       373
       +
           name = name.replace('_', '-')

     

       374
       374
       +
           if name[-1] == '-':

     

       375
       375
       +
               name = name[:-1]

     

       376
       376
       +
           return name

+41

drawsvg/url_encode.py

···

       1
       1
       +
       import base64

     

       2
       2
       +
       import urllib.parse

     

       3
       3
       +
       import re

     

       4
       4
       +
       

     

       5
       5
       +
       

     

       6
       6
       +
       STRIP_CHARS = ('\x00\x01\x02\x03\x04\x05\x06\x07\x08\x0b\x0c\x0e\x0f\x10\x11'

     

       7
       7
       +
                      '\x12\x13\x14\x15\x16\x17\x18\x19\x1a\x1b\x1c\x1d\x1e\x1f')

     

       8
       8
       +
       

     

       9
       9
       +
       def bytes_as_data_uri(data, strip_chars=STRIP_CHARS, mime='image/svg+xml'):

     

       10
       10
       +
           '''Return a data URI with base64 encoding.'''

     

       11
       11
       +
           b64 = base64.b64encode(data)

     

       12
       12
       +
           return f'data:{mime};base64,{b64.decode(encoding="ascii")}'

     

       13
       13
       +
       

     

       14
       14
       +
       def svg_as_data_uri(txt, strip_chars=STRIP_CHARS, mime='image/svg+xml'):

     

       15
       15
       +
           '''Return a data URI with base64 encoding, stripping unsafe chars for SVG.

     

       16
       16
       +
           '''

     

       17
       17
       +
           search = re.compile('|'.join(strip_chars))

     

       18
       18
       +
           data_safe = search.sub(lambda m: '', txt)

     

       19
       19
       +
           return bytes_as_data_uri(data_safe.encode(encoding='utf-8'), mime=mime)

     

       20
       20
       +
       

     

       21
       21
       +
       def svg_as_utf8_data_uri(txt, unsafe_chars='"', strip_chars=STRIP_CHARS,

     

       22
       22
       +
                                mime='image/svg+xml'):

     

       23
       23
       +
           '''Returns a data URI without base64 encoding.

     

       24
       24
       +
       

     

       25
       25
       +
           The characters '#&%' are always escaped.  '#' and '&' break parsing of

     

       26
       26
       +
           the data URI.  If '%' is not escaped, plain text like '%50' will be

     

       27
       27
       +
           incorrectly decoded to 'P'.  The characters in `strip_chars` cause the

     

       28
       28
       +
           SVG not to render even if they are escaped.

     

       29
       29
       +
           '''

     

       30
       30
       +
           unsafe_chars = (unsafe_chars or '') + '#&%'

     

       31
       31
       +
           replacements = {

     

       32
       32
       +
               char: urllib.parse.quote(char, safe='')

     

       33
       33
       +
               for char in unsafe_chars

     

       34
       34
       +
           }

     

       35
       35
       +
           replacements.update({

     

       36
       36
       +
               char: ''

     

       37
       37
       +
               for char in strip_chars

     

       38
       38
       +
           })

     

       39
       39
       +
           search = re.compile('|'.join(map(re.escape, replacements.keys())))

     

       40
       40
       +
           data_safe = search.sub(lambda m: replacements[m.group(0)], txt)

     

       41
       41
       +
           return f'data:{mime};utf8,{data_safe}'

+219

drawsvg/video.py

···

       1
       1
       +
       import base64

     

       2
       2
       +
       import shutil

     

       3
       3
       +
       import tempfile

     

       4
       4
       +
       

     

       5
       5
       +
       def delay_import_np_imageio():

     

       6
       6
       +
           try:

     

       7
       7
       +
               import numpy as np

     

       8
       8
       +
               import imageio

     

       9
       9
       +
           except ImportError as e:

     

       10
       10
       +
               raise ImportError(

     

       11
       11
       +
                   'Optional dependencies not installed. '

     

       12
       12
       +
                   'Install with `python3 -m pip install "drawsvg[all]"` '

     

       13
       13
       +
                   'or `python3 -m pip install "drawsvg[raster]"`. '

     

       14
       14
       +
                   'See https://github.com/cduck/drawsvg#full-feature-install '

     

       15
       15
       +
                   'for more details.'

     

       16
       16
       +
               ) from e

     

       17
       17
       +
           return np, imageio

     

       18
       18
       +
       

     

       19
       19
       +
       from .url_encode import bytes_as_data_uri

     

       20
       20
       +
       

     

       21
       21
       +
       

     

       22
       22
       +
       class RasterVideo:

     

       23
       23
       +
           def __init__(self, video_data=None, video_file=None, *, _file_handle=None,

     

       24
       24
       +
                        mime_type='video/mp4'):

     

       25
       25
       +
               self.video_data = video_data

     

       26
       26
       +
               self.video_file = video_file

     

       27
       27
       +
               self._file_handle = _file_handle

     

       28
       28
       +
               self.mime_type = mime_type

     

       29
       29
       +
           def save_video(self, fname):

     

       30
       30
       +
               with open(fname, 'wb') as f:

     

       31
       31
       +
                   if self.video_file is not None:

     

       32
       32
       +
                       with open(self.video_file, 'rb') as source:

     

       33
       33
       +
                           shutil.copyfileobj(source, f)

     

       34
       34
       +
                   else:

     

       35
       35
       +
                       f.write(self.video_data)

     

       36
       36
       +
           @staticmethod

     

       37
       37
       +
           def from_frames(svg_or_raster_frames, to_file=None, fps=10, *,

     

       38
       38
       +
                           mime_type='video/mp4', file_type=None, _file_handle=None,

     

       39
       39
       +
                           video_args=None, verbose=False):

     

       40
       40
       +
               if file_type is None:

     

       41
       41
       +
                   file_type = mime_type.split('/')[-1]

     

       42
       42
       +
               if to_file is None:

     

       43
       43
       +
                   # Create temp file for video

     

       44
       44
       +
                   _file_handle = tempfile.NamedTemporaryFile(suffix='.'+file_type)

     

       45
       45
       +
                   to_file = _file_handle.name

     

       46
       46
       +
               if video_args is None:

     

       47
       47
       +
                   video_args = {}

     

       48
       48
       +
               if file_type == 'gif':

     

       49
       49
       +
                   video_args.setdefault('duration', 1/fps)

     

       50
       50
       +
               else:

     

       51
       51
       +
                   video_args.setdefault('fps', fps)

     

       52
       52
       +
               save_video(

     

       53
       53
       +
                       svg_or_raster_frames, to_file, format=file_type,

     

       54
       54
       +
                       verbose=verbose, **video_args)

     

       55
       55
       +
               return RasterVideo(

     

       56
       56
       +
                       video_file=to_file, _file_handle=_file_handle,

     

       57
       57
       +
                       mime_type=mime_type)

     

       58
       58
       +
           def _repr_png_(self):

     

       59
       59
       +
               if self.mime_type.startswith('image/'):

     

       60
       60
       +
                   return self._as_bytes()

     

       61
       61
       +
               return None

     

       62
       62
       +
           def _repr_html_(self):

     

       63
       63
       +
               data_uri = self.as_data_uri()

     

       64
       64
       +
               if self.mime_type.startswith('video/'):

     

       65
       65
       +
                   return (f'<video controls style="max-width:100%">'

     

       66
       66
       +
                           f'<source src="{data_uri}" type="{self.mime_type}">'

     

       67
       67
       +
                           f'Video unsupported.</video>')

     

       68
       68
       +
               return None

     

       69
       69
       +
           def _repr_mimebundle_(self, include=None, exclude=None):

     

       70
       70
       +
               b64 = base64.b64encode(self._as_bytes())

     

       71
       71
       +
               return {self.mime_type: b64}, {}

     

       72
       72
       +
           def as_data_uri(self):

     

       73
       73
       +
               return bytes_as_data_uri(self._as_bytes(), mime=self.mime_type)

     

       74
       74
       +
           def _as_bytes(self):

     

       75
       75
       +
               if self.video_data:

     

       76
       76
       +
                   return self.video_data

     

       77
       77
       +
               else:

     

       78
       78
       +
                   try:

     

       79
       79
       +
                       with open(self.video_file, 'rb') as f:

     

       80
       80
       +
                           return f.read()

     

       81
       81
       +
                   except TypeError:

     

       82
       82
       +
                       self.video_file.seek(0)

     

       83
       83
       +
                       return self.video_file.read()

     

       84
       84
       +
       

     

       85
       85
       +
       

     

       86
       86
       +
       def render_svg_frames(frames, align_bottom=False, align_right=False,

     

       87
       87
       +
                             bg=(255,)*4, verbose=False, **kwargs):

     

       88
       88
       +
           np, imageio = delay_import_np_imageio()

     

       89
       89
       +
           if verbose:

     

       90
       90
       +
               print(f'Rendering {len(frames)} frames: ', end='', flush=True)

     

       91
       91
       +
           arr_frames = []

     

       92
       92
       +
           for i, f in enumerate(frames):

     

       93
       93
       +
               if verbose:

     

       94
       94
       +
                   print(f'{i} ', end='', flush=True)

     

       95
       95
       +
               if hasattr(f, 'rasterize'):

     

       96
       96
       +
                   png_data = f.rasterize().png_data

     

       97
       97
       +
               elif hasattr(f, 'png_data'):

     

       98
       98
       +
                   png_data = f.png_data

     

       99
       99
       +
               else:

     

       100
       100
       +
                   png_data = f

     

       101
       101
       +
               im = imageio.imread(png_data)

     

       102
       102
       +
               arr_frames.append(im)

     

       103
       103
       +
           max_width = max(map(lambda arr:arr.shape[1], arr_frames))

     

       104
       104
       +
           max_height = max(map(lambda arr:arr.shape[0], arr_frames))

     

       105
       105
       +
       

     

       106
       106
       +
           def mod_frame(arr):

     

       107
       107
       +
               new_arr = np.zeros((max_height, max_width) + arr.shape[2:],

     

       108
       108
       +
                                  dtype=arr.dtype)

     

       109
       109
       +
               new_arr[:,:] = bg[:new_arr.shape[-1]]

     

       110
       110
       +
               if align_bottom:

     

       111
       111
       +
                   slice0 = slice(-arr.shape[0], None)

     

       112
       112
       +
               else:

     

       113
       113
       +
                   slice0 = slice(None, arr.shape[0])

     

       114
       114
       +
               if align_right:

     

       115
       115
       +
                   slice1 = slice(-arr.shape[1], None)

     

       116
       116
       +
               else:

     

       117
       117
       +
                   slice1 = slice(None, arr.shape[1])

     

       118
       118
       +
               new_arr[slice0, slice1] = arr

     

       119
       119
       +
               return new_arr

     

       120
       120
       +
           return list(map(mod_frame, arr_frames))

     

       121
       121
       +
       

     

       122
       122
       +
       def save_video(frames, file, verbose=False, **kwargs):

     

       123
       123
       +
           '''

     

       124
       124
       +
           Save a series of drawings as a GIF or video.

     

       125
       125
       +
       

     

       126
       126
       +
           Arguments:

     

       127
       127
       +
               frames: A list of `Drawing`s or a list of `numpy.array`s.

     

       128
       128
       +
               file: File name or file like object to write the video to.  The

     

       129
       129
       +
                   extension determines the output format.

     

       130
       130
       +
               align_bottom: If frames are different sizes, align the bottoms of each

     

       131
       131
       +
                   frame in the video.

     

       132
       132
       +
               align_right: If frames are different sizes, align the right edge of each

     

       133
       133
       +
                   frame in the video.

     

       134
       134
       +
               bg: If frames are different sizes, fill the background with this color.

     

       135
       135
       +
                   (default is white: (255, 255, 255, 255))

     

       136
       136
       +
               duration: If writing a GIF, sets the duration of each frame.

     

       137
       137
       +
               fps: If writing a video, sets the frame rate in FPS.

     

       138
       138
       +
               **kwargs: Other arguments to imageio.mimsave().

     

       139
       139
       +
       

     

       140
       140
       +
           '''

     

       141
       141
       +
           np, imageio = delay_import_np_imageio()

     

       142
       142
       +
           if not isinstance(frames[0], np.ndarray):

     

       143
       143
       +
               frames = render_svg_frames(frames, verbose=verbose, **kwargs)

     

       144
       144
       +
           kwargs.pop('align_bottom', None)

     

       145
       145
       +
           kwargs.pop('align_right', None)

     

       146
       146
       +
           kwargs.pop('bg', None)

     

       147
       147
       +
           if verbose:

     

       148
       148
       +
               print()

     

       149
       149
       +
               print(f'Converting to video')

     

       150
       150
       +
           imageio.mimsave(file, frames, **kwargs)

     

       151
       151
       +
       

     

       152
       152
       +
       def render_spritesheet(frames, row_length=None, verbose=False, **kwargs):

     

       153
       153
       +
           '''

     

       154
       154
       +
           Save a series of drawings as a bitmap spritesheet

     

       155
       155
       +
       

     

       156
       156
       +
           Arguments:

     

       157
       157
       +
               frames: A list of `Drawing`s or a list of `numpy.array`s.

     

       158
       158
       +
               row_length: The length (in frames) of one row in the spritesheet.

     

       159
       159
       +
                   If not provided, all frames go on one row.

     

       160
       160
       +
               align_bottom: If frames are different sizes, align the bottoms of each

     

       161
       161
       +
                   frame in the video.

     

       162
       162
       +
               align_right: If frames are different sizes, align the right edge of each

     

       163
       163
       +
                   frame in the video.

     

       164
       164
       +
               bg: If frames are different sizes, fill the background with this color.

     

       165
       165
       +
                   (default is white: (255, 255, 255, 255))

     

       166
       166
       +
               **kwargs: Other arguments to imageio.imsave().

     

       167
       167
       +
       

     

       168
       168
       +
           '''

     

       169
       169
       +
           np, _ = delay_import_np_imageio()

     

       170
       170
       +
           if not isinstance(frames[0], np.ndarray):

     

       171
       171
       +
               frames = render_svg_frames(frames, verbose=verbose, **kwargs)

     

       172
       172
       +
           kwargs.pop('align_bottom', None)

     

       173
       173
       +
           kwargs.pop('align_right', None)

     

       174
       174
       +
           bg = kwargs.pop('bg', (255, 255, 255, 255))

     

       175
       175
       +
       

     

       176
       176
       +
           cols = row_length if row_length is not None else len(frames)

     

       177
       177
       +
           rows = (len(frames) - 1) // cols + 1

     

       178
       178
       +
       

     

       179
       179
       +
           if rows * cols > len(frames):  # Unfilled final row

     

       180
       180
       +
               empty_frame = np.zeros(frames[0].shape, dtype=frames[0].dtype)

     

       181
       181
       +
               empty_frame[..., :] = bg[:empty_frame.shape[-1]]

     

       182
       182
       +
               frames.extend([empty_frame] * (rows * cols - len(frames)))

     

       183
       183
       +
       

     

       184
       184
       +
           block_arrangement = []

     

       185
       185
       +
           for row in range(rows):

     

       186
       186
       +
               next_row_end = (row+1)*cols

     

       187
       187
       +
               block_arrangement.append([

     

       188
       188
       +
                   [frame] for frame in frames[row*cols:next_row_end]

     

       189
       189
       +
               ])

     

       190
       190
       +
       

     

       191
       191
       +
           spritesheet = np.block(block_arrangement)

     

       192
       192
       +
           return spritesheet

     

       193
       193
       +
       

     

       194
       194
       +
       def save_spritesheet(frames, file, row_length=None, verbose=False, **kwargs):

     

       195
       195
       +
           '''

     

       196
       196
       +
           Save a series of drawings as a bitmap spritesheet

     

       197
       197
       +
       

     

       198
       198
       +
           Arguments:

     

       199
       199
       +
               frames: A list of `Drawing`s or a list of `numpy.array`s.

     

       200
       200
       +
               file: File name or file like object to write the spritesheet to.  The

     

       201
       201
       +
                   extension determines the output format.

     

       202
       202
       +
               row_length: The length (in frames) of one row in the spritesheet.

     

       203
       203
       +
                   If not provided, all frames go on one row.

     

       204
       204
       +
               align_bottom: If frames are different sizes, align the bottoms of each

     

       205
       205
       +
                   frame in the video.

     

       206
       206
       +
               align_right: If frames are different sizes, align the right edge of each

     

       207
       207
       +
                   frame in the video.

     

       208
       208
       +
               bg: If frames are different sizes, fill the background with this color.

     

       209
       209
       +
                   (default is white: (255, 255, 255, 255))

     

       210
       210
       +
               **kwargs: Other arguments to imageio.imsave().

     

       211
       211
       +
       

     

       212
       212
       +
           '''

     

       213
       213
       +
           _, imageio = delay_import_np_imageio()

     

       214
       214
       +
           spritesheet = render_spritesheet(

     

       215
       215
       +
                   frames, row_length=row_length, verbose=verbose, **kwargs)

     

       216
       216
       +
           kwargs.pop('align_bottom', None)

     

       217
       217
       +
           kwargs.pop('align_right', None)

     

       218
       218
       +
           kwargs.pop('bg', None)

     

       219
       219
       +
           imageio.imsave(file, spritesheet, **kwargs)

drawsvg/widgets/__init__.py

···

       1
       1
       +
       from .drawing_widget import DrawingWidget

     

       2
       2
       +
       from .async_animation import AsyncAnimation

+154

drawsvg/widgets/async_animation.py

···

       1
       1
       +
       import time

     

       2
       2
       +
       

     

       3
       3
       +
       from ..drawing import Drawing

     

       4
       4
       +
       from .drawing_widget import DrawingWidget

     

       5
       5
       +
       

     

       6
       6
       +
       

     

       7
       7
       +
       class AsyncAnimation(DrawingWidget):

     

       8
       8
       +
           '''A Jupyter notebook widget for asynchronously displaying an animation.

     

       9
       9
       +
       

     

       10
       10
       +
           Example:

     

       11
       11
       +
               # Jupyter cell 1:

     

       12
       12
       +
               widget = AsyncAnimation(fps=10)

     

       13
       13
       +
               widget

     

       14
       14
       +
               # [Animation is displayed here]

     

       15
       15
       +
       

     

       16
       16
       +
               # Jupyter cell 2:

     

       17
       17
       +
               global_variable = 'a'

     

       18
       18
       +
               @widget.set_draw_frame  # Animation above is automatically updated

     

       19
       19
       +
               def draw_frame(secs=0):

     

       20
       20
       +
                   # Draw something...

     

       21
       21
       +
                   d = draw.Drawing(300, 40)

     

       22
       22
       +
                   d.append(draw.Text(global_variable, 20, 0, 10))

     

       23
       23
       +
                   d.append(draw.Text(str(secs), 20, 30, 10))

     

       24
       24
       +
                   return d

     

       25
       25
       +
       

     

       26
       26
       +
               # Jupyter cell 3:

     

       27
       27
       +
               global_variable = 'b'  # Animation above now displays 'b'

     

       28
       28
       +
       

     

       29
       29
       +
           Attributes:

     

       30
       30
       +
               fps: The animation frame rate (frames per second).

     

       31
       31
       +
               draw_frame: A function that takes a single argument (animation time) and

     

       32
       32
       +
                   returns a Drawing.

     

       33
       33
       +
               paused: While True, the animation will not run.  Only the current frame

     

       34
       34
       +
                   will be shown.

     

       35
       35
       +
               disable: While True, the widget will not be interactive and the

     

       36
       36
       +
                   animation will not update.

     

       37
       37
       +
               click_pause: If True, clicking the drawing will pause or resume the

     

       38
       38
       +
                   animation.

     

       39
       39
       +
               mousemove_pause: If True, moving the mouse up across the drawing will

     

       40
       40
       +
                   pause the animation and moving the mouse down will resume it.

     

       41
       41
       +
               mousemove_y_threshold: Controls the sensitivity of mousemove_pause in

     

       42
       42
       +
                   web browser pixels.

     

       43
       43
       +
           '''

     

       44
       44
       +
       

     

       45
       45
       +
           def __init__(self, fps=10, draw_frame=None, *, paused=False, disable=False,

     

       46
       46
       +
                        click_pause=True, mousemove_pause=False,

     

       47
       47
       +
                        mousemove_y_threshold=10):

     

       48
       48
       +
               self._fps = fps

     

       49
       49
       +
               self._paused = paused

     

       50
       50
       +
               if draw_frame is None:

     

       51
       51
       +
                   def draw_frame(secs):

     

       52
       52
       +
                       return Drawing(0, 0)

     

       53
       53
       +
               self._draw_frame = draw_frame

     

       54
       54
       +
               self._last_secs = 0

     

       55
       55
       +
               self.click_pause = click_pause

     

       56
       56
       +
               self.mousemove_pause = mousemove_pause

     

       57
       57
       +
               self.mousemove_y_threshold = mousemove_y_threshold

     

       58
       58
       +
               self._start_time = 0

     

       59
       59
       +
               self._stop_time = 0

     

       60
       60
       +
               self._y_loc = 0

     

       61
       61
       +
               self._y_max = 0

     

       62
       62
       +
               self._y_min = 0

     

       63
       63
       +
               if self._paused:

     

       64
       64
       +
                   frame_delay = -1

     

       65
       65
       +
               else:

     

       66
       66
       +
                   frame_delay = 1000 // self._fps

     

       67
       67
       +
                   self._start_time = time.monotonic()

     

       68
       68
       +
               initial_drawing = self.draw_frame(0)

     

       69
       69
       +
               super().__init__(initial_drawing, throttle=True, disable=disable,

     

       70
       70
       +
                                frame_delay=frame_delay)

     

       71
       71
       +
       

     

       72
       72
       +
               # Register callbacks

     

       73
       73
       +
               @self.mousedown

     

       74
       74
       +
               def mousedown(self, x, y, info):

     

       75
       75
       +
                   if not self.click_pause:

     

       76
       76
       +
                       return

     

       77
       77
       +
                   self._y_min = self._y_max = self._y_loc

     

       78
       78
       +
                   self.paused = not self.paused

     

       79
       79
       +
       

     

       80
       80
       +
               @self.mousemove

     

       81
       81
       +
               def mousemove(self, x, y, info):

     

       82
       82
       +
                   self._y_loc += info['movementY']

     

       83
       83
       +
                   if not self.mousemove_pause:

     

       84
       84
       +
                       self._y_min = self._y_max = self._y_loc

     

       85
       85
       +
                       return

     

       86
       86
       +
                   self._y_max = max(self._y_max, self._y_loc)

     

       87
       87
       +
                   self._y_min = min(self._y_min, self._y_loc)

     

       88
       88
       +
                   thresh = self.mousemove_y_threshold

     

       89
       89
       +
                   invert = thresh < 0

     

       90
       90
       +
                   thresh = max(0.01, abs(thresh))

     

       91
       91
       +
                   down_triggered = self._y_loc - self._y_min >= thresh

     

       92
       92
       +
                   up_triggered = self._y_max - self._y_loc >= thresh

     

       93
       93
       +
                   if down_triggered:

     

       94
       94
       +
                       self._y_min = self._y_loc

     

       95
       95
       +
                   if up_triggered:

     

       96
       96
       +
                       self._y_max = self._y_loc

     

       97
       97
       +
                   if invert:

     

       98
       98
       +
                       down_triggered, up_triggered = up_triggered, down_triggered

     

       99
       99
       +
                   if down_triggered:

     

       100
       100
       +
                       self.paused = False

     

       101
       101
       +
                   if up_triggered:

     

       102
       102
       +
                       self.paused = True

     

       103
       103
       +
       

     

       104
       104
       +
               @self.timed

     

       105
       105
       +
               def timed(self, info):

     

       106
       106
       +
                   secs = time.monotonic() - self._start_time

     

       107
       107
       +
                   self.drawing = self.draw_frame(secs)

     

       108
       108
       +
                   self._last_secs = secs

     

       109
       109
       +
       

     

       110
       110
       +
               @self.on_exception

     

       111
       111
       +
               def on_exception(self, e):

     

       112
       112
       +
                   self.paused = True

     

       113
       113
       +
       

     

       114
       114
       +
           @property

     

       115
       115
       +
           def fps(self):

     

       116
       116
       +
               return self._fps

     

       117
       117
       +
       

     

       118
       118
       +
           @fps.setter

     

       119
       119
       +
           def fps(self, new_fps):

     

       120
       120
       +
               self._fps = new_fps

     

       121
       121
       +
               if self.paused:

     

       122
       122
       +
                   return

     

       123
       123
       +
               self.frame_delay = 1000 // self._fps

     

       124
       124
       +
       

     

       125
       125
       +
           @property

     

       126
       126
       +
           def paused(self):

     

       127
       127
       +
               return self._paused

     

       128
       128
       +
       

     

       129
       129
       +
           @paused.setter

     

       130
       130
       +
           def paused(self, new_paused):

     

       131
       131
       +
               if bool(self._paused) == bool(new_paused):

     

       132
       132
       +
                   return

     

       133
       133
       +
               self._paused = new_paused

     

       134
       134
       +
               if self._paused:

     

       135
       135
       +
                   self.frame_delay = -1

     

       136
       136
       +
                   self._stop_time = time.monotonic()

     

       137
       137
       +
               else:

     

       138
       138
       +
                   self._start_time += time.monotonic() - self._stop_time

     

       139
       139
       +
                   self.frame_delay = 1000 // self._fps

     

       140
       140
       +
       

     

       141
       141
       +
           @property

     

       142
       142
       +
           def draw_frame(self):

     

       143
       143
       +
               return self._draw_frame

     

       144
       144
       +
       

     

       145
       145
       +
           @draw_frame.setter

     

       146
       146
       +
           def draw_frame(self, new_draw_frame):

     

       147
       147
       +
               self._draw_frame = new_draw_frame

     

       148
       148
       +
               if self.paused:

     

       149
       149
       +
                   # Redraw if paused

     

       150
       150
       +
                   self.drawing = self._draw_frame(self._last_secs)

     

       151
       151
       +
       

     

       152
       152
       +
           def set_draw_frame(self, new_draw_frame):

     

       153
       153
       +
               self.draw_frame = new_draw_frame

     

       154
       154
       +
               return new_draw_frame

+155

drawsvg/widgets/drawing_javascript.py

···

       1
       1
       +
       javascript = '''

     

       2
       2
       +
       require.undef('drawingview');

     

       3
       3
       +
       

     

       4
       4
       +
       define('drawingview', ['@jupyter-widgets/base'], function(widgets) {

     

       5
       5
       +
           class DrawingModel extends widgets.DOMWidgetModel {

     

       6
       6
       +
               defaults() {

     

       7
       7
       +
                   return {

     

       8
       8
       +
                       ...super.defaults(),

     

       9
       9
       +
                       _model_name: DrawingModel.model_name,

     

       10
       10
       +
                       _model_module: DrawingModel.model_module,

     

       11
       11
       +
                       _model_module_version: DrawingModel.model_module_version,

     

       12
       12
       +
                       _view_name: DrawingModel.view_name,

     

       13
       13
       +
                       _view_module: DrawingModel.view_module,

     

       14
       14
       +
                       _view_module_version: DrawingModel.view_module_version,

     

       15
       15
       +
                   };

     

       16
       16
       +
               }

     

       17
       17
       +
               static serializers = {

     

       18
       18
       +
                   ...widgets.DOMWidgetModel.serializers,

     

       19
       19
       +
               };

     

       20
       20
       +
               static model_name = 'DrawingModel';

     

       21
       21
       +
               static model_module = 'drawingview';

     

       22
       22
       +
               static model_module_version = '0.1.0';

     

       23
       23
       +
               static view_name = 'DrawingView';

     

       24
       24
       +
               static view_module = 'drawingview';

     

       25
       25
       +
               static view_module_version = '0.1.0';

     

       26
       26
       +
           }

     

       27
       27
       +
       

     

       28
       28
       +
           class DrawingView extends widgets.DOMWidgetView {

     

       29
       29
       +
               render() {

     

       30
       30
       +
                   this.container = document.createElement('a');

     

       31
       31
       +
                   this.image_changed();

     

       32
       32
       +
                   this.container.appendChild(this.svg_view);

     

       33
       33
       +
                   this.el.appendChild(this.container);

     

       34
       34
       +
                   this.model.on('change:_image', this.image_changed, this);

     

       35
       35
       +
                   this.model.on('change:_mousemove_blocked', this.block_changed,

     

       36
       36
       +
                                 this);

     

       37
       37
       +
                   this.model.on('change:frame_delay', this.delay_changed,

     

       38
       38
       +
                                 this);

     

       39
       39
       +
                   this.model.on('change:_frame_blocked', this.delay_changed,

     

       40
       40
       +
                                 this);

     

       41
       41
       +
                   this.model.on('change:disable', this.delay_changed,

     

       42
       42
       +
                                 this);

     

       43
       43
       +
                   this.delay_changed();

     

       44
       44
       +
               }

     

       45
       45
       +
               image_changed() {

     

       46
       46
       +
                   this.container.innerHTML = this.model.get('_image');

     

       47
       47
       +
                   this.svg_view = this.container.getElementsByTagName('svg')[0];

     

       48
       48
       +
                   this.cursor_point = this.svg_view.createSVGPoint();

     

       49
       49
       +
                   this.register_events();

     

       50
       50
       +
               }

     

       51
       51
       +
               last_move = null;

     

       52
       52
       +
               last_mousemove_blocked = null;

     

       53
       53
       +
               last_timer = null;

     

       54
       54
       +
               block_changed() {

     

       55
       55
       +
                   var widget = this;

     

       56
       56
       +
                   window.setTimeout(function() {

     

       57
       57
       +
                       if (widget.model.get('_mousemove_blocked')

     

       58
       58
       +
                               != widget.last_mousemove_blocked && widget.last_move) {

     

       59
       59
       +
                           widget.send_mouse_event('mousemove', widget.last_move);

     

       60
       60
       +
                       }

     

       61
       61
       +
                   }, 0);

     

       62
       62
       +
               }

     

       63
       63
       +
               send_mouse_event(name, e) {

     

       64
       64
       +
                   this.last_move = null;

     

       65
       65
       +
                   if (this.model.get('disable')) {

     

       66
       66
       +
                       return;

     

       67
       67
       +
                   }

     

       68
       68
       +
       

     

       69
       69
       +
                   this.cursor_point.x = e.clientX;

     

       70
       70
       +
                   this.cursor_point.y = e.clientY;

     

       71
       71
       +
                   var svg_pt = this.cursor_point.matrixTransform(

     

       72
       72
       +
                                   this.svg_view.getScreenCTM().inverse());

     

       73
       73
       +
       

     

       74
       74
       +
                   var target_parents = [];

     

       75
       75
       +
                   var target = e.target;

     

       76
       76
       +
                   while(target && target != this.svg_view)

     

       77
       77
       +
                   {

     

       78
       78
       +
                       if (target.id) {

     

       79
       79
       +
                           target_parents.push(target.id);

     

       80
       80
       +
                       }

     

       81
       81
       +
                       target = target.parentNode;

     

       82
       82
       +
                   }

     

       83
       83
       +
       

     

       84
       84
       +
                   this.send({

     

       85
       85
       +
                       name: name,

     

       86
       86
       +
                       x: svg_pt.x,

     

       87
       87
       +
                       y: -svg_pt.y,

     

       88
       88
       +
                       type: e.type,

     

       89
       89
       +
                       button: e.button,

     

       90
       90
       +
                       buttons: e.buttons,

     

       91
       91
       +
                       shiftKey: e.shiftKey,

     

       92
       92
       +
                       altKey: e.altKey,

     

       93
       93
       +
                       ctrlKey: e.ctrlKey,

     

       94
       94
       +
                       metaKey: e.metaKey,

     

       95
       95
       +
                       clientX: e.clientX,

     

       96
       96
       +
                       clientY: e.clientY,

     

       97
       97
       +
                       movementX: e.movementX,

     

       98
       98
       +
                       movementY: e.movementY,

     

       99
       99
       +
                       timeStamp: e.timeStamp,

     

       100
       100
       +
                       targetId: e.target ? e.target.id : null,

     

       101
       101
       +
                       targetParentIds: target_parents,

     

       102
       102
       +
                       currentTargetId: e.currentTarget ? e.currentTarget.id : null,

     

       103
       103
       +
                       relatedTargetId: e.relatedTarget ? e.relatedTarget.id : null,

     

       104
       104
       +
                   });

     

       105
       105
       +
               }

     

       106
       106
       +
               delay_changed() {

     

       107
       107
       +
                   var widget = this;

     

       108
       108
       +
                   window.clearTimeout(widget.last_timer);

     

       109
       109
       +
                   if (widget.model.get('disable')) {

     

       110
       110
       +
                       return;

     

       111
       111
       +
                   }

     

       112
       112
       +
                   var delay = widget.model.get('frame_delay');

     

       113
       113
       +
                   if (delay > 0) {

     

       114
       114
       +
                       widget.last_timer = window.setTimeout(function() {

     

       115
       115
       +
                           widget.send_timed_event('timed');

     

       116
       116
       +
                       }, delay);

     

       117
       117
       +
                   }

     

       118
       118
       +
               }

     

       119
       119
       +
               send_timed_event(name) {

     

       120
       120
       +
                   if (this.model.get('disable')) {

     

       121
       121
       +
                       return;

     

       122
       122
       +
                   }

     

       123
       123
       +
       

     

       124
       124
       +
                   this.send({

     

       125
       125
       +
                       name: name,

     

       126
       126
       +
                   });

     

       127
       127
       +
               }

     

       128
       128
       +
               register_events() {

     

       129
       129
       +
                   var widget = this;

     

       130
       130
       +
                   this.svg_view.addEventListener('mousedown', function(e) {

     

       131
       131
       +
                       e.preventDefault();

     

       132
       132
       +
                       widget.send_mouse_event('mousedown', e);

     

       133
       133
       +
                   });

     

       134
       134
       +
                   this.svg_view.addEventListener('mousemove', function(e) {

     

       135
       135
       +
                       e.preventDefault();

     

       136
       136
       +
                       if (widget.model.get('_mousemove_blocked')

     

       137
       137
       +
                               == widget.last_mousemove_blocked) {

     

       138
       138
       +
                           widget.last_move = e;

     

       139
       139
       +
                       } else {

     

       140
       140
       +
                           widget.send_mouse_event('mousemove', e);

     

       141
       141
       +
                       }

     

       142
       142
       +
                   });

     

       143
       143
       +
                   this.svg_view.addEventListener('mouseup', function(e) {

     

       144
       144
       +
                       e.preventDefault();

     

       145
       145
       +
                       widget.send_mouse_event('mouseup', e);

     

       146
       146
       +
                   });

     

       147
       147
       +
               }

     

       148
       148
       +
           }

     

       149
       149
       +
       

     

       150
       150
       +
           return {

     

       151
       151
       +
               DrawingModel: DrawingModel,

     

       152
       152
       +
               DrawingView: DrawingView

     

       153
       153
       +
           };

     

       154
       154
       +
       });

     

       155
       155
       +
       '''

+164

drawsvg/widgets/drawing_widget.py

···

       1
       1
       +
       from ipywidgets import widgets

     

       2
       2
       +
       from traitlets import Unicode, Bool, Int

     

       3
       3
       +
       

     

       4
       4
       +
       

     

       5
       5
       +
       # Register front end javascript

     

       6
       6
       +
       from IPython import display

     

       7
       7
       +
       from . import drawing_javascript

     

       8
       8
       +
       display.display(display.Javascript(drawing_javascript.javascript))

     

       9
       9
       +
       del drawing_javascript

     

       10
       10
       +
       

     

       11
       11
       +
       

     

       12
       12
       +
       class DrawingWidget(widgets.DOMWidget):

     

       13
       13
       +
           _model_name = Unicode('DrawingModel').tag(sync=True)

     

       14
       14
       +
           _model_module = Unicode('drawingview').tag(sync=True)

     

       15
       15
       +
           _model_module_version = Unicode('0.1.0').tag(sync=True)

     

       16
       16
       +
           _view_name = Unicode('DrawingView').tag(sync=True)

     

       17
       17
       +
           _view_module = Unicode('drawingview').tag(sync=True)

     

       18
       18
       +
           _view_module_version = Unicode('0.1.0').tag(sync=True)

     

       19
       19
       +
           _image = Unicode().tag(sync=True)

     

       20
       20
       +
           _mousemove_blocked = Int(0).tag(sync=True)

     

       21
       21
       +
           _frame_blocked = Int(0).tag(sync=True)

     

       22
       22
       +
           throttle = Bool(True).tag(sync=True)

     

       23
       23
       +
           disable = Bool(False).tag(sync=True)

     

       24
       24
       +
           frame_delay = Int(-1).tag(sync=True)

     

       25
       25
       +
       

     

       26
       26
       +
           def __init__(self, drawing, throttle=True, disable=False, frame_delay=-1):

     

       27
       27
       +
               '''An interactive Jupyter notebook widget.

     

       28
       28
       +
       

     

       29
       29
       +
               This works similarly to displaying a Drawing as a cell output but

     

       30
       30
       +
               DrawingWidget can register callbacks for user mouse events.  Within a

     

       31
       31
       +
               callback modify the drawing then call .refresh() to update the output in

     

       32
       32
       +
               real time.

     

       33
       33
       +
       

     

       34
       34
       +
               Arguments:

     

       35
       35
       +
                   drawing: The initial Drawing to display.  Call .refresh() after

     

       36
       36
       +
                       modifying or just assign a new Drawing.

     

       37
       37
       +
                   throttle: If True, limit the rate of mousemove events.  For drawings

     

       38
       38
       +
                       with many elements, this will significantly reduce lag.

     

       39
       39
       +
                   disable: While True, mouse events will be disabled.

     

       40
       40
       +
                   frame_delay: If greater than or equal to zero, a timed callback will

     

       41
       41
       +
                       occur frame_delay milliseconds after the previous drawing

     

       42
       42
       +
                       update.

     

       43
       43
       +
               '''

     

       44
       44
       +
               super().__init__()

     

       45
       45
       +
               self.throttle = throttle

     

       46
       46
       +
               self.disable = disable

     

       47
       47
       +
               self.frame_delay = frame_delay

     

       48
       48
       +
               self.drawing = drawing

     

       49
       49
       +
               self.mousedown_callbacks = []

     

       50
       50
       +
               self.mousemove_callbacks = []

     

       51
       51
       +
               self.mouseup_callbacks = []

     

       52
       52
       +
               self.timed_callbacks = []

     

       53
       53
       +
               self.exception_callbacks = []

     

       54
       54
       +
       

     

       55
       55
       +
               self.on_msg(self._receive_msg)

     

       56
       56
       +
       

     

       57
       57
       +
           @property

     

       58
       58
       +
           def drawing(self):

     

       59
       59
       +
               return self._drawing

     

       60
       60
       +
       

     

       61
       61
       +
           @drawing.setter

     

       62
       62
       +
           def drawing(self, drawing):

     

       63
       63
       +
               self._drawing = drawing

     

       64
       64
       +
               self.refresh()

     

       65
       65
       +
       

     

       66
       66
       +
           def refresh(self):

     

       67
       67
       +
               '''

     

       68
       68
       +
               Redraw the displayed output with the current value of self.drawing.

     

       69
       69
       +
               '''

     

       70
       70
       +
               self._image = self.drawing.as_svg()

     

       71
       71
       +
       

     

       72
       72
       +
           def _receive_msg(self, _, content, buffers):

     

       73
       73
       +
               if not isinstance(content, dict):

     

       74
       74
       +
                   return

     

       75
       75
       +
               name = content.get('name')

     

       76
       76
       +
               callbacks = {

     

       77
       77
       +
                   'mousedown': self.mousedown_callbacks,

     

       78
       78
       +
                   'mousemove': self.mousemove_callbacks,

     

       79
       79
       +
                   'mouseup': self.mouseup_callbacks,

     

       80
       80
       +
                   'timed': self.timed_callbacks,

     

       81
       81
       +
               }.get(name, ())

     

       82
       82
       +
               try:

     

       83
       83
       +
                   if callbacks:

     

       84
       84
       +
                       if name == 'timed':

     

       85
       85
       +
                           self._call_handlers(callbacks, content)

     

       86
       86
       +
                       else:

     

       87
       87
       +
                           self._call_handlers(callbacks, content.get('x'),

     

       88
       88
       +
                                               content.get('y'), content)

     

       89
       89
       +
               except BaseException as e:

     

       90
       90
       +
                   suppress = any(

     

       91
       91
       +
                       handler(self, e)

     

       92
       92
       +
                       for handler in self.exception_callbacks

     

       93
       93
       +
                   )

     

       94
       94
       +
                   if not suppress:

     

       95
       95
       +
                       raise

     

       96
       96
       +
               finally:

     

       97
       97
       +
                   if name == 'timed':

     

       98
       98
       +
                       self._frame_blocked += 1

     

       99
       99
       +
                   else:

     

       100
       100
       +
                       self._mousemove_blocked += 1

     

       101
       101
       +
       

     

       102
       102
       +
       

     

       103
       103
       +
           def mousedown(self, handler, remove=False):

     

       104
       104
       +
               '''

     

       105
       105
       +
               Register (or unregister) a handler for the mousedown event.

     

       106
       106
       +
       

     

       107
       107
       +
               Arguments:

     

       108
       108
       +
                   remove: If True, unregister, otherwise register.

     

       109
       109
       +
               '''

     

       110
       110
       +
               self.on_msg

     

       111
       111
       +
               self._register_handler(

     

       112
       112
       +
                   self.mousedown_callbacks, handler, remove=remove)

     

       113
       113
       +
       

     

       114
       114
       +
           def mousemove(self, handler, remove=False):

     

       115
       115
       +
               '''

     

       116
       116
       +
               Register (or unregister) a handler for the mousemove event.

     

       117
       117
       +
       

     

       118
       118
       +
               Arguments:

     

       119
       119
       +
                   remove: If True, unregister, otherwise register.

     

       120
       120
       +
               '''

     

       121
       121
       +
               self._register_handler(

     

       122
       122
       +
                   self.mousemove_callbacks, handler, remove=remove)

     

       123
       123
       +
       

     

       124
       124
       +
           def mouseup(self, handler, remove=False):

     

       125
       125
       +
               '''

     

       126
       126
       +
               Register (or unregister) a handler for the mouseup event.

     

       127
       127
       +
       

     

       128
       128
       +
               Arguments:

     

       129
       129
       +
                   remove: If True, unregister, otherwise register.

     

       130
       130
       +
               '''

     

       131
       131
       +
               self._register_handler(

     

       132
       132
       +
                   self.mouseup_callbacks, handler, remove=remove)

     

       133
       133
       +
       

     

       134
       134
       +
           def timed(self, handler, remove=False):

     

       135
       135
       +
               '''

     

       136
       136
       +
               Register (or unregister) a handler for the timed event.

     

       137
       137
       +
       

     

       138
       138
       +
               Arguments:

     

       139
       139
       +
                   remove: If True, unregister, otherwise register.

     

       140
       140
       +
               '''

     

       141
       141
       +
               self._register_handler(

     

       142
       142
       +
                   self.timed_callbacks, handler, remove=remove)

     

       143
       143
       +
       

     

       144
       144
       +
           def on_exception(self, handler, remove=False):

     

       145
       145
       +
               '''

     

       146
       146
       +
               Register (or unregister) a handler for exceptions in other handlers.

     

       147
       147
       +
       

     

       148
       148
       +
               If any handler returns True, the exception is suppressed.

     

       149
       149
       +
       

     

       150
       150
       +
               Arguments:

     

       151
       151
       +
                   remove: If True, unregister, otherwise register.

     

       152
       152
       +
               '''

     

       153
       153
       +
               self._register_handler(

     

       154
       154
       +
                   self.exception_callbacks, handler, remove=remove)

     

       155
       155
       +
       

     

       156
       156
       +
           def _register_handler(self, callback_list, handler, remove=False):

     

       157
       157
       +
               if remove:

     

       158
       158
       +
                   callback_list.remove(handler)

     

       159
       159
       +
               else:

     

       160
       160
       +
                   callback_list.append(handler)

     

       161
       161
       +
       

     

       162
       162
       +
           def _call_handlers(self, callback_list, *args, **kwargs):

     

       163
       163
       +
               for callback in callback_list:

     

       164
       164
       +
                   callback(self, *args, **kwargs)

+37

examples/animated-fix-github.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="-100.0 -100.0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <path d="M-90,0 A90,40,360,1,1,90,0 A90,40,360,1,1,-90,0 Z" id="d0" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <g>

     

       8
       8
       +
       <circle cx="0" cy="0" r="19" fill="red">

     

       9
       9
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="6s" values="1;1;1;1;1;1;0;0;0;0;0;0" />

     

       10
       10
       +
       </circle>

     

       11
       11
       +
       <animateTransform type="translate" repeatCount="indefinite" attributeName="transform" dur="6s" values="0,-80;80,0;0,80;-80,0;0,-80" />

     

       12
       12
       +
       </g>

     

       13
       13
       +
       <g>

     

       14
       14
       +
       <circle cx="0" cy="0" r="19.25" fill="green" transform="scale(0)">

     

       15
       15
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="6s" begin="1.5s" values="1;1;1;1;1;1;0;0;0;0;0;0" />

     

       16
       16
       +
       </circle>

     

       17
       17
       +
       <animateTransform type="translate" repeatCount="indefinite" attributeName="transform" dur="6s" values="0,-80;80,0;0,80;-80,0;0,-80" />

     

       18
       18
       +
       </g>

     

       19
       19
       +
       <g>

     

       20
       20
       +
       <circle cx="0" cy="0" r="19.5" fill="blue" transform="scale(0)">

     

       21
       21
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="6s" begin="3s" values="1;1;1;1;1;0;0;0;0;0;0;0" />

     

       22
       22
       +
       </circle>

     

       23
       23
       +
       <animateTransform type="translate" repeatCount="indefinite" attributeName="transform" dur="6s" values="0,-80;80,0;0,80;-80,0;0,-80" />

     

       24
       24
       +
       </g>

     

       25
       25
       +
       <g>

     

       26
       26
       +
       <circle cx="0" cy="0" r="20.1" fill="yellow" transform="scale(0)">

     

       27
       27
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="6s" begin="4.5s" values="1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;" />

     

       28
       28
       +
       </circle>

     

       29
       29
       +
       <animateTransform type="translate" repeatCount="indefinite" attributeName="transform" dur="6s" values="0,-80;80,0;0,80;-80,0;0,-80" />

     

       30
       30
       +
       </g>

     

       31
       31
       +
       <circle cx="0" cy="0" r="10">

     

       32
       32
       +
       <animateMotion repeatCount="indefinite" dur="3s">

     

       33
       33
       +
       <mpath xlink:href="#d0" />

     

       34
       34
       +
       </animateMotion>

     

       35
       35
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="3s" values="1,2;2,1;1,2;2,1;1,2" />

     

       36
       36
       +
       </circle>

     

       37
       37
       +
       </svg>

+18

examples/animated.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="200" height="200" viewBox="-100.0 -100.0 200 200">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <path d="M-90,0 A90,40,360,1,1,90,0 A90,40,360,1,1,-90,0 Z" id="d0" />

     

       6
       6
       +
       </defs>

     

       7
       7
       +
       <circle cx="0" cy="0" r="20" fill="red">

     

       8
       8
       +
       <animate repeatCount="indefinite" attributeName="cy" dur="6s" values="-80;80;-80" />

     

       9
       9
       +
       <animate repeatCount="indefinite" attributeName="cx" dur="6s" values="0;80;0;-80;0" />

     

       10
       10
       +
       <animate calcMode="discrete" repeatCount="indefinite" attributeName="fill" dur="6s" values="red;green;blue;yellow" />

     

       11
       11
       +
       </circle>

     

       12
       12
       +
       <circle cx="0" cy="0" r="10">

     

       13
       13
       +
       <animateMotion repeatCount="indefinite" dur="3s">

     

       14
       14
       +
       <mpath xlink:href="#d0" />

     

       15
       15
       +
       </animateMotion>

     

       16
       16
       +
       <animateTransform type="scale" repeatCount="indefinite" attributeName="transform" dur="3s" values="1,2;2,1;1,2;2,1;1,2" />

     

       17
       17
       +
       </circle>

     

       18
       18
       +
       </svg>

examples/example1.png

This is a binary file and will not be displayed.

+22 -2

examples/example1.svg

···

       2
       2
        
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
        
            width="400" height="200" viewBox="-100.0 -50.0 200 100">

     

       4
       4
        
       <defs>

     

       5
       5
       +
       <path d="M-10,-20 C30,10,30,-50,70,-20" stroke-width="2" stroke="lime" fill="black" fill-opacity="0.2" id="d0" />

     

       6
       6
       +
       <marker markerWidth="4.0" markerHeight="4.0" viewBox="-0.1 -0.5 1.0 1.0" orient="auto" id="d1">

     

       7
       7
       +
       <path d="M-0.1,0.5 L-0.1,-0.5 L0.9,0 Z" fill="red" />

     

       8
       8
       +
       </marker>

     

       5
       9
        
       </defs>

     

       6
       10
        
       <path d="M-80,45 L70,49 L95,-49 L-90,-40" fill="#eeee00" stroke="black" />

     

       7
       7
       -
       <rect x="0" y="-50" width="40" height="50" fill="#1248ff" />

     

       11
       11
       +
       <rect x="-80" y="-50" width="40" height="50" fill="#1248ff">

     

       12
       12
       +
       <title>Our first rectangle</title>

     

       13
       13
       +
       </rect>

     

       8
       14
        
       <circle cx="-40" cy="10" r="30" fill="red" stroke-width="2" stroke="black" />

     

       9
       9
       -
       <path d="M-30,-5 l60,-30 h-70 Z" stroke-width="2" stroke="green" fill="black" fill-opacity="0.5" />

     

       15
       15
       +
       <use xlink:href="#d0" />

     

       16
       16
       +
       <text x="-10" y="-35" font-size="8" fill="blue" dy="0em">Basic text</text>

     

       17
       17
       +
       <text font-size="8" text-anchor="start"><textPath xlink:href="#d0" startOffset="0">

     

       18
       18
       +
       <tspan dy="0.4em">Path text</tspan>

     

       19
       19
       +
       </textPath></text>

     

       20
       20
       +
       <g>

     

       21
       21
       +
       <text font-size="8" text-anchor="end"><textPath xlink:href="#d0" startOffset="100%">

     

       22
       22
       +
       <tspan dy="0em" dx="-1">Multi-line</tspan>

     

       23
       23
       +
       </textPath></text>

     

       24
       24
       +
       <text font-size="8" text-anchor="end"><textPath xlink:href="#d0" startOffset="100%">

     

       25
       25
       +
       <tspan dy="1em" dx="-1">text</tspan>

     

       26
       26
       +
       </textPath></text>

     

       27
       27
       +
       </g>

     

       10
       28
        
       <circle cx="60" cy="20" r="20" stroke-dasharray="73.30382858376184 52.35987755982988" stroke-dashoffset="-31.41592653589793" stroke="red" stroke-width="5" fill="red" fill-opacity="0.2" />

     

       11
       29
        
       <path d="M70.0,2.679491924311229 A20,20,0,1,0,59.99999999999999,40.0" stroke="green" stroke-width="3" fill="none" />

     

       12
       30
        
       <path d="M59.99999999999999,40.0 A20,20,0,1,1,70.0,2.679491924311229" stroke="blue" stroke-width="1" fill="black" fill-opacity="0.3" />

     

       31
       31
       +
       <path d="M20,40 L20,27 L0,20" stroke="red" stroke-width="2" fill="none" marker-end="url(#d1)" />

     

       32
       32
       +
       <path d="M30,20 L0,10" stroke="red" stroke-width="2" fill="none" marker-end="url(#d1)" />

     

       13
       33
        
       </svg>

examples/example2.png

This is a binary file and will not be displayed.

+11 -7

examples/example2.svg

···

       1
       1
        
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
        
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       -
            width="600" height="320.0" viewBox="-0.75 -0.4 1.5 0.8">

     

       3
       3
       +
           width="600" height="320.0" viewBox="-0.75 -0.4 1.5 0.8">

     

       4
       4
        
       <defs>

     

       5
       5
       -
       <radialGradient cx="0" cy="0.35" r="7.0" gradientUnits="userSpaceOnUse" id="d0">

     

       5
       5
       +
       <pattern width="0.13" height="0.23" patternUnits="userSpaceOnUse" id="d0">

     

       6
       6
       +
       <rect x="0" y="0" width="0.1" height="0.1" fill="yellow" />

     

       7
       7
       +
       <rect x="0" y="0.1" width="0.1" height="0.1" fill="orange" />

     

       8
       8
       +
       </pattern>

     

       9
       9
       +
       <radialGradient cx="0" cy="0.35" r="7.0" gradientUnits="userSpaceOnUse" id="d1">

     

       6
       10
        
       <stop offset="0.07142857142857142" stop-color="green" stop-opacity="1" />

     

       7
       11
        
       <stop offset="0.1" stop-color="red" stop-opacity="0" />

     

       8
       12
        
       </radialGradient>

     

       9
       9
       -
       <linearGradient x1="0.1" y1="0.35" x2="0.7" y2="0.14999999999999997" gradientUnits="userSpaceOnUse" id="d1">

     

       13
       13
       +
       <linearGradient x1="0.1" y1="0.35" x2="0.7" y2="0.55" gradientUnits="userSpaceOnUse" id="d2">

     

       10
       14
        
       <stop offset="0" stop-color="green" stop-opacity="1" />

     

       11
       15
        
       <stop offset="1" stop-color="red" stop-opacity="0" />

     

       12
       16
        
       </linearGradient>

     

       13
       17
        
       </defs>

     

       14
       14
       -
       <rect x="-0.75" y="-0.5" width="1.5" height="1" fill="#ddd" />

     

       15
       15
       -
       <path d="M0.6062177826491071,5.551115123125783e-17 A0.7,0.7,0,0,0,-0.3499999999999998,-0.2562177826491071 L-0.2499999999999999,-0.08301270189221943 A0.5,0.5,0,0,1,0.43301270189221935,0.1 Z" fill="url(#d0)" stroke="black" stroke-width="0.002" />

     

       16
       16
       -
       <path d="M-0.48209070726490444,-0.22453333233923367 A0.75,0.75,0,0,0,-0.7047694655894312,0.09348489250574832 L0.0,0.35 A0,0,0,0,1,0.0,0.35 Z" fill="url(#d0)" stroke="red" stroke-width="0.002" />

     

       17
       17
       -
       <rect x="0.1" y="0.14999999999999997" width="0.6" height="0.2" stroke="black" stroke-width="0.002" fill="url(#d1)" />

     

       18
       18
       +
       <rect x="-0.75" y="-0.5" width="1.5" height="1" fill="url(#d0)" fill-opacity="0.4" />

     

       19
       19
       +
       <path d="M0.6062177826491071,5.551115123125783e-17 A0.7,0.7,0,0,0,-0.3499999999999998,-0.2562177826491071 L-0.2499999999999999,-0.08301270189221943 A0.5,0.5,0,0,1,0.43301270189221935,0.1 Z" fill="url(#d1)" stroke="black" stroke-width="0.002" />

     

       20
       20
       +
       <path d="M-0.48209070726490444,-0.22453333233923367 A0.75,0.75,0,0,0,-0.7047694655894312,0.09348489250574832 L0.0,0.35 A0,0,0,0,1,0.0,0.35 Z" fill="url(#d1)" stroke="red" stroke-width="0.002" />

     

       21
       21
       +
       <rect x="0.1" y="0.15" width="0.6" height="0.2" stroke="black" stroke-width="0.002" fill="url(#d2)" />

     

       18
       22
        
       </svg>

examples/example6.png

This is a binary file and will not be displayed.

examples/example7.gif

This is a binary file and will not be displayed.

examples/example8.png

This is a binary file and will not be displayed.

+15

examples/example8.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="600" height="200" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <g fill="orange" transform="rotate(-20)" id="d0">

     

       6
       6
       +
       <rect x="0" y="10" width="20" height="40" />

     

       7
       7
       +
       <circle cx="30" cy="40" r="10" />

     

       8
       8
       +
       <circle cx="50" cy="40" r="10" fill="green" />

     

       9
       9
       +
       </g>

     

       10
       10
       +
       </defs>

     

       11
       11
       +
       <use xlink:href="#d0" />

     

       12
       12
       +
       <use xlink:href="#d0" x="80" y="0" stroke="black" stroke-width="1" />

     

       13
       13
       +
       <use xlink:href="#d0" x="80" y="20" stroke="blue" stroke-width="2" />

     

       14
       14
       +
       <use xlink:href="#d0" x="80" y="40" stroke="red" stroke-width="3" />

     

       15
       15
       +
       </svg>

+15

examples/font.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
            width="400" height="100" viewBox="-200.0 -50.0 400 100">

     

       4
       4
       +
       <style>/*<![CDATA[*/@font-face {

     

       5
       5
       +
         font-family: 'Permanent Marker';

     

       6
       6
       +
         font-style: normal;

     

       7
       7
       +
         font-weight: 400;

     

       8
       8
       +
         font-display: swap;

     

       9
       9
       +
         src: url(data:application/octet-stream;base64,AAEAAAANAIAAAwBQT1MvMmHz9PQAAAHoAAAAYGNtYXACFQHXAAACSAAAAGxjdnQgABUAAAAAANwAAAACZnBnbZJB2voAAAK0AAABYWdseWaaWcwyAAAGNAAAEvZoZWFkAUtbYgAAAXAAAAA2aGhlYQhdAj8AAAFMAAAAJGhtdHgidABYAAABqAAAAEBsb2NhJmkiSQAAASgAAAAibWF4cAIoA7AAAADoAAAAIG5hbWUsfEgtAAAEGAAAAhpwb3N0/7YAMwAAAQgAAAAgcHJlcGgGjIUAAADgAAAABwAVAAC4Af+FsASNAAABAAAAEAEvAAcBDAAEAAEAAAAAAAoAAAIAAXMAAgABAAMAAAAAAAD/swAzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8QFoAhsDCAOxA/wEygVtBh8GzQezCEgI8Al7AAAAAQAABHD+uwAfBNr+1/6ZBPQAAQAAAAAAAAAAAAAAAAAAABAAAQAAAAEAQnf8S7hfDzz1AAsEAAAAAADJNUogAAAAANUrzNf+1/67BPQEcAAAAAkAAgAAAAAAAAF7AAABewAAAm4AAAIO//8CFgAJAdL/7AJU//YBSAA4A0IABQJC//EChAAFAdsACgHrAAACVwAzA00AFAIH/+oAAwIFAZAABQAAArwCigAAAIwCvAKKAAAB3QAzAQAAAAIAAAAAAAAAAACAAAAnAAAAQgAAAAAAAAAARElOUgBAACAiEgJu/8MAPQRwAUUAAAABAAAAAAJxAvYAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAFgAAAASABAAAwACACAAVABjAGYAaQBvAHUAeP//AAAAIABUAGMAZQBoAG0AcwB3////4f+u/6D/n/+e/5v/mP+XAAEAAAAAAAAAAAAAAAAAAAAAAACwACxLsAlQWLEBAY5ZuAH/hbBEHbEJA19eLbABLCAgRWlEsAFgLbACLLABKiEtsAMsIEawAyVGUlgjWSCKIIpJZIogRiBoYWSwBCVGIGhhZFJYI2WKWS8gsABTWGkgsABUWCGwQFkbaSCwAFRYIbBAZVlZOi2wBCwgRrAEJUZSWCOKWSBGIGphZLAEJUYgamFkUlgjilkv/S2wBSxLILADJlBYUViwgEQbsEBEWRshISBFsMBQWLDARBshWVktsAYsICBFaUSwAWAgIEV9aRhEsAFgLbAHLLAGKi2wCCxLILADJlNYsEAbsABZioogsAMmU1gjIbCAioobiiNZILADJlNYIyGwwIqKG4ojWSCwAyZTWCMhuAEAioobiiNZILADJlNYIyG4AUCKihuKI1kgsAMmU1iwAyVFuAGAUFgjIbgBgCMhG7ADJUUjISMhWRshWUQtsAksS1NYRUQbISFZLQAAAAAAAAgAZgADAAEECQAAAHYBPgADAAEECQABACABHgADAAEECQACAA4BEAADAAEECQADAEQAzAADAAEECQAEADAAnAADAAEECQAFABoAggADAAEECQAGAC4AVAADAAEECQAOAFQAAABoAHQAdABwADoALwAvAHcAdwB3AC4AYQBwAGEAYwBoAGUALgBvAHIAZwAvAGwAaQBjAGUAbgBzAGUAcwAvAEwASQBDAEUATgBTAEUALQAyAC4AMABQAGUAcgBtAGEAbgBlAG4AdABNAGEAcgBrAGUAcgAtAFIAZQBnAHUAbABhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwADAAMQBQAGUAcgBtAGEAbgBlAG4AdAAgAE0AYQByAGsAZQByACAAUgBlAGcAdQBsAGEAcgAxAC4AMAAwADEAOwBEAEkATgBSADsAUABlAHIAbQBhAG4AZQBuAHQATQBhAHIAawBlAHIALQBSAGUAZwB1AGwAYQByAFIAZQBnAHUAbABhAHIAUABlAHIAbQBhAG4AZQBuAHQAIABNAGEAcgBrAGUAcgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADEAMAAgAGIAeQAgAEYAbwBuAHQAIABEAGkAbgBlAHIALAAgAEkAbgBjAC4AIABBAGwAbAAgAHIAaQBnAGgAdABzACAAcgBlAHMAZQByAHYAZQBkAC4AAAABAAD/6wMgAusApQAAEyYmJyYmNTY2NzczFjIzMjY3Njc2Njc3NhYXNjY3NjYzMhYXFxYWFxYWBwcGBwcjIgYHBgYHJiIjIgYHBgYHBgYHBgYHBgYHBgYHBwYGBwYHBgYXBgcUBgcGBhcWFhcWFhcWFxcWBwYjJyYnJiYnJiYnJicnNjUmJicmJicmNjc2Njc3Njc0Njc2NjciBgcGIyInBgYrAiIHIiIrAiImJycmJycWAQUDBQgCBgMEDwgRCCZQKi41BQMCCxcSBRo2HShSJxEeDgwEDAgPHQQFBAYKCwoKBwQKBgsMCB5GIRgsEgoQCQkQBwwQBQ8NBQQHAwQDBQIEAQIEAgECAgIDBgICBgIIBwoGERIqDgcBCQwFAgYCCgYLAQgJAwMFBQIeEgoSBwsHAgoGBAcBBwsGDQwJBAgOBwwMDAcOCAUMDAgUCwcGBQsCNAgNCAwcEwoJAxIBBgQGAwsGBAYBDQYCBwQFCgICCQcMBgwkIwoEBA0DAwIDAgEIBQMFAhooFBQpGRIhFREoDg8HCAUNDAULAwsGBgwGBwsFBAgGAgICBwEMJBQXAQcCBAUHAgECAwQGCgQLGg4LEgdGXy0YMhoLBgENGQ0IEAYBAQMBBAEDAwYICwEDAAH////4Af0CYgBOAAAFBiYHJiYnJiYnLgM3NjY3PgM3PgM3PgM3FjY3Nh4CNzIGBzYWFxYGFRYWBgYHBgYHDgMHFgYHFhYXFhYXHgMHBgYBoBAvFDVuLgoUERgeEgYBDzcdDQ0PDwYVHx4gFQgWFxUGBRIIBQcGBQIFBAEICwwEBB4QDiQVMFUbGCUhHRABCwUCCgZClUsHExAKAw4iAgEECQIWEAsTBBM3PkEeLUEgBg0LCwgFExUSBQkLCwwKCAUDAQYGAQUKAgEJAQUFBgknKiQGDR8eBxcdHw8ODwgPFwsUCgEKERMXEQ8ZAAABAAn/8gIvAmMAegAAARYGBhQXDgMHJgYnBgYHFgYXFjY3FgYXHgM3FhYHDgMnIiInBiYHJgYnBgYHFj4CFzY2Nx4DNx4DNw4DBwYmIwYGJiYnJiYnLgM3NjYnNjYXPgM3LgMnPgM3PgM3FjM2FicWFgIuAQEBAhU3QEMhDRUUBhIJBAEDI1UpAQQBBw4ODwoEAwQQICMnGAUFBAgdCAsfDBAaCiItKCogFDcXCAwLDAkEAwIFBg8nMj0lCQwIF0BCPBMIBQsBBgYDAwMTAwUCBwYODw8HDg0GBAUKHSIoFig/PUIqCQgECwEKHwIzBwcGBwciGQsMFAUKAgYFAwkTBgMIAQUDBAUPDgkBCBMKCxcSCwEDBQQFBQEEFTAbBQIFBQELBwgDDw0KAQQLCgcBISMSCgcCBQUIAg8TBxMFDSAjIg4PGA4BCQESIB4fEw0fHyERDxMMCAUNDgkICAkJBwkRFwAAAf/s//ICYAJtAJ8AADcGBwYmJyYnJyYmJyYnJjY3NjY3JiYnPgM3FxYXNjY3NjY3JjcmJyInJiYnJicnNzY0JyY3NzY1NzY2NzY2NzY2NzY2NzY3NjY3NxY2MzIXFhYXFhYXFgcGBwcmIiMiDgIHBwYGBwYGBwYVBgYXFjY3NjYzMwcXFhYXFxYWFwcHJgcGBiMGBgcGBgciIyIGBwYGBwYHFQYGBwYGFRaMBhwNDQcJBwsCBgQICAYIBgIEAhoaAgMQFRcLDQkJBwUCAwcFAQUHCAIIDAkEBgkKBQIEAgICCAkUJxQTJxQHEAcGCgIMEBlSMxEFCgUtDAkOBgMHAhEGCQ4LCwsGGUJFQBgSBwIBAQEBEQcEAhMiERcxGiAIBQYFAwUEBwEpDhENBw4IFBsOEiIPCgQIEQcFBAIEBwgDAgICCCIiDQEEAwQBCAUKBQoPHScTBg0GDjQYExcOCAMFCQUDDQgJEgkNCwUBAgkNBg0IBwoCBgYLBAoLAQkFDQcGDQUFAwEBAQMEBQcRBQEBARsFDAYEBgEaFA0CBgEGCxAJCQsNBgQIBRUdDAsICAQDBAYIDgMCAgkCCgo6BAEFAgMEBAICBwYFAgQJBQ4JDwoLBQMFAw8AAf/2/+8CQAJzAHUAACUWDgIHJiYnJiY3ND4CNQ4DBxQOAiMWFgcOAiInNC4CNQY2FyYmJz4DFyY+Aic2Njc+AiYnNhc+AzceAxcOAwcWFgc+Azc2Nic2NjcmPgI3HgMXFhYXBgYHDgMHFgYCAAIQHCQRCA8KDRgBAwUDFzIvKQ0IDA4HAQQCDhYYHBMKCwgFAgcLBQkCAwIEAwIEBAIEEAoBBwsGAQMBCgYFDBwfBhMXFwoBBgkJBAEJAxg0NDEVBRAGBQYHBQINGRILEBETDwMDAQgTBAcICAoHBAVhGiIYDgYFCwMYJRgBFBgVAQIQFhYIAxcZFAMGBQQNCQoGCQcFAgEQBA4VEAIKCAQDCQwKCgYWMxUHGhsZCAUCIVNLOQkVIB0eExMyNDARBQIIBgoMDwsnTikEDAITKiYbBBAlJSEMHT4gJkcoCBQVEwcMFQABADj/8wEVAmYAMQAANxYOAicuAyc+Azc2Njc2Jjc2Njc2Jjc2Nic+AzMeAxcUFBYWFw4D1AURHygSChAOCwQFAwEBAgcbCAIHAgEKAQMDBQUPAgkQERUPCAUFCgwCBwgSHxQFRh4iEQIDDiotLBEMHyAhDypMKQkQBwQDBQsOCggfEQYQDQoKGBgVBggYFxMDMF5fYAABAAX/7gM9Am8AjAAAJQYGIyYmNzY1JyIGBw4DIyInJwcOAxcGBgcGFwYHBgYHBgYHFAcGBiMiJy4CNjc0PgQ3NjY3NjY3FhcXFjMWFhcWFx4DBxcWBwYUFxYzMjY3NjY3NjY3NjY3NjMyFhcWFhcUFxYWFxYXFhcGFhcWFhcnFxYGBxYWBgYHFgYHBgYHBgYCtAoRCycDIAUJBAcCGj5DRSFUKggIAwwMCQEJFAUCBAIHBAkDAgEBAhEUEQgSDRULAQkQGSAgHQoIDQYSISAWCgIECAsPCQcGCA8JAQUBBQMBAhIOEBsMCBAIEh0QHjgRCgsLGAsDBQIIBAICDwQHEgIFBAECAhMDAgkGAQEEBwYEJRQCBQIJDhIFCB2QbwMJCgIGEykjFlUPDQQZICEMCRgPCAcJBQUJBQUKBQcGIxUDDjE4ORUBJjxJRToPDBUKHykMCQwLCgMFAggLDBcXGA0KCRAHDwkODwgGCQERGg0YOCoGCgUCAgEKBwMCAQgIFwwKEQkDBgQCEw4iChodGRYNQGkuBQoFAwcAAf/x//kCXAJqAHAAADcOAyMOAxcOAycGFhcmBgcuAyc2Jic2NjceAxcGJgcWFgYUFyYGJxYOAhciDgInFgYGFhc+Azc+AzceAxcWFhcOAwcOAxcGBgcGBgcGJicWDgIXDgMnJibNCQgHBwcBCQgEBAgEBQwQAwQBCwsIExkTDwcDBAUxdDQXLSUaBAIFAgQBAQMEAwUEAwYEAwMDAgMDAwIBAgYkKxsOCAkKCAgGDxUSFA8MFAMFBQYKCQMJCQYBCBIFEBIKBAIGAQIDAQIOFhkjHCk/tgIREg8IDA0PCgYWFA4BBAIGAgcBBh4lJg4LFQdo7HMJFx4nGAYDAwUEBAcGAQQCCw4LDQoDAwMBFiwtMRoVQlJeMQkaHR0MAg8RDwIRIBIIFBQRBhorKi0bFzQVDSQSBAQBBAQDBgUGFhIGCh5OAAACAAX/7wJhAncAUQB1AAABBh4CFxYOAgcGBgcGBgcOAycGBicGLgInJj4CNxY+Ajc2Njc+Azc1NjY3NjI3NjY3FhYXHgMXFjYXFhYXBgYHBhYXFgcWFgc2NjcmJjUmJicGBicGBiYmJwYGBwYmBw4DBxYWNjYzNjYCRwEGCQgCAgQKEAsOKBELGw4LHiAgDB45JiQ9LyMLCBgtOhsGBwYHBQcbCAkMCwwIEhEMCQsLCA0NDB0LAQoMCwIEAwQDCAQFBQoBCgEBBBgmZQQNAQUCFiAUAgoGAgoMDQUdOhcEAgUIFxYQAREuMS8UKjwBLAwWFRYLDiEfGQYSFA4HBgMGDQsFAQsHCAUQIzEbOV1PQyACBQkIAQ8PDgIICgkCCwgVDwECDg4IBgQLCgsJCgkBBAEOCQ0KFQUHAQUJBCdXhgsODggJCh9HHwQIBggHAQUEFywdAgECEx8gJBgOBgQJCiEAAAEACv/vAk8CbAB1AAATPgM3PgMXHgMXFhYHBgYHJgYHJiIGBicGBgcGFgceAxcyHgIVFjYXFhYXFhYHDgMHJgY3BgYmJgcmJiciNiM2LgI3NiYmNjcWPgI3PgM3NiY1JyYmJwYmJyYmJyYmByYmJzY2JzY2EAcfJSgSKFtfZDcDDA0KAQoMBAoTCyVMHgkZGxsMCh0RAQYCBhMVEAMPFg4HAwgFAxgHAgIIDzVDTCQECAIIExYXCgcLAwUBBAYBBQQBBAICBQwiPTYxGAMLDAoCAQkLEzARCxMPIj8dAgYIBgwFAgIHBAQBwhUeFQ4FER8YBxAKEhIRCQkVEQgNBQkGAgkICAIIBQIFAwUHBgYJCg4UFwkIAgUNGxAZJxQlOi0gCwECBgcEAQICBw0KCgoDAgMDCBUWFAYEDRgcCwkMCgwJBwMGAwsPCQYGAwIKDQUIAggPCQwRCA0QAAEAAP/pApsCagCcAAABIgYHBgYHBgYHBgYHBgYHBgYHBwYGBwYHBgYVFAcWBgcGFxYWFxYXFhcXFgcGIyMmJyYmJyYnJzQ1JiYnJiYnJjY3NjY3NzY2NzY2NyIGBwYGIyInBiMjIiYjIgciIyMiBiMiJicmJycmJicmJjU2Njc3FzMyNjc2Njc2Nzc2Fhc2Njc2NjMyFhcXFhYXFhYHBgcHJyIGBwYGByImAjkZOhwUJQ8HDggIDQYKDQQMDAMEBgIEAQYCAgUBAgEDAQMFAQYDBAgJBQ4PJAwFAQgKBA0ICQcHAgIFBAIaDggQBgkHCQUDBQIGCgUGCgUHAwsNCgMFAgoGDAsKAgYCBxAJDAQJAQQCBAcBBgIDDRwgQiMUKRYEBAoSDwUWLRciRSAOGgsKAwsGDBgDCAQJCgYKBQQIBQkLAeEHBAMEARYiEBEjFBAbEQ8hDAwGBwMLCwUJAgoDBQsFDAcEBgUEAQMECh0REwUDAwQGBgQFCwEJFgsJEAY6UCUUKRYKEBULBw0FAQEBAQEFAQMBAwUQAQwGCwcKFxAICAMPAQUDAgQCCQgFAQsFAgUEBQgCAgcGCgULHh0MAgwBAwICAwEBAAABADMAAAJwAmcAYQAAARYWFxYWFwYGBwYGBwYGBwYGBycPAg4DByYmJyInJiYjJiYnJiYnNycmJicnJjY3NTY2NzY3NjY3NhYXFhYXFhYXFhYXDgIWFxc3PgM3PgM3NjUnJjc2NxYWAk4CCgYFCQIIBwQQHgkFBwQCBgIUBA4KEyo1QyoRGQsTHAMMBRERCAUKBhEWAgYCAQMBDwMGAgMGDg4FDgoFBQ8PAgcECA0BCgsDBQYGER4xKiYVFR8VCwIRAgQEBhYQGQI5FiAPDhsTGiwYIzYUBQ0HAwwCBxkEDCEtIx4SAgEBAwgGCB8SCxMKBRgDBQMQRXMtCxYdDRYTAxEHAQoLCRYGCBEKESUREzIzLxANAggTGiMXFztAPxwGEgsGCBMKChgAAQAU//MDgAJrAHMAAAUmJicmJi8CDwIOAwcnJiYnJiYnJiYnPgM3PgM3FhYXFhYXDgMHBgcGBzY2NzY3PgM3PgM3FhYXFhYXFhYXDgMHDgMVBhcWFhc3PgM3NjY3HgMXBgYHDgMHJiMiAjMjKRQDBgMOCAwSCho1O0EmFhMaEQUHBAsOBwMMERMKCRcbIBIFDAUOGxIFExUUBgYECQgMHA0PDxMaFxgRDyEhIA0IGQ4GCwUGCwUBBAUGAwgIAwEBAgEGBSgRHx0cDhUrFBYhGA8DEiEPFCs0QCoLCBANED4mBgwFGhALEAoYLyUXAQsKEBEJEAgUIBQOQ1BRHho6MSMDBwYCFBwOGT09OhURFSVAAxQLDA8TICIpHBg3MyoMChIFCQ8GCRAIBxYaGwwmJhYPDQoKCRQIHw0tO0YkNWQbDh0iLB4jSiUwYFdJGQMAAf/q/94CSQJdAF0AACUmJicGBgcOAwcmJjc+Azc+AzcmJicmBic2Jic2Nic0PgInNh4CNwYeAhUeAxc+AzceAxcGBgcGBwYGBxYWFxYXHgMXFhYHBgYHBgYHAVsPORopSR4CBg8XEiEeCwEXISYRAxETEwYHKBECCwICDwsDCAYGBgQDDRQSDwgBAgQEECYjHAcYODw9HRETDQoJCBMEFR0aSzUMEAUFBAkMCw4LBhYBBxsGCRIFGjJcIR9LKxUbEg0HGEcjGTArJxEKDw4QCxcvGQUEAw0eCwsfEwgPDQ0GAgYIBAMFBAIDAwUhKCgKDyksJwwIFxkbChEXDwkSEDYtDhoJCwkHEhMRBR4vGRceEAMGBgAA) format('truetype');

     

       10
       10
       +
       }

     

       11
       11
       +
       /*]]>*/</style>

     

       12
       12
       +
       <defs>

     

       13
       13
       +
       </defs>

     

       14
       14
       +
       <text x="0" y="0" font-size="35" font-family="Permanent Marker" font-style="italic" text-anchor="middle" dominant-baseline="central">Text with custom font</text>

     

       15
       15
       +
       </svg>

+210

examples/logo.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <head>

     

       3
       3
       +
       <meta charset="utf-8">

     

       4
       4
       +
       </head>

     

       5
       5
       +
       <body>

     

       6
       6
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       7
       7
       +
           width="400" height="100" viewBox="-200.0 -50.0 400 100" onload="svgOnLoad(event);">

     

       8
       8
       +
       <defs>

     

       9
       9
       +
       <linearGradient x1="-1250" y1="0" x2="1250" y2="0" gradientUnits="userSpaceOnUse" id="d0">

     

       10
       10
       +
       <stop offset="0" stop-color="#5544ee" stop-opacity="1" />

     

       11
       11
       +
       <stop offset="0.2" stop-color="#5544ee" stop-opacity="1" />

     

       12
       12
       +
       <stop offset="0.4" stop-color="#ee0055" stop-opacity="1" />

     

       13
       13
       +
       <stop offset="0.6" stop-color="#ee0055" stop-opacity="1" />

     

       14
       14
       +
       <stop offset="0.8" stop-color="#5544ee" stop-opacity="1" />

     

       15
       15
       +
       <stop offset="1" stop-color="#5544ee" stop-opacity="1" />

     

       16
       16
       +
       <animate attributeName="x1" dur="128s" values="-2250;-250" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       17
       17
       +
       <animate attributeName="x2" dur="128s" values="250;2250" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       18
       18
       +
       </linearGradient>

     

       19
       19
       +
       <path d="M85 438q-1 21 -1 42q0 55 8 113q10 80 45.5 156.5t93.5 131.5q51 49 111.5 81.5t115.5 45.5q56 14 111 18q26 2 50 2q25 0 49 -3q44 -5 79.5 -11t54.5 -12l19 -7q-1 7 -3 19.5t-5.5 50t-4.5 73.5v17q0 31 2 69q4 50 12.5 92.5t28 86t47.5 74t72.5 50t100.5 19.5 q63 0 115.5 -21t86.5 -54t60 -73t39.5 -80.5t22 -73.5t10.5 -54l2 -21q2 -16 4.5 -43.5t5.5 -111.5q2 -42 1 -84q0 -40 -1 -82q-3 -82 -17.5 -194t-41.5 -208q57 -27 89 -77t35 -105v-15q0 -47 -16 -95q-18 -54 -55 -93q-28 -30 -63 -47q-36 -17 -68 -20q-15 -1 -30 -1 q-18 -1 -35 1q-33 4 -60 13t-48.5 18t-33.5 15l-12 7q-159 -83 -371 -91q-19 -1 -38 0q-187 0 -324 69q-7 4 -19 11t-45 32t-60.5 54t-56 76t-41.5 99q-17 67 -21 141zM729 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d1" />

     

       20
       20
       +
       <path d="M49 548q0 83 3.5 154.5t9.5 112.5l6 41q16 73 54 125t80.5 74.5t83 34.5t66.5 12h27h13q56 0 102 -16q52 -18 79.5 -45.5t46 -55.5t24.5 -47l5 -20q39 56 90.5 91.5t96.5 46t84.5 12.5t62.5 -2l23 -5q58 -15 99.5 -46t60.5 -70t27 -71t9 -65v-14q0 -41 -10 -79 q-12 -44 -30.5 -71t-37 -47t-32.5 -28l-13 -9q-49 -29 -103 -35q-20 -2 -38 -2q-30 0 -58 7q-42 11 -78.5 26.5t-56.5 28.5l-20 14q13 -99 13 -178q0 -34 -2 -64q-8 -102 -36 -168.5t-65.5 -108t-79 -61.5t-76 -27.5t-57.5 -6.5h-23h-9q-42 0 -80 9q-42 10 -71 27.5t-53 39 t-39 43t-25 39.5t-14 29l-4 11q-27 82 -41 181.5t-14 182.5z" transform="scale(0.0341796875,-0.0341796875)" id="d2" />

     

       21
       21
       +
       <path d="M59 496q0 22 5 74q5 58 17.5 111t43.5 119t76 116t121.5 88t173.5 47q31 3 60 3q48 0 88 -8q66 -13 103 -34t64 -50t35 -44.5t12 -26.5q2 8 7.5 22t23.5 42.5t42 51t67 40.5t94 18q62 0 112.5 -29t82 -75t54.5 -101.5t33.5 -111t16.5 -101.5t7 -75l1 -29q2 -42 2 -81 q0 -54 -4 -103q-7 -84 -22.5 -141t-37.5 -102t-47.5 -71.5t-51 -44.5t-49.5 -25t-42.5 -10.5t-29.5 -2.5l-11 1q-1 2 -11.5 0t-29.5 2t-41.5 8.5t-46.5 19.5t-45 34.5t-37.5 53t-22.5 75.5q-2 -9 -8 -23.5t-35 -50.5t-71 -62q-42 -25 -122 -40q-45 -8 -95 -8q-41 0 -86 5 q-8 0 -22.5 1.5t-55 12.5t-78 28.5t-83 54.5t-78 85.5t-55 127t-22.5 174.5q-2 17 -2 35zM686 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d3" />

     

       22
       22
       +
       <path d="M35 735q-2 23 -2 44q0 43 8 79q12 56 35 90.5t52.5 60.5t59.5 38.5t55.5 19.5t41.5 9l16 1q69 0 125.5 -19.5t94 -50t66.5 -74t45 -83.5t26 -86.5t13.5 -76t4.5 -58.5q2 59 22 101t47 60t54 28t46 10l19 1q44 0 79.5 -13.5t56.5 -34t36.5 -45.5t21.5 -50t9.5 -45.5 t3.5 -33.5v-13q0 81 11 149.5t30 115.5t44 85t52 60t54 38t52 22.5t44 10t30 3.5l11 -1q63 -1 113.5 -20t80.5 -48.5t51 -65t29.5 -70.5t13 -64.5t3.5 -47.5v-18q-3 -96 -18 -187.5t-34.5 -153.5t-38 -110t-31.5 -70l-12 -23q-36 -66 -84.5 -113.5t-91.5 -68.5t-80.5 -32 t-59.5 -11l-23 -1q-92 0 -161.5 26.5t-105 61.5t-57 79t-26.5 71t-5 45q-3 -22 -10 -48t-31 -71t-59 -79.5t-99.5 -60.5t-146.5 -26q-64 0 -121.5 24.5t-94 59.5t-64.5 70t-40 59l-12 25q-60 115 -97 246.5t-45 205.5z" transform="scale(0.0341796875,-0.0341796875)" id="d4" />

     

       23
       23
       +
       <path d="M70 169v15v10q0 50 18 90q20 44 54.5 72t76.5 48.5t84 29.5t77 14.5t57 5.5l22 1q-75 18 -134.5 44t-95.5 53t-61.5 56.5t-36.5 55t-16.5 46t-5.5 32.5v12q3 71 34 128t77 91t101.5 59t110.5 35.5t100 16.5t73 6h28q112 -2 194 -16.5t131.5 -36t78.5 -53.5t39 -66 q8 -28 7 -61v-15q-2 -50 -27.5 -88t-64.5 -58t-85.5 -32.5t-92 -15t-83.5 -2.5t-62 2l-23 3q97 -12 174.5 -37.5t123 -56.5t78 -66t46 -67.5t20 -58.5t5.5 -42v-16q0 -73 -24.5 -133t-64 -97.5t-87.5 -65.5t-95.5 -41.5t-87 -21.5t-63.5 -10l-25 -1q-39 -2 -75 -2 q-80 0 -148 8q-98 11 -156.5 32.5t-100.5 48.5t-59.5 55t-27 51.5t-8.5 38.5z" transform="scale(0.0341796875,-0.0341796875)" id="d5" />

     

       24
       24
       +
       <path d="M23 773q0 65 18.5 118.5t70 97.5t132.5 60q30 6 58 6q36 1 70 -9q60 -16 101.5 -53.5t76 -85.5t55 -98t34.5 -92t19 -69l6 -27q2 21 7 55t33.5 118t70.5 144t125 98q52 24 113 24q37 0 77 -9q71 -16 115 -55.5t58.5 -90.5t15.5 -109v-8q0 -54 -12 -106q-13 -56 -27 -100 t-26 -72l-12 -27q-4 -10 -12.5 -28t-37 -69.5t-59.5 -98t-80 -104t-99.5 -98.5t-116.5 -69t-133 -28q-98 0 -189 46t-154.5 110t-119.5 148.5t-85 145t-50 115.5q-19 48 -31 101.5t-12 118.5z" transform="scale(0.0341796875,-0.0341796875)" id="d6" />

     

       25
       25
       +
       <path d="M85 390q-11 61 -11 117q0 90 28 167q21 57 51 108.5t58.5 83t54 55.5t40.5 34l16 10q129 77 288 86q26 1 51 1q131 0 246 -40q137 -47 228 -133q63 -59 106.5 -140.5t64 -164t30.5 -168.5q7 -64 7 -123q0 -18 -1 -36q-3 -74 -8 -133t-11 -92l-6 -34 q-21 -119 -64.5 -213.5t-99.5 -153.5t-122.5 -101t-135 -60t-135.5 -27q-46 -6 -88 -6q-18 0 -36 1q-59 4 -103.5 9t-70.5 11l-26 7q-76 27 -120 68t-54 81q-7 32 -7 62v12q2 36 11 58l10 22q17 37 48 61t64 32t64 11t50 1l20 -2q68 3 116.5 20t69 39t31.5 44t11 37v15 q-14 -4 -39 -8.5t-96 -8.5q-24 -1 -47 -1q-46 0 -88 5q-65 8 -143.5 41.5t-133.5 92.5q-89 94 -118 253zM641 444q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 0 -60 -26q-22 -24 -22 -53v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d7" />

     

       26
       26
       +
       <path d="" transform="scale(0.0341796875,-0.0341796875)" id="d8" />

     

       27
       27
       +
       <path d="M59 1126q-2 56 18.5 104.5t56 80t79 57t87.5 39.5t80.5 23.5t59.5 12.5l23 3q78 6 147 -1.5t117 -24.5t87.5 -39t63.5 -45.5t40.5 -43.5t23.5 -32l6 -13q39 -73 52 -152t2 -148t-33.5 -135.5t-52.5 -118t-57 -91.5t-45 -61l-19 -21h19t46.5 -4.5t66 -13.5t69.5 -29.5 t65 -49.5t45 -76.5t16 -106.5q-1 -45 -22 -82.5t-55 -63t-77.5 -44.5t-91.5 -30t-95.5 -18t-90.5 -9t-76.5 -2.5t-53.5 0.5l-19 1q-70 0 -130 8.5t-103 22.5t-78 32t-57.5 38t-39 40t-25 38t-13.5 32t-6 22l-1 8q-8 71 3.5 127t51.5 107t69 78t97 81q14 12 22 18.5t21 16.5 t23 19q30 25 53.5 53.5t39.5 60t15.5 64.5t-20.5 60t-48 40.5t-54 13t-49.5 -4t-37.5 -9.5l-14 -6q-51 -10 -90.5 4t-59.5 41.5t-32.5 56.5t-15.5 50z" transform="scale(0.0341796875,-0.0341796875)" id="d9" />

     

       28
       28
       +
       <clipPath id="d10">

     

       29
       29
       +
       <use xlink:href="#d1" x="-202.12158203125" y="17.5">

     

       30
       30
       +
       <animate attributeName="x" dur="128s" values="-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       31
       31
       +
       <animate attributeName="y" dur="128s" values="19.324137087557;19.291309948237398;15.726205470907235;15.839487980635687;18.841995512517798;18.443879956274092;18.178921605760884;16.732545830356578;17.92377666271385;17.92720693456335;17.824816068448012;16.133531481019222;17.222678561165075;17.074127280821486;18.39204832494986;19.47927825179897;19.297581892372975;17.67670818971728;17.279416754903416;16.572962966597313;15.64369731757143;15.609779428363275;17.359575448389247;16.77386051141471;17.020059687602846;19.06715783131315;17.603011076584114;17.742041444105997;16.444493628460247;15.595432316563128;16.80057171504464;16.046789571945865;17.540895383348804;19.49473427277021;18.19791878938348;16.227373987292577;19.074286146331954;18.687039685686557;18.43760676757591;19.126374599590243;18.551541935332285;18.658990549847054;16.915147911366414;19.423906292288507;19.347603751592903;16.144738613216077;18.51601628660749;18.360603592949815;17.34562679096791;17.62142286449378;17.460055687400764;19.199328288378283;17.50336425052262;18.82609795916725;16.915696819474864;19.031403674325013;19.098802355026503;17.34404865952655;17.770820281680976;19.181321756767716;18.395091815488072;17.44643421944634;16.387244043964042;16.798668975075593;19.324137087557" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       32
       32
       +
       </use>

     

       33
       33
       +
       <use xlink:href="#d2" x="-149.79248046875" y="17.5">

     

       34
       34
       +
       <animate attributeName="x" dur="128s" values="-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       35
       35
       +
       <animate attributeName="y" dur="128s" values="18.298286552280974;16.164278741976503;19.13176198650438;16.572550051599265;19.145511343472187;16.73825249979784;19.32944684622463;18.324823225470418;17.51699526793327;17.570991024594207;18.105657595867164;17.85177884717794;16.747377298204;16.331273898151707;17.54756663342113;19.236617436535113;17.99306034690349;15.801501476296181;18.781599978848067;18.40379714990919;19.13061448380528;16.265610933216472;18.479130897109417;15.735035585594623;18.1116397097382;16.592398929348597;16.406466116979054;19.001964685792952;15.9250639305821;17.58945066143572;18.91577202873949;16.47932791187607;16.341915754782587;19.022327037465118;17.191670593558783;18.3678443956199;15.627492280506981;16.949427645212964;16.18752396850293;18.19106176565417;15.831612709618302;19.31824866138299;15.601378859307605;18.417694029767215;15.584579478892604;16.52276021622977;18.753417549609104;16.1284731547471;16.234955237003906;18.26598170405436;17.04226352541024;15.672643983189998;19.460006184811206;16.105680435026205;15.645075976973656;16.87680402214718;17.96095793329943;18.46983849250312;15.952459612072307;16.848855092786582;15.623243430506754;17.294613049969175;18.563879746352313;18.4597866548828;18.298286552280974" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       36
       36
       +
       </use>

     

       37
       37
       +
       <use xlink:href="#d3" x="-107.95654296875" y="17.5">

     

       38
       38
       +
       <animate attributeName="x" dur="128s" values="-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       39
       39
       +
       <animate attributeName="y" dur="128s" values="19.108080633400146;18.52264861470026;18.949783105301712;18.32138056020306;17.391118048393253;16.40211028139155;18.143313994628055;16.765223706913037;15.908196420198793;17.291287445676605;18.99905216539187;16.010145858475152;17.83982279244243;17.07181020042067;17.55921078705671;16.075317855907777;19.338924745948642;16.53638569300882;17.92431175621401;17.179022182622987;15.572132876499706;17.73180049535632;16.062277515845338;15.727123983292785;15.634224984994589;16.144660060724938;15.883487774532732;18.04030279015467;17.533036736142574;19.43386437619011;19.236521274787226;19.478100933038014;16.42989536267124;17.278789820478785;16.503123047364628;17.86494938219199;17.99665620301913;18.700829822537585;18.337993215317397;16.52643715395214;17.192067691050084;17.60475977512234;15.519299124214513;15.641997646831058;17.134905670888298;15.944699868919905;18.39507869147722;16.46346205776665;15.899092347019964;16.2270403132017;16.426101717508562;16.369414538873436;17.582945456191588;17.35761244457536;16.73890428350965;18.0670350307227;16.34979896797796;19.12625070692673;19.35246661931695;18.415724182310097;17.23493547515866;17.54600536886819;17.82430522416064;15.704938974423321;19.108080633400146" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       40
       40
       +
       </use>

     

       41
       41
       +
       <use xlink:href="#d4" x="-58.70361328125" y="17.5">

     

       42
       42
       +
       <animate attributeName="x" dur="128s" values="-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       43
       43
       +
       <animate attributeName="y" dur="128s" values="17.172065553929826;17.600258129279048;16.224900243300688;15.875147153833273;18.710620834821544;16.96473586617359;17.576838760395944;19.185801390367477;17.942041348412122;16.65832307012065;19.434084294213275;16.988906839736536;15.576220419238417;18.24124268925948;15.904647502452628;16.72368944282506;18.862446748475364;18.190287018579063;15.562888288857353;17.30569383680793;17.142697502294027;17.443451776008004;16.33298757343119;17.854980248616833;15.795157253901012;16.637437403921545;16.991608420187873;19.241081736194044;15.806192881440081;18.519936456991594;16.269436511867294;17.786210965317323;17.06712388145699;17.35289752899603;18.514322022942874;17.080170240631453;15.986917920534678;15.98708039888616;15.822042871014519;18.90028349561939;18.06396637532426;19.33867425358325;18.270610186618597;15.598675090616403;18.136638655375673;18.608847738599195;18.394073119932518;17.49179808171847;16.930338470923886;17.32814285580714;18.69488833471872;16.57576997531061;17.605214979225202;17.410238168226087;19.318787387845322;18.71739990767735;19.228215440872955;18.844022294289577;16.687054675658697;16.42650944460629;17.455157893793455;16.537621365444693;17.210615327823714;18.216560861444595;17.172065553929826" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       44
       44
       +
       </use>

     

       45
       45
       +
       <use xlink:href="#d5" x="0.22216796875" y="17.5">

     

       46
       46
       +
       <animate attributeName="x" dur="128s" values="0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       47
       47
       +
       <animate attributeName="y" dur="128s" values="19.17432090891334;17.843602321380402;18.7714130155966;15.883789243434663;16.924228911880682;19.490992085494522;16.086004191824927;17.167072173899555;15.767357581811265;15.844597426395598;19.082001408378922;19.45454811483057;18.092328311132544;16.014060019669373;16.685530078130782;16.426798573386762;18.182929303799767;18.224396029991347;17.255383347646312;17.595979073255904;15.948281054378096;17.663572996458;19.29975488689121;18.523109210244115;15.884617845083582;17.566005445975094;18.361459270541847;16.529042070197043;19.079586599991057;17.343763856511888;18.3129248390927;17.116653557850963;19.480532150225436;18.63126295102649;17.793761602906123;16.079060091574764;17.264733037914887;15.6175396385709;17.88065670082722;19.027270070813692;16.22169796803166;17.54068601291097;17.42983330112547;17.119658716133877;18.34184031877659;19.246679675941035;18.32157014751221;17.38999671817144;19.347909645664032;16.822910002269136;18.482451019047755;18.133940103096172;18.546435499777793;18.908292911225235;16.399995521690087;17.984996115800016;17.110895538815566;18.167887520270217;19.40893625858238;18.039323386996088;15.546423176316438;17.358195231067338;18.346305933794774;19.03288374740802;19.17432090891334" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       48
       48
       +
       </use>

     

       49
       49
       +
       <use xlink:href="#d6" x="39.46044921875" y="17.5">

     

       50
       50
       +
       <animate attributeName="x" dur="128s" values="39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       51
       51
       +
       <animate attributeName="y" dur="128s" values="18.100340133230947;18.76427960677236;15.56854958542948;19.272918260590053;18.417854534663782;17.92577580767231;19.121292120680188;19.038718908208274;15.901829522549633;18.762484865120747;18.568002963113543;16.298152186703973;18.476982770007467;17.844909774667702;16.265977695280423;18.716757583973582;16.051492512478955;17.949294825753448;17.23759193664957;16.514764443440473;17.764378493236507;17.36834751703482;16.319989978444156;19.36712314963816;15.791301469511914;15.512149152328888;17.441692517196124;18.848765989216805;18.133608253760478;18.518678354965495;17.44000181332036;18.19920941955595;16.839562548974325;16.567781057283934;17.511602832684538;15.610111265989747;15.819234359666222;18.515838961232788;16.194798551786665;18.501022903279;18.637503921917954;17.117963798501876;18.199972737584474;18.649689162774;18.956096402393687;16.039481015624983;16.150280579909165;17.026653676995508;17.358626773228572;16.679275487537627;15.541600951035464;17.729686691385268;19.367655038887854;16.965838731349027;17.651997680963095;17.029316620955058;17.271201914680454;18.981974830520677;16.733721777745423;18.096260968845616;17.435146143723358;17.654276690218072;19.158812502107267;15.806856043874703;18.100340133230947" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       52
       52
       +
       </use>

     

       53
       53
       +
       <use xlink:href="#d7" x="83.89404296875" y="17.5">

     

       54
       54
       +
       <animate attributeName="x" dur="128s" values="83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       55
       55
       +
       <animate attributeName="y" dur="128s" values="18.797481725009643;16.71667722862086;18.085233090770295;18.68336392379322;18.113637764536453;17.07186625951781;18.86281907321502;15.87179519261299;18.033257609922067;17.064503240471847;17.621863956694423;18.903764341757842;18.691459521790456;18.01536068585924;16.73231712105784;16.431655286240023;17.330152856150356;16.428438291628133;16.60994613353222;19.33101857042053;15.947864254575299;18.774465494972127;17.016856397885;16.958413517883915;16.773566048028542;15.809542248687551;17.32952080257834;16.16598872833203;17.26803588477986;16.667948647173095;19.078292820866682;19.186969808294943;17.267985939703188;18.058480895039562;19.21856883981926;16.804906581609988;15.898217555514494;16.45136751141817;16.25818481303237;18.213882620519925;16.99515331343813;16.92439166129364;18.680390540819793;16.432688333649505;18.734145478922123;18.031626653015802;17.101040476813708;18.794076465052875;16.869012990020046;19.01432525277344;19.20370368942909;17.510425286914632;18.25993322527753;19.29512844444772;18.470239621383687;18.504028192574403;18.977240613237264;19.24228357172442;18.514137267158166;19.41627674449577;16.666423873065096;17.989944804817238;18.18263173319903;16.96973709191637;18.797481725009643" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       56
       56
       +
       </use>

     

       57
       57
       +
       <use xlink:href="#d8" x="131.47216796875" y="17.5">

     

       58
       58
       +
       <animate attributeName="x" dur="128s" values="131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       59
       59
       +
       <animate attributeName="y" dur="128s" values="17.080711140751834;16.19909689599043;19.330849197546666;16.916014088414155;17.406536045303866;19.074260262355665;16.245800355520224;19.34267799195689;16.00822293662995;15.612118098267;16.903120016070773;16.936699184091;19.170577284050097;19.032777003417344;18.546243746631024;17.245711595069945;17.670745620739233;16.447078997643914;18.83411877139345;17.059644447003237;16.63861329760842;18.05122404994667;16.102314363712715;16.765402084652465;19.204710140778165;15.880181639513852;16.06879981708168;16.31738246474658;16.503920112292988;17.181590210211635;16.50070491698806;16.870759611949783;16.48592557630948;16.460353724003927;17.94241902371801;16.8458323460846;16.991156120537948;18.57126625214372;15.746753360697536;16.076169555707967;18.903294416161224;17.219109518635328;18.615213998315095;16.031173775225227;17.591960357928016;18.881495956075632;16.852166940218158;18.572714469152427;17.941504268568327;17.07829440318809;19.489404918376827;17.06921114821956;17.395173504645857;17.977942820530266;16.767355190057494;18.850555915282087;17.890144231633766;17.852002367688048;17.654345591803718;19.43973441409201;19.455720406809302;18.863165428982644;17.31830481199631;17.147159111082434;17.080711140751834" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       60
       60
       +
       </use>

     

       61
       61
       +
       <use xlink:href="#d9" x="161.41357421875" y="17.5">

     

       62
       62
       +
       <animate attributeName="x" dur="128s" values="161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       63
       63
       +
       <animate attributeName="y" dur="128s" values="17.599067165036384;15.684629436697106;15.933017326931099;19.48103060100494;16.012842062665598;19.2495377040299;18.21891658008112;19.160361116382305;15.80934600212031;16.723241372635748;18.691710970024175;15.535381801514223;15.923839916845994;16.902564830201552;16.192552924899463;16.087440861085202;18.17905744860602;15.86769170570407;19.3860173767723;18.097445829672445;15.699066515511975;19.094881340111694;16.466106118697553;17.425856057986543;17.735066325377616;16.054534187786356;17.50863562649949;15.741235287438158;16.29842816430794;19.174294144100713;18.788194352812756;17.591539631414015;18.22738288427816;19.00201258774057;16.059864800319716;17.468411654278867;16.027054087523638;15.966081954440476;15.932941808294345;16.3471435248239;15.712626296759733;16.3608679958098;17.016526709101825;17.99075155400056;18.934422862346082;19.116739330737822;18.370339170828384;17.528350763945213;19.16794945822426;16.15198700162683;15.92178177336796;18.771235410910514;18.008527128612236;16.341258113785702;17.009200698193677;16.689575235266634;17.22345328759322;17.21091887743478;17.092623332550826;18.69095955190943;18.746019425967766;17.74985102116934;17.39111954785501;16.63783697865552;17.599067165036384" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       64
       64
       +
       </use>

     

       65
       65
       +
       </clipPath>

     

       66
       66
       +
       </defs>

     

       67
       67
       +
       <rect x="-500" y="-50" width="1000" height="100" fill="url(#d0)" clip-path="url(#d10)" />

     

       68
       68
       +
       <g id="scrub" visibility="hidden">

     

       69
       69
       +
       <path d="M-168.0,40.0 L168.0,40.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       70
       70
       +
       <rect x="-168.0" y="40.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       71
       71
       +
       <animate attributeName="width" dur="128s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       72
       72
       +
       </rect>

     

       73
       73
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="128" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       74
       74
       +
       <rect x="-170.0" y="30.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       75
       75
       +
       <circle cx="-168.0" cy="40.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       76
       76
       +
       <animate attributeName="cx" dur="128s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       77
       77
       +
       </circle>

     

       78
       78
       +
       </g>

     

       79
       79
       +
       <g id="scrub-play" visibility="hidden">

     

       80
       80
       +
       <rect x="-191.0" y="36.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       81
       81
       +
       <path d="M-191.0,36.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       82
       82
       +
       </g>

     

       83
       83
       +
       <g id="scrub-pause" visibility="hidden">

     

       84
       84
       +
       <rect x="-191.0" y="36.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       85
       85
       +
       <rect x="-190.0" y="36.0" width="2.0" height="8.0" fill="#eee" />

     

       86
       86
       +
       <rect x="-186.0" y="36.0" width="2.0" height="8.0" fill="#eee" />

     

       87
       87
       +
       </g>

     

       88
       88
       +
       </g>

     

       89
       89
       +
       <script>/*<![CDATA[*/

     

       90
       90
       +
       /* Animation playback controls generated by drawsvg */

     

       91
       91
       +
       /* https://github.com/cduck/drawsvg/ */

     

       92
       92
       +
       function svgOnLoad(event) {

     

       93
       93
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       94
       94
       +
           if (event && event.target && event.target.ownerDocument) {

     

       95
       95
       +
               svgSetup(event.target.ownerDocument);

     

       96
       96
       +
           } else if (document && document.currentScript

     

       97
       97
       +
                      && document.currentScript.parentElement) {

     

       98
       98
       +
               svgSetup(document.currentScript.parentElement);

     

       99
       99
       +
           }

     

       100
       100
       +
       }

     

       101
       101
       +
       function svgSetup(doc) {

     

       102
       102
       +
           var svgRoot = doc.documentElement || doc;

     

       103
       103
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       104
       104
       +
           /* Block multiple setups */

     

       105
       105
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       106
       106
       +
               return;

     

       107
       107
       +
           }

     

       108
       108
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       109
       109
       +
           var scrubContainer = doc.getElementById("scrub");

     

       110
       110
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       111
       111
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       112
       112
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       113
       113
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       114
       114
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       115
       115
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       116
       116
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       117
       117
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       118
       118
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       119
       119
       +
           var paused = false;

     

       120
       120
       +
           var dragXOffset = 0;

     

       121
       121
       +
           var point = svgRoot.createSVGPoint();

     

       122
       122
       +
       

     

       123
       123
       +
           function screenToSvgX(p) {

     

       124
       124
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       125
       125
       +
               point.x = p.x;

     

       126
       126
       +
               point.y = p.y;

     

       127
       127
       +
               return point.matrixTransform(matrix).x;

     

       128
       128
       +
           };

     

       129
       129
       +
           function screenToProgress(p) {

     

       130
       130
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       131
       131
       +
               point.x = p.x;

     

       132
       132
       +
               point.y = p.y;

     

       133
       133
       +
               var x = point.matrixTransform(matrix).x;

     

       134
       134
       +
               if (x <= scrubXMin) {

     

       135
       135
       +
                   return scrubStartDelay / scrubTotalDur;

     

       136
       136
       +
               }

     

       137
       137
       +
               if (x >= scrubXMax) {

     

       138
       138
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       139
       139
       +
               }

     

       140
       140
       +
               return (scrubStartDelay/scrubTotalDur

     

       141
       141
       +
                       + (x - dragXOffset - scrubXMin)

     

       142
       142
       +
                         / (scrubXMax - scrubXMin)

     

       143
       143
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       144
       144
       +
                         / scrubTotalDur);

     

       145
       145
       +
           };

     

       146
       146
       +
           function currentScrubX() {

     

       147
       147
       +
               return scrubKnob.cx.animVal.value;

     

       148
       148
       +
           };

     

       149
       149
       +
           function pause() {

     

       150
       150
       +
               svgRoot.pauseAnimations();

     

       151
       151
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       152
       152
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       153
       153
       +
               paused = true;

     

       154
       154
       +
           };

     

       155
       155
       +
           function play() {

     

       156
       156
       +
               svgRoot.unpauseAnimations();

     

       157
       157
       +
               scrubPause.setAttribute("visibility", "visible");

     

       158
       158
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       159
       159
       +
               paused = false;

     

       160
       160
       +
           };

     

       161
       161
       +
           function scrub(playbackFraction) {

     

       162
       162
       +
               var t = scrubTotalDur * playbackFraction;

     

       163
       163
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       164
       164
       +
               var limit = scrubTotalDur - 10e-3;

     

       165
       165
       +
               if (t < 0) t = 0;

     

       166
       166
       +
               else if (t > limit) t = limit;

     

       167
       167
       +
               svgRoot.setCurrentTime(t);

     

       168
       168
       +
           };

     

       169
       169
       +
           function mousedown(e) {

     

       170
       170
       +
               svgRoot.pauseAnimations();

     

       171
       171
       +
               if (e.target == scrubKnob) {

     

       172
       172
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       173
       173
       +
               } else {

     

       174
       174
       +
                   dragXOffset = 0;

     

       175
       175
       +
               }

     

       176
       176
       +
               scrub(screenToProgress(e));

     

       177
       177
       +
               /* Global document listeners */

     

       178
       178
       +
               document.addEventListener('mousemove', mousemove);

     

       179
       179
       +
               document.addEventListener('mouseup', mouseup);

     

       180
       180
       +
               e.preventDefault();

     

       181
       181
       +
           };

     

       182
       182
       +
           function mouseup(e) {

     

       183
       183
       +
               dragXOffset = 0;

     

       184
       184
       +
               document.removeEventListener('mousemove', mousemove);

     

       185
       185
       +
               document.removeEventListener('mouseup', mouseup);

     

       186
       186
       +
               if (!paused) {

     

       187
       187
       +
                   svgRoot.unpauseAnimations();

     

       188
       188
       +
               }

     

       189
       189
       +
               e.preventDefault();

     

       190
       190
       +
           };

     

       191
       191
       +
           function mousemove(e) {

     

       192
       192
       +
               scrub(screenToProgress(e));

     

       193
       193
       +
           };

     

       194
       194
       +
           scrubPause.addEventListener("click", pause);

     

       195
       195
       +
           scrubPlay.addEventListener("click", play);

     

       196
       196
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       197
       197
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       198
       198
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       199
       199
       +
           if (scrubPauseOnLoad) {

     

       200
       200
       +
               pause();

     

       201
       201
       +
               scrub(0);

     

       202
       202
       +
           } else {

     

       203
       203
       +
               play();

     

       204
       204
       +
           }

     

       205
       205
       +
       };

     

       206
       206
       +
       svgOnLoad();

     

       207
       207
       +
       /*]]>*/</script>

     

       208
       208
       +
       </svg>

     

       209
       209
       +
       </body>

     

       210
       210
       +
       </html>

+362

examples/logo.ipynb

···

       1
       1
       +
       {

     

       2
       2
       +
        "cells": [

     

       3
       3
       +
         {

     

       4
       4
       +
          "cell_type": "code",

     

       5
       5
       +
          "execution_count": 1,

     

       6
       6
       +
          "id": "84fdd538",

     

       7
       7
       +
          "metadata": {},

     

       8
       8
       +
          "outputs": [

     

       9
       9
       +
           {

     

       10
       10
       +
            "data": {

     

       11
       11
       +
             "text/html": [

     

       12
       12
       +
              "<iframe src=\"data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CjxzdHlsZT4KaHRtbCxib2R5IHsKICBtYXJnaW46IDA7CiAgaGVpZ2h0OiAxMDAlOwp9CnN2ZyB7CiAgbWFyZ2luLWJvdHRvbTogLTUwLjBweDsKfQo8L3N0eWxlPjwvaGVhZD4KPGJvZHk+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgIHdpZHRoPSI0MDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSItMjAwLjAgLTUwLjAgNDAwIDEwMCIgb25sb2FkPSJzdmdPbkxvYWQoZXZlbnQpOyI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgeDE9Ii0xMjUwIiB5MT0iMCIgeDI9IjEyNTAiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImQwIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNTU0NGVlIiBzdG9wLW9wYWNpdHk9IjEiIC8+CjxzdG9wIG9mZnNldD0iMC4yIiBzdG9wLWNvbG9yPSIjNTU0NGVlIiBzdG9wLW9wYWNpdHk9IjEiIC8+CjxzdG9wIG9mZnNldD0iMC40IiBzdG9wLWNvbG9yPSIjZWUwMDU1IiBzdG9wLW9wYWNpdHk9IjEiIC8+CjxzdG9wIG9mZnNldD0iMC42IiBzdG9wLWNvbG9yPSIjZWUwMDU1IiBzdG9wLW9wYWNpdHk9IjEiIC8+CjxzdG9wIG9mZnNldD0iMC44IiBzdG9wLWNvbG9yPSIjNTU0NGVlIiBzdG9wLW9wYWNpdHk9IjEiIC8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzU1NDRlZSIgc3RvcC1vcGFjaXR5PSIxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZHVyPSIxMjhzIiB2YWx1ZXM9Ii0yMjUwOy0yNTAiIGtleVRpbWVzPSIwOzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIC8+CjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngyIiBkdXI9IjEyOHMiIHZhbHVlcz0iMjUwOzIyNTAiIGtleVRpbWVzPSIwOzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIC8+CjwvbGluZWFyR3JhZGllbnQ+CjxwYXRoIGQ9Ik04NSA0MzhxLTEgMjEgLTEgNDJxMCA1NSA4IDExM3ExMCA4MCA0NS41IDE1Ni41dDkzLjUgMTMxLjVxNTEgNDkgMTExLjUgODEuNXQxMTUuNSA0NS41cTU2IDE0IDExMSAxOHEyNiAyIDUwIDJxMjUgMCA0OSAtM3E0NCAtNSA3OS41IC0xMXQ1NC41IC0xMmwxOSAtN3EtMSA3IC0zIDE5LjV0LTUuNSA1MHQtNC41IDczLjV2MTdxMCAzMSAyIDY5cTQgNTAgMTIuNSA5Mi41dDI4IDg2dDQ3LjUgNzR0NzIuNSA1MHQxMDAuNSAxOS41IHE2MyAwIDExNS41IC0yMXQ4Ni41IC01NHQ2MCAtNzN0MzkuNSAtODAuNXQyMiAtNzMuNXQxMC41IC01NGwyIC0yMXEyIC0xNiA0LjUgLTQzLjV0NS41IC0xMTEuNXEyIC00MiAxIC04NHEwIC00MCAtMSAtODJxLTMgLTgyIC0xNy41IC0xOTR0LTQxLjUgLTIwOHE1NyAtMjcgODkgLTc3dDM1IC0xMDV2LTE1cTAgLTQ3IC0xNiAtOTVxLTE4IC01NCAtNTUgLTkzcS0yOCAtMzAgLTYzIC00N3EtMzYgLTE3IC02OCAtMjBxLTE1IC0xIC0zMCAtMSBxLTE4IC0xIC0zNSAxcS0zMyA0IC02MCAxM3QtNDguNSAxOHQtMzMuNSAxNWwtMTIgN3EtMTU5IC04MyAtMzcxIC05MXEtMTkgLTEgLTM4IDBxLTE4NyAwIC0zMjQgNjlxLTcgNCAtMTkgMTF0LTQ1IDMydC02MC41IDU0dC01NiA3NnQtNDEuNSA5OXEtMTcgNjcgLTIxIDE0MXpNNzI5IDQ4M3E1IC03NSA4MiAtNzVxMzUgMCA1Ny41IDIwLjV0MjIuNSA1NC41dC0yMiA2MHQtNTggMjZxLTM1IC0xIC02MCAtMjdxLTIyIC0yNCAtMjIgLTUydi03eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkMSIgLz4KPHBhdGggZD0iTTQ5IDU0OHEwIDgzIDMuNSAxNTQuNXQ5LjUgMTEyLjVsNiA0MXExNiA3MyA1NCAxMjV0ODAuNSA3NC41dDgzIDM0LjV0NjYuNSAxMmgyN2gxM3E1NiAwIDEwMiAtMTZxNTIgLTE4IDc5LjUgLTQ1LjV0NDYgLTU1LjV0MjQuNSAtNDdsNSAtMjBxMzkgNTYgOTAuNSA5MS41dDk2LjUgNDZ0ODQuNSAxMi41dDYyLjUgLTJsMjMgLTVxNTggLTE1IDk5LjUgLTQ2dDYwLjUgLTcwdDI3IC03MXQ5IC02NXYtMTRxMCAtNDEgLTEwIC03OSBxLTEyIC00NCAtMzAuNSAtNzF0LTM3IC00N3QtMzIuNSAtMjhsLTEzIC05cS00OSAtMjkgLTEwMyAtMzVxLTIwIC0yIC0zOCAtMnEtMzAgMCAtNTggN3EtNDIgMTEgLTc4LjUgMjYuNXQtNTYuNSAyOC41bC0yMCAxNHExMyAtOTkgMTMgLTE3OHEwIC0zNCAtMiAtNjRxLTggLTEwMiAtMzYgLTE2OC41dC02NS41IC0xMDh0LTc5IC02MS41dC03NiAtMjcuNXQtNTcuNSAtNi41aC0yM2gtOXEtNDIgMCAtODAgOXEtNDIgMTAgLTcxIDI3LjV0LTUzIDM5IHQtMzkgNDN0LTI1IDM5LjV0LTE0IDI5bC00IDExcS0yNyA4MiAtNDEgMTgxLjV0LTE0IDE4Mi41eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkMiIgLz4KPHBhdGggZD0iTTU5IDQ5NnEwIDIyIDUgNzRxNSA1OCAxNy41IDExMXQ0My41IDExOXQ3NiAxMTZ0MTIxLjUgODh0MTczLjUgNDdxMzEgMyA2MCAzcTQ4IDAgODggLThxNjYgLTEzIDEwMyAtMzR0NjQgLTUwdDM1IC00NC41dDEyIC0yNi41cTIgOCA3LjUgMjJ0MjMuNSA0Mi41dDQyIDUxdDY3IDQwLjV0OTQgMThxNjIgMCAxMTIuNSAtMjl0ODIgLTc1dDU0LjUgLTEwMS41dDMzLjUgLTExMXQxNi41IC0xMDEuNXQ3IC03NWwxIC0yOXEyIC00MiAyIC04MSBxMCAtNTQgLTQgLTEwM3EtNyAtODQgLTIyLjUgLTE0MXQtMzcuNSAtMTAydC00Ny41IC03MS41dC01MSAtNDQuNXQtNDkuNSAtMjV0LTQyLjUgLTEwLjV0LTI5LjUgLTIuNWwtMTEgMXEtMSAyIC0xMS41IDB0LTI5LjUgMnQtNDEuNSA4LjV0LTQ2LjUgMTkuNXQtNDUgMzQuNXQtMzcuNSA1M3QtMjIuNSA3NS41cS0yIC05IC04IC0yMy41dC0zNSAtNTAuNXQtNzEgLTYycS00MiAtMjUgLTEyMiAtNDBxLTQ1IC04IC05NSAtOHEtNDEgMCAtODYgNSBxLTggMCAtMjIuNSAxLjV0LTU1IDEyLjV0LTc4IDI4LjV0LTgzIDU0LjV0LTc4IDg1LjV0LTU1IDEyN3QtMjIuNSAxNzQuNXEtMiAxNyAtMiAzNXpNNjg2IDQ4M3E1IC03NSA4MiAtNzVxMzUgMCA1Ny41IDIwLjV0MjIuNSA1NC41dC0yMiA2MHQtNTggMjZxLTM1IC0xIC02MCAtMjdxLTIyIC0yNCAtMjIgLTUydi03eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkMyIgLz4KPHBhdGggZD0iTTM1IDczNXEtMiAyMyAtMiA0NHEwIDQzIDggNzlxMTIgNTYgMzUgOTAuNXQ1Mi41IDYwLjV0NTkuNSAzOC41dDU1LjUgMTkuNXQ0MS41IDlsMTYgMXE2OSAwIDEyNS41IC0xOS41dDk0IC01MHQ2Ni41IC03NHQ0NSAtODMuNXQyNiAtODYuNXQxMy41IC03NnQ0LjUgLTU4LjVxMiA1OSAyMiAxMDF0NDcgNjB0NTQgMjh0NDYgMTBsMTkgMXE0NCAwIDc5LjUgLTEzLjV0NTYuNSAtMzR0MzYuNSAtNDUuNXQyMS41IC01MHQ5LjUgLTQ1LjUgdDMuNSAtMzMuNXYtMTNxMCA4MSAxMSAxNDkuNXQzMCAxMTUuNXQ0NCA4NXQ1MiA2MHQ1NCAzOHQ1MiAyMi41dDQ0IDEwdDMwIDMuNWwxMSAtMXE2MyAtMSAxMTMuNSAtMjB0ODAuNSAtNDguNXQ1MSAtNjV0MjkuNSAtNzAuNXQxMyAtNjQuNXQzLjUgLTQ3LjV2LTE4cS0zIC05NiAtMTggLTE4Ny41dC0zNC41IC0xNTMuNXQtMzggLTExMHQtMzEuNSAtNzBsLTEyIC0yM3EtMzYgLTY2IC04NC41IC0xMTMuNXQtOTEuNSAtNjguNXQtODAuNSAtMzIgdC01OS41IC0xMWwtMjMgLTFxLTkyIDAgLTE2MS41IDI2LjV0LTEwNSA2MS41dC01NyA3OXQtMjYuNSA3MXQtNSA0NXEtMyAtMjIgLTEwIC00OHQtMzEgLTcxdC01OSAtNzkuNXQtOTkuNSAtNjAuNXQtMTQ2LjUgLTI2cS02NCAwIC0xMjEuNSAyNC41dC05NCA1OS41dC02NC41IDcwdC00MCA1OWwtMTIgMjVxLTYwIDExNSAtOTcgMjQ2LjV0LTQ1IDIwNS41eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkNCIgLz4KPHBhdGggZD0iTTcwIDE2OXYxNXYxMHEwIDUwIDE4IDkwcTIwIDQ0IDU0LjUgNzJ0NzYuNSA0OC41dDg0IDI5LjV0NzcgMTQuNXQ1NyA1LjVsMjIgMXEtNzUgMTggLTEzNC41IDQ0dC05NS41IDUzdC02MS41IDU2LjV0LTM2LjUgNTV0LTE2LjUgNDZ0LTUuNSAzMi41djEycTMgNzEgMzQgMTI4dDc3IDkxdDEwMS41IDU5dDExMC41IDM1LjV0MTAwIDE2LjV0NzMgNmgyOHExMTIgLTIgMTk0IC0xNi41dDEzMS41IC0zNnQ3OC41IC01My41dDM5IC02NiBxOCAtMjggNyAtNjF2LTE1cS0yIC01MCAtMjcuNSAtODh0LTY0LjUgLTU4dC04NS41IC0zMi41dC05MiAtMTV0LTgzLjUgLTIuNXQtNjIgMmwtMjMgM3E5NyAtMTIgMTc0LjUgLTM3LjV0MTIzIC01Ni41dDc4IC02NnQ0NiAtNjcuNXQyMCAtNTguNXQ1LjUgLTQydi0xNnEwIC03MyAtMjQuNSAtMTMzdC02NCAtOTcuNXQtODcuNSAtNjUuNXQtOTUuNSAtNDEuNXQtODcgLTIxLjV0LTYzLjUgLTEwbC0yNSAtMXEtMzkgLTIgLTc1IC0yIHEtODAgMCAtMTQ4IDhxLTk4IDExIC0xNTYuNSAzMi41dC0xMDAuNSA0OC41dC01OS41IDU1dC0yNyA1MS41dC04LjUgMzguNXoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMzQxNzk2ODc1LC0wLjAzNDE3OTY4NzUpIiBpZD0iZDUiIC8+CjxwYXRoIGQ9Ik0yMyA3NzNxMCA2NSAxOC41IDExOC41dDcwIDk3LjV0MTMyLjUgNjBxMzAgNiA1OCA2cTM2IDEgNzAgLTlxNjAgLTE2IDEwMS41IC01My41dDc2IC04NS41dDU1IC05OHQzNC41IC05MnQxOSAtNjlsNiAtMjdxMiAyMSA3IDU1dDMzLjUgMTE4dDcwLjUgMTQ0dDEyNSA5OHE1MiAyNCAxMTMgMjRxMzcgMCA3NyAtOXE3MSAtMTYgMTE1IC01NS41dDU4LjUgLTkwLjV0MTUuNSAtMTA5di04cTAgLTU0IC0xMiAtMTA2cS0xMyAtNTYgLTI3IC0xMDAgdC0yNiAtNzJsLTEyIC0yN3EtNCAtMTAgLTEyLjUgLTI4dC0zNyAtNjkuNXQtNTkuNSAtOTh0LTgwIC0xMDR0LTk5LjUgLTk4LjV0LTExNi41IC02OXQtMTMzIC0yOHEtOTggMCAtMTg5IDQ2dC0xNTQuNSAxMTB0LTExOS41IDE0OC41dC04NSAxNDV0LTUwIDExNS41cS0xOSA0OCAtMzEgMTAxLjV0LTEyIDExOC41eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkNiIgLz4KPHBhdGggZD0iTTg1IDM5MHEtMTEgNjEgLTExIDExN3EwIDkwIDI4IDE2N3EyMSA1NyA1MSAxMDguNXQ1OC41IDgzdDU0IDU1LjV0NDAuNSAzNGwxNiAxMHExMjkgNzcgMjg4IDg2cTI2IDEgNTEgMXExMzEgMCAyNDYgLTQwcTEzNyAtNDcgMjI4IC0xMzNxNjMgLTU5IDEwNi41IC0xNDAuNXQ2NCAtMTY0dDMwLjUgLTE2OC41cTcgLTY0IDcgLTEyM3EwIC0xOCAtMSAtMzZxLTMgLTc0IC04IC0xMzN0LTExIC05MmwtNiAtMzQgcS0yMSAtMTE5IC02NC41IC0yMTMuNXQtOTkuNSAtMTUzLjV0LTEyMi41IC0xMDF0LTEzNSAtNjB0LTEzNS41IC0yN3EtNDYgLTYgLTg4IC02cS0xOCAwIC0zNiAxcS01OSA0IC0xMDMuNSA5dC03MC41IDExbC0yNiA3cS03NiAyNyAtMTIwIDY4dC01NCA4MXEtNyAzMiAtNyA2MnYxMnEyIDM2IDExIDU4bDEwIDIycTE3IDM3IDQ4IDYxdDY0IDMydDY0IDExdDUwIDFsMjAgLTJxNjggMyAxMTYuNSAyMHQ2OSAzOXQzMS41IDQ0dDExIDM3djE1IHEtMTQgLTQgLTM5IC04LjV0LTk2IC04LjVxLTI0IC0xIC00NyAtMXEtNDYgMCAtODggNXEtNjUgOCAtMTQzLjUgNDEuNXQtMTMzLjUgOTIuNXEtODkgOTQgLTExOCAyNTN6TTY0MSA0NDRxNSAtNzUgODIgLTc1cTM1IDAgNTcuNSAyMC41dDIyLjUgNTQuNXQtMjIgNjB0LTU4IDI2cS0zNSAwIC02MCAtMjZxLTIyIC0yNCAtMjIgLTUzdi03eiIgdHJhbnNmb3JtPSJzY2FsZSgwLjAzNDE3OTY4NzUsLTAuMDM0MTc5Njg3NSkiIGlkPSJkNyIgLz4KPHBhdGggZD0iIiB0cmFuc2Zvcm09InNjYWxlKDAuMDM0MTc5Njg3NSwtMC4wMzQxNzk2ODc1KSIgaWQ9ImQ4IiAvPgo8cGF0aCBkPSJNNTkgMTEyNnEtMiA1NiAxOC41IDEwNC41dDU2IDgwdDc5IDU3dDg3LjUgMzkuNXQ4MC41IDIzLjV0NTkuNSAxMi41bDIzIDNxNzggNiAxNDcgLTEuNXQxMTcgLTI0LjV0ODcuNSAtMzl0NjMuNSAtNDUuNXQ0MC41IC00My41dDIzLjUgLTMybDYgLTEzcTM5IC03MyA1MiAtMTUydDIgLTE0OHQtMzMuNSAtMTM1LjV0LTUyLjUgLTExOHQtNTcgLTkxLjV0LTQ1IC02MWwtMTkgLTIxaDE5dDQ2LjUgLTQuNXQ2NiAtMTMuNXQ2OS41IC0yOS41IHQ2NSAtNDkuNXQ0NSAtNzYuNXQxNiAtMTA2LjVxLTEgLTQ1IC0yMiAtODIuNXQtNTUgLTYzdC03Ny41IC00NC41dC05MS41IC0zMHQtOTUuNSAtMTh0LTkwLjUgLTl0LTc2LjUgLTIuNXQtNTMuNSAwLjVsLTE5IDFxLTcwIDAgLTEzMCA4LjV0LTEwMyAyMi41dC03OCAzMnQtNTcuNSAzOHQtMzkgNDB0LTI1IDM4dC0xMy41IDMydC02IDIybC0xIDhxLTggNzEgMy41IDEyN3Q1MS41IDEwN3Q2OSA3OHQ5NyA4MXExNCAxMiAyMiAxOC41dDIxIDE2LjUgdDIzIDE5cTMwIDI1IDUzLjUgNTMuNXQzOS41IDYwdDE1LjUgNjQuNXQtMjAuNSA2MHQtNDggNDAuNXQtNTQgMTN0LTQ5LjUgLTR0LTM3LjUgLTkuNWwtMTQgLTZxLTUxIC0xMCAtOTAuNSA0dC01OS41IDQxLjV0LTMyLjUgNTYuNXQtMTUuNSA1MHoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMzQxNzk2ODc1LC0wLjAzNDE3OTY4NzUpIiBpZD0iZDkiIC8+CjxjbGlwUGF0aCBpZD0iZDEwIj4KPHVzZSB4bGluazpocmVmPSIjZDEiIHg9Ii0yMDIuMTIxNTgyMDMxMjUiIHk9IjE3LjUiPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjEyOHMiIHZhbHVlcz0iLTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1Oy0yMDIuMTIxNTgyMDMxMjU7LTIwMi4xMjE1ODIwMzEyNTstMjAyLjEyMTU4MjAzMTI1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTkuMzI0MTM3MDg3NTU3OzE5LjI5MTMwOTk0ODIzNzM5ODsxNS43MjYyMDU0NzA5MDcyMzU7MTUuODM5NDg3OTgwNjM1Njg3OzE4Ljg0MTk5NTUxMjUxNzc5ODsxOC40NDM4Nzk5NTYyNzQwOTI7MTguMTc4OTIxNjA1NzYwODg0OzE2LjczMjU0NTgzMDM1NjU3ODsxNy45MjM3NzY2NjI3MTM4NTsxNy45MjcyMDY5MzQ1NjMzNTsxNy44MjQ4MTYwNjg0NDgwMTI7MTYuMTMzNTMxNDgxMDE5MjIyOzE3LjIyMjY3ODU2MTE2NTA3NTsxNy4wNzQxMjcyODA4MjE0ODY7MTguMzkyMDQ4MzI0OTQ5ODY7MTkuNDc5Mjc4MjUxNzk4OTc7MTkuMjk3NTgxODkyMzcyOTc1OzE3LjY3NjcwODE4OTcxNzI4OzE3LjI3OTQxNjc1NDkwMzQxNjsxNi41NzI5NjI5NjY1OTczMTM7MTUuNjQzNjk3MzE3NTcxNDM7MTUuNjA5Nzc5NDI4MzYzMjc1OzE3LjM1OTU3NTQ0ODM4OTI0NzsxNi43NzM4NjA1MTE0MTQ3MTsxNy4wMjAwNTk2ODc2MDI4NDY7MTkuMDY3MTU3ODMxMzEzMTU7MTcuNjAzMDExMDc2NTg0MTE0OzE3Ljc0MjA0MTQ0NDEwNTk5NzsxNi40NDQ0OTM2Mjg0NjAyNDc7MTUuNTk1NDMyMzE2NTYzMTI4OzE2LjgwMDU3MTcxNTA0NDY0OzE2LjA0Njc4OTU3MTk0NTg2NTsxNy41NDA4OTUzODMzNDg4MDQ7MTkuNDk0NzM0MjcyNzcwMjE7MTguMTk3OTE4Nzg5MzgzNDg7MTYuMjI3MzczOTg3MjkyNTc3OzE5LjA3NDI4NjE0NjMzMTk1NDsxOC42ODcwMzk2ODU2ODY1NTc7MTguNDM3NjA2NzY3NTc1OTE7MTkuMTI2Mzc0NTk5NTkwMjQzOzE4LjU1MTU0MTkzNTMzMjI4NTsxOC42NTg5OTA1NDk4NDcwNTQ7MTYuOTE1MTQ3OTExMzY2NDE0OzE5LjQyMzkwNjI5MjI4ODUwNzsxOS4zNDc2MDM3NTE1OTI5MDM7MTYuMTQ0NzM4NjEzMjE2MDc3OzE4LjUxNjAxNjI4NjYwNzQ5OzE4LjM2MDYwMzU5Mjk0OTgxNTsxNy4zNDU2MjY3OTA5Njc5MTsxNy42MjE0MjI4NjQ0OTM3ODsxNy40NjAwNTU2ODc0MDA3NjQ7MTkuMTk5MzI4Mjg4Mzc4MjgzOzE3LjUwMzM2NDI1MDUyMjYyOzE4LjgyNjA5Nzk1OTE2NzI1OzE2LjkxNTY5NjgxOTQ3NDg2NDsxOS4wMzE0MDM2NzQzMjUwMTM7MTkuMDk4ODAyMzU1MDI2NTAzOzE3LjM0NDA0ODY1OTUyNjU1OzE3Ljc3MDgyMDI4MTY4MDk3NjsxOS4xODEzMjE3NTY3Njc3MTY7MTguMzk1MDkxODE1NDg4MDcyOzE3LjQ0NjQzNDIxOTQ0NjM0OzE2LjM4NzI0NDA0Mzk2NDA0MjsxNi43OTg2Njg5NzUwNzU1OTM7MTkuMzI0MTM3MDg3NTU3IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8L3VzZT4KPHVzZSB4bGluazpocmVmPSIjZDIiIHg9Ii0xNDkuNzkyNDgwNDY4NzUiIHk9IjE3LjUiPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjEyOHMiIHZhbHVlcz0iLTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1Oy0xNDkuNzkyNDgwNDY4NzU7LTE0OS43OTI0ODA0Njg3NTstMTQ5Ljc5MjQ4MDQ2ODc1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTguMjk4Mjg2NTUyMjgwOTc0OzE2LjE2NDI3ODc0MTk3NjUwMzsxOS4xMzE3NjE5ODY1MDQzODsxNi41NzI1NTAwNTE1OTkyNjU7MTkuMTQ1NTExMzQzNDcyMTg3OzE2LjczODI1MjQ5OTc5Nzg0OzE5LjMyOTQ0Njg0NjIyNDYzOzE4LjMyNDgyMzIyNTQ3MDQxODsxNy41MTY5OTUyNjc5MzMyNzsxNy41NzA5OTEwMjQ1OTQyMDc7MTguMTA1NjU3NTk1ODY3MTY0OzE3Ljg1MTc3ODg0NzE3Nzk0OzE2Ljc0NzM3NzI5ODIwNDsxNi4zMzEyNzM4OTgxNTE3MDc7MTcuNTQ3NTY2NjMzNDIxMTM7MTkuMjM2NjE3NDM2NTM1MTEzOzE3Ljk5MzA2MDM0NjkwMzQ5OzE1LjgwMTUwMTQ3NjI5NjE4MTsxOC43ODE1OTk5Nzg4NDgwNjc7MTguNDAzNzk3MTQ5OTA5MTk7MTkuMTMwNjE0NDgzODA1Mjg7MTYuMjY1NjEwOTMzMjE2NDcyOzE4LjQ3OTEzMDg5NzEwOTQxNzsxNS43MzUwMzU1ODU1OTQ2MjM7MTguMTExNjM5NzA5NzM4MjsxNi41OTIzOTg5MjkzNDg1OTc7MTYuNDA2NDY2MTE2OTc5MDU0OzE5LjAwMTk2NDY4NTc5Mjk1MjsxNS45MjUwNjM5MzA1ODIxOzE3LjU4OTQ1MDY2MTQzNTcyOzE4LjkxNTc3MjAyODczOTQ5OzE2LjQ3OTMyNzkxMTg3NjA3OzE2LjM0MTkxNTc1NDc4MjU4NzsxOS4wMjIzMjcwMzc0NjUxMTg7MTcuMTkxNjcwNTkzNTU4NzgzOzE4LjM2Nzg0NDM5NTYxOTk7MTUuNjI3NDkyMjgwNTA2OTgxOzE2Ljk0OTQyNzY0NTIxMjk2NDsxNi4xODc1MjM5Njg1MDI5MzsxOC4xOTEwNjE3NjU2NTQxNzsxNS44MzE2MTI3MDk2MTgzMDI7MTkuMzE4MjQ4NjYxMzgyOTk7MTUuNjAxMzc4ODU5MzA3NjA1OzE4LjQxNzY5NDAyOTc2NzIxNTsxNS41ODQ1Nzk0Nzg4OTI2MDQ7MTYuNTIyNzYwMjE2MjI5Nzc7MTguNzUzNDE3NTQ5NjA5MTA0OzE2LjEyODQ3MzE1NDc0NzE7MTYuMjM0OTU1MjM3MDAzOTA2OzE4LjI2NTk4MTcwNDA1NDM2OzE3LjA0MjI2MzUyNTQxMDI0OzE1LjY3MjY0Mzk4MzE4OTk5ODsxOS40NjAwMDYxODQ4MTEyMDY7MTYuMTA1NjgwNDM1MDI2MjA1OzE1LjY0NTA3NTk3Njk3MzY1NjsxNi44NzY4MDQwMjIxNDcxODsxNy45NjA5NTc5MzMyOTk0MzsxOC40Njk4Mzg0OTI1MDMxMjsxNS45NTI0NTk2MTIwNzIzMDc7MTYuODQ4ODU1MDkyNzg2NTgyOzE1LjYyMzI0MzQzMDUwNjc1NDsxNy4yOTQ2MTMwNDk5NjkxNzU7MTguNTYzODc5NzQ2MzUyMzEzOzE4LjQ1OTc4NjY1NDg4Mjg7MTguMjk4Mjg2NTUyMjgwOTc0IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8L3VzZT4KPHVzZSB4bGluazpocmVmPSIjZDMiIHg9Ii0xMDcuOTU2NTQyOTY4NzUiIHk9IjE3LjUiPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjEyOHMiIHZhbHVlcz0iLTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1Oy0xMDcuOTU2NTQyOTY4NzU7LTEwNy45NTY1NDI5Njg3NTstMTA3Ljk1NjU0Mjk2ODc1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTkuMTA4MDgwNjMzNDAwMTQ2OzE4LjUyMjY0ODYxNDcwMDI2OzE4Ljk0OTc4MzEwNTMwMTcxMjsxOC4zMjEzODA1NjAyMDMwNjsxNy4zOTExMTgwNDgzOTMyNTM7MTYuNDAyMTEwMjgxMzkxNTU7MTguMTQzMzEzOTk0NjI4MDU1OzE2Ljc2NTIyMzcwNjkxMzAzNzsxNS45MDgxOTY0MjAxOTg3OTM7MTcuMjkxMjg3NDQ1Njc2NjA1OzE4Ljk5OTA1MjE2NTM5MTg3OzE2LjAxMDE0NTg1ODQ3NTE1MjsxNy44Mzk4MjI3OTI0NDI0MzsxNy4wNzE4MTAyMDA0MjA2NzsxNy41NTkyMTA3ODcwNTY3MTsxNi4wNzUzMTc4NTU5MDc3Nzc7MTkuMzM4OTI0NzQ1OTQ4NjQyOzE2LjUzNjM4NTY5MzAwODgyOzE3LjkyNDMxMTc1NjIxNDAxOzE3LjE3OTAyMjE4MjYyMjk4NzsxNS41NzIxMzI4NzY0OTk3MDY7MTcuNzMxODAwNDk1MzU2MzI7MTYuMDYyMjc3NTE1ODQ1MzM4OzE1LjcyNzEyMzk4MzI5Mjc4NTsxNS42MzQyMjQ5ODQ5OTQ1ODk7MTYuMTQ0NjYwMDYwNzI0OTM4OzE1Ljg4MzQ4Nzc3NDUzMjczMjsxOC4wNDAzMDI3OTAxNTQ2NzsxNy41MzMwMzY3MzYxNDI1NzQ7MTkuNDMzODY0Mzc2MTkwMTE7MTkuMjM2NTIxMjc0Nzg3MjI2OzE5LjQ3ODEwMDkzMzAzODAxNDsxNi40Mjk4OTUzNjI2NzEyNDsxNy4yNzg3ODk4MjA0Nzg3ODU7MTYuNTAzMTIzMDQ3MzY0NjI4OzE3Ljg2NDk0OTM4MjE5MTk5OzE3Ljk5NjY1NjIwMzAxOTEzOzE4LjcwMDgyOTgyMjUzNzU4NTsxOC4zMzc5OTMyMTUzMTczOTc7MTYuNTI2NDM3MTUzOTUyMTQ7MTcuMTkyMDY3NjkxMDUwMDg0OzE3LjYwNDc1OTc3NTEyMjM0OzE1LjUxOTI5OTEyNDIxNDUxMzsxNS42NDE5OTc2NDY4MzEwNTg7MTcuMTM0OTA1NjcwODg4Mjk4OzE1Ljk0NDY5OTg2ODkxOTkwNTsxOC4zOTUwNzg2OTE0NzcyMjsxNi40NjM0NjIwNTc3NjY2NTsxNS44OTkwOTIzNDcwMTk5NjQ7MTYuMjI3MDQwMzEzMjAxNzsxNi40MjYxMDE3MTc1MDg1NjI7MTYuMzY5NDE0NTM4ODczNDM2OzE3LjU4Mjk0NTQ1NjE5MTU4ODsxNy4zNTc2MTI0NDQ1NzUzNjsxNi43Mzg5MDQyODM1MDk2NTsxOC4wNjcwMzUwMzA3MjI3OzE2LjM0OTc5ODk2Nzk3Nzk2OzE5LjEyNjI1MDcwNjkyNjczOzE5LjM1MjQ2NjYxOTMxNjk1OzE4LjQxNTcyNDE4MjMxMDA5NzsxNy4yMzQ5MzU0NzUxNTg2NjsxNy41NDYwMDUzNjg4NjgxOTsxNy44MjQzMDUyMjQxNjA2NDsxNS43MDQ5Mzg5NzQ0MjMzMjE7MTkuMTA4MDgwNjMzNDAwMTQ2IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8L3VzZT4KPHVzZSB4bGluazpocmVmPSIjZDQiIHg9Ii01OC43MDM2MTMyODEyNSIgeT0iMTcuNSI+CjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMTI4cyIgdmFsdWVzPSItNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1Oy01OC43MDM2MTMyODEyNTstNTguNzAzNjEzMjgxMjU7LTU4LjcwMzYxMzI4MTI1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTcuMTcyMDY1NTUzOTI5ODI2OzE3LjYwMDI1ODEyOTI3OTA0ODsxNi4yMjQ5MDAyNDMzMDA2ODg7MTUuODc1MTQ3MTUzODMzMjczOzE4LjcxMDYyMDgzNDgyMTU0NDsxNi45NjQ3MzU4NjYxNzM1OTsxNy41NzY4Mzg3NjAzOTU5NDQ7MTkuMTg1ODAxMzkwMzY3NDc3OzE3Ljk0MjA0MTM0ODQxMjEyMjsxNi42NTgzMjMwNzAxMjA2NTsxOS40MzQwODQyOTQyMTMyNzU7MTYuOTg4OTA2ODM5NzM2NTM2OzE1LjU3NjIyMDQxOTIzODQxNzsxOC4yNDEyNDI2ODkyNTk0ODsxNS45MDQ2NDc1MDI0NTI2Mjg7MTYuNzIzNjg5NDQyODI1MDY7MTguODYyNDQ2NzQ4NDc1MzY0OzE4LjE5MDI4NzAxODU3OTA2MzsxNS41NjI4ODgyODg4NTczNTM7MTcuMzA1NjkzODM2ODA3OTM7MTcuMTQyNjk3NTAyMjk0MDI3OzE3LjQ0MzQ1MTc3NjAwODAwNDsxNi4zMzI5ODc1NzM0MzExOTsxNy44NTQ5ODAyNDg2MTY4MzM7MTUuNzk1MTU3MjUzOTAxMDEyOzE2LjYzNzQzNzQwMzkyMTU0NTsxNi45OTE2MDg0MjAxODc4NzM7MTkuMjQxMDgxNzM2MTk0MDQ0OzE1LjgwNjE5Mjg4MTQ0MDA4MTsxOC41MTk5MzY0NTY5OTE1OTQ7MTYuMjY5NDM2NTExODY3Mjk0OzE3Ljc4NjIxMDk2NTMxNzMyMzsxNy4wNjcxMjM4ODE0NTY5OTsxNy4zNTI4OTc1Mjg5OTYwMzsxOC41MTQzMjIwMjI5NDI4NzQ7MTcuMDgwMTcwMjQwNjMxNDUzOzE1Ljk4NjkxNzkyMDUzNDY3ODsxNS45ODcwODAzOTg4ODYxNjsxNS44MjIwNDI4NzEwMTQ1MTk7MTguOTAwMjgzNDk1NjE5Mzk7MTguMDYzOTY2Mzc1MzI0MjY7MTkuMzM4Njc0MjUzNTgzMjU7MTguMjcwNjEwMTg2NjE4NTk3OzE1LjU5ODY3NTA5MDYxNjQwMzsxOC4xMzY2Mzg2NTUzNzU2NzM7MTguNjA4ODQ3NzM4NTk5MTk1OzE4LjM5NDA3MzExOTkzMjUxODsxNy40OTE3OTgwODE3MTg0NzsxNi45MzAzMzg0NzA5MjM4ODY7MTcuMzI4MTQyODU1ODA3MTQ7MTguNjk0ODg4MzM0NzE4NzI7MTYuNTc1NzY5OTc1MzEwNjE7MTcuNjA1MjE0OTc5MjI1MjAyOzE3LjQxMDIzODE2ODIyNjA4NzsxOS4zMTg3ODczODc4NDUzMjI7MTguNzE3Mzk5OTA3Njc3MzU7MTkuMjI4MjE1NDQwODcyOTU1OzE4Ljg0NDAyMjI5NDI4OTU3NzsxNi42ODcwNTQ2NzU2NTg2OTc7MTYuNDI2NTA5NDQ0NjA2Mjk7MTcuNDU1MTU3ODkzNzkzNDU1OzE2LjUzNzYyMTM2NTQ0NDY5MzsxNy4yMTA2MTUzMjc4MjM3MTQ7MTguMjE2NTYwODYxNDQ0NTk1OzE3LjE3MjA2NTU1MzkyOTgyNiIga2V5VGltZXM9IjA7MC4wMTY7MC4wMzE7MC4wNDc7MC4wNjI7MC4wNzg7MC4wOTQ7MC4xMDk7MC4xMjU7MC4xNDE7MC4xNTY7MC4xNzI7MC4xODg7MC4yMDM7MC4yMTk7MC4yMzQ7MC4yNTswLjI2NjswLjI4MTswLjI5NzswLjMxMjswLjMyODswLjM0NDswLjM1OTswLjM3NTswLjM5MTswLjQwNjswLjQyMjswLjQzODswLjQ1MzswLjQ2OTswLjQ4NDswLjU7MC41MTY7MC41MzE7MC41NDc7MC41NjI7MC41Nzg7MC41OTQ7MC42MDk7MC42MjU7MC42NDE7MC42NTY7MC42NzI7MC42ODg7MC43MDM7MC43MTk7MC43MzQ7MC43NTswLjc2NjswLjc4MTswLjc5NzswLjgxMjswLjgyODswLjg0NDswLjg1OTswLjg3NTswLjg5MTswLjkwNjswLjkyMjswLjkzODswLjk1MzswLjk2OTswLjk4NDsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMSIgLz4KPC91c2U+Cjx1c2UgeGxpbms6aHJlZj0iI2Q1IiB4PSIwLjIyMjE2Nzk2ODc1IiB5PSIxNy41Ij4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIxMjhzIiB2YWx1ZXM9IjAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NTswLjIyMjE2Nzk2ODc1OzAuMjIyMTY3OTY4NzU7MC4yMjIxNjc5Njg3NSIga2V5VGltZXM9IjA7MC4wMTY7MC4wMzE7MC4wNDc7MC4wNjI7MC4wNzg7MC4wOTQ7MC4xMDk7MC4xMjU7MC4xNDE7MC4xNTY7MC4xNzI7MC4xODg7MC4yMDM7MC4yMTk7MC4yMzQ7MC4yNTswLjI2NjswLjI4MTswLjI5NzswLjMxMjswLjMyODswLjM0NDswLjM1OTswLjM3NTswLjM5MTswLjQwNjswLjQyMjswLjQzODswLjQ1MzswLjQ2OTswLjQ4NDswLjU7MC41MTY7MC41MzE7MC41NDc7MC41NjI7MC41Nzg7MC41OTQ7MC42MDk7MC42MjU7MC42NDE7MC42NTY7MC42NzI7MC42ODg7MC43MDM7MC43MTk7MC43MzQ7MC43NTswLjc2NjswLjc4MTswLjc5NzswLjgxMjswLjgyODswLjg0NDswLjg1OTswLjg3NTswLjg5MTswLjkwNjswLjkyMjswLjkzODswLjk1MzswLjk2OTswLjk4NDsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMSIgLz4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgZHVyPSIxMjhzIiB2YWx1ZXM9IjE5LjE3NDMyMDkwODkxMzM0OzE3Ljg0MzYwMjMyMTM4MDQwMjsxOC43NzE0MTMwMTU1OTY2OzE1Ljg4Mzc4OTI0MzQzNDY2MzsxNi45MjQyMjg5MTE4ODA2ODI7MTkuNDkwOTkyMDg1NDk0NTIyOzE2LjA4NjAwNDE5MTgyNDkyNzsxNy4xNjcwNzIxNzM4OTk1NTU7MTUuNzY3MzU3NTgxODExMjY1OzE1Ljg0NDU5NzQyNjM5NTU5ODsxOS4wODIwMDE0MDgzNzg5MjI7MTkuNDU0NTQ4MTE0ODMwNTc7MTguMDkyMzI4MzExMTMyNTQ0OzE2LjAxNDA2MDAxOTY2OTM3MzsxNi42ODU1MzAwNzgxMzA3ODI7MTYuNDI2Nzk4NTczMzg2NzYyOzE4LjE4MjkyOTMwMzc5OTc2NzsxOC4yMjQzOTYwMjk5OTEzNDc7MTcuMjU1MzgzMzQ3NjQ2MzEyOzE3LjU5NTk3OTA3MzI1NTkwNDsxNS45NDgyODEwNTQzNzgwOTY7MTcuNjYzNTcyOTk2NDU4OzE5LjI5OTc1NDg4Njg5MTIxOzE4LjUyMzEwOTIxMDI0NDExNTsxNS44ODQ2MTc4NDUwODM1ODI7MTcuNTY2MDA1NDQ1OTc1MDk0OzE4LjM2MTQ1OTI3MDU0MTg0NzsxNi41MjkwNDIwNzAxOTcwNDM7MTkuMDc5NTg2NTk5OTkxMDU3OzE3LjM0Mzc2Mzg1NjUxMTg4ODsxOC4zMTI5MjQ4MzkwOTI3OzE3LjExNjY1MzU1Nzg1MDk2MzsxOS40ODA1MzIxNTAyMjU0MzY7MTguNjMxMjYyOTUxMDI2NDk7MTcuNzkzNzYxNjAyOTA2MTIzOzE2LjA3OTA2MDA5MTU3NDc2NDsxNy4yNjQ3MzMwMzc5MTQ4ODc7MTUuNjE3NTM5NjM4NTcwOTsxNy44ODA2NTY3MDA4MjcyMjsxOS4wMjcyNzAwNzA4MTM2OTI7MTYuMjIxNjk3OTY4MDMxNjY7MTcuNTQwNjg2MDEyOTEwOTc7MTcuNDI5ODMzMzAxMTI1NDc7MTcuMTE5NjU4NzE2MTMzODc3OzE4LjM0MTg0MDMxODc3NjU5OzE5LjI0NjY3OTY3NTk0MTAzNTsxOC4zMjE1NzAxNDc1MTIyMTsxNy4zODk5OTY3MTgxNzE0NDsxOS4zNDc5MDk2NDU2NjQwMzI7MTYuODIyOTEwMDAyMjY5MTM2OzE4LjQ4MjQ1MTAxOTA0Nzc1NTsxOC4xMzM5NDAxMDMwOTYxNzI7MTguNTQ2NDM1NDk5Nzc3NzkzOzE4LjkwODI5MjkxMTIyNTIzNTsxNi4zOTk5OTU1MjE2OTAwODc7MTcuOTg0OTk2MTE1ODAwMDE2OzE3LjExMDg5NTUzODgxNTU2NjsxOC4xNjc4ODc1MjAyNzAyMTc7MTkuNDA4OTM2MjU4NTgyMzg7MTguMDM5MzIzMzg2OTk2MDg4OzE1LjU0NjQyMzE3NjMxNjQzODsxNy4zNTgxOTUyMzEwNjczMzg7MTguMzQ2MzA1OTMzNzk0Nzc0OzE5LjAzMjg4Mzc0NzQwODAyOzE5LjE3NDMyMDkwODkxMzM0IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8L3VzZT4KPHVzZSB4bGluazpocmVmPSIjZDYiIHg9IjM5LjQ2MDQ0OTIxODc1IiB5PSIxNy41Ij4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIxMjhzIiB2YWx1ZXM9IjM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1OzM5LjQ2MDQ0OTIxODc1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTguMTAwMzQwMTMzMjMwOTQ3OzE4Ljc2NDI3OTYwNjc3MjM2OzE1LjU2ODU0OTU4NTQyOTQ4OzE5LjI3MjkxODI2MDU5MDA1MzsxOC40MTc4NTQ1MzQ2NjM3ODI7MTcuOTI1Nzc1ODA3NjcyMzE7MTkuMTIxMjkyMTIwNjgwMTg4OzE5LjAzODcxODkwODIwODI3NDsxNS45MDE4Mjk1MjI1NDk2MzM7MTguNzYyNDg0ODY1MTIwNzQ3OzE4LjU2ODAwMjk2MzExMzU0MzsxNi4yOTgxNTIxODY3MDM5NzM7MTguNDc2OTgyNzcwMDA3NDY3OzE3Ljg0NDkwOTc3NDY2NzcwMjsxNi4yNjU5Nzc2OTUyODA0MjM7MTguNzE2NzU3NTgzOTczNTgyOzE2LjA1MTQ5MjUxMjQ3ODk1NTsxNy45NDkyOTQ4MjU3NTM0NDg7MTcuMjM3NTkxOTM2NjQ5NTc7MTYuNTE0NzY0NDQzNDQwNDczOzE3Ljc2NDM3ODQ5MzIzNjUwNzsxNy4zNjgzNDc1MTcwMzQ4MjsxNi4zMTk5ODk5Nzg0NDQxNTY7MTkuMzY3MTIzMTQ5NjM4MTY7MTUuNzkxMzAxNDY5NTExOTE0OzE1LjUxMjE0OTE1MjMyODg4ODsxNy40NDE2OTI1MTcxOTYxMjQ7MTguODQ4NzY1OTg5MjE2ODA1OzE4LjEzMzYwODI1Mzc2MDQ3ODsxOC41MTg2NzgzNTQ5NjU0OTU7MTcuNDQwMDAxODEzMzIwMzY7MTguMTk5MjA5NDE5NTU1OTU7MTYuODM5NTYyNTQ4OTc0MzI1OzE2LjU2Nzc4MTA1NzI4MzkzNDsxNy41MTE2MDI4MzI2ODQ1Mzg7MTUuNjEwMTExMjY1OTg5NzQ3OzE1LjgxOTIzNDM1OTY2NjIyMjsxOC41MTU4Mzg5NjEyMzI3ODg7MTYuMTk0Nzk4NTUxNzg2NjY1OzE4LjUwMTAyMjkwMzI3OTsxOC42Mzc1MDM5MjE5MTc5NTQ7MTcuMTE3OTYzNzk4NTAxODc2OzE4LjE5OTk3MjczNzU4NDQ3NDsxOC42NDk2ODkxNjI3NzQ7MTguOTU2MDk2NDAyMzkzNjg3OzE2LjAzOTQ4MTAxNTYyNDk4MzsxNi4xNTAyODA1Nzk5MDkxNjU7MTcuMDI2NjUzNjc2OTk1NTA4OzE3LjM1ODYyNjc3MzIyODU3MjsxNi42NzkyNzU0ODc1Mzc2Mjc7MTUuNTQxNjAwOTUxMDM1NDY0OzE3LjcyOTY4NjY5MTM4NTI2ODsxOS4zNjc2NTUwMzg4ODc4NTQ7MTYuOTY1ODM4NzMxMzQ5MDI3OzE3LjY1MTk5NzY4MDk2MzA5NTsxNy4wMjkzMTY2MjA5NTUwNTg7MTcuMjcxMjAxOTE0NjgwNDU0OzE4Ljk4MTk3NDgzMDUyMDY3NzsxNi43MzM3MjE3Nzc3NDU0MjM7MTguMDk2MjYwOTY4ODQ1NjE2OzE3LjQzNTE0NjE0MzcyMzM1ODsxNy42NTQyNzY2OTAyMTgwNzI7MTkuMTU4ODEyNTAyMTA3MjY3OzE1LjgwNjg1NjA0Mzg3NDcwMzsxOC4xMDAzNDAxMzMyMzA5NDciIGtleVRpbWVzPSIwOzAuMDE2OzAuMDMxOzAuMDQ3OzAuMDYyOzAuMDc4OzAuMDk0OzAuMTA5OzAuMTI1OzAuMTQxOzAuMTU2OzAuMTcyOzAuMTg4OzAuMjAzOzAuMjE5OzAuMjM0OzAuMjU7MC4yNjY7MC4yODE7MC4yOTc7MC4zMTI7MC4zMjg7MC4zNDQ7MC4zNTk7MC4zNzU7MC4zOTE7MC40MDY7MC40MjI7MC40Mzg7MC40NTM7MC40Njk7MC40ODQ7MC41OzAuNTE2OzAuNTMxOzAuNTQ3OzAuNTYyOzAuNTc4OzAuNTk0OzAuNjA5OzAuNjI1OzAuNjQxOzAuNjU2OzAuNjcyOzAuNjg4OzAuNzAzOzAuNzE5OzAuNzM0OzAuNzU7MC43NjY7MC43ODE7MC43OTc7MC44MTI7MC44Mjg7MC44NDQ7MC44NTk7MC44NzU7MC44OTE7MC45MDY7MC45MjI7MC45Mzg7MC45NTM7MC45Njk7MC45ODQ7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDEiIC8+CjwvdXNlPgo8dXNlIHhsaW5rOmhyZWY9IiNkNyIgeD0iODMuODk0MDQyOTY4NzUiIHk9IjE3LjUiPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4IiBkdXI9IjEyOHMiIHZhbHVlcz0iODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzU7ODMuODk0MDQyOTY4NzUiIGtleVRpbWVzPSIwOzAuMDE2OzAuMDMxOzAuMDQ3OzAuMDYyOzAuMDc4OzAuMDk0OzAuMTA5OzAuMTI1OzAuMTQxOzAuMTU2OzAuMTcyOzAuMTg4OzAuMjAzOzAuMjE5OzAuMjM0OzAuMjU7MC4yNjY7MC4yODE7MC4yOTc7MC4zMTI7MC4zMjg7MC4zNDQ7MC4zNTk7MC4zNzU7MC4zOTE7MC40MDY7MC40MjI7MC40Mzg7MC40NTM7MC40Njk7MC40ODQ7MC41OzAuNTE2OzAuNTMxOzAuNTQ3OzAuNTYyOzAuNTc4OzAuNTk0OzAuNjA5OzAuNjI1OzAuNjQxOzAuNjU2OzAuNjcyOzAuNjg4OzAuNzAzOzAuNzE5OzAuNzM0OzAuNzU7MC43NjY7MC43ODE7MC43OTc7MC44MTI7MC44Mjg7MC44NDQ7MC44NTk7MC44NzU7MC44OTE7MC45MDY7MC45MjI7MC45Mzg7MC45NTM7MC45Njk7MC45ODQ7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDEiIC8+CjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGR1cj0iMTI4cyIgdmFsdWVzPSIxOC43OTc0ODE3MjUwMDk2NDM7MTYuNzE2Njc3MjI4NjIwODY7MTguMDg1MjMzMDkwNzcwMjk1OzE4LjY4MzM2MzkyMzc5MzIyOzE4LjExMzYzNzc2NDUzNjQ1MzsxNy4wNzE4NjYyNTk1MTc4MTsxOC44NjI4MTkwNzMyMTUwMjsxNS44NzE3OTUxOTI2MTI5OTsxOC4wMzMyNTc2MDk5MjIwNjc7MTcuMDY0NTAzMjQwNDcxODQ3OzE3LjYyMTg2Mzk1NjY5NDQyMzsxOC45MDM3NjQzNDE3NTc4NDI7MTguNjkxNDU5NTIxNzkwNDU2OzE4LjAxNTM2MDY4NTg1OTI0OzE2LjczMjMxNzEyMTA1Nzg0OzE2LjQzMTY1NTI4NjI0MDAyMzsxNy4zMzAxNTI4NTYxNTAzNTY7MTYuNDI4NDM4MjkxNjI4MTMzOzE2LjYwOTk0NjEzMzUzMjIyOzE5LjMzMTAxODU3MDQyMDUzOzE1Ljk0Nzg2NDI1NDU3NTI5OTsxOC43NzQ0NjU0OTQ5NzIxMjc7MTcuMDE2ODU2Mzk3ODg1OzE2Ljk1ODQxMzUxNzg4MzkxNTsxNi43NzM1NjYwNDgwMjg1NDI7MTUuODA5NTQyMjQ4Njg3NTUxOzE3LjMyOTUyMDgwMjU3ODM0OzE2LjE2NTk4ODcyODMzMjAzOzE3LjI2ODAzNTg4NDc3OTg2OzE2LjY2Nzk0ODY0NzE3MzA5NTsxOS4wNzgyOTI4MjA4NjY2ODI7MTkuMTg2OTY5ODA4Mjk0OTQzOzE3LjI2Nzk4NTkzOTcwMzE4ODsxOC4wNTg0ODA4OTUwMzk1NjI7MTkuMjE4NTY4ODM5ODE5MjY7MTYuODA0OTA2NTgxNjA5OTg4OzE1Ljg5ODIxNzU1NTUxNDQ5NDsxNi40NTEzNjc1MTE0MTgxNzsxNi4yNTgxODQ4MTMwMzIzNzsxOC4yMTM4ODI2MjA1MTk5MjU7MTYuOTk1MTUzMzEzNDM4MTM7MTYuOTI0MzkxNjYxMjkzNjQ7MTguNjgwMzkwNTQwODE5NzkzOzE2LjQzMjY4ODMzMzY0OTUwNTsxOC43MzQxNDU0Nzg5MjIxMjM7MTguMDMxNjI2NjUzMDE1ODAyOzE3LjEwMTA0MDQ3NjgxMzcwODsxOC43OTQwNzY0NjUwNTI4NzU7MTYuODY5MDEyOTkwMDIwMDQ2OzE5LjAxNDMyNTI1Mjc3MzQ0OzE5LjIwMzcwMzY4OTQyOTA5OzE3LjUxMDQyNTI4NjkxNDYzMjsxOC4yNTk5MzMyMjUyNzc1MzsxOS4yOTUxMjg0NDQ0NDc3MjsxOC40NzAyMzk2MjEzODM2ODc7MTguNTA0MDI4MTkyNTc0NDAzOzE4Ljk3NzI0MDYxMzIzNzI2NDsxOS4yNDIyODM1NzE3MjQ0MjsxOC41MTQxMzcyNjcxNTgxNjY7MTkuNDE2Mjc2NzQ0NDk1Nzc7MTYuNjY2NDIzODczMDY1MDk2OzE3Ljk4OTk0NDgwNDgxNzIzODsxOC4xODI2MzE3MzMxOTkwMzsxNi45Njk3MzcwOTE5MTYzNzsxOC43OTc0ODE3MjUwMDk2NDMiIGtleVRpbWVzPSIwOzAuMDE2OzAuMDMxOzAuMDQ3OzAuMDYyOzAuMDc4OzAuMDk0OzAuMTA5OzAuMTI1OzAuMTQxOzAuMTU2OzAuMTcyOzAuMTg4OzAuMjAzOzAuMjE5OzAuMjM0OzAuMjU7MC4yNjY7MC4yODE7MC4yOTc7MC4zMTI7MC4zMjg7MC4zNDQ7MC4zNTk7MC4zNzU7MC4zOTE7MC40MDY7MC40MjI7MC40Mzg7MC40NTM7MC40Njk7MC40ODQ7MC41OzAuNTE2OzAuNTMxOzAuNTQ3OzAuNTYyOzAuNTc4OzAuNTk0OzAuNjA5OzAuNjI1OzAuNjQxOzAuNjU2OzAuNjcyOzAuNjg4OzAuNzAzOzAuNzE5OzAuNzM0OzAuNzU7MC43NjY7MC43ODE7MC43OTc7MC44MTI7MC44Mjg7MC44NDQ7MC44NTk7MC44NzU7MC44OTE7MC45MDY7MC45MjI7MC45Mzg7MC45NTM7MC45Njk7MC45ODQ7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDEiIC8+CjwvdXNlPgo8dXNlIHhsaW5rOmhyZWY9IiNkOCIgeD0iMTMxLjQ3MjE2Nzk2ODc1IiB5PSIxNy41Ij4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieCIgZHVyPSIxMjhzIiB2YWx1ZXM9IjEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzU7MTMxLjQ3MjE2Nzk2ODc1OzEzMS40NzIxNjc5Njg3NTsxMzEuNDcyMTY3OTY4NzUiIGtleVRpbWVzPSIwOzAuMDE2OzAuMDMxOzAuMDQ3OzAuMDYyOzAuMDc4OzAuMDk0OzAuMTA5OzAuMTI1OzAuMTQxOzAuMTU2OzAuMTcyOzAuMTg4OzAuMjAzOzAuMjE5OzAuMjM0OzAuMjU7MC4yNjY7MC4yODE7MC4yOTc7MC4zMTI7MC4zMjg7MC4zNDQ7MC4zNTk7MC4zNzU7MC4zOTE7MC40MDY7MC40MjI7MC40Mzg7MC40NTM7MC40Njk7MC40ODQ7MC41OzAuNTE2OzAuNTMxOzAuNTQ3OzAuNTYyOzAuNTc4OzAuNTk0OzAuNjA5OzAuNjI1OzAuNjQxOzAuNjU2OzAuNjcyOzAuNjg4OzAuNzAzOzAuNzE5OzAuNzM0OzAuNzU7MC43NjY7MC43ODE7MC43OTc7MC44MTI7MC44Mjg7MC44NDQ7MC44NTk7MC44NzU7MC44OTE7MC45MDY7MC45MjI7MC45Mzg7MC45NTM7MC45Njk7MC45ODQ7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDE7MC41IDAgMC41IDEiIC8+CjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGR1cj0iMTI4cyIgdmFsdWVzPSIxNy4wODA3MTExNDA3NTE4MzQ7MTYuMTk5MDk2ODk1OTkwNDM7MTkuMzMwODQ5MTk3NTQ2NjY2OzE2LjkxNjAxNDA4ODQxNDE1NTsxNy40MDY1MzYwNDUzMDM4NjY7MTkuMDc0MjYwMjYyMzU1NjY1OzE2LjI0NTgwMDM1NTUyMDIyNDsxOS4zNDI2Nzc5OTE5NTY4OTsxNi4wMDgyMjI5MzY2Mjk5NTsxNS42MTIxMTgwOTgyNjc7MTYuOTAzMTIwMDE2MDcwNzczOzE2LjkzNjY5OTE4NDA5MTsxOS4xNzA1NzcyODQwNTAwOTc7MTkuMDMyNzc3MDAzNDE3MzQ0OzE4LjU0NjI0Mzc0NjYzMTAyNDsxNy4yNDU3MTE1OTUwNjk5NDU7MTcuNjcwNzQ1NjIwNzM5MjMzOzE2LjQ0NzA3ODk5NzY0MzkxNDsxOC44MzQxMTg3NzEzOTM0NTsxNy4wNTk2NDQ0NDcwMDMyMzc7MTYuNjM4NjEzMjk3NjA4NDI7MTguMDUxMjI0MDQ5OTQ2Njc7MTYuMTAyMzE0MzYzNzEyNzE1OzE2Ljc2NTQwMjA4NDY1MjQ2NTsxOS4yMDQ3MTAxNDA3NzgxNjU7MTUuODgwMTgxNjM5NTEzODUyOzE2LjA2ODc5OTgxNzA4MTY4OzE2LjMxNzM4MjQ2NDc0NjU4OzE2LjUwMzkyMDExMjI5Mjk4ODsxNy4xODE1OTAyMTAyMTE2MzU7MTYuNTAwNzA0OTE2OTg4MDY7MTYuODcwNzU5NjExOTQ5NzgzOzE2LjQ4NTkyNTU3NjMwOTQ4OzE2LjQ2MDM1MzcyNDAwMzkyNzsxNy45NDI0MTkwMjM3MTgwMTsxNi44NDU4MzIzNDYwODQ2OzE2Ljk5MTE1NjEyMDUzNzk0ODsxOC41NzEyNjYyNTIxNDM3MjsxNS43NDY3NTMzNjA2OTc1MzY7MTYuMDc2MTY5NTU1NzA3OTY3OzE4LjkwMzI5NDQxNjE2MTIyNDsxNy4yMTkxMDk1MTg2MzUzMjg7MTguNjE1MjEzOTk4MzE1MDk1OzE2LjAzMTE3Mzc3NTIyNTIyNzsxNy41OTE5NjAzNTc5MjgwMTY7MTguODgxNDk1OTU2MDc1NjMyOzE2Ljg1MjE2Njk0MDIxODE1ODsxOC41NzI3MTQ0NjkxNTI0Mjc7MTcuOTQxNTA0MjY4NTY4MzI3OzE3LjA3ODI5NDQwMzE4ODA5OzE5LjQ4OTQwNDkxODM3NjgyNzsxNy4wNjkyMTExNDgyMTk1NjsxNy4zOTUxNzM1MDQ2NDU4NTc7MTcuOTc3OTQyODIwNTMwMjY2OzE2Ljc2NzM1NTE5MDA1NzQ5NDsxOC44NTA1NTU5MTUyODIwODc7MTcuODkwMTQ0MjMxNjMzNzY2OzE3Ljg1MjAwMjM2NzY4ODA0ODsxNy42NTQzNDU1OTE4MDM3MTg7MTkuNDM5NzM0NDE0MDkyMDE7MTkuNDU1NzIwNDA2ODA5MzAyOzE4Ljg2MzE2NTQyODk4MjY0NDsxNy4zMTgzMDQ4MTE5OTYzMTsxNy4xNDcxNTkxMTEwODI0MzQ7MTcuMDgwNzExMTQwNzUxODM0IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8L3VzZT4KPHVzZSB4bGluazpocmVmPSIjZDkiIHg9IjE2MS40MTM1NzQyMTg3NSIgeT0iMTcuNSI+CjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9IngiIGR1cj0iMTI4cyIgdmFsdWVzPSIxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1OzE2MS40MTM1NzQyMTg3NTsxNjEuNDEzNTc0MjE4NzU7MTYxLjQxMzU3NDIxODc1IiBrZXlUaW1lcz0iMDswLjAxNjswLjAzMTswLjA0NzswLjA2MjswLjA3ODswLjA5NDswLjEwOTswLjEyNTswLjE0MTswLjE1NjswLjE3MjswLjE4ODswLjIwMzswLjIxOTswLjIzNDswLjI1OzAuMjY2OzAuMjgxOzAuMjk3OzAuMzEyOzAuMzI4OzAuMzQ0OzAuMzU5OzAuMzc1OzAuMzkxOzAuNDA2OzAuNDIyOzAuNDM4OzAuNDUzOzAuNDY5OzAuNDg0OzAuNTswLjUxNjswLjUzMTswLjU0NzswLjU2MjswLjU3ODswLjU5NDswLjYwOTswLjYyNTswLjY0MTswLjY1NjswLjY3MjswLjY4ODswLjcwMzswLjcxOTswLjczNDswLjc1OzAuNzY2OzAuNzgxOzAuNzk3OzAuODEyOzAuODI4OzAuODQ0OzAuODU5OzAuODc1OzAuODkxOzAuOTA2OzAuOTIyOzAuOTM4OzAuOTUzOzAuOTY5OzAuOTg0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxOzAuNSAwIDAuNSAxIiAvPgo8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiBkdXI9IjEyOHMiIHZhbHVlcz0iMTcuNTk5MDY3MTY1MDM2Mzg0OzE1LjY4NDYyOTQzNjY5NzEwNjsxNS45MzMwMTczMjY5MzEwOTk7MTkuNDgxMDMwNjAxMDA0OTQ7MTYuMDEyODQyMDYyNjY1NTk4OzE5LjI0OTUzNzcwNDAyOTk7MTguMjE4OTE2NTgwMDgxMTI7MTkuMTYwMzYxMTE2MzgyMzA1OzE1LjgwOTM0NjAwMjEyMDMxOzE2LjcyMzI0MTM3MjYzNTc0ODsxOC42OTE3MTA5NzAwMjQxNzU7MTUuNTM1MzgxODAxNTE0MjIzOzE1LjkyMzgzOTkxNjg0NTk5NDsxNi45MDI1NjQ4MzAyMDE1NTI7MTYuMTkyNTUyOTI0ODk5NDYzOzE2LjA4NzQ0MDg2MTA4NTIwMjsxOC4xNzkwNTc0NDg2MDYwMjsxNS44Njc2OTE3MDU3MDQwNzsxOS4zODYwMTczNzY3NzIzOzE4LjA5NzQ0NTgyOTY3MjQ0NTsxNS42OTkwNjY1MTU1MTE5NzU7MTkuMDk0ODgxMzQwMTExNjk0OzE2LjQ2NjEwNjExODY5NzU1MzsxNy40MjU4NTYwNTc5ODY1NDM7MTcuNzM1MDY2MzI1Mzc3NjE2OzE2LjA1NDUzNDE4Nzc4NjM1NjsxNy41MDg2MzU2MjY0OTk0OTsxNS43NDEyMzUyODc0MzgxNTg7MTYuMjk4NDI4MTY0MzA3OTQ7MTkuMTc0Mjk0MTQ0MTAwNzEzOzE4Ljc4ODE5NDM1MjgxMjc1NjsxNy41OTE1Mzk2MzE0MTQwMTU7MTguMjI3MzgyODg0Mjc4MTY7MTkuMDAyMDEyNTg3NzQwNTc7MTYuMDU5ODY0ODAwMzE5NzE2OzE3LjQ2ODQxMTY1NDI3ODg2NzsxNi4wMjcwNTQwODc1MjM2Mzg7MTUuOTY2MDgxOTU0NDQwNDc2OzE1LjkzMjk0MTgwODI5NDM0NTsxNi4zNDcxNDM1MjQ4MjM5OzE1LjcxMjYyNjI5Njc1OTczMzsxNi4zNjA4Njc5OTU4MDk4OzE3LjAxNjUyNjcwOTEwMTgyNTsxNy45OTA3NTE1NTQwMDA1NjsxOC45MzQ0MjI4NjIzNDYwODI7MTkuMTE2NzM5MzMwNzM3ODIyOzE4LjM3MDMzOTE3MDgyODM4NDsxNy41MjgzNTA3NjM5NDUyMTM7MTkuMTY3OTQ5NDU4MjI0MjY7MTYuMTUxOTg3MDAxNjI2ODM7MTUuOTIxNzgxNzczMzY3OTY7MTguNzcxMjM1NDEwOTEwNTE0OzE4LjAwODUyNzEyODYxMjIzNjsxNi4zNDEyNTgxMTM3ODU3MDI7MTcuMDA5MjAwNjk4MTkzNjc3OzE2LjY4OTU3NTIzNTI2NjYzNDsxNy4yMjM0NTMyODc1OTMyMjsxNy4yMTA5MTg4Nzc0MzQ3ODsxNy4wOTI2MjMzMzI1NTA4MjY7MTguNjkwOTU5NTUxOTA5NDM7MTguNzQ2MDE5NDI1OTY3NzY2OzE3Ljc0OTg1MTAyMTE2OTM0OzE3LjM5MTExOTU0Nzg1NTAxOzE2LjYzNzgzNjk3ODY1NTUyOzE3LjU5OTA2NzE2NTAzNjM4NCIga2V5VGltZXM9IjA7MC4wMTY7MC4wMzE7MC4wNDc7MC4wNjI7MC4wNzg7MC4wOTQ7MC4xMDk7MC4xMjU7MC4xNDE7MC4xNTY7MC4xNzI7MC4xODg7MC4yMDM7MC4yMTk7MC4yMzQ7MC4yNTswLjI2NjswLjI4MTswLjI5NzswLjMxMjswLjMyODswLjM0NDswLjM1OTswLjM3NTswLjM5MTswLjQwNjswLjQyMjswLjQzODswLjQ1MzswLjQ2OTswLjQ4NDswLjU7MC41MTY7MC41MzE7MC41NDc7MC41NjI7MC41Nzg7MC41OTQ7MC42MDk7MC42MjU7MC42NDE7MC42NTY7MC42NzI7MC42ODg7MC43MDM7MC43MTk7MC43MzQ7MC43NTswLjc2NjswLjc4MTswLjc5NzswLjgxMjswLjgyODswLjg0NDswLjg1OTswLjg3NTswLjg5MTswLjkwNjswLjkyMjswLjkzODswLjk1MzswLjk2OTswLjk4NDsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMTswLjUgMCAwLjUgMSIgLz4KPC91c2U+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPHJlY3QgeD0iLTUwMCIgeT0iLTUwIiB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjZDApIiBjbGlwLXBhdGg9InVybCgjZDEwKSIgLz4KPGcgaWQ9InNjcnViIiB2aXNpYmlsaXR5PSJoaWRkZW4iPgo8cGF0aCBkPSJNLTE2OC4wLDQwLjAgTDE2OC4wLDQwLjAiIHN0cm9rZT0iI2NjYyIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CjxyZWN0IHg9Ii0xNjguMCIgeT0iNDAuMCIgd2lkdGg9IjAiIGhlaWdodD0iMC4wMDEiIHN0cm9rZT0iIzA1ZiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0id2lkdGgiIGR1cj0iMTI4cyIgdmFsdWVzPSIwOzMzNiIga2V5VGltZXM9IjA7MSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZpbGw9ImZyZWV6ZSIgLz4KPC9yZWN0Pgo8ZyBpZD0ic2NydWItY2FwdHVyZSIgZGF0YS14bWluPSItMTY4LjAiIGRhdGEteG1heD0iMTY4LjAiIGRhdGEtdG90YWxkdXI9IjEyOCIgZGF0YS1zdGFydGRlbGF5PSIwIiBkYXRhLWVuZGRlbGF5PSIwIiBkYXRhLXBhdXNlb25sb2FkPSIwIj4KPHJlY3QgeD0iLTE3MC4wIiB5PSIzMC4wIiB3aWR0aD0iMzQwIiBoZWlnaHQ9IjIwIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDApIiAvPgo8Y2lyY2xlIGN4PSItMTY4LjAiIGN5PSI0MC4wIiByPSI2IiBmaWxsPSIjMDVmIiBpZD0ic2NydWIta25vYiIgdmlzaWJpbGl0eT0iaGlkZGVuIj4KPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGR1cj0iMTI4cyIgdmFsdWVzPSItMTY4LjA7MTY4LjAiIGtleVRpbWVzPSIwOzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBmaWxsPSJmcmVlemUiIC8+CjwvY2lyY2xlPgo8L2c+CjxnIGlkPSJzY3J1Yi1wbGF5IiB2aXNpYmlsaXR5PSJoaWRkZW4iPgo8cmVjdCB4PSItMTkxLjAiIHk9IjM2LjAiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwNWYiIHN0cm9rZT0iIzA1ZiIgc3Ryb2tlLXdpZHRoPSI4IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8cGF0aCBkPSJNLTE5MS4wLDM2LjAgdjguMCBsOC4wLC00LjAgWiIgZmlsbD0iI2VlZSIgLz4KPC9nPgo8ZyBpZD0ic2NydWItcGF1c2UiIHZpc2liaWxpdHk9ImhpZGRlbiI+CjxyZWN0IHg9Ii0xOTEuMCIgeT0iMzYuMCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzA1ZiIgc3Ryb2tlPSIjMDVmIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CjxyZWN0IHg9Ii0xOTAuMCIgeT0iMzYuMCIgd2lkdGg9IjIuMCIgaGVpZ2h0PSI4LjAiIGZpbGw9IiNlZWUiIC8+CjxyZWN0IHg9Ii0xODYuMCIgeT0iMzYuMCIgd2lkdGg9IjIuMCIgaGVpZ2h0PSI4LjAiIGZpbGw9IiNlZWUiIC8+CjwvZz4KPC9nPgo8c2NyaXB0Pi8qPCFbQ0RBVEFbKi8KLyogQW5pbWF0aW9uIHBsYXliYWNrIGNvbnRyb2xzIGdlbmVyYXRlZCBieSBkcmF3c3ZnICovCi8qIGh0dHBzOi8vZ2l0aHViLmNvbS9jZHVjay9kcmF3c3ZnLyAqLwpmdW5jdGlvbiBzdmdPbkxvYWQoZXZlbnQpIHsKICAgIC8qIFN1cHBvcnQgc3RhbmRhbG9uZSBTVkcgb3IgZW1iZWRkZWQgaW4gSFRNTCBvciBpZnJhbWUgKi8KICAgIGlmIChldmVudCAmJiBldmVudC50YXJnZXQgJiYgZXZlbnQudGFyZ2V0Lm93bmVyRG9jdW1lbnQpIHsKICAgICAgICBzdmdTZXR1cChldmVudC50YXJnZXQub3duZXJEb2N1bWVudCk7CiAgICB9IGVsc2UgaWYgKGRvY3VtZW50ICYmIGRvY3VtZW50LmN1cnJlbnRTY3JpcHQKICAgICAgICAgICAgICAgJiYgZG9jdW1lbnQuY3VycmVudFNjcmlwdC5wYXJlbnRFbGVtZW50KSB7CiAgICAgICAgc3ZnU2V0dXAoZG9jdW1lbnQuY3VycmVudFNjcmlwdC5wYXJlbnRFbGVtZW50KTsKICAgIH0KfQpmdW5jdGlvbiBzdmdTZXR1cChkb2MpIHsKICAgIHZhciBzdmdSb290ID0gZG9jLmRvY3VtZW50RWxlbWVudCB8fCBkb2M7CiAgICB2YXIgc2NydWJDYXB0dXJlID0gZG9jLmdldEVsZW1lbnRCeUlkKCJzY3J1Yi1jYXB0dXJlIik7CiAgICAvKiBCbG9jayBtdWx0aXBsZSBzZXR1cHMgKi8KICAgIGlmICghc2NydWJDYXB0dXJlIHx8IHNjcnViQ2FwdHVyZS5nZXRBdHRyaWJ1dGUoInN2Z1NldHVwRG9uZSIpKSB7CiAgICAgICAgcmV0dXJuOwogICAgfQogICAgc2NydWJDYXB0dXJlLnNldEF0dHJpYnV0ZSgic3ZnU2V0dXBEb25lIiwgdHJ1ZSk7CiAgICB2YXIgc2NydWJDb250YWluZXIgPSBkb2MuZ2V0RWxlbWVudEJ5SWQoInNjcnViIik7CiAgICB2YXIgc2NydWJQbGF5ID0gZG9jLmdldEVsZW1lbnRCeUlkKCJzY3J1Yi1wbGF5Iik7CiAgICB2YXIgc2NydWJQYXVzZSA9IGRvYy5nZXRFbGVtZW50QnlJZCgic2NydWItcGF1c2UiKTsKICAgIHZhciBzY3J1Yktub2IgPSBkb2MuZ2V0RWxlbWVudEJ5SWQoInNjcnViLWtub2IiKTsKICAgIHZhciBzY3J1YlhNaW4gPSBwYXJzZUZsb2F0KHNjcnViQ2FwdHVyZS5kYXRhc2V0LnhtaW4pOwogICAgdmFyIHNjcnViWE1heCA9IHBhcnNlRmxvYXQoc2NydWJDYXB0dXJlLmRhdGFzZXQueG1heCk7CiAgICB2YXIgc2NydWJUb3RhbER1ciA9IHBhcnNlRmxvYXQoc2NydWJDYXB0dXJlLmRhdGFzZXQudG90YWxkdXIpOwogICAgdmFyIHNjcnViU3RhcnREZWxheSA9IHBhcnNlRmxvYXQoc2NydWJDYXB0dXJlLmRhdGFzZXQuc3RhcnRkZWxheSk7CiAgICB2YXIgc2NydWJFbmREZWxheSA9IHBhcnNlRmxvYXQoc2NydWJDYXB0dXJlLmRhdGFzZXQuZW5kZGVsYXkpOwogICAgdmFyIHNjcnViUGF1c2VPbkxvYWQgPSBwYXJzZUZsb2F0KHNjcnViQ2FwdHVyZS5kYXRhc2V0LnBhdXNlb25sb2FkKTsKICAgIHZhciBwYXVzZWQgPSBmYWxzZTsKICAgIHZhciBkcmFnWE9mZnNldCA9IDA7CiAgICB2YXIgcG9pbnQgPSBzdmdSb290LmNyZWF0ZVNWR1BvaW50KCk7CgogICAgZnVuY3Rpb24gc2NyZWVuVG9TdmdYKHApIHsKICAgICAgICB2YXIgbWF0cml4ID0gc2NydWJLbm9iLmdldFNjcmVlbkNUTSgpLmludmVyc2UoKTsKICAgICAgICBwb2ludC54ID0gcC54OwogICAgICAgIHBvaW50LnkgPSBwLnk7CiAgICAgICAgcmV0dXJuIHBvaW50Lm1hdHJpeFRyYW5zZm9ybShtYXRyaXgpLng7CiAgICB9OwogICAgZnVuY3Rpb24gc2NyZWVuVG9Qcm9ncmVzcyhwKSB7CiAgICAgICAgdmFyIG1hdHJpeCA9IHNjcnViS25vYi5nZXRTY3JlZW5DVE0oKS5pbnZlcnNlKCk7CiAgICAgICAgcG9pbnQueCA9IHAueDsKICAgICAgICBwb2ludC55ID0gcC55OwogICAgICAgIHZhciB4ID0gcG9pbnQubWF0cml4VHJhbnNmb3JtKG1hdHJpeCkueDsKICAgICAgICBpZiAoeCA8PSBzY3J1YlhNaW4pIHsKICAgICAgICAgICAgcmV0dXJuIHNjcnViU3RhcnREZWxheSAvIHNjcnViVG90YWxEdXI7CiAgICAgICAgfQogICAgICAgIGlmICh4ID49IHNjcnViWE1heCkgewogICAgICAgICAgICByZXR1cm4gKHNjcnViVG90YWxEdXIgLSBzY3J1YkVuZERlbGF5KSAvIHNjcnViVG90YWxEdXI7CiAgICAgICAgfQogICAgICAgIHJldHVybiAoc2NydWJTdGFydERlbGF5L3NjcnViVG90YWxEdXIKICAgICAgICAgICAgICAgICsgKHggLSBkcmFnWE9mZnNldCAtIHNjcnViWE1pbikKICAgICAgICAgICAgICAgICAgLyAoc2NydWJYTWF4IC0gc2NydWJYTWluKQogICAgICAgICAgICAgICAgICAqIChzY3J1YlRvdGFsRHVyIC0gc2NydWJTdGFydERlbGF5IC0gc2NydWJFbmREZWxheSkKICAgICAgICAgICAgICAgICAgLyBzY3J1YlRvdGFsRHVyKTsKICAgIH07CiAgICBmdW5jdGlvbiBjdXJyZW50U2NydWJYKCkgewogICAgICAgIHJldHVybiBzY3J1Yktub2IuY3guYW5pbVZhbC52YWx1ZTsKICAgIH07CiAgICBmdW5jdGlvbiBwYXVzZSgpIHsKICAgICAgICBzdmdSb290LnBhdXNlQW5pbWF0aW9ucygpOwogICAgICAgIHNjcnViUGxheS5zZXRBdHRyaWJ1dGUoInZpc2liaWxpdHkiLCAidmlzaWJsZSIpOwogICAgICAgIHNjcnViUGF1c2Uuc2V0QXR0cmlidXRlKCJ2aXNpYmlsaXR5IiwgImhpZGRlbiIpOwogICAgICAgIHBhdXNlZCA9IHRydWU7CiAgICB9OwogICAgZnVuY3Rpb24gcGxheSgpIHsKICAgICAgICBzdmdSb290LnVucGF1c2VBbmltYXRpb25zKCk7CiAgICAgICAgc2NydWJQYXVzZS5zZXRBdHRyaWJ1dGUoInZpc2liaWxpdHkiLCAidmlzaWJsZSIpOwogICAgICAgIHNjcnViUGxheS5zZXRBdHRyaWJ1dGUoInZpc2liaWxpdHkiLCAiaGlkZGVuIik7CiAgICAgICAgcGF1c2VkID0gZmFsc2U7CiAgICB9OwogICAgZnVuY3Rpb24gc2NydWIocGxheWJhY2tGcmFjdGlvbikgewogICAgICAgIHZhciB0ID0gc2NydWJUb3RhbER1ciAqIHBsYXliYWNrRnJhY3Rpb247CiAgICAgICAgLyogU3RvcCAxMG1zIGJlZm9yZSBlbmQgdG8gYXZvaWQgbG9vcCAoPj0xbXMgbmVlZGVkIG9uIEZGKSAqLwogICAgICAgIHZhciBsaW1pdCA9IHNjcnViVG90YWxEdXIgLSAxMGUtMzsKICAgICAgICBpZiAodCA8IDApIHQgPSAwOwogICAgICAgIGVsc2UgaWYgKHQgPiBsaW1pdCkgdCA9IGxpbWl0OwogICAgICAgIHN2Z1Jvb3Quc2V0Q3VycmVudFRpbWUodCk7CiAgICB9OwogICAgZnVuY3Rpb24gbW91c2Vkb3duKGUpIHsKICAgICAgICBzdmdSb290LnBhdXNlQW5pbWF0aW9ucygpOwogICAgICAgIGlmIChlLnRhcmdldCA9PSBzY3J1Yktub2IpIHsKICAgICAgICAgICAgZHJhZ1hPZmZzZXQgPSBzY3JlZW5Ub1N2Z1goZSkgLSBjdXJyZW50U2NydWJYKCk7CiAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgZHJhZ1hPZmZzZXQgPSAwOwogICAgICAgIH0KICAgICAgICBzY3J1YihzY3JlZW5Ub1Byb2dyZXNzKGUpKTsKICAgICAgICAvKiBHbG9iYWwgZG9jdW1lbnQgbGlzdGVuZXJzICovCiAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vtb3ZlJywgbW91c2Vtb3ZlKTsKICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgbW91c2V1cCk7CiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgfTsKICAgIGZ1bmN0aW9uIG1vdXNldXAoZSkgewogICAgICAgIGRyYWdYT2Zmc2V0ID0gMDsKICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCBtb3VzZW1vdmUpOwogICAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNldXAnLCBtb3VzZXVwKTsKICAgICAgICBpZiAoIXBhdXNlZCkgewogICAgICAgICAgICBzdmdSb290LnVucGF1c2VBbmltYXRpb25zKCk7CiAgICAgICAgfQogICAgICAgIGUucHJldmVudERlZmF1bHQoKTsKICAgIH07CiAgICBmdW5jdGlvbiBtb3VzZW1vdmUoZSkgewogICAgICAgIHNjcnViKHNjcmVlblRvUHJvZ3Jlc3MoZSkpOwogICAgfTsKICAgIHNjcnViUGF1c2UuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBwYXVzZSk7CiAgICBzY3J1YlBsYXkuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBwbGF5KTsKICAgIHNjcnViQ2FwdHVyZS5hZGRFdmVudExpc3RlbmVyKCJtb3VzZWRvd24iLCBtb3VzZWRvd24pOwogICAgc2NydWJDb250YWluZXIuc2V0QXR0cmlidXRlKCJ2aXNpYmlsaXR5IiwgInZpc2libGUiKTsKICAgIHNjcnViS25vYi5zZXRBdHRyaWJ1dGUoInZpc2liaWxpdHkiLCAidmlzaWJsZSIpOwogICAgaWYgKHNjcnViUGF1c2VPbkxvYWQpIHsKICAgICAgICBwYXVzZSgpOwogICAgICAgIHNjcnViKDApOwogICAgfSBlbHNlIHsKICAgICAgICBwbGF5KCk7CiAgICB9Cn07CnN2Z09uTG9hZCgpOwovKl1dPiovPC9zY3JpcHQ+Cjwvc3ZnPgo8L2JvZHk+CjwvaHRtbD4K\" width=\"400\" height=\"100\" style=\"border:0\" />"

     

       13
       13
       +
             ],

     

       14
       14
       +
             "text/plain": [

     

       15
       15
       +
              "JupyterSvgFrame(svg='<!DOCTYPE html>\\n<head>\\n<meta charset=\"utf-8\">\\n<style>\\nhtml,body {\\n  margin: 0;\\n  height: 100%;\\n}\\nsvg {\\n  margin-bottom: -50.0px;\\n}\\n</style></head>\\n<body>\\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\\n    width=\"400\" height=\"100\" viewBox=\"-200.0 -50.0 400 100\" onload=\"svgOnLoad(event);\">\\n<defs>\\n<linearGradient x1=\"-1250\" y1=\"0\" x2=\"1250\" y2=\"0\" gradientUnits=\"userSpaceOnUse\" id=\"d0\">\\n<stop offset=\"0\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\\n<stop offset=\"0.2\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\\n<stop offset=\"0.4\" stop-color=\"#ee0055\" stop-opacity=\"1\" />\\n<stop offset=\"0.6\" stop-color=\"#ee0055\" stop-opacity=\"1\" />\\n<stop offset=\"0.8\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\\n<stop offset=\"1\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\\n<animate attributeName=\"x1\" dur=\"128s\" values=\"-2250;-250\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\\n<animate attributeName=\"x2\" dur=\"128s\" values=\"250;2250\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\\n</linearGradient>\\n<path d=\"M85 438q-1 21 -1 42q0 55 8 113q10 80 45.5 156.5t93.5 131.5q51 49 111.5 81.5t115.5 45.5q56 14 111 18q26 2 50 2q25 0 49 -3q44 -5 79.5 -11t54.5 -12l19 -7q-1 7 -3 19.5t-5.5 50t-4.5 73.5v17q0 31 2 69q4 50 12.5 92.5t28 86t47.5 74t72.5 50t100.5 19.5 q63 0 115.5 -21t86.5 -54t60 -73t39.5 -80.5t22 -73.5t10.5 -54l2 -21q2 -16 4.5 -43.5t5.5 -111.5q2 -42 1 -84q0 -40 -1 -82q-3 -82 -17.5 -194t-41.5 -208q57 -27 89 -77t35 -105v-15q0 -47 -16 -95q-18 -54 -55 -93q-28 -30 -63 -47q-36 -17 -68 -20q-15 -1 -30 -1 q-18 -1 -35 1q-33 4 -60 13t-48.5 18t-33.5 15l-12 7q-159 -83 -371 -91q-19 -1 -38 0q-187 0 -324 69q-7 4 -19 11t-45 32t-60.5 54t-56 76t-41.5 99q-17 67 -21 141zM729 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d1\" />\\n<path d=\"M49 548q0 83 3.5 154.5t9.5 112.5l6 41q16 73 54 125t80.5 74.5t83 34.5t66.5 12h27h13q56 0 102 -16q52 -18 79.5 -45.5t46 -55.5t24.5 -47l5 -20q39 56 90.5 91.5t96.5 46t84.5 12.5t62.5 -2l23 -5q58 -15 99.5 -46t60.5 -70t27 -71t9 -65v-14q0 -41 -10 -79 q-12 -44 -30.5 -71t-37 -47t-32.5 -28l-13 -9q-49 -29 -103 -35q-20 -2 -38 -2q-30 0 -58 7q-42 11 -78.5 26.5t-56.5 28.5l-20 14q13 -99 13 -178q0 -34 -2 -64q-8 -102 -36 -168.5t-65.5 -108t-79 -61.5t-76 -27.5t-57.5 -6.5h-23h-9q-42 0 -80 9q-42 10 -71 27.5t-53 39 t-39 43t-25 39.5t-14 29l-4 11q-27 82 -41 181.5t-14 182.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d2\" />\\n<path d=\"M59 496q0 22 5 74q5 58 17.5 111t43.5 119t76 116t121.5 88t173.5 47q31 3 60 3q48 0 88 -8q66 -13 103 -34t64 -50t35 -44.5t12 -26.5q2 8 7.5 22t23.5 42.5t42 51t67 40.5t94 18q62 0 112.5 -29t82 -75t54.5 -101.5t33.5 -111t16.5 -101.5t7 -75l1 -29q2 -42 2 -81 q0 -54 -4 -103q-7 -84 -22.5 -141t-37.5 -102t-47.5 -71.5t-51 -44.5t-49.5 -25t-42.5 -10.5t-29.5 -2.5l-11 1q-1 2 -11.5 0t-29.5 2t-41.5 8.5t-46.5 19.5t-45 34.5t-37.5 53t-22.5 75.5q-2 -9 -8 -23.5t-35 -50.5t-71 -62q-42 -25 -122 -40q-45 -8 -95 -8q-41 0 -86 5 q-8 0 -22.5 1.5t-55 12.5t-78 28.5t-83 54.5t-78 85.5t-55 127t-22.5 174.5q-2 17 -2 35zM686 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d3\" />\\n<path d=\"M35 735q-2 23 -2 44q0 43 8 79q12 56 35 90.5t52.5 60.5t59.5 38.5t55.5 19.5t41.5 9l16 1q69 0 125.5 -19.5t94 -50t66.5 -74t45 -83.5t26 -86.5t13.5 -76t4.5 -58.5q2 59 22 101t47 60t54 28t46 10l19 1q44 0 79.5 -13.5t56.5 -34t36.5 -45.5t21.5 -50t9.5 -45.5 t3.5 -33.5v-13q0 81 11 149.5t30 115.5t44 85t52 60t54 38t52 22.5t44 10t30 3.5l11 -1q63 -1 113.5 -20t80.5 -48.5t51 -65t29.5 -70.5t13 -64.5t3.5 -47.5v-18q-3 -96 -18 -187.5t-34.5 -153.5t-38 -110t-31.5 -70l-12 -23q-36 -66 -84.5 -113.5t-91.5 -68.5t-80.5 -32 t-59.5 -11l-23 -1q-92 0 -161.5 26.5t-105 61.5t-57 79t-26.5 71t-5 45q-3 -22 -10 -48t-31 -71t-59 -79.5t-99.5 -60.5t-146.5 -26q-64 0 -121.5 24.5t-94 59.5t-64.5 70t-40 59l-12 25q-60 115 -97 246.5t-45 205.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d4\" />\\n<path d=\"M70 169v15v10q0 50 18 90q20 44 54.5 72t76.5 48.5t84 29.5t77 14.5t57 5.5l22 1q-75 18 -134.5 44t-95.5 53t-61.5 56.5t-36.5 55t-16.5 46t-5.5 32.5v12q3 71 34 128t77 91t101.5 59t110.5 35.5t100 16.5t73 6h28q112 -2 194 -16.5t131.5 -36t78.5 -53.5t39 -66 q8 -28 7 -61v-15q-2 -50 -27.5 -88t-64.5 -58t-85.5 -32.5t-92 -15t-83.5 -2.5t-62 2l-23 3q97 -12 174.5 -37.5t123 -56.5t78 -66t46 -67.5t20 -58.5t5.5 -42v-16q0 -73 -24.5 -133t-64 -97.5t-87.5 -65.5t-95.5 -41.5t-87 -21.5t-63.5 -10l-25 -1q-39 -2 -75 -2 q-80 0 -148 8q-98 11 -156.5 32.5t-100.5 48.5t-59.5 55t-27 51.5t-8.5 38.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d5\" />\\n<path d=\"M23 773q0 65 18.5 118.5t70 97.5t132.5 60q30 6 58 6q36 1 70 -9q60 -16 101.5 -53.5t76 -85.5t55 -98t34.5 -92t19 -69l6 -27q2 21 7 55t33.5 118t70.5 144t125 98q52 24 113 24q37 0 77 -9q71 -16 115 -55.5t58.5 -90.5t15.5 -109v-8q0 -54 -12 -106q-13 -56 -27 -100 t-26 -72l-12 -27q-4 -10 -12.5 -28t-37 -69.5t-59.5 -98t-80 -104t-99.5 -98.5t-116.5 -69t-133 -28q-98 0 -189 46t-154.5 110t-119.5 148.5t-85 145t-50 115.5q-19 48 -31 101.5t-12 118.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d6\" />\\n<path d=\"M85 390q-11 61 -11 117q0 90 28 167q21 57 51 108.5t58.5 83t54 55.5t40.5 34l16 10q129 77 288 86q26 1 51 1q131 0 246 -40q137 -47 228 -133q63 -59 106.5 -140.5t64 -164t30.5 -168.5q7 -64 7 -123q0 -18 -1 -36q-3 -74 -8 -133t-11 -92l-6 -34 q-21 -119 -64.5 -213.5t-99.5 -153.5t-122.5 -101t-135 -60t-135.5 -27q-46 -6 -88 -6q-18 0 -36 1q-59 4 -103.5 9t-70.5 11l-26 7q-76 27 -120 68t-54 81q-7 32 -7 62v12q2 36 11 58l10 22q17 37 48 61t64 32t64 11t50 1l20 -2q68 3 116.5 20t69 39t31.5 44t11 37v15 q-14 -4 -39 -8.5t-96 -8.5q-24 -1 -47 -1q-46 0 -88 5q-65 8 -143.5 41.5t-133.5 92.5q-89 94 -118 253zM641 444q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 0 -60 -26q-22 -24 -22 -53v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d7\" />\\n<path d=\"\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d8\" />\\n<path d=\"M59 1126q-2 56 18.5 104.5t56 80t79 57t87.5 39.5t80.5 23.5t59.5 12.5l23 3q78 6 147 -1.5t117 -24.5t87.5 -39t63.5 -45.5t40.5 -43.5t23.5 -32l6 -13q39 -73 52 -152t2 -148t-33.5 -135.5t-52.5 -118t-57 -91.5t-45 -61l-19 -21h19t46.5 -4.5t66 -13.5t69.5 -29.5 t65 -49.5t45 -76.5t16 -106.5q-1 -45 -22 -82.5t-55 -63t-77.5 -44.5t-91.5 -30t-95.5 -18t-90.5 -9t-76.5 -2.5t-53.5 0.5l-19 1q-70 0 -130 8.5t-103 22.5t-78 32t-57.5 38t-39 40t-25 38t-13.5 32t-6 22l-1 8q-8 71 3.5 127t51.5 107t69 78t97 81q14 12 22 18.5t21 16.5 t23 19q30 25 53.5 53.5t39.5 60t15.5 64.5t-20.5 60t-48 40.5t-54 13t-49.5 -4t-37.5 -9.5l-14 -6q-51 -10 -90.5 4t-59.5 41.5t-32.5 56.5t-15.5 50z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"d9\" />\\n<clipPath id=\"d10\">\\n<use xlink:href=\"#d1\" x=\"-202.12158203125\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"19.324137087557;19.291309948237398;15.726205470907235;15.839487980635687;18.841995512517798;18.443879956274092;18.178921605760884;16.732545830356578;17.92377666271385;17.92720693456335;17.824816068448012;16.133531481019222;17.222678561165075;17.074127280821486;18.39204832494986;19.47927825179897;19.297581892372975;17.67670818971728;17.279416754903416;16.572962966597313;15.64369731757143;15.609779428363275;17.359575448389247;16.77386051141471;17.020059687602846;19.06715783131315;17.603011076584114;17.742041444105997;16.444493628460247;15.595432316563128;16.80057171504464;16.046789571945865;17.540895383348804;19.49473427277021;18.19791878938348;16.227373987292577;19.074286146331954;18.687039685686557;18.43760676757591;19.126374599590243;18.551541935332285;18.658990549847054;16.915147911366414;19.423906292288507;19.347603751592903;16.144738613216077;18.51601628660749;18.360603592949815;17.34562679096791;17.62142286449378;17.460055687400764;19.199328288378283;17.50336425052262;18.82609795916725;16.915696819474864;19.031403674325013;19.098802355026503;17.34404865952655;17.770820281680976;19.181321756767716;18.395091815488072;17.44643421944634;16.387244043964042;16.798668975075593;19.324137087557\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d2\" x=\"-149.79248046875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"18.298286552280974;16.164278741976503;19.13176198650438;16.572550051599265;19.145511343472187;16.73825249979784;19.32944684622463;18.324823225470418;17.51699526793327;17.570991024594207;18.105657595867164;17.85177884717794;16.747377298204;16.331273898151707;17.54756663342113;19.236617436535113;17.99306034690349;15.801501476296181;18.781599978848067;18.40379714990919;19.13061448380528;16.265610933216472;18.479130897109417;15.735035585594623;18.1116397097382;16.592398929348597;16.406466116979054;19.001964685792952;15.9250639305821;17.58945066143572;18.91577202873949;16.47932791187607;16.341915754782587;19.022327037465118;17.191670593558783;18.3678443956199;15.627492280506981;16.949427645212964;16.18752396850293;18.19106176565417;15.831612709618302;19.31824866138299;15.601378859307605;18.417694029767215;15.584579478892604;16.52276021622977;18.753417549609104;16.1284731547471;16.234955237003906;18.26598170405436;17.04226352541024;15.672643983189998;19.460006184811206;16.105680435026205;15.645075976973656;16.87680402214718;17.96095793329943;18.46983849250312;15.952459612072307;16.848855092786582;15.623243430506754;17.294613049969175;18.563879746352313;18.4597866548828;18.298286552280974\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d3\" x=\"-107.95654296875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"19.108080633400146;18.52264861470026;18.949783105301712;18.32138056020306;17.391118048393253;16.40211028139155;18.143313994628055;16.765223706913037;15.908196420198793;17.291287445676605;18.99905216539187;16.010145858475152;17.83982279244243;17.07181020042067;17.55921078705671;16.075317855907777;19.338924745948642;16.53638569300882;17.92431175621401;17.179022182622987;15.572132876499706;17.73180049535632;16.062277515845338;15.727123983292785;15.634224984994589;16.144660060724938;15.883487774532732;18.04030279015467;17.533036736142574;19.43386437619011;19.236521274787226;19.478100933038014;16.42989536267124;17.278789820478785;16.503123047364628;17.86494938219199;17.99665620301913;18.700829822537585;18.337993215317397;16.52643715395214;17.192067691050084;17.60475977512234;15.519299124214513;15.641997646831058;17.134905670888298;15.944699868919905;18.39507869147722;16.46346205776665;15.899092347019964;16.2270403132017;16.426101717508562;16.369414538873436;17.582945456191588;17.35761244457536;16.73890428350965;18.0670350307227;16.34979896797796;19.12625070692673;19.35246661931695;18.415724182310097;17.23493547515866;17.54600536886819;17.82430522416064;15.704938974423321;19.108080633400146\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d4\" x=\"-58.70361328125\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"17.172065553929826;17.600258129279048;16.224900243300688;15.875147153833273;18.710620834821544;16.96473586617359;17.576838760395944;19.185801390367477;17.942041348412122;16.65832307012065;19.434084294213275;16.988906839736536;15.576220419238417;18.24124268925948;15.904647502452628;16.72368944282506;18.862446748475364;18.190287018579063;15.562888288857353;17.30569383680793;17.142697502294027;17.443451776008004;16.33298757343119;17.854980248616833;15.795157253901012;16.637437403921545;16.991608420187873;19.241081736194044;15.806192881440081;18.519936456991594;16.269436511867294;17.786210965317323;17.06712388145699;17.35289752899603;18.514322022942874;17.080170240631453;15.986917920534678;15.98708039888616;15.822042871014519;18.90028349561939;18.06396637532426;19.33867425358325;18.270610186618597;15.598675090616403;18.136638655375673;18.608847738599195;18.394073119932518;17.49179808171847;16.930338470923886;17.32814285580714;18.69488833471872;16.57576997531061;17.605214979225202;17.410238168226087;19.318787387845322;18.71739990767735;19.228215440872955;18.844022294289577;16.687054675658697;16.42650944460629;17.455157893793455;16.537621365444693;17.210615327823714;18.216560861444595;17.172065553929826\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d5\" x=\"0.22216796875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"19.17432090891334;17.843602321380402;18.7714130155966;15.883789243434663;16.924228911880682;19.490992085494522;16.086004191824927;17.167072173899555;15.767357581811265;15.844597426395598;19.082001408378922;19.45454811483057;18.092328311132544;16.014060019669373;16.685530078130782;16.426798573386762;18.182929303799767;18.224396029991347;17.255383347646312;17.595979073255904;15.948281054378096;17.663572996458;19.29975488689121;18.523109210244115;15.884617845083582;17.566005445975094;18.361459270541847;16.529042070197043;19.079586599991057;17.343763856511888;18.3129248390927;17.116653557850963;19.480532150225436;18.63126295102649;17.793761602906123;16.079060091574764;17.264733037914887;15.6175396385709;17.88065670082722;19.027270070813692;16.22169796803166;17.54068601291097;17.42983330112547;17.119658716133877;18.34184031877659;19.246679675941035;18.32157014751221;17.38999671817144;19.347909645664032;16.822910002269136;18.482451019047755;18.133940103096172;18.546435499777793;18.908292911225235;16.399995521690087;17.984996115800016;17.110895538815566;18.167887520270217;19.40893625858238;18.039323386996088;15.546423176316438;17.358195231067338;18.346305933794774;19.03288374740802;19.17432090891334\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d6\" x=\"39.46044921875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"18.100340133230947;18.76427960677236;15.56854958542948;19.272918260590053;18.417854534663782;17.92577580767231;19.121292120680188;19.038718908208274;15.901829522549633;18.762484865120747;18.568002963113543;16.298152186703973;18.476982770007467;17.844909774667702;16.265977695280423;18.716757583973582;16.051492512478955;17.949294825753448;17.23759193664957;16.514764443440473;17.764378493236507;17.36834751703482;16.319989978444156;19.36712314963816;15.791301469511914;15.512149152328888;17.441692517196124;18.848765989216805;18.133608253760478;18.518678354965495;17.44000181332036;18.19920941955595;16.839562548974325;16.567781057283934;17.511602832684538;15.610111265989747;15.819234359666222;18.515838961232788;16.194798551786665;18.501022903279;18.637503921917954;17.117963798501876;18.199972737584474;18.649689162774;18.956096402393687;16.039481015624983;16.150280579909165;17.026653676995508;17.358626773228572;16.679275487537627;15.541600951035464;17.729686691385268;19.367655038887854;16.965838731349027;17.651997680963095;17.029316620955058;17.271201914680454;18.981974830520677;16.733721777745423;18.096260968845616;17.435146143723358;17.654276690218072;19.158812502107267;15.806856043874703;18.100340133230947\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d7\" x=\"83.89404296875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"18.797481725009643;16.71667722862086;18.085233090770295;18.68336392379322;18.113637764536453;17.07186625951781;18.86281907321502;15.87179519261299;18.033257609922067;17.064503240471847;17.621863956694423;18.903764341757842;18.691459521790456;18.01536068585924;16.73231712105784;16.431655286240023;17.330152856150356;16.428438291628133;16.60994613353222;19.33101857042053;15.947864254575299;18.774465494972127;17.016856397885;16.958413517883915;16.773566048028542;15.809542248687551;17.32952080257834;16.16598872833203;17.26803588477986;16.667948647173095;19.078292820866682;19.186969808294943;17.267985939703188;18.058480895039562;19.21856883981926;16.804906581609988;15.898217555514494;16.45136751141817;16.25818481303237;18.213882620519925;16.99515331343813;16.92439166129364;18.680390540819793;16.432688333649505;18.734145478922123;18.031626653015802;17.101040476813708;18.794076465052875;16.869012990020046;19.01432525277344;19.20370368942909;17.510425286914632;18.25993322527753;19.29512844444772;18.470239621383687;18.504028192574403;18.977240613237264;19.24228357172442;18.514137267158166;19.41627674449577;16.666423873065096;17.989944804817238;18.18263173319903;16.96973709191637;18.797481725009643\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d8\" x=\"131.47216796875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"17.080711140751834;16.19909689599043;19.330849197546666;16.916014088414155;17.406536045303866;19.074260262355665;16.245800355520224;19.34267799195689;16.00822293662995;15.612118098267;16.903120016070773;16.936699184091;19.170577284050097;19.032777003417344;18.546243746631024;17.245711595069945;17.670745620739233;16.447078997643914;18.83411877139345;17.059644447003237;16.63861329760842;18.05122404994667;16.102314363712715;16.765402084652465;19.204710140778165;15.880181639513852;16.06879981708168;16.31738246474658;16.503920112292988;17.181590210211635;16.50070491698806;16.870759611949783;16.48592557630948;16.460353724003927;17.94241902371801;16.8458323460846;16.991156120537948;18.57126625214372;15.746753360697536;16.076169555707967;18.903294416161224;17.219109518635328;18.615213998315095;16.031173775225227;17.591960357928016;18.881495956075632;16.852166940218158;18.572714469152427;17.941504268568327;17.07829440318809;19.489404918376827;17.06921114821956;17.395173504645857;17.977942820530266;16.767355190057494;18.850555915282087;17.890144231633766;17.852002367688048;17.654345591803718;19.43973441409201;19.455720406809302;18.863165428982644;17.31830481199631;17.147159111082434;17.080711140751834\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n<use xlink:href=\"#d9\" x=\"161.41357421875\" y=\"17.5\">\\n<animate attributeName=\"x\" dur=\"128s\" values=\"161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n<animate attributeName=\"y\" dur=\"128s\" values=\"17.599067165036384;15.684629436697106;15.933017326931099;19.48103060100494;16.012842062665598;19.2495377040299;18.21891658008112;19.160361116382305;15.80934600212031;16.723241372635748;18.691710970024175;15.535381801514223;15.923839916845994;16.902564830201552;16.192552924899463;16.087440861085202;18.17905744860602;15.86769170570407;19.3860173767723;18.097445829672445;15.699066515511975;19.094881340111694;16.466106118697553;17.425856057986543;17.735066325377616;16.054534187786356;17.50863562649949;15.741235287438158;16.29842816430794;19.174294144100713;18.788194352812756;17.591539631414015;18.22738288427816;19.00201258774057;16.059864800319716;17.468411654278867;16.027054087523638;15.966081954440476;15.932941808294345;16.3471435248239;15.712626296759733;16.3608679958098;17.016526709101825;17.99075155400056;18.934422862346082;19.116739330737822;18.370339170828384;17.528350763945213;19.16794945822426;16.15198700162683;15.92178177336796;18.771235410910514;18.008527128612236;16.341258113785702;17.009200698193677;16.689575235266634;17.22345328759322;17.21091887743478;17.092623332550826;18.69095955190943;18.746019425967766;17.74985102116934;17.39111954785501;16.63783697865552;17.599067165036384\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\\n</use>\\n</clipPath>\\n</defs>\\n<rect x=\"-500\" y=\"-50\" width=\"1000\" height=\"100\" fill=\"url(#d0)\" clip-path=\"url(#d10)\" />\\n<g id=\"scrub\" visibility=\"hidden\">\\n<path d=\"M-168.0,40.0 L168.0,40.0\" stroke=\"#ccc\" stroke-width=\"4\" stroke-linecap=\"round\" />\\n<rect x=\"-168.0\" y=\"40.0\" width=\"0\" height=\"0.001\" stroke=\"#05f\" stroke-width=\"4\" stroke-linejoin=\"round\">\\n<animate attributeName=\"width\" dur=\"128s\" values=\"0;336\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\\n</rect>\\n<g id=\"scrub-capture\" data-xmin=\"-168.0\" data-xmax=\"168.0\" data-totaldur=\"128\" data-startdelay=\"0\" data-enddelay=\"0\" data-pauseonload=\"0\">\\n<rect x=\"-170.0\" y=\"30.0\" width=\"340\" height=\"20\" fill=\"rgba(255,255,255,0)\" />\\n<circle cx=\"-168.0\" cy=\"40.0\" r=\"6\" fill=\"#05f\" id=\"scrub-knob\" visibility=\"hidden\">\\n<animate attributeName=\"cx\" dur=\"128s\" values=\"-168.0;168.0\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\\n</circle>\\n</g>\\n<g id=\"scrub-play\" visibility=\"hidden\">\\n<rect x=\"-191.0\" y=\"36.0\" width=\"8\" height=\"8\" fill=\"#05f\" stroke=\"#05f\" stroke-width=\"8\" stroke-linejoin=\"round\" />\\n<path d=\"M-191.0,36.0 v8.0 l8.0,-4.0 Z\" fill=\"#eee\" />\\n</g>\\n<g id=\"scrub-pause\" visibility=\"hidden\">\\n<rect x=\"-191.0\" y=\"36.0\" width=\"8\" height=\"8\" fill=\"#05f\" stroke=\"#05f\" stroke-width=\"8\" stroke-linejoin=\"round\" />\\n<rect x=\"-190.0\" y=\"36.0\" width=\"2.0\" height=\"8.0\" fill=\"#eee\" />\\n<rect x=\"-186.0\" y=\"36.0\" width=\"2.0\" height=\"8.0\" fill=\"#eee\" />\\n</g>\\n</g>\\n<script>/*<![CDATA[*/\\n/* Animation playback controls generated by drawsvg */\\n/* https://github.com/cduck/drawsvg/ */\\nfunction svgOnLoad(event) {\\n    /* Support standalone SVG or embedded in HTML or iframe */\\n    if (event && event.target && event.target.ownerDocument) {\\n        svgSetup(event.target.ownerDocument);\\n    } else if (document && document.currentScript\\n               && document.currentScript.parentElement) {\\n        svgSetup(document.currentScript.parentElement);\\n    }\\n}\\nfunction svgSetup(doc) {\\n    var svgRoot = doc.documentElement || doc;\\n    var scrubCapture = doc.getElementById(\"scrub-capture\");\\n    /* Block multiple setups */\\n    if (!scrubCapture || scrubCapture.getAttribute(\"svgSetupDone\")) {\\n        return;\\n    }\\n    scrubCapture.setAttribute(\"svgSetupDone\", true);\\n    var scrubContainer = doc.getElementById(\"scrub\");\\n    var scrubPlay = doc.getElementById(\"scrub-play\");\\n    var scrubPause = doc.getElementById(\"scrub-pause\");\\n    var scrubKnob = doc.getElementById(\"scrub-knob\");\\n    var scrubXMin = parseFloat(scrubCapture.dataset.xmin);\\n    var scrubXMax = parseFloat(scrubCapture.dataset.xmax);\\n    var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);\\n    var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);\\n    var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);\\n    var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);\\n    var paused = false;\\n    var dragXOffset = 0;\\n    var point = svgRoot.createSVGPoint();\\n\\n    function screenToSvgX(p) {\\n        var matrix = scrubKnob.getScreenCTM().inverse();\\n        point.x = p.x;\\n        point.y = p.y;\\n        return point.matrixTransform(matrix).x;\\n    };\\n    function screenToProgress(p) {\\n        var matrix = scrubKnob.getScreenCTM().inverse();\\n        point.x = p.x;\\n        point.y = p.y;\\n        var x = point.matrixTransform(matrix).x;\\n        if (x <= scrubXMin) {\\n            return scrubStartDelay / scrubTotalDur;\\n        }\\n        if (x >= scrubXMax) {\\n            return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;\\n        }\\n        return (scrubStartDelay/scrubTotalDur\\n                + (x - dragXOffset - scrubXMin)\\n                  / (scrubXMax - scrubXMin)\\n                  * (scrubTotalDur - scrubStartDelay - scrubEndDelay)\\n                  / scrubTotalDur);\\n    };\\n    function currentScrubX() {\\n        return scrubKnob.cx.animVal.value;\\n    };\\n    function pause() {\\n        svgRoot.pauseAnimations();\\n        scrubPlay.setAttribute(\"visibility\", \"visible\");\\n        scrubPause.setAttribute(\"visibility\", \"hidden\");\\n        paused = true;\\n    };\\n    function play() {\\n        svgRoot.unpauseAnimations();\\n        scrubPause.setAttribute(\"visibility\", \"visible\");\\n        scrubPlay.setAttribute(\"visibility\", \"hidden\");\\n        paused = false;\\n    };\\n    function scrub(playbackFraction) {\\n        var t = scrubTotalDur * playbackFraction;\\n        /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */\\n        var limit = scrubTotalDur - 10e-3;\\n        if (t < 0) t = 0;\\n        else if (t > limit) t = limit;\\n        svgRoot.setCurrentTime(t);\\n    };\\n    function mousedown(e) {\\n        svgRoot.pauseAnimations();\\n        if (e.target == scrubKnob) {\\n            dragXOffset = screenToSvgX(e) - currentScrubX();\\n        } else {\\n            dragXOffset = 0;\\n        }\\n        scrub(screenToProgress(e));\\n        /* Global document listeners */\\n        document.addEventListener(\\'mousemove\\', mousemove);\\n        document.addEventListener(\\'mouseup\\', mouseup);\\n        e.preventDefault();\\n    };\\n    function mouseup(e) {\\n        dragXOffset = 0;\\n        document.removeEventListener(\\'mousemove\\', mousemove);\\n        document.removeEventListener(\\'mouseup\\', mouseup);\\n        if (!paused) {\\n            svgRoot.unpauseAnimations();\\n        }\\n        e.preventDefault();\\n    };\\n    function mousemove(e) {\\n        scrub(screenToProgress(e));\\n    };\\n    scrubPause.addEventListener(\"click\", pause);\\n    scrubPlay.addEventListener(\"click\", play);\\n    scrubCapture.addEventListener(\"mousedown\", mousedown);\\n    scrubContainer.setAttribute(\"visibility\", \"visible\");\\n    scrubKnob.setAttribute(\"visibility\", \"visible\");\\n    if (scrubPauseOnLoad) {\\n        pause();\\n        scrub(0);\\n    } else {\\n        play();\\n    }\\n};\\nsvgOnLoad();\\n/*]]>*/</script>\\n</svg>\\n</body>\\n</html>\\n', width=400, height=100, mime='text/html')"

     

       16
       16
       +
             ]

     

       17
       17
       +
            },

     

       18
       18
       +
            "execution_count": 1,

     

       19
       19
       +
            "metadata": {},

     

       20
       20
       +
            "output_type": "execute_result"

     

       21
       21
       +
           }

     

       22
       22
       +
          ],

     

       23
       23
       +
          "source": [

     

       24
       24
       +
           "import random\n",

     

       25
       25
       +
           "import drawsvg as draw\n",

     

       26
       26
       +
           "\n",

     

       27
       27
       +
           "# Define character paths\n",

     

       28
       28
       +
           "# Font: https://www.fontsquirrel.com/fonts/sniglet\n",

     

       29
       29
       +
           "# Converted to SVG paths with https://www.fontsquirrel.com/tools/webfont-generator\n",

     

       30
       30
       +
           "char_set = {\n",

     

       31
       31
       +
           "    'd': (1531, 'M85 438q-1 21 -1 42q0 55 8 113q10 80 45.5 156.5t93.5 131.5q51 49 111.5 81.5t115.5 45.5q56 14 111 18q26 2 50 2q25 0 49 -3q44 -5 79.5 -11t54.5 -12l19 -7q-1 7 -3 19.5t-5.5 50t-4.5 73.5v17q0 31 2 69q4 50 12.5 92.5t28 86t47.5 74t72.5 50t100.5 19.5 q63 0 115.5 -21t86.5 -54t60 -73t39.5 -80.5t22 -73.5t10.5 -54l2 -21q2 -16 4.5 -43.5t5.5 -111.5q2 -42 1 -84q0 -40 -1 -82q-3 -82 -17.5 -194t-41.5 -208q57 -27 89 -77t35 -105v-15q0 -47 -16 -95q-18 -54 -55 -93q-28 -30 -63 -47q-36 -17 -68 -20q-15 -1 -30 -1 q-18 -1 -35 1q-33 4 -60 13t-48.5 18t-33.5 15l-12 7q-159 -83 -371 -91q-19 -1 -38 0q-187 0 -324 69q-7 4 -19 11t-45 32t-60.5 54t-56 76t-41.5 99q-17 67 -21 141zM729 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z'),\n",

     

       32
       32
       +
           "    'r': (1224, 'M49 548q0 83 3.5 154.5t9.5 112.5l6 41q16 73 54 125t80.5 74.5t83 34.5t66.5 12h27h13q56 0 102 -16q52 -18 79.5 -45.5t46 -55.5t24.5 -47l5 -20q39 56 90.5 91.5t96.5 46t84.5 12.5t62.5 -2l23 -5q58 -15 99.5 -46t60.5 -70t27 -71t9 -65v-14q0 -41 -10 -79 q-12 -44 -30.5 -71t-37 -47t-32.5 -28l-13 -9q-49 -29 -103 -35q-20 -2 -38 -2q-30 0 -58 7q-42 11 -78.5 26.5t-56.5 28.5l-20 14q13 -99 13 -178q0 -34 -2 -64q-8 -102 -36 -168.5t-65.5 -108t-79 -61.5t-76 -27.5t-57.5 -6.5h-23h-9q-42 0 -80 9q-42 10 -71 27.5t-53 39 t-39 43t-25 39.5t-14 29l-4 11q-27 82 -41 181.5t-14 182.5z'),\n",

     

       33
       33
       +
           "    'a': (1441, 'M59 496q0 22 5 74q5 58 17.5 111t43.5 119t76 116t121.5 88t173.5 47q31 3 60 3q48 0 88 -8q66 -13 103 -34t64 -50t35 -44.5t12 -26.5q2 8 7.5 22t23.5 42.5t42 51t67 40.5t94 18q62 0 112.5 -29t82 -75t54.5 -101.5t33.5 -111t16.5 -101.5t7 -75l1 -29q2 -42 2 -81 q0 -54 -4 -103q-7 -84 -22.5 -141t-37.5 -102t-47.5 -71.5t-51 -44.5t-49.5 -25t-42.5 -10.5t-29.5 -2.5l-11 1q-1 2 -11.5 0t-29.5 2t-41.5 8.5t-46.5 19.5t-45 34.5t-37.5 53t-22.5 75.5q-2 -9 -8 -23.5t-35 -50.5t-71 -62q-42 -25 -122 -40q-45 -8 -95 -8q-41 0 -86 5 q-8 0 -22.5 1.5t-55 12.5t-78 28.5t-83 54.5t-78 85.5t-55 127t-22.5 174.5q-2 17 -2 35zM686 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z'),\n",

     

       34
       34
       +
           "    'w': (1724, 'M35 735q-2 23 -2 44q0 43 8 79q12 56 35 90.5t52.5 60.5t59.5 38.5t55.5 19.5t41.5 9l16 1q69 0 125.5 -19.5t94 -50t66.5 -74t45 -83.5t26 -86.5t13.5 -76t4.5 -58.5q2 59 22 101t47 60t54 28t46 10l19 1q44 0 79.5 -13.5t56.5 -34t36.5 -45.5t21.5 -50t9.5 -45.5 t3.5 -33.5v-13q0 81 11 149.5t30 115.5t44 85t52 60t54 38t52 22.5t44 10t30 3.5l11 -1q63 -1 113.5 -20t80.5 -48.5t51 -65t29.5 -70.5t13 -64.5t3.5 -47.5v-18q-3 -96 -18 -187.5t-34.5 -153.5t-38 -110t-31.5 -70l-12 -23q-36 -66 -84.5 -113.5t-91.5 -68.5t-80.5 -32 t-59.5 -11l-23 -1q-92 0 -161.5 26.5t-105 61.5t-57 79t-26.5 71t-5 45q-3 -22 -10 -48t-31 -71t-59 -79.5t-99.5 -60.5t-146.5 -26q-64 0 -121.5 24.5t-94 59.5t-64.5 70t-40 59l-12 25q-60 115 -97 246.5t-45 205.5z'),\n",

     

       35
       35
       +
           "    's': (1148, 'M70 169v15v10q0 50 18 90q20 44 54.5 72t76.5 48.5t84 29.5t77 14.5t57 5.5l22 1q-75 18 -134.5 44t-95.5 53t-61.5 56.5t-36.5 55t-16.5 46t-5.5 32.5v12q3 71 34 128t77 91t101.5 59t110.5 35.5t100 16.5t73 6h28q112 -2 194 -16.5t131.5 -36t78.5 -53.5t39 -66 q8 -28 7 -61v-15q-2 -50 -27.5 -88t-64.5 -58t-85.5 -32.5t-92 -15t-83.5 -2.5t-62 2l-23 3q97 -12 174.5 -37.5t123 -56.5t78 -66t46 -67.5t20 -58.5t5.5 -42v-16q0 -73 -24.5 -133t-64 -97.5t-87.5 -65.5t-95.5 -41.5t-87 -21.5t-63.5 -10l-25 -1q-39 -2 -75 -2 q-80 0 -148 8q-98 11 -156.5 32.5t-100.5 48.5t-59.5 55t-27 51.5t-8.5 38.5z'),\n",

     

       36
       36
       +
           "    'v': (1300, 'M23 773q0 65 18.5 118.5t70 97.5t132.5 60q30 6 58 6q36 1 70 -9q60 -16 101.5 -53.5t76 -85.5t55 -98t34.5 -92t19 -69l6 -27q2 21 7 55t33.5 118t70.5 144t125 98q52 24 113 24q37 0 77 -9q71 -16 115 -55.5t58.5 -90.5t15.5 -109v-8q0 -54 -12 -106q-13 -56 -27 -100 t-26 -72l-12 -27q-4 -10 -12.5 -28t-37 -69.5t-59.5 -98t-80 -104t-99.5 -98.5t-116.5 -69t-133 -28q-98 0 -189 46t-154.5 110t-119.5 148.5t-85 145t-50 115.5q-19 48 -31 101.5t-12 118.5z'),\n",

     

       37
       37
       +
           "    'g': (1392, 'M85 390q-11 61 -11 117q0 90 28 167q21 57 51 108.5t58.5 83t54 55.5t40.5 34l16 10q129 77 288 86q26 1 51 1q131 0 246 -40q137 -47 228 -133q63 -59 106.5 -140.5t64 -164t30.5 -168.5q7 -64 7 -123q0 -18 -1 -36q-3 -74 -8 -133t-11 -92l-6 -34 q-21 -119 -64.5 -213.5t-99.5 -153.5t-122.5 -101t-135 -60t-135.5 -27q-46 -6 -88 -6q-18 0 -36 1q-59 4 -103.5 9t-70.5 11l-26 7q-76 27 -120 68t-54 81q-7 32 -7 62v12q2 36 11 58l10 22q17 37 48 61t64 32t64 11t50 1l20 -2q68 3 116.5 20t69 39t31.5 44t11 37v15 q-14 -4 -39 -8.5t-96 -8.5q-24 -1 -47 -1q-46 0 -88 5q-65 8 -143.5 41.5t-133.5 92.5q-89 94 -118 253zM641 444q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 0 -60 -26q-22 -24 -22 -53v-7z'),\n",

     

       38
       38
       +
           "    ' ': (876, ''),\n",

     

       39
       39
       +
           "    '2': (1191, 'M59 1126q-2 56 18.5 104.5t56 80t79 57t87.5 39.5t80.5 23.5t59.5 12.5l23 3q78 6 147 -1.5t117 -24.5t87.5 -39t63.5 -45.5t40.5 -43.5t23.5 -32l6 -13q39 -73 52 -152t2 -148t-33.5 -135.5t-52.5 -118t-57 -91.5t-45 -61l-19 -21h19t46.5 -4.5t66 -13.5t69.5 -29.5 t65 -49.5t45 -76.5t16 -106.5q-1 -45 -22 -82.5t-55 -63t-77.5 -44.5t-91.5 -30t-95.5 -18t-90.5 -9t-76.5 -2.5t-53.5 0.5l-19 1q-70 0 -130 8.5t-103 22.5t-78 32t-57.5 38t-39 40t-25 38t-13.5 32t-6 22l-1 8q-8 71 3.5 127t51.5 107t69 78t97 81q14 12 22 18.5t21 16.5 t23 19q30 25 53.5 53.5t39.5 60t15.5 64.5t-20.5 60t-48 40.5t-54 13t-49.5 -4t-37.5 -9.5l-14 -6q-51 -10 -90.5 4t-59.5 41.5t-32.5 56.5t-15.5 50z'),\n",

     

       40
       40
       +
           "}\n",

     

       41
       41
       +
           "# Create drawing\n",

     

       42
       42
       +
           "d = draw.Drawing(400, 100, origin='center',\n",

     

       43
       43
       +
           "    animation_config=draw.types.SyncedAnimationConfig(\n",

     

       44
       44
       +
           "        # Animation configuration\n",

     

       45
       45
       +
           "        duration=128,  # Seconds\n",

     

       46
       46
       +
           "        show_playback_progress=False,\n",

     

       47
       47
       +
           "        show_playback_controls=True,\n",

     

       48
       48
       +
           "        pause_on_load=False,\n",

     

       49
       49
       +
           "    ),\n",

     

       50
       50
       +
           ")\n",

     

       51
       51
       +
           "msg = 'drawsvg 2'\n",

     

       52
       52
       +
           "size = 70/2048\n",

     

       53
       53
       +
           "msg_width = size * sum(char_set[char][0] for char in msg)\n",

     

       54
       54
       +
           "random.seed(2)\n",

     

       55
       55
       +
           "# Draw letters\n",

     

       56
       56
       +
           "clip = draw.ClipPath()\n",

     

       57
       57
       +
           "x = -msg_width/2\n",

     

       58
       58
       +
           "y = size/4*2048\n",

     

       59
       59
       +
           "for char in msg:\n",

     

       60
       60
       +
           "    char_width, char_path = char_set[char]\n",

     

       61
       61
       +
           "    p = draw.Path(char_path, transform=f'scale({size},-{size})')\n",

     

       62
       62
       +
           "    use = draw.Use(p, x, y)\n",

     

       63
       63
       +
           "    y_start = random.uniform(-2, 2)\n",

     

       64
       64
       +
           "    use.add_key_frame(0, x=x, y=y+y_start, animation_args=dict(\n",

     

       65
       65
       +
           "            calcMode='spline',\n",

     

       66
       66
       +
           "            keySplines=('0.5 0 0.5 1;'*64)[:-1]))\n",

     

       67
       67
       +
           "    for i in range(2,128,2):\n",

     

       68
       68
       +
           "        use.add_key_frame(i, x=x, y=y+random.uniform(-2, 2))\n",

     

       69
       69
       +
           "    use.add_key_frame(128, x=x, y=y+y_start)\n",

     

       70
       70
       +
           "    clip.append(use)\n",

     

       71
       71
       +
           "    x += char_width * size\n",

     

       72
       72
       +
           "# Draw gradient fill in the letters\n",

     

       73
       73
       +
           "fill1 = '#5544ee'\n",

     

       74
       74
       +
           "fill2 = '#ee0055'\n",

     

       75
       75
       +
           "fill = draw.LinearGradient(-1250, 0, 1250, 0)\n",

     

       76
       76
       +
           "fill.add_stop(0,   fill1, 1)\n",

     

       77
       77
       +
           "fill.add_stop(1/5, fill1, 1)\n",

     

       78
       78
       +
           "fill.add_stop(2/5, fill2, 1)\n",

     

       79
       79
       +
           "fill.add_stop(3/5, fill2, 1)\n",

     

       80
       80
       +
           "fill.add_stop(4/5, fill1, 1)\n",

     

       81
       81
       +
           "fill.add_stop(1,   fill1, 1)\n",

     

       82
       82
       +
           "fill.add_key_frame(0, x1=-2250, x2=250)\n",

     

       83
       83
       +
           "fill.add_key_frame(128, x1=-250, x2=2250)\n",

     

       84
       84
       +
           "d.append(draw.Rectangle(-500, -50, 1000, 100, fill=fill, clip_path=clip))\n",

     

       85
       85
       +
           "# Output\n",

     

       86
       86
       +
           "d.save_svg('logo.svg')  # Save as SVG file\n",

     

       87
       87
       +
           "d.save_html('logo.html')  # Save as HTML file\n",

     

       88
       88
       +
           "d.display_iframe()  # Display as interactive SVG"

     

       89
       89
       +
          ]

     

       90
       90
       +
         },

     

       91
       91
       +
         {

     

       92
       92
       +
          "cell_type": "code",

     

       93
       93
       +
          "execution_count": 2,

     

       94
       94
       +
          "id": "fb25c6e5",

     

       95
       95
       +
          "metadata": {},

     

       96
       96
       +
          "outputs": [

     

       97
       97
       +
           {

     

       98
       98
       +
            "data": {

     

       99
       99
       +
             "image/svg+xml": [

     

       100
       100
       +
              "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",

     

       101
       101
       +
              "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",

     

       102
       102
       +
              "    width=\"400\" height=\"100\" viewBox=\"-200.0 -50.0 400 100\" onload=\"svgOnLoad(event);\">\n",

     

       103
       103
       +
              "<defs>\n",

     

       104
       104
       +
              "<linearGradient x1=\"-1250\" y1=\"0\" x2=\"1250\" y2=\"0\" gradientUnits=\"userSpaceOnUse\" id=\"WErAiHgL0\">\n",

     

       105
       105
       +
              "<stop offset=\"0\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\n",

     

       106
       106
       +
              "<stop offset=\"0.2\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\n",

     

       107
       107
       +
              "<stop offset=\"0.4\" stop-color=\"#ee0055\" stop-opacity=\"1\" />\n",

     

       108
       108
       +
              "<stop offset=\"0.6\" stop-color=\"#ee0055\" stop-opacity=\"1\" />\n",

     

       109
       109
       +
              "<stop offset=\"0.8\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\n",

     

       110
       110
       +
              "<stop offset=\"1\" stop-color=\"#5544ee\" stop-opacity=\"1\" />\n",

     

       111
       111
       +
              "<animate attributeName=\"x1\" dur=\"128s\" values=\"-2250;-250\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\n",

     

       112
       112
       +
              "<animate attributeName=\"x2\" dur=\"128s\" values=\"250;2250\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\n",

     

       113
       113
       +
              "</linearGradient>\n",

     

       114
       114
       +
              "<path d=\"M85 438q-1 21 -1 42q0 55 8 113q10 80 45.5 156.5t93.5 131.5q51 49 111.5 81.5t115.5 45.5q56 14 111 18q26 2 50 2q25 0 49 -3q44 -5 79.5 -11t54.5 -12l19 -7q-1 7 -3 19.5t-5.5 50t-4.5 73.5v17q0 31 2 69q4 50 12.5 92.5t28 86t47.5 74t72.5 50t100.5 19.5 q63 0 115.5 -21t86.5 -54t60 -73t39.5 -80.5t22 -73.5t10.5 -54l2 -21q2 -16 4.5 -43.5t5.5 -111.5q2 -42 1 -84q0 -40 -1 -82q-3 -82 -17.5 -194t-41.5 -208q57 -27 89 -77t35 -105v-15q0 -47 -16 -95q-18 -54 -55 -93q-28 -30 -63 -47q-36 -17 -68 -20q-15 -1 -30 -1 q-18 -1 -35 1q-33 4 -60 13t-48.5 18t-33.5 15l-12 7q-159 -83 -371 -91q-19 -1 -38 0q-187 0 -324 69q-7 4 -19 11t-45 32t-60.5 54t-56 76t-41.5 99q-17 67 -21 141zM729 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL1\" />\n",

     

       115
       115
       +
              "<path d=\"M49 548q0 83 3.5 154.5t9.5 112.5l6 41q16 73 54 125t80.5 74.5t83 34.5t66.5 12h27h13q56 0 102 -16q52 -18 79.5 -45.5t46 -55.5t24.5 -47l5 -20q39 56 90.5 91.5t96.5 46t84.5 12.5t62.5 -2l23 -5q58 -15 99.5 -46t60.5 -70t27 -71t9 -65v-14q0 -41 -10 -79 q-12 -44 -30.5 -71t-37 -47t-32.5 -28l-13 -9q-49 -29 -103 -35q-20 -2 -38 -2q-30 0 -58 7q-42 11 -78.5 26.5t-56.5 28.5l-20 14q13 -99 13 -178q0 -34 -2 -64q-8 -102 -36 -168.5t-65.5 -108t-79 -61.5t-76 -27.5t-57.5 -6.5h-23h-9q-42 0 -80 9q-42 10 -71 27.5t-53 39 t-39 43t-25 39.5t-14 29l-4 11q-27 82 -41 181.5t-14 182.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL2\" />\n",

     

       116
       116
       +
              "<path d=\"M59 496q0 22 5 74q5 58 17.5 111t43.5 119t76 116t121.5 88t173.5 47q31 3 60 3q48 0 88 -8q66 -13 103 -34t64 -50t35 -44.5t12 -26.5q2 8 7.5 22t23.5 42.5t42 51t67 40.5t94 18q62 0 112.5 -29t82 -75t54.5 -101.5t33.5 -111t16.5 -101.5t7 -75l1 -29q2 -42 2 -81 q0 -54 -4 -103q-7 -84 -22.5 -141t-37.5 -102t-47.5 -71.5t-51 -44.5t-49.5 -25t-42.5 -10.5t-29.5 -2.5l-11 1q-1 2 -11.5 0t-29.5 2t-41.5 8.5t-46.5 19.5t-45 34.5t-37.5 53t-22.5 75.5q-2 -9 -8 -23.5t-35 -50.5t-71 -62q-42 -25 -122 -40q-45 -8 -95 -8q-41 0 -86 5 q-8 0 -22.5 1.5t-55 12.5t-78 28.5t-83 54.5t-78 85.5t-55 127t-22.5 174.5q-2 17 -2 35zM686 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL3\" />\n",

     

       117
       117
       +
              "<path d=\"M35 735q-2 23 -2 44q0 43 8 79q12 56 35 90.5t52.5 60.5t59.5 38.5t55.5 19.5t41.5 9l16 1q69 0 125.5 -19.5t94 -50t66.5 -74t45 -83.5t26 -86.5t13.5 -76t4.5 -58.5q2 59 22 101t47 60t54 28t46 10l19 1q44 0 79.5 -13.5t56.5 -34t36.5 -45.5t21.5 -50t9.5 -45.5 t3.5 -33.5v-13q0 81 11 149.5t30 115.5t44 85t52 60t54 38t52 22.5t44 10t30 3.5l11 -1q63 -1 113.5 -20t80.5 -48.5t51 -65t29.5 -70.5t13 -64.5t3.5 -47.5v-18q-3 -96 -18 -187.5t-34.5 -153.5t-38 -110t-31.5 -70l-12 -23q-36 -66 -84.5 -113.5t-91.5 -68.5t-80.5 -32 t-59.5 -11l-23 -1q-92 0 -161.5 26.5t-105 61.5t-57 79t-26.5 71t-5 45q-3 -22 -10 -48t-31 -71t-59 -79.5t-99.5 -60.5t-146.5 -26q-64 0 -121.5 24.5t-94 59.5t-64.5 70t-40 59l-12 25q-60 115 -97 246.5t-45 205.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL4\" />\n",

     

       118
       118
       +
              "<path d=\"M70 169v15v10q0 50 18 90q20 44 54.5 72t76.5 48.5t84 29.5t77 14.5t57 5.5l22 1q-75 18 -134.5 44t-95.5 53t-61.5 56.5t-36.5 55t-16.5 46t-5.5 32.5v12q3 71 34 128t77 91t101.5 59t110.5 35.5t100 16.5t73 6h28q112 -2 194 -16.5t131.5 -36t78.5 -53.5t39 -66 q8 -28 7 -61v-15q-2 -50 -27.5 -88t-64.5 -58t-85.5 -32.5t-92 -15t-83.5 -2.5t-62 2l-23 3q97 -12 174.5 -37.5t123 -56.5t78 -66t46 -67.5t20 -58.5t5.5 -42v-16q0 -73 -24.5 -133t-64 -97.5t-87.5 -65.5t-95.5 -41.5t-87 -21.5t-63.5 -10l-25 -1q-39 -2 -75 -2 q-80 0 -148 8q-98 11 -156.5 32.5t-100.5 48.5t-59.5 55t-27 51.5t-8.5 38.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL5\" />\n",

     

       119
       119
       +
              "<path d=\"M23 773q0 65 18.5 118.5t70 97.5t132.5 60q30 6 58 6q36 1 70 -9q60 -16 101.5 -53.5t76 -85.5t55 -98t34.5 -92t19 -69l6 -27q2 21 7 55t33.5 118t70.5 144t125 98q52 24 113 24q37 0 77 -9q71 -16 115 -55.5t58.5 -90.5t15.5 -109v-8q0 -54 -12 -106q-13 -56 -27 -100 t-26 -72l-12 -27q-4 -10 -12.5 -28t-37 -69.5t-59.5 -98t-80 -104t-99.5 -98.5t-116.5 -69t-133 -28q-98 0 -189 46t-154.5 110t-119.5 148.5t-85 145t-50 115.5q-19 48 -31 101.5t-12 118.5z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL6\" />\n",

     

       120
       120
       +
              "<path d=\"M85 390q-11 61 -11 117q0 90 28 167q21 57 51 108.5t58.5 83t54 55.5t40.5 34l16 10q129 77 288 86q26 1 51 1q131 0 246 -40q137 -47 228 -133q63 -59 106.5 -140.5t64 -164t30.5 -168.5q7 -64 7 -123q0 -18 -1 -36q-3 -74 -8 -133t-11 -92l-6 -34 q-21 -119 -64.5 -213.5t-99.5 -153.5t-122.5 -101t-135 -60t-135.5 -27q-46 -6 -88 -6q-18 0 -36 1q-59 4 -103.5 9t-70.5 11l-26 7q-76 27 -120 68t-54 81q-7 32 -7 62v12q2 36 11 58l10 22q17 37 48 61t64 32t64 11t50 1l20 -2q68 3 116.5 20t69 39t31.5 44t11 37v15 q-14 -4 -39 -8.5t-96 -8.5q-24 -1 -47 -1q-46 0 -88 5q-65 8 -143.5 41.5t-133.5 92.5q-89 94 -118 253zM641 444q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 0 -60 -26q-22 -24 -22 -53v-7z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL7\" />\n",

     

       121
       121
       +
              "<path d=\"\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL8\" />\n",

     

       122
       122
       +
              "<path d=\"M59 1126q-2 56 18.5 104.5t56 80t79 57t87.5 39.5t80.5 23.5t59.5 12.5l23 3q78 6 147 -1.5t117 -24.5t87.5 -39t63.5 -45.5t40.5 -43.5t23.5 -32l6 -13q39 -73 52 -152t2 -148t-33.5 -135.5t-52.5 -118t-57 -91.5t-45 -61l-19 -21h19t46.5 -4.5t66 -13.5t69.5 -29.5 t65 -49.5t45 -76.5t16 -106.5q-1 -45 -22 -82.5t-55 -63t-77.5 -44.5t-91.5 -30t-95.5 -18t-90.5 -9t-76.5 -2.5t-53.5 0.5l-19 1q-70 0 -130 8.5t-103 22.5t-78 32t-57.5 38t-39 40t-25 38t-13.5 32t-6 22l-1 8q-8 71 3.5 127t51.5 107t69 78t97 81q14 12 22 18.5t21 16.5 t23 19q30 25 53.5 53.5t39.5 60t15.5 64.5t-20.5 60t-48 40.5t-54 13t-49.5 -4t-37.5 -9.5l-14 -6q-51 -10 -90.5 4t-59.5 41.5t-32.5 56.5t-15.5 50z\" transform=\"scale(0.0341796875,-0.0341796875)\" id=\"WErAiHgL9\" />\n",

     

       123
       123
       +
              "<clipPath id=\"WErAiHgL10\">\n",

     

       124
       124
       +
              "<use xlink:href=\"#WErAiHgL1\" x=\"-202.12158203125\" y=\"17.5\">\n",

     

       125
       125
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       126
       126
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"19.324137087557;19.291309948237398;15.726205470907235;15.839487980635687;18.841995512517798;18.443879956274092;18.178921605760884;16.732545830356578;17.92377666271385;17.92720693456335;17.824816068448012;16.133531481019222;17.222678561165075;17.074127280821486;18.39204832494986;19.47927825179897;19.297581892372975;17.67670818971728;17.279416754903416;16.572962966597313;15.64369731757143;15.609779428363275;17.359575448389247;16.77386051141471;17.020059687602846;19.06715783131315;17.603011076584114;17.742041444105997;16.444493628460247;15.595432316563128;16.80057171504464;16.046789571945865;17.540895383348804;19.49473427277021;18.19791878938348;16.227373987292577;19.074286146331954;18.687039685686557;18.43760676757591;19.126374599590243;18.551541935332285;18.658990549847054;16.915147911366414;19.423906292288507;19.347603751592903;16.144738613216077;18.51601628660749;18.360603592949815;17.34562679096791;17.62142286449378;17.460055687400764;19.199328288378283;17.50336425052262;18.82609795916725;16.915696819474864;19.031403674325013;19.098802355026503;17.34404865952655;17.770820281680976;19.181321756767716;18.395091815488072;17.44643421944634;16.387244043964042;16.798668975075593;19.324137087557\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       127
       127
       +
              "</use>\n",

     

       128
       128
       +
              "<use xlink:href=\"#WErAiHgL2\" x=\"-149.79248046875\" y=\"17.5\">\n",

     

       129
       129
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       130
       130
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"18.298286552280974;16.164278741976503;19.13176198650438;16.572550051599265;19.145511343472187;16.73825249979784;19.32944684622463;18.324823225470418;17.51699526793327;17.570991024594207;18.105657595867164;17.85177884717794;16.747377298204;16.331273898151707;17.54756663342113;19.236617436535113;17.99306034690349;15.801501476296181;18.781599978848067;18.40379714990919;19.13061448380528;16.265610933216472;18.479130897109417;15.735035585594623;18.1116397097382;16.592398929348597;16.406466116979054;19.001964685792952;15.9250639305821;17.58945066143572;18.91577202873949;16.47932791187607;16.341915754782587;19.022327037465118;17.191670593558783;18.3678443956199;15.627492280506981;16.949427645212964;16.18752396850293;18.19106176565417;15.831612709618302;19.31824866138299;15.601378859307605;18.417694029767215;15.584579478892604;16.52276021622977;18.753417549609104;16.1284731547471;16.234955237003906;18.26598170405436;17.04226352541024;15.672643983189998;19.460006184811206;16.105680435026205;15.645075976973656;16.87680402214718;17.96095793329943;18.46983849250312;15.952459612072307;16.848855092786582;15.623243430506754;17.294613049969175;18.563879746352313;18.4597866548828;18.298286552280974\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       131
       131
       +
              "</use>\n",

     

       132
       132
       +
              "<use xlink:href=\"#WErAiHgL3\" x=\"-107.95654296875\" y=\"17.5\">\n",

     

       133
       133
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       134
       134
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"19.108080633400146;18.52264861470026;18.949783105301712;18.32138056020306;17.391118048393253;16.40211028139155;18.143313994628055;16.765223706913037;15.908196420198793;17.291287445676605;18.99905216539187;16.010145858475152;17.83982279244243;17.07181020042067;17.55921078705671;16.075317855907777;19.338924745948642;16.53638569300882;17.92431175621401;17.179022182622987;15.572132876499706;17.73180049535632;16.062277515845338;15.727123983292785;15.634224984994589;16.144660060724938;15.883487774532732;18.04030279015467;17.533036736142574;19.43386437619011;19.236521274787226;19.478100933038014;16.42989536267124;17.278789820478785;16.503123047364628;17.86494938219199;17.99665620301913;18.700829822537585;18.337993215317397;16.52643715395214;17.192067691050084;17.60475977512234;15.519299124214513;15.641997646831058;17.134905670888298;15.944699868919905;18.39507869147722;16.46346205776665;15.899092347019964;16.2270403132017;16.426101717508562;16.369414538873436;17.582945456191588;17.35761244457536;16.73890428350965;18.0670350307227;16.34979896797796;19.12625070692673;19.35246661931695;18.415724182310097;17.23493547515866;17.54600536886819;17.82430522416064;15.704938974423321;19.108080633400146\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       135
       135
       +
              "</use>\n",

     

       136
       136
       +
              "<use xlink:href=\"#WErAiHgL4\" x=\"-58.70361328125\" y=\"17.5\">\n",

     

       137
       137
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       138
       138
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"17.172065553929826;17.600258129279048;16.224900243300688;15.875147153833273;18.710620834821544;16.96473586617359;17.576838760395944;19.185801390367477;17.942041348412122;16.65832307012065;19.434084294213275;16.988906839736536;15.576220419238417;18.24124268925948;15.904647502452628;16.72368944282506;18.862446748475364;18.190287018579063;15.562888288857353;17.30569383680793;17.142697502294027;17.443451776008004;16.33298757343119;17.854980248616833;15.795157253901012;16.637437403921545;16.991608420187873;19.241081736194044;15.806192881440081;18.519936456991594;16.269436511867294;17.786210965317323;17.06712388145699;17.35289752899603;18.514322022942874;17.080170240631453;15.986917920534678;15.98708039888616;15.822042871014519;18.90028349561939;18.06396637532426;19.33867425358325;18.270610186618597;15.598675090616403;18.136638655375673;18.608847738599195;18.394073119932518;17.49179808171847;16.930338470923886;17.32814285580714;18.69488833471872;16.57576997531061;17.605214979225202;17.410238168226087;19.318787387845322;18.71739990767735;19.228215440872955;18.844022294289577;16.687054675658697;16.42650944460629;17.455157893793455;16.537621365444693;17.210615327823714;18.216560861444595;17.172065553929826\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       139
       139
       +
              "</use>\n",

     

       140
       140
       +
              "<use xlink:href=\"#WErAiHgL5\" x=\"0.22216796875\" y=\"17.5\">\n",

     

       141
       141
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       142
       142
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"19.17432090891334;17.843602321380402;18.7714130155966;15.883789243434663;16.924228911880682;19.490992085494522;16.086004191824927;17.167072173899555;15.767357581811265;15.844597426395598;19.082001408378922;19.45454811483057;18.092328311132544;16.014060019669373;16.685530078130782;16.426798573386762;18.182929303799767;18.224396029991347;17.255383347646312;17.595979073255904;15.948281054378096;17.663572996458;19.29975488689121;18.523109210244115;15.884617845083582;17.566005445975094;18.361459270541847;16.529042070197043;19.079586599991057;17.343763856511888;18.3129248390927;17.116653557850963;19.480532150225436;18.63126295102649;17.793761602906123;16.079060091574764;17.264733037914887;15.6175396385709;17.88065670082722;19.027270070813692;16.22169796803166;17.54068601291097;17.42983330112547;17.119658716133877;18.34184031877659;19.246679675941035;18.32157014751221;17.38999671817144;19.347909645664032;16.822910002269136;18.482451019047755;18.133940103096172;18.546435499777793;18.908292911225235;16.399995521690087;17.984996115800016;17.110895538815566;18.167887520270217;19.40893625858238;18.039323386996088;15.546423176316438;17.358195231067338;18.346305933794774;19.03288374740802;19.17432090891334\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       143
       143
       +
              "</use>\n",

     

       144
       144
       +
              "<use xlink:href=\"#WErAiHgL6\" x=\"39.46044921875\" y=\"17.5\">\n",

     

       145
       145
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       146
       146
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"18.100340133230947;18.76427960677236;15.56854958542948;19.272918260590053;18.417854534663782;17.92577580767231;19.121292120680188;19.038718908208274;15.901829522549633;18.762484865120747;18.568002963113543;16.298152186703973;18.476982770007467;17.844909774667702;16.265977695280423;18.716757583973582;16.051492512478955;17.949294825753448;17.23759193664957;16.514764443440473;17.764378493236507;17.36834751703482;16.319989978444156;19.36712314963816;15.791301469511914;15.512149152328888;17.441692517196124;18.848765989216805;18.133608253760478;18.518678354965495;17.44000181332036;18.19920941955595;16.839562548974325;16.567781057283934;17.511602832684538;15.610111265989747;15.819234359666222;18.515838961232788;16.194798551786665;18.501022903279;18.637503921917954;17.117963798501876;18.199972737584474;18.649689162774;18.956096402393687;16.039481015624983;16.150280579909165;17.026653676995508;17.358626773228572;16.679275487537627;15.541600951035464;17.729686691385268;19.367655038887854;16.965838731349027;17.651997680963095;17.029316620955058;17.271201914680454;18.981974830520677;16.733721777745423;18.096260968845616;17.435146143723358;17.654276690218072;19.158812502107267;15.806856043874703;18.100340133230947\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       147
       147
       +
              "</use>\n",

     

       148
       148
       +
              "<use xlink:href=\"#WErAiHgL7\" x=\"83.89404296875\" y=\"17.5\">\n",

     

       149
       149
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       150
       150
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"18.797481725009643;16.71667722862086;18.085233090770295;18.68336392379322;18.113637764536453;17.07186625951781;18.86281907321502;15.87179519261299;18.033257609922067;17.064503240471847;17.621863956694423;18.903764341757842;18.691459521790456;18.01536068585924;16.73231712105784;16.431655286240023;17.330152856150356;16.428438291628133;16.60994613353222;19.33101857042053;15.947864254575299;18.774465494972127;17.016856397885;16.958413517883915;16.773566048028542;15.809542248687551;17.32952080257834;16.16598872833203;17.26803588477986;16.667948647173095;19.078292820866682;19.186969808294943;17.267985939703188;18.058480895039562;19.21856883981926;16.804906581609988;15.898217555514494;16.45136751141817;16.25818481303237;18.213882620519925;16.99515331343813;16.92439166129364;18.680390540819793;16.432688333649505;18.734145478922123;18.031626653015802;17.101040476813708;18.794076465052875;16.869012990020046;19.01432525277344;19.20370368942909;17.510425286914632;18.25993322527753;19.29512844444772;18.470239621383687;18.504028192574403;18.977240613237264;19.24228357172442;18.514137267158166;19.41627674449577;16.666423873065096;17.989944804817238;18.18263173319903;16.96973709191637;18.797481725009643\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       151
       151
       +
              "</use>\n",

     

       152
       152
       +
              "<use xlink:href=\"#WErAiHgL8\" x=\"131.47216796875\" y=\"17.5\">\n",

     

       153
       153
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       154
       154
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"17.080711140751834;16.19909689599043;19.330849197546666;16.916014088414155;17.406536045303866;19.074260262355665;16.245800355520224;19.34267799195689;16.00822293662995;15.612118098267;16.903120016070773;16.936699184091;19.170577284050097;19.032777003417344;18.546243746631024;17.245711595069945;17.670745620739233;16.447078997643914;18.83411877139345;17.059644447003237;16.63861329760842;18.05122404994667;16.102314363712715;16.765402084652465;19.204710140778165;15.880181639513852;16.06879981708168;16.31738246474658;16.503920112292988;17.181590210211635;16.50070491698806;16.870759611949783;16.48592557630948;16.460353724003927;17.94241902371801;16.8458323460846;16.991156120537948;18.57126625214372;15.746753360697536;16.076169555707967;18.903294416161224;17.219109518635328;18.615213998315095;16.031173775225227;17.591960357928016;18.881495956075632;16.852166940218158;18.572714469152427;17.941504268568327;17.07829440318809;19.489404918376827;17.06921114821956;17.395173504645857;17.977942820530266;16.767355190057494;18.850555915282087;17.890144231633766;17.852002367688048;17.654345591803718;19.43973441409201;19.455720406809302;18.863165428982644;17.31830481199631;17.147159111082434;17.080711140751834\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       155
       155
       +
              "</use>\n",

     

       156
       156
       +
              "<use xlink:href=\"#WErAiHgL9\" x=\"161.41357421875\" y=\"17.5\">\n",

     

       157
       157
       +
              "<animate attributeName=\"x\" dur=\"128s\" values=\"161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       158
       158
       +
              "<animate attributeName=\"y\" dur=\"128s\" values=\"17.599067165036384;15.684629436697106;15.933017326931099;19.48103060100494;16.012842062665598;19.2495377040299;18.21891658008112;19.160361116382305;15.80934600212031;16.723241372635748;18.691710970024175;15.535381801514223;15.923839916845994;16.902564830201552;16.192552924899463;16.087440861085202;18.17905744860602;15.86769170570407;19.3860173767723;18.097445829672445;15.699066515511975;19.094881340111694;16.466106118697553;17.425856057986543;17.735066325377616;16.054534187786356;17.50863562649949;15.741235287438158;16.29842816430794;19.174294144100713;18.788194352812756;17.591539631414015;18.22738288427816;19.00201258774057;16.059864800319716;17.468411654278867;16.027054087523638;15.966081954440476;15.932941808294345;16.3471435248239;15.712626296759733;16.3608679958098;17.016526709101825;17.99075155400056;18.934422862346082;19.116739330737822;18.370339170828384;17.528350763945213;19.16794945822426;16.15198700162683;15.92178177336796;18.771235410910514;18.008527128612236;16.341258113785702;17.009200698193677;16.689575235266634;17.22345328759322;17.21091887743478;17.092623332550826;18.69095955190943;18.746019425967766;17.74985102116934;17.39111954785501;16.63783697865552;17.599067165036384\" keyTimes=\"0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1\" repeatCount=\"indefinite\" fill=\"freeze\" calcMode=\"spline\" keySplines=\"0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1\" />\n",

     

       159
       159
       +
              "</use>\n",

     

       160
       160
       +
              "</clipPath>\n",

     

       161
       161
       +
              "</defs>\n",

     

       162
       162
       +
              "<rect x=\"-500\" y=\"-50\" width=\"1000\" height=\"100\" fill=\"url(#WErAiHgL0)\" clip-path=\"url(#WErAiHgL10)\" />\n",

     

       163
       163
       +
              "<g id=\"scrub\" visibility=\"hidden\">\n",

     

       164
       164
       +
              "<path d=\"M-168.0,40.0 L168.0,40.0\" stroke=\"#ccc\" stroke-width=\"4\" stroke-linecap=\"round\" />\n",

     

       165
       165
       +
              "<rect x=\"-168.0\" y=\"40.0\" width=\"0\" height=\"0.001\" stroke=\"#05f\" stroke-width=\"4\" stroke-linejoin=\"round\">\n",

     

       166
       166
       +
              "<animate attributeName=\"width\" dur=\"128s\" values=\"0;336\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\n",

     

       167
       167
       +
              "</rect>\n",

     

       168
       168
       +
              "<g id=\"scrub-capture\" data-xmin=\"-168.0\" data-xmax=\"168.0\" data-totaldur=\"128\" data-startdelay=\"0\" data-enddelay=\"0\" data-pauseonload=\"0\">\n",

     

       169
       169
       +
              "<rect x=\"-170.0\" y=\"30.0\" width=\"340\" height=\"20\" fill=\"rgba(255,255,255,0)\" />\n",

     

       170
       170
       +
              "<circle cx=\"-168.0\" cy=\"40.0\" r=\"6\" fill=\"#05f\" id=\"scrub-knob\" visibility=\"hidden\">\n",

     

       171
       171
       +
              "<animate attributeName=\"cx\" dur=\"128s\" values=\"-168.0;168.0\" keyTimes=\"0;1\" repeatCount=\"indefinite\" fill=\"freeze\" />\n",

     

       172
       172
       +
              "</circle>\n",

     

       173
       173
       +
              "</g>\n",

     

       174
       174
       +
              "<g id=\"scrub-play\" visibility=\"hidden\">\n",

     

       175
       175
       +
              "<rect x=\"-191.0\" y=\"36.0\" width=\"8\" height=\"8\" fill=\"#05f\" stroke=\"#05f\" stroke-width=\"8\" stroke-linejoin=\"round\" />\n",

     

       176
       176
       +
              "<path d=\"M-191.0,36.0 v8.0 l8.0,-4.0 Z\" fill=\"#eee\" />\n",

     

       177
       177
       +
              "</g>\n",

     

       178
       178
       +
              "<g id=\"scrub-pause\" visibility=\"hidden\">\n",

     

       179
       179
       +
              "<rect x=\"-191.0\" y=\"36.0\" width=\"8\" height=\"8\" fill=\"#05f\" stroke=\"#05f\" stroke-width=\"8\" stroke-linejoin=\"round\" />\n",

     

       180
       180
       +
              "<rect x=\"-190.0\" y=\"36.0\" width=\"2.0\" height=\"8.0\" fill=\"#eee\" />\n",

     

       181
       181
       +
              "<rect x=\"-186.0\" y=\"36.0\" width=\"2.0\" height=\"8.0\" fill=\"#eee\" />\n",

     

       182
       182
       +
              "</g>\n",

     

       183
       183
       +
              "</g>\n",

     

       184
       184
       +
              "<script>/*<![CDATA[*/\n",

     

       185
       185
       +
              "/* Animation playback controls generated by drawsvg */\n",

     

       186
       186
       +
              "/* https://github.com/cduck/drawsvg/ */\n",

     

       187
       187
       +
              "function svgOnLoad(event) {\n",

     

       188
       188
       +
              "    /* Support standalone SVG or embedded in HTML or iframe */\n",

     

       189
       189
       +
              "    if (event && event.target && event.target.ownerDocument) {\n",

     

       190
       190
       +
              "        svgSetup(event.target.ownerDocument);\n",

     

       191
       191
       +
              "    } else if (document && document.currentScript\n",

     

       192
       192
       +
              "               && document.currentScript.parentElement) {\n",

     

       193
       193
       +
              "        svgSetup(document.currentScript.parentElement);\n",

     

       194
       194
       +
              "    }\n",

     

       195
       195
       +
              "}\n",

     

       196
       196
       +
              "function svgSetup(doc) {\n",

     

       197
       197
       +
              "    var svgRoot = doc.documentElement || doc;\n",

     

       198
       198
       +
              "    var scrubCapture = doc.getElementById(\"scrub-capture\");\n",

     

       199
       199
       +
              "    /* Block multiple setups */\n",

     

       200
       200
       +
              "    if (!scrubCapture || scrubCapture.getAttribute(\"svgSetupDone\")) {\n",

     

       201
       201
       +
              "        return;\n",

     

       202
       202
       +
              "    }\n",

     

       203
       203
       +
              "    scrubCapture.setAttribute(\"svgSetupDone\", true);\n",

     

       204
       204
       +
              "    var scrubContainer = doc.getElementById(\"scrub\");\n",

     

       205
       205
       +
              "    var scrubPlay = doc.getElementById(\"scrub-play\");\n",

     

       206
       206
       +
              "    var scrubPause = doc.getElementById(\"scrub-pause\");\n",

     

       207
       207
       +
              "    var scrubKnob = doc.getElementById(\"scrub-knob\");\n",

     

       208
       208
       +
              "    var scrubXMin = parseFloat(scrubCapture.dataset.xmin);\n",

     

       209
       209
       +
              "    var scrubXMax = parseFloat(scrubCapture.dataset.xmax);\n",

     

       210
       210
       +
              "    var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);\n",

     

       211
       211
       +
              "    var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);\n",

     

       212
       212
       +
              "    var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);\n",

     

       213
       213
       +
              "    var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);\n",

     

       214
       214
       +
              "    var paused = false;\n",

     

       215
       215
       +
              "    var dragXOffset = 0;\n",

     

       216
       216
       +
              "    var point = svgRoot.createSVGPoint();\n",

     

       217
       217
       +
              "\n",

     

       218
       218
       +
              "    function screenToSvgX(p) {\n",

     

       219
       219
       +
              "        var matrix = scrubKnob.getScreenCTM().inverse();\n",

     

       220
       220
       +
              "        point.x = p.x;\n",

     

       221
       221
       +
              "        point.y = p.y;\n",

     

       222
       222
       +
              "        return point.matrixTransform(matrix).x;\n",

     

       223
       223
       +
              "    };\n",

     

       224
       224
       +
              "    function screenToProgress(p) {\n",

     

       225
       225
       +
              "        var matrix = scrubKnob.getScreenCTM().inverse();\n",

     

       226
       226
       +
              "        point.x = p.x;\n",

     

       227
       227
       +
              "        point.y = p.y;\n",

     

       228
       228
       +
              "        var x = point.matrixTransform(matrix).x;\n",

     

       229
       229
       +
              "        if (x <= scrubXMin) {\n",

     

       230
       230
       +
              "            return scrubStartDelay / scrubTotalDur;\n",

     

       231
       231
       +
              "        }\n",

     

       232
       232
       +
              "        if (x >= scrubXMax) {\n",

     

       233
       233
       +
              "            return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;\n",

     

       234
       234
       +
              "        }\n",

     

       235
       235
       +
              "        return (scrubStartDelay/scrubTotalDur\n",

     

       236
       236
       +
              "                + (x - dragXOffset - scrubXMin)\n",

     

       237
       237
       +
              "                  / (scrubXMax - scrubXMin)\n",

     

       238
       238
       +
              "                  * (scrubTotalDur - scrubStartDelay - scrubEndDelay)\n",

     

       239
       239
       +
              "                  / scrubTotalDur);\n",

     

       240
       240
       +
              "    };\n",

     

       241
       241
       +
              "    function currentScrubX() {\n",

     

       242
       242
       +
              "        return scrubKnob.cx.animVal.value;\n",

     

       243
       243
       +
              "    };\n",

     

       244
       244
       +
              "    function pause() {\n",

     

       245
       245
       +
              "        svgRoot.pauseAnimations();\n",

     

       246
       246
       +
              "        scrubPlay.setAttribute(\"visibility\", \"visible\");\n",

     

       247
       247
       +
              "        scrubPause.setAttribute(\"visibility\", \"hidden\");\n",

     

       248
       248
       +
              "        paused = true;\n",

     

       249
       249
       +
              "    };\n",

     

       250
       250
       +
              "    function play() {\n",

     

       251
       251
       +
              "        svgRoot.unpauseAnimations();\n",

     

       252
       252
       +
              "        scrubPause.setAttribute(\"visibility\", \"visible\");\n",

     

       253
       253
       +
              "        scrubPlay.setAttribute(\"visibility\", \"hidden\");\n",

     

       254
       254
       +
              "        paused = false;\n",

     

       255
       255
       +
              "    };\n",

     

       256
       256
       +
              "    function scrub(playbackFraction) {\n",

     

       257
       257
       +
              "        var t = scrubTotalDur * playbackFraction;\n",

     

       258
       258
       +
              "        /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */\n",

     

       259
       259
       +
              "        var limit = scrubTotalDur - 10e-3;\n",

     

       260
       260
       +
              "        if (t < 0) t = 0;\n",

     

       261
       261
       +
              "        else if (t > limit) t = limit;\n",

     

       262
       262
       +
              "        svgRoot.setCurrentTime(t);\n",

     

       263
       263
       +
              "    };\n",

     

       264
       264
       +
              "    function mousedown(e) {\n",

     

       265
       265
       +
              "        svgRoot.pauseAnimations();\n",

     

       266
       266
       +
              "        if (e.target == scrubKnob) {\n",

     

       267
       267
       +
              "            dragXOffset = screenToSvgX(e) - currentScrubX();\n",

     

       268
       268
       +
              "        } else {\n",

     

       269
       269
       +
              "            dragXOffset = 0;\n",

     

       270
       270
       +
              "        }\n",

     

       271
       271
       +
              "        scrub(screenToProgress(e));\n",

     

       272
       272
       +
              "        /* Global document listeners */\n",

     

       273
       273
       +
              "        document.addEventListener('mousemove', mousemove);\n",

     

       274
       274
       +
              "        document.addEventListener('mouseup', mouseup);\n",

     

       275
       275
       +
              "        e.preventDefault();\n",

     

       276
       276
       +
              "    };\n",

     

       277
       277
       +
              "    function mouseup(e) {\n",

     

       278
       278
       +
              "        dragXOffset = 0;\n",

     

       279
       279
       +
              "        document.removeEventListener('mousemove', mousemove);\n",

     

       280
       280
       +
              "        document.removeEventListener('mouseup', mouseup);\n",

     

       281
       281
       +
              "        if (!paused) {\n",

     

       282
       282
       +
              "            svgRoot.unpauseAnimations();\n",

     

       283
       283
       +
              "        }\n",

     

       284
       284
       +
              "        e.preventDefault();\n",

     

       285
       285
       +
              "    };\n",

     

       286
       286
       +
              "    function mousemove(e) {\n",

     

       287
       287
       +
              "        scrub(screenToProgress(e));\n",

     

       288
       288
       +
              "    };\n",

     

       289
       289
       +
              "    scrubPause.addEventListener(\"click\", pause);\n",

     

       290
       290
       +
              "    scrubPlay.addEventListener(\"click\", play);\n",

     

       291
       291
       +
              "    scrubCapture.addEventListener(\"mousedown\", mousedown);\n",

     

       292
       292
       +
              "    scrubContainer.setAttribute(\"visibility\", \"visible\");\n",

     

       293
       293
       +
              "    scrubKnob.setAttribute(\"visibility\", \"visible\");\n",

     

       294
       294
       +
              "    if (scrubPauseOnLoad) {\n",

     

       295
       295
       +
              "        pause();\n",

     

       296
       296
       +
              "        scrub(0);\n",

     

       297
       297
       +
              "    } else {\n",

     

       298
       298
       +
              "        play();\n",

     

       299
       299
       +
              "    }\n",

     

       300
       300
       +
              "};\n",

     

       301
       301
       +
              "svgOnLoad();\n",

     

       302
       302
       +
              "/*]]>*/</script>\n",

     

       303
       303
       +
              "</svg>"

     

       304
       304
       +
             ],

     

       305
       305
       +
             "text/plain": [

     

       306
       306
       +
              "<drawsvg.drawing.Drawing at 0x1061aa9b0>"

     

       307
       307
       +
             ]

     

       308
       308
       +
            },

     

       309
       309
       +
            "execution_count": 2,

     

       310
       310
       +
            "metadata": {},

     

       311
       311
       +
            "output_type": "execute_result"

     

       312
       312
       +
           }

     

       313
       313
       +
          ],

     

       314
       314
       +
          "source": [

     

       315
       315
       +
           "d  # Display as embedded SVG"

     

       316
       316
       +
          ]

     

       317
       317
       +
         },

     

       318
       318
       +
         {

     

       319
       319
       +
          "cell_type": "code",

     

       320
       320
       +
          "execution_count": 3,

     

       321
       321
       +
          "id": "30cb15ba",

     

       322
       322
       +
          "metadata": {},

     

       323
       323
       +
          "outputs": [

     

       324
       324
       +
           {

     

       325
       325
       +
            "data": {

     

       326
       326
       +
             "image/png": "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\n",

     

       327
       327
       +
             "text/plain": [

     

       328
       328
       +
              "<drawsvg.raster.Raster at 0x1061a9d20>"

     

       329
       329
       +
             ]

     

       330
       330
       +
            },

     

       331
       331
       +
            "execution_count": 3,

     

       332
       332
       +
            "metadata": {},

     

       333
       333
       +
            "output_type": "execute_result"

     

       334
       334
       +
           }

     

       335
       335
       +
          ],

     

       336
       336
       +
          "source": [

     

       337
       337
       +
           "d.rasterize()  # Display as static PNG"

     

       338
       338
       +
          ]

     

       339
       339
       +
         }

     

       340
       340
       +
        ],

     

       341
       341
       +
        "metadata": {

     

       342
       342
       +
         "kernelspec": {

     

       343
       343
       +
          "display_name": "Python 3",

     

       344
       344
       +
          "language": "python",

     

       345
       345
       +
          "name": "python3"

     

       346
       346
       +
         },

     

       347
       347
       +
         "language_info": {

     

       348
       348
       +
          "codemirror_mode": {

     

       349
       349
       +
           "name": "ipython",

     

       350
       350
       +
           "version": 3

     

       351
       351
       +
          },

     

       352
       352
       +
          "file_extension": ".py",

     

       353
       353
       +
          "mimetype": "text/x-python",

     

       354
       354
       +
          "name": "python",

     

       355
       355
       +
          "nbconvert_exporter": "python",

     

       356
       356
       +
          "pygments_lexer": "ipython3",

     

       357
       357
       +
          "version": "3.10.4"

     

       358
       358
       +
         }

     

       359
       359
       +
        },

     

       360
       360
       +
        "nbformat": 4,

     

       361
       361
       +
        "nbformat_minor": 5

     

       362
       362
       +
       }

+204

examples/logo.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="400" height="100" viewBox="-200.0 -50.0 400 100" onload="svgOnLoad(event);">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <linearGradient x1="-1250" y1="0" x2="1250" y2="0" gradientUnits="userSpaceOnUse" id="d0">

     

       6
       6
       +
       <stop offset="0" stop-color="#5544ee" stop-opacity="1" />

     

       7
       7
       +
       <stop offset="0.2" stop-color="#5544ee" stop-opacity="1" />

     

       8
       8
       +
       <stop offset="0.4" stop-color="#ee0055" stop-opacity="1" />

     

       9
       9
       +
       <stop offset="0.6" stop-color="#ee0055" stop-opacity="1" />

     

       10
       10
       +
       <stop offset="0.8" stop-color="#5544ee" stop-opacity="1" />

     

       11
       11
       +
       <stop offset="1" stop-color="#5544ee" stop-opacity="1" />

     

       12
       12
       +
       <animate attributeName="x1" dur="128s" values="-2250;-250" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       13
       13
       +
       <animate attributeName="x2" dur="128s" values="250;2250" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       14
       14
       +
       </linearGradient>

     

       15
       15
       +
       <path d="M85 438q-1 21 -1 42q0 55 8 113q10 80 45.5 156.5t93.5 131.5q51 49 111.5 81.5t115.5 45.5q56 14 111 18q26 2 50 2q25 0 49 -3q44 -5 79.5 -11t54.5 -12l19 -7q-1 7 -3 19.5t-5.5 50t-4.5 73.5v17q0 31 2 69q4 50 12.5 92.5t28 86t47.5 74t72.5 50t100.5 19.5 q63 0 115.5 -21t86.5 -54t60 -73t39.5 -80.5t22 -73.5t10.5 -54l2 -21q2 -16 4.5 -43.5t5.5 -111.5q2 -42 1 -84q0 -40 -1 -82q-3 -82 -17.5 -194t-41.5 -208q57 -27 89 -77t35 -105v-15q0 -47 -16 -95q-18 -54 -55 -93q-28 -30 -63 -47q-36 -17 -68 -20q-15 -1 -30 -1 q-18 -1 -35 1q-33 4 -60 13t-48.5 18t-33.5 15l-12 7q-159 -83 -371 -91q-19 -1 -38 0q-187 0 -324 69q-7 4 -19 11t-45 32t-60.5 54t-56 76t-41.5 99q-17 67 -21 141zM729 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d1" />

     

       16
       16
       +
       <path d="M49 548q0 83 3.5 154.5t9.5 112.5l6 41q16 73 54 125t80.5 74.5t83 34.5t66.5 12h27h13q56 0 102 -16q52 -18 79.5 -45.5t46 -55.5t24.5 -47l5 -20q39 56 90.5 91.5t96.5 46t84.5 12.5t62.5 -2l23 -5q58 -15 99.5 -46t60.5 -70t27 -71t9 -65v-14q0 -41 -10 -79 q-12 -44 -30.5 -71t-37 -47t-32.5 -28l-13 -9q-49 -29 -103 -35q-20 -2 -38 -2q-30 0 -58 7q-42 11 -78.5 26.5t-56.5 28.5l-20 14q13 -99 13 -178q0 -34 -2 -64q-8 -102 -36 -168.5t-65.5 -108t-79 -61.5t-76 -27.5t-57.5 -6.5h-23h-9q-42 0 -80 9q-42 10 -71 27.5t-53 39 t-39 43t-25 39.5t-14 29l-4 11q-27 82 -41 181.5t-14 182.5z" transform="scale(0.0341796875,-0.0341796875)" id="d2" />

     

       17
       17
       +
       <path d="M59 496q0 22 5 74q5 58 17.5 111t43.5 119t76 116t121.5 88t173.5 47q31 3 60 3q48 0 88 -8q66 -13 103 -34t64 -50t35 -44.5t12 -26.5q2 8 7.5 22t23.5 42.5t42 51t67 40.5t94 18q62 0 112.5 -29t82 -75t54.5 -101.5t33.5 -111t16.5 -101.5t7 -75l1 -29q2 -42 2 -81 q0 -54 -4 -103q-7 -84 -22.5 -141t-37.5 -102t-47.5 -71.5t-51 -44.5t-49.5 -25t-42.5 -10.5t-29.5 -2.5l-11 1q-1 2 -11.5 0t-29.5 2t-41.5 8.5t-46.5 19.5t-45 34.5t-37.5 53t-22.5 75.5q-2 -9 -8 -23.5t-35 -50.5t-71 -62q-42 -25 -122 -40q-45 -8 -95 -8q-41 0 -86 5 q-8 0 -22.5 1.5t-55 12.5t-78 28.5t-83 54.5t-78 85.5t-55 127t-22.5 174.5q-2 17 -2 35zM686 483q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 -1 -60 -27q-22 -24 -22 -52v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d3" />

     

       18
       18
       +
       <path d="M35 735q-2 23 -2 44q0 43 8 79q12 56 35 90.5t52.5 60.5t59.5 38.5t55.5 19.5t41.5 9l16 1q69 0 125.5 -19.5t94 -50t66.5 -74t45 -83.5t26 -86.5t13.5 -76t4.5 -58.5q2 59 22 101t47 60t54 28t46 10l19 1q44 0 79.5 -13.5t56.5 -34t36.5 -45.5t21.5 -50t9.5 -45.5 t3.5 -33.5v-13q0 81 11 149.5t30 115.5t44 85t52 60t54 38t52 22.5t44 10t30 3.5l11 -1q63 -1 113.5 -20t80.5 -48.5t51 -65t29.5 -70.5t13 -64.5t3.5 -47.5v-18q-3 -96 -18 -187.5t-34.5 -153.5t-38 -110t-31.5 -70l-12 -23q-36 -66 -84.5 -113.5t-91.5 -68.5t-80.5 -32 t-59.5 -11l-23 -1q-92 0 -161.5 26.5t-105 61.5t-57 79t-26.5 71t-5 45q-3 -22 -10 -48t-31 -71t-59 -79.5t-99.5 -60.5t-146.5 -26q-64 0 -121.5 24.5t-94 59.5t-64.5 70t-40 59l-12 25q-60 115 -97 246.5t-45 205.5z" transform="scale(0.0341796875,-0.0341796875)" id="d4" />

     

       19
       19
       +
       <path d="M70 169v15v10q0 50 18 90q20 44 54.5 72t76.5 48.5t84 29.5t77 14.5t57 5.5l22 1q-75 18 -134.5 44t-95.5 53t-61.5 56.5t-36.5 55t-16.5 46t-5.5 32.5v12q3 71 34 128t77 91t101.5 59t110.5 35.5t100 16.5t73 6h28q112 -2 194 -16.5t131.5 -36t78.5 -53.5t39 -66 q8 -28 7 -61v-15q-2 -50 -27.5 -88t-64.5 -58t-85.5 -32.5t-92 -15t-83.5 -2.5t-62 2l-23 3q97 -12 174.5 -37.5t123 -56.5t78 -66t46 -67.5t20 -58.5t5.5 -42v-16q0 -73 -24.5 -133t-64 -97.5t-87.5 -65.5t-95.5 -41.5t-87 -21.5t-63.5 -10l-25 -1q-39 -2 -75 -2 q-80 0 -148 8q-98 11 -156.5 32.5t-100.5 48.5t-59.5 55t-27 51.5t-8.5 38.5z" transform="scale(0.0341796875,-0.0341796875)" id="d5" />

     

       20
       20
       +
       <path d="M23 773q0 65 18.5 118.5t70 97.5t132.5 60q30 6 58 6q36 1 70 -9q60 -16 101.5 -53.5t76 -85.5t55 -98t34.5 -92t19 -69l6 -27q2 21 7 55t33.5 118t70.5 144t125 98q52 24 113 24q37 0 77 -9q71 -16 115 -55.5t58.5 -90.5t15.5 -109v-8q0 -54 -12 -106q-13 -56 -27 -100 t-26 -72l-12 -27q-4 -10 -12.5 -28t-37 -69.5t-59.5 -98t-80 -104t-99.5 -98.5t-116.5 -69t-133 -28q-98 0 -189 46t-154.5 110t-119.5 148.5t-85 145t-50 115.5q-19 48 -31 101.5t-12 118.5z" transform="scale(0.0341796875,-0.0341796875)" id="d6" />

     

       21
       21
       +
       <path d="M85 390q-11 61 -11 117q0 90 28 167q21 57 51 108.5t58.5 83t54 55.5t40.5 34l16 10q129 77 288 86q26 1 51 1q131 0 246 -40q137 -47 228 -133q63 -59 106.5 -140.5t64 -164t30.5 -168.5q7 -64 7 -123q0 -18 -1 -36q-3 -74 -8 -133t-11 -92l-6 -34 q-21 -119 -64.5 -213.5t-99.5 -153.5t-122.5 -101t-135 -60t-135.5 -27q-46 -6 -88 -6q-18 0 -36 1q-59 4 -103.5 9t-70.5 11l-26 7q-76 27 -120 68t-54 81q-7 32 -7 62v12q2 36 11 58l10 22q17 37 48 61t64 32t64 11t50 1l20 -2q68 3 116.5 20t69 39t31.5 44t11 37v15 q-14 -4 -39 -8.5t-96 -8.5q-24 -1 -47 -1q-46 0 -88 5q-65 8 -143.5 41.5t-133.5 92.5q-89 94 -118 253zM641 444q5 -75 82 -75q35 0 57.5 20.5t22.5 54.5t-22 60t-58 26q-35 0 -60 -26q-22 -24 -22 -53v-7z" transform="scale(0.0341796875,-0.0341796875)" id="d7" />

     

       22
       22
       +
       <path d="" transform="scale(0.0341796875,-0.0341796875)" id="d8" />

     

       23
       23
       +
       <path d="M59 1126q-2 56 18.5 104.5t56 80t79 57t87.5 39.5t80.5 23.5t59.5 12.5l23 3q78 6 147 -1.5t117 -24.5t87.5 -39t63.5 -45.5t40.5 -43.5t23.5 -32l6 -13q39 -73 52 -152t2 -148t-33.5 -135.5t-52.5 -118t-57 -91.5t-45 -61l-19 -21h19t46.5 -4.5t66 -13.5t69.5 -29.5 t65 -49.5t45 -76.5t16 -106.5q-1 -45 -22 -82.5t-55 -63t-77.5 -44.5t-91.5 -30t-95.5 -18t-90.5 -9t-76.5 -2.5t-53.5 0.5l-19 1q-70 0 -130 8.5t-103 22.5t-78 32t-57.5 38t-39 40t-25 38t-13.5 32t-6 22l-1 8q-8 71 3.5 127t51.5 107t69 78t97 81q14 12 22 18.5t21 16.5 t23 19q30 25 53.5 53.5t39.5 60t15.5 64.5t-20.5 60t-48 40.5t-54 13t-49.5 -4t-37.5 -9.5l-14 -6q-51 -10 -90.5 4t-59.5 41.5t-32.5 56.5t-15.5 50z" transform="scale(0.0341796875,-0.0341796875)" id="d9" />

     

       24
       24
       +
       <clipPath id="d10">

     

       25
       25
       +
       <use xlink:href="#d1" x="-202.12158203125" y="17.5">

     

       26
       26
       +
       <animate attributeName="x" dur="128s" values="-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125;-202.12158203125" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       27
       27
       +
       <animate attributeName="y" dur="128s" values="19.324137087557;19.291309948237398;15.726205470907235;15.839487980635687;18.841995512517798;18.443879956274092;18.178921605760884;16.732545830356578;17.92377666271385;17.92720693456335;17.824816068448012;16.133531481019222;17.222678561165075;17.074127280821486;18.39204832494986;19.47927825179897;19.297581892372975;17.67670818971728;17.279416754903416;16.572962966597313;15.64369731757143;15.609779428363275;17.359575448389247;16.77386051141471;17.020059687602846;19.06715783131315;17.603011076584114;17.742041444105997;16.444493628460247;15.595432316563128;16.80057171504464;16.046789571945865;17.540895383348804;19.49473427277021;18.19791878938348;16.227373987292577;19.074286146331954;18.687039685686557;18.43760676757591;19.126374599590243;18.551541935332285;18.658990549847054;16.915147911366414;19.423906292288507;19.347603751592903;16.144738613216077;18.51601628660749;18.360603592949815;17.34562679096791;17.62142286449378;17.460055687400764;19.199328288378283;17.50336425052262;18.82609795916725;16.915696819474864;19.031403674325013;19.098802355026503;17.34404865952655;17.770820281680976;19.181321756767716;18.395091815488072;17.44643421944634;16.387244043964042;16.798668975075593;19.324137087557" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       28
       28
       +
       </use>

     

       29
       29
       +
       <use xlink:href="#d2" x="-149.79248046875" y="17.5">

     

       30
       30
       +
       <animate attributeName="x" dur="128s" values="-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875;-149.79248046875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       31
       31
       +
       <animate attributeName="y" dur="128s" values="18.298286552280974;16.164278741976503;19.13176198650438;16.572550051599265;19.145511343472187;16.73825249979784;19.32944684622463;18.324823225470418;17.51699526793327;17.570991024594207;18.105657595867164;17.85177884717794;16.747377298204;16.331273898151707;17.54756663342113;19.236617436535113;17.99306034690349;15.801501476296181;18.781599978848067;18.40379714990919;19.13061448380528;16.265610933216472;18.479130897109417;15.735035585594623;18.1116397097382;16.592398929348597;16.406466116979054;19.001964685792952;15.9250639305821;17.58945066143572;18.91577202873949;16.47932791187607;16.341915754782587;19.022327037465118;17.191670593558783;18.3678443956199;15.627492280506981;16.949427645212964;16.18752396850293;18.19106176565417;15.831612709618302;19.31824866138299;15.601378859307605;18.417694029767215;15.584579478892604;16.52276021622977;18.753417549609104;16.1284731547471;16.234955237003906;18.26598170405436;17.04226352541024;15.672643983189998;19.460006184811206;16.105680435026205;15.645075976973656;16.87680402214718;17.96095793329943;18.46983849250312;15.952459612072307;16.848855092786582;15.623243430506754;17.294613049969175;18.563879746352313;18.4597866548828;18.298286552280974" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       32
       32
       +
       </use>

     

       33
       33
       +
       <use xlink:href="#d3" x="-107.95654296875" y="17.5">

     

       34
       34
       +
       <animate attributeName="x" dur="128s" values="-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875;-107.95654296875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       35
       35
       +
       <animate attributeName="y" dur="128s" values="19.108080633400146;18.52264861470026;18.949783105301712;18.32138056020306;17.391118048393253;16.40211028139155;18.143313994628055;16.765223706913037;15.908196420198793;17.291287445676605;18.99905216539187;16.010145858475152;17.83982279244243;17.07181020042067;17.55921078705671;16.075317855907777;19.338924745948642;16.53638569300882;17.92431175621401;17.179022182622987;15.572132876499706;17.73180049535632;16.062277515845338;15.727123983292785;15.634224984994589;16.144660060724938;15.883487774532732;18.04030279015467;17.533036736142574;19.43386437619011;19.236521274787226;19.478100933038014;16.42989536267124;17.278789820478785;16.503123047364628;17.86494938219199;17.99665620301913;18.700829822537585;18.337993215317397;16.52643715395214;17.192067691050084;17.60475977512234;15.519299124214513;15.641997646831058;17.134905670888298;15.944699868919905;18.39507869147722;16.46346205776665;15.899092347019964;16.2270403132017;16.426101717508562;16.369414538873436;17.582945456191588;17.35761244457536;16.73890428350965;18.0670350307227;16.34979896797796;19.12625070692673;19.35246661931695;18.415724182310097;17.23493547515866;17.54600536886819;17.82430522416064;15.704938974423321;19.108080633400146" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       36
       36
       +
       </use>

     

       37
       37
       +
       <use xlink:href="#d4" x="-58.70361328125" y="17.5">

     

       38
       38
       +
       <animate attributeName="x" dur="128s" values="-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125;-58.70361328125" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       39
       39
       +
       <animate attributeName="y" dur="128s" values="17.172065553929826;17.600258129279048;16.224900243300688;15.875147153833273;18.710620834821544;16.96473586617359;17.576838760395944;19.185801390367477;17.942041348412122;16.65832307012065;19.434084294213275;16.988906839736536;15.576220419238417;18.24124268925948;15.904647502452628;16.72368944282506;18.862446748475364;18.190287018579063;15.562888288857353;17.30569383680793;17.142697502294027;17.443451776008004;16.33298757343119;17.854980248616833;15.795157253901012;16.637437403921545;16.991608420187873;19.241081736194044;15.806192881440081;18.519936456991594;16.269436511867294;17.786210965317323;17.06712388145699;17.35289752899603;18.514322022942874;17.080170240631453;15.986917920534678;15.98708039888616;15.822042871014519;18.90028349561939;18.06396637532426;19.33867425358325;18.270610186618597;15.598675090616403;18.136638655375673;18.608847738599195;18.394073119932518;17.49179808171847;16.930338470923886;17.32814285580714;18.69488833471872;16.57576997531061;17.605214979225202;17.410238168226087;19.318787387845322;18.71739990767735;19.228215440872955;18.844022294289577;16.687054675658697;16.42650944460629;17.455157893793455;16.537621365444693;17.210615327823714;18.216560861444595;17.172065553929826" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       40
       40
       +
       </use>

     

       41
       41
       +
       <use xlink:href="#d5" x="0.22216796875" y="17.5">

     

       42
       42
       +
       <animate attributeName="x" dur="128s" values="0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875;0.22216796875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       43
       43
       +
       <animate attributeName="y" dur="128s" values="19.17432090891334;17.843602321380402;18.7714130155966;15.883789243434663;16.924228911880682;19.490992085494522;16.086004191824927;17.167072173899555;15.767357581811265;15.844597426395598;19.082001408378922;19.45454811483057;18.092328311132544;16.014060019669373;16.685530078130782;16.426798573386762;18.182929303799767;18.224396029991347;17.255383347646312;17.595979073255904;15.948281054378096;17.663572996458;19.29975488689121;18.523109210244115;15.884617845083582;17.566005445975094;18.361459270541847;16.529042070197043;19.079586599991057;17.343763856511888;18.3129248390927;17.116653557850963;19.480532150225436;18.63126295102649;17.793761602906123;16.079060091574764;17.264733037914887;15.6175396385709;17.88065670082722;19.027270070813692;16.22169796803166;17.54068601291097;17.42983330112547;17.119658716133877;18.34184031877659;19.246679675941035;18.32157014751221;17.38999671817144;19.347909645664032;16.822910002269136;18.482451019047755;18.133940103096172;18.546435499777793;18.908292911225235;16.399995521690087;17.984996115800016;17.110895538815566;18.167887520270217;19.40893625858238;18.039323386996088;15.546423176316438;17.358195231067338;18.346305933794774;19.03288374740802;19.17432090891334" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       44
       44
       +
       </use>

     

       45
       45
       +
       <use xlink:href="#d6" x="39.46044921875" y="17.5">

     

       46
       46
       +
       <animate attributeName="x" dur="128s" values="39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875;39.46044921875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       47
       47
       +
       <animate attributeName="y" dur="128s" values="18.100340133230947;18.76427960677236;15.56854958542948;19.272918260590053;18.417854534663782;17.92577580767231;19.121292120680188;19.038718908208274;15.901829522549633;18.762484865120747;18.568002963113543;16.298152186703973;18.476982770007467;17.844909774667702;16.265977695280423;18.716757583973582;16.051492512478955;17.949294825753448;17.23759193664957;16.514764443440473;17.764378493236507;17.36834751703482;16.319989978444156;19.36712314963816;15.791301469511914;15.512149152328888;17.441692517196124;18.848765989216805;18.133608253760478;18.518678354965495;17.44000181332036;18.19920941955595;16.839562548974325;16.567781057283934;17.511602832684538;15.610111265989747;15.819234359666222;18.515838961232788;16.194798551786665;18.501022903279;18.637503921917954;17.117963798501876;18.199972737584474;18.649689162774;18.956096402393687;16.039481015624983;16.150280579909165;17.026653676995508;17.358626773228572;16.679275487537627;15.541600951035464;17.729686691385268;19.367655038887854;16.965838731349027;17.651997680963095;17.029316620955058;17.271201914680454;18.981974830520677;16.733721777745423;18.096260968845616;17.435146143723358;17.654276690218072;19.158812502107267;15.806856043874703;18.100340133230947" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       48
       48
       +
       </use>

     

       49
       49
       +
       <use xlink:href="#d7" x="83.89404296875" y="17.5">

     

       50
       50
       +
       <animate attributeName="x" dur="128s" values="83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875;83.89404296875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       51
       51
       +
       <animate attributeName="y" dur="128s" values="18.797481725009643;16.71667722862086;18.085233090770295;18.68336392379322;18.113637764536453;17.07186625951781;18.86281907321502;15.87179519261299;18.033257609922067;17.064503240471847;17.621863956694423;18.903764341757842;18.691459521790456;18.01536068585924;16.73231712105784;16.431655286240023;17.330152856150356;16.428438291628133;16.60994613353222;19.33101857042053;15.947864254575299;18.774465494972127;17.016856397885;16.958413517883915;16.773566048028542;15.809542248687551;17.32952080257834;16.16598872833203;17.26803588477986;16.667948647173095;19.078292820866682;19.186969808294943;17.267985939703188;18.058480895039562;19.21856883981926;16.804906581609988;15.898217555514494;16.45136751141817;16.25818481303237;18.213882620519925;16.99515331343813;16.92439166129364;18.680390540819793;16.432688333649505;18.734145478922123;18.031626653015802;17.101040476813708;18.794076465052875;16.869012990020046;19.01432525277344;19.20370368942909;17.510425286914632;18.25993322527753;19.29512844444772;18.470239621383687;18.504028192574403;18.977240613237264;19.24228357172442;18.514137267158166;19.41627674449577;16.666423873065096;17.989944804817238;18.18263173319903;16.96973709191637;18.797481725009643" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       52
       52
       +
       </use>

     

       53
       53
       +
       <use xlink:href="#d8" x="131.47216796875" y="17.5">

     

       54
       54
       +
       <animate attributeName="x" dur="128s" values="131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875;131.47216796875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       55
       55
       +
       <animate attributeName="y" dur="128s" values="17.080711140751834;16.19909689599043;19.330849197546666;16.916014088414155;17.406536045303866;19.074260262355665;16.245800355520224;19.34267799195689;16.00822293662995;15.612118098267;16.903120016070773;16.936699184091;19.170577284050097;19.032777003417344;18.546243746631024;17.245711595069945;17.670745620739233;16.447078997643914;18.83411877139345;17.059644447003237;16.63861329760842;18.05122404994667;16.102314363712715;16.765402084652465;19.204710140778165;15.880181639513852;16.06879981708168;16.31738246474658;16.503920112292988;17.181590210211635;16.50070491698806;16.870759611949783;16.48592557630948;16.460353724003927;17.94241902371801;16.8458323460846;16.991156120537948;18.57126625214372;15.746753360697536;16.076169555707967;18.903294416161224;17.219109518635328;18.615213998315095;16.031173775225227;17.591960357928016;18.881495956075632;16.852166940218158;18.572714469152427;17.941504268568327;17.07829440318809;19.489404918376827;17.06921114821956;17.395173504645857;17.977942820530266;16.767355190057494;18.850555915282087;17.890144231633766;17.852002367688048;17.654345591803718;19.43973441409201;19.455720406809302;18.863165428982644;17.31830481199631;17.147159111082434;17.080711140751834" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       56
       56
       +
       </use>

     

       57
       57
       +
       <use xlink:href="#d9" x="161.41357421875" y="17.5">

     

       58
       58
       +
       <animate attributeName="x" dur="128s" values="161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875;161.41357421875" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       59
       59
       +
       <animate attributeName="y" dur="128s" values="17.599067165036384;15.684629436697106;15.933017326931099;19.48103060100494;16.012842062665598;19.2495377040299;18.21891658008112;19.160361116382305;15.80934600212031;16.723241372635748;18.691710970024175;15.535381801514223;15.923839916845994;16.902564830201552;16.192552924899463;16.087440861085202;18.17905744860602;15.86769170570407;19.3860173767723;18.097445829672445;15.699066515511975;19.094881340111694;16.466106118697553;17.425856057986543;17.735066325377616;16.054534187786356;17.50863562649949;15.741235287438158;16.29842816430794;19.174294144100713;18.788194352812756;17.591539631414015;18.22738288427816;19.00201258774057;16.059864800319716;17.468411654278867;16.027054087523638;15.966081954440476;15.932941808294345;16.3471435248239;15.712626296759733;16.3608679958098;17.016526709101825;17.99075155400056;18.934422862346082;19.116739330737822;18.370339170828384;17.528350763945213;19.16794945822426;16.15198700162683;15.92178177336796;18.771235410910514;18.008527128612236;16.341258113785702;17.009200698193677;16.689575235266634;17.22345328759322;17.21091887743478;17.092623332550826;18.69095955190943;18.746019425967766;17.74985102116934;17.39111954785501;16.63783697865552;17.599067165036384" keyTimes="0;0.016;0.031;0.047;0.062;0.078;0.094;0.109;0.125;0.141;0.156;0.172;0.188;0.203;0.219;0.234;0.25;0.266;0.281;0.297;0.312;0.328;0.344;0.359;0.375;0.391;0.406;0.422;0.438;0.453;0.469;0.484;0.5;0.516;0.531;0.547;0.562;0.578;0.594;0.609;0.625;0.641;0.656;0.672;0.688;0.703;0.719;0.734;0.75;0.766;0.781;0.797;0.812;0.828;0.844;0.859;0.875;0.891;0.906;0.922;0.938;0.953;0.969;0.984;1" repeatCount="indefinite" fill="freeze" calcMode="spline" keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1" />

     

       60
       60
       +
       </use>

     

       61
       61
       +
       </clipPath>

     

       62
       62
       +
       </defs>

     

       63
       63
       +
       <rect x="-500" y="-50" width="1000" height="100" fill="url(#d0)" clip-path="url(#d10)" />

     

       64
       64
       +
       <g id="scrub" visibility="hidden">

     

       65
       65
       +
       <path d="M-168.0,40.0 L168.0,40.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       66
       66
       +
       <rect x="-168.0" y="40.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       67
       67
       +
       <animate attributeName="width" dur="128s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       68
       68
       +
       </rect>

     

       69
       69
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="128" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       70
       70
       +
       <rect x="-170.0" y="30.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       71
       71
       +
       <circle cx="-168.0" cy="40.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       72
       72
       +
       <animate attributeName="cx" dur="128s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       73
       73
       +
       </circle>

     

       74
       74
       +
       </g>

     

       75
       75
       +
       <g id="scrub-play" visibility="hidden">

     

       76
       76
       +
       <rect x="-191.0" y="36.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       77
       77
       +
       <path d="M-191.0,36.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       78
       78
       +
       </g>

     

       79
       79
       +
       <g id="scrub-pause" visibility="hidden">

     

       80
       80
       +
       <rect x="-191.0" y="36.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       81
       81
       +
       <rect x="-190.0" y="36.0" width="2.0" height="8.0" fill="#eee" />

     

       82
       82
       +
       <rect x="-186.0" y="36.0" width="2.0" height="8.0" fill="#eee" />

     

       83
       83
       +
       </g>

     

       84
       84
       +
       </g>

     

       85
       85
       +
       <script>/*<![CDATA[*/

     

       86
       86
       +
       /* Animation playback controls generated by drawsvg */

     

       87
       87
       +
       /* https://github.com/cduck/drawsvg/ */

     

       88
       88
       +
       function svgOnLoad(event) {

     

       89
       89
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       90
       90
       +
           if (event && event.target && event.target.ownerDocument) {

     

       91
       91
       +
               svgSetup(event.target.ownerDocument);

     

       92
       92
       +
           } else if (document && document.currentScript

     

       93
       93
       +
                      && document.currentScript.parentElement) {

     

       94
       94
       +
               svgSetup(document.currentScript.parentElement);

     

       95
       95
       +
           }

     

       96
       96
       +
       }

     

       97
       97
       +
       function svgSetup(doc) {

     

       98
       98
       +
           var svgRoot = doc.documentElement || doc;

     

       99
       99
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       100
       100
       +
           /* Block multiple setups */

     

       101
       101
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       102
       102
       +
               return;

     

       103
       103
       +
           }

     

       104
       104
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       105
       105
       +
           var scrubContainer = doc.getElementById("scrub");

     

       106
       106
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       107
       107
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       108
       108
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       109
       109
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       110
       110
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       111
       111
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       112
       112
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       113
       113
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       114
       114
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       115
       115
       +
           var paused = false;

     

       116
       116
       +
           var dragXOffset = 0;

     

       117
       117
       +
           var point = svgRoot.createSVGPoint();

     

       118
       118
       +
       

     

       119
       119
       +
           function screenToSvgX(p) {

     

       120
       120
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       121
       121
       +
               point.x = p.x;

     

       122
       122
       +
               point.y = p.y;

     

       123
       123
       +
               return point.matrixTransform(matrix).x;

     

       124
       124
       +
           };

     

       125
       125
       +
           function screenToProgress(p) {

     

       126
       126
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       127
       127
       +
               point.x = p.x;

     

       128
       128
       +
               point.y = p.y;

     

       129
       129
       +
               var x = point.matrixTransform(matrix).x;

     

       130
       130
       +
               if (x <= scrubXMin) {

     

       131
       131
       +
                   return scrubStartDelay / scrubTotalDur;

     

       132
       132
       +
               }

     

       133
       133
       +
               if (x >= scrubXMax) {

     

       134
       134
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       135
       135
       +
               }

     

       136
       136
       +
               return (scrubStartDelay/scrubTotalDur

     

       137
       137
       +
                       + (x - dragXOffset - scrubXMin)

     

       138
       138
       +
                         / (scrubXMax - scrubXMin)

     

       139
       139
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       140
       140
       +
                         / scrubTotalDur);

     

       141
       141
       +
           };

     

       142
       142
       +
           function currentScrubX() {

     

       143
       143
       +
               return scrubKnob.cx.animVal.value;

     

       144
       144
       +
           };

     

       145
       145
       +
           function pause() {

     

       146
       146
       +
               svgRoot.pauseAnimations();

     

       147
       147
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       148
       148
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       149
       149
       +
               paused = true;

     

       150
       150
       +
           };

     

       151
       151
       +
           function play() {

     

       152
       152
       +
               svgRoot.unpauseAnimations();

     

       153
       153
       +
               scrubPause.setAttribute("visibility", "visible");

     

       154
       154
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       155
       155
       +
               paused = false;

     

       156
       156
       +
           };

     

       157
       157
       +
           function scrub(playbackFraction) {

     

       158
       158
       +
               var t = scrubTotalDur * playbackFraction;

     

       159
       159
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       160
       160
       +
               var limit = scrubTotalDur - 10e-3;

     

       161
       161
       +
               if (t < 0) t = 0;

     

       162
       162
       +
               else if (t > limit) t = limit;

     

       163
       163
       +
               svgRoot.setCurrentTime(t);

     

       164
       164
       +
           };

     

       165
       165
       +
           function mousedown(e) {

     

       166
       166
       +
               svgRoot.pauseAnimations();

     

       167
       167
       +
               if (e.target == scrubKnob) {

     

       168
       168
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       169
       169
       +
               } else {

     

       170
       170
       +
                   dragXOffset = 0;

     

       171
       171
       +
               }

     

       172
       172
       +
               scrub(screenToProgress(e));

     

       173
       173
       +
               /* Global document listeners */

     

       174
       174
       +
               document.addEventListener('mousemove', mousemove);

     

       175
       175
       +
               document.addEventListener('mouseup', mouseup);

     

       176
       176
       +
               e.preventDefault();

     

       177
       177
       +
           };

     

       178
       178
       +
           function mouseup(e) {

     

       179
       179
       +
               dragXOffset = 0;

     

       180
       180
       +
               document.removeEventListener('mousemove', mousemove);

     

       181
       181
       +
               document.removeEventListener('mouseup', mouseup);

     

       182
       182
       +
               if (!paused) {

     

       183
       183
       +
                   svgRoot.unpauseAnimations();

     

       184
       184
       +
               }

     

       185
       185
       +
               e.preventDefault();

     

       186
       186
       +
           };

     

       187
       187
       +
           function mousemove(e) {

     

       188
       188
       +
               scrub(screenToProgress(e));

     

       189
       189
       +
           };

     

       190
       190
       +
           scrubPause.addEventListener("click", pause);

     

       191
       191
       +
           scrubPlay.addEventListener("click", play);

     

       192
       192
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       193
       193
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       194
       194
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       195
       195
       +
           if (scrubPauseOnLoad) {

     

       196
       196
       +
               pause();

     

       197
       197
       +
               scrub(0);

     

       198
       198
       +
           } else {

     

       199
       199
       +
               play();

     

       200
       200
       +
           }

     

       201
       201
       +
       };

     

       202
       202
       +
       svgOnLoad();

     

       203
       203
       +
       /*]]>*/</script>

     

       204
       204
       +
       </svg>

examples/orbit-spritesheet.png

This is a binary file and will not be displayed.

+169

examples/playback-controls.html

···

       1
       1
       +
       <!DOCTYPE html>

     

       2
       2
       +
       <head>

     

       3
       3
       +
       <meta charset="utf-8">

     

       4
       4
       +
       </head>

     

       5
       5
       +
       <body>

     

       6
       6
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       7
       7
       +
           width="400" height="200" viewBox="-200.0 -100.0 400 200" onload="svgOnLoad(event);">

     

       8
       8
       +
       <defs>

     

       9
       9
       +
       </defs>

     

       10
       10
       +
       <rect x="-200" y="-100" width="400" height="200" fill="#eee" />

     

       11
       11
       +
       <circle cx="0" cy="0" r="40" fill="green" />

     

       12
       12
       +
       <circle cx="0" cy="0" r="0" fill="gray">

     

       13
       13
       +
       <animate attributeName="cx" dur="8s" values="-100;0;100;0;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       14
       14
       +
       <animate attributeName="cy" dur="8s" values="0;-100;0;100;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       15
       15
       +
       <animate attributeName="r" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       16
       16
       +
       </circle>

     

       17
       17
       +
       <rect x="0" y="0" width="0" height="0" fill="silver">

     

       18
       18
       +
       <animate attributeName="x" dur="8s" values="-100;-20;100;-20;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       19
       19
       +
       <animate attributeName="y" dur="8s" values="0;-120;0;80;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       20
       20
       +
       <animate attributeName="width" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       21
       21
       +
       <animate attributeName="height" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       22
       22
       +
       </rect>

     

       23
       23
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">0<animate attributeName="visibility" dur="8s" values="visible;hidden;hidden" keyTimes="0;0.25;1" repeatCount="indefinite" fill="freeze" /></text>

     

       24
       24
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">1<animate attributeName="visibility" dur="8s" values="hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;1" repeatCount="indefinite" fill="freeze" /></text>

     

       25
       25
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">2<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       26
       26
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">3<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;visible" keyTimes="0;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       27
       27
       +
       <g id="scrub">

     

       28
       28
       +
       <path d="M-168.0,90.0 L168.0,90.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       29
       29
       +
       <rect x="-168.0" y="90.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       30
       30
       +
       <animate attributeName="width" dur="8s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       31
       31
       +
       </rect>

     

       32
       32
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="8" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       33
       33
       +
       <rect x="-170.0" y="80.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       34
       34
       +
       <circle cx="-168.0" cy="90.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       35
       35
       +
       <animate attributeName="cx" dur="8s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       36
       36
       +
       </circle>

     

       37
       37
       +
       </g>

     

       38
       38
       +
       <g id="scrub-play" visibility="hidden">

     

       39
       39
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       40
       40
       +
       <path d="M-191.0,86.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       41
       41
       +
       </g>

     

       42
       42
       +
       <g id="scrub-pause" visibility="hidden">

     

       43
       43
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       44
       44
       +
       <rect x="-190.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       45
       45
       +
       <rect x="-186.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       46
       46
       +
       </g>

     

       47
       47
       +
       </g>

     

       48
       48
       +
       <script>/*<![CDATA[*/

     

       49
       49
       +
       /* Animation playback controls generated by drawsvg */

     

       50
       50
       +
       /* https://github.com/cduck/drawsvg/ */

     

       51
       51
       +
       function svgOnLoad(event) {

     

       52
       52
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       53
       53
       +
           if (event && event.target && event.target.ownerDocument) {

     

       54
       54
       +
               svgSetup(event.target.ownerDocument);

     

       55
       55
       +
           } else if (document && document.currentScript

     

       56
       56
       +
                      && document.currentScript.parentElement) {

     

       57
       57
       +
               svgSetup(document.currentScript.parentElement);

     

       58
       58
       +
           }

     

       59
       59
       +
       }

     

       60
       60
       +
       function svgSetup(doc) {

     

       61
       61
       +
           var svgRoot = doc.documentElement || doc;

     

       62
       62
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       63
       63
       +
           /* Block multiple setups */

     

       64
       64
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       65
       65
       +
               return;

     

       66
       66
       +
           }

     

       67
       67
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       68
       68
       +
           var scrubContainer = doc.getElementById("scrub");

     

       69
       69
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       70
       70
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       71
       71
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       72
       72
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       73
       73
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       74
       74
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       75
       75
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       76
       76
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       77
       77
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       78
       78
       +
           var paused = false;

     

       79
       79
       +
           var dragXOffset = 0;

     

       80
       80
       +
           var point = svgRoot.createSVGPoint();

     

       81
       81
       +
       

     

       82
       82
       +
           function screenToSvgX(p) {

     

       83
       83
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       84
       84
       +
               point.x = p.x;

     

       85
       85
       +
               point.y = p.y;

     

       86
       86
       +
               return point.matrixTransform(matrix).x;

     

       87
       87
       +
           };

     

       88
       88
       +
           function screenToProgress(p) {

     

       89
       89
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       90
       90
       +
               point.x = p.x;

     

       91
       91
       +
               point.y = p.y;

     

       92
       92
       +
               var x = point.matrixTransform(matrix).x;

     

       93
       93
       +
               if (x <= scrubXMin) {

     

       94
       94
       +
                   return scrubStartDelay / scrubTotalDur;

     

       95
       95
       +
               }

     

       96
       96
       +
               if (x >= scrubXMax) {

     

       97
       97
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       98
       98
       +
               }

     

       99
       99
       +
               return (scrubStartDelay/scrubTotalDur

     

       100
       100
       +
                       + (x - dragXOffset - scrubXMin)

     

       101
       101
       +
                         / (scrubXMax - scrubXMin)

     

       102
       102
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       103
       103
       +
                         / scrubTotalDur);

     

       104
       104
       +
           };

     

       105
       105
       +
           function currentScrubX() {

     

       106
       106
       +
               return scrubKnob.cx.animVal.value;

     

       107
       107
       +
           };

     

       108
       108
       +
           function pause() {

     

       109
       109
       +
               svgRoot.pauseAnimations();

     

       110
       110
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       111
       111
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       112
       112
       +
               paused = true;

     

       113
       113
       +
           };

     

       114
       114
       +
           function play() {

     

       115
       115
       +
               svgRoot.unpauseAnimations();

     

       116
       116
       +
               scrubPause.setAttribute("visibility", "visible");

     

       117
       117
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       118
       118
       +
               paused = false;

     

       119
       119
       +
           };

     

       120
       120
       +
           function scrub(playbackFraction) {

     

       121
       121
       +
               var t = scrubTotalDur * playbackFraction;

     

       122
       122
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       123
       123
       +
               var limit = scrubTotalDur - 10e-3;

     

       124
       124
       +
               if (t < 0) t = 0;

     

       125
       125
       +
               else if (t > limit) t = limit;

     

       126
       126
       +
               svgRoot.setCurrentTime(t);

     

       127
       127
       +
           };

     

       128
       128
       +
           function mousedown(e) {

     

       129
       129
       +
               svgRoot.pauseAnimations();

     

       130
       130
       +
               if (e.target == scrubKnob) {

     

       131
       131
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       132
       132
       +
               } else {

     

       133
       133
       +
                   dragXOffset = 0;

     

       134
       134
       +
               }

     

       135
       135
       +
               scrub(screenToProgress(e));

     

       136
       136
       +
               /* Global document listeners */

     

       137
       137
       +
               document.addEventListener('mousemove', mousemove);

     

       138
       138
       +
               document.addEventListener('mouseup', mouseup);

     

       139
       139
       +
               e.preventDefault();

     

       140
       140
       +
           };

     

       141
       141
       +
           function mouseup(e) {

     

       142
       142
       +
               dragXOffset = 0;

     

       143
       143
       +
               document.removeEventListener('mousemove', mousemove);

     

       144
       144
       +
               document.removeEventListener('mouseup', mouseup);

     

       145
       145
       +
               if (!paused) {

     

       146
       146
       +
                   svgRoot.unpauseAnimations();

     

       147
       147
       +
               }

     

       148
       148
       +
               e.preventDefault();

     

       149
       149
       +
           };

     

       150
       150
       +
           function mousemove(e) {

     

       151
       151
       +
               scrub(screenToProgress(e));

     

       152
       152
       +
           };

     

       153
       153
       +
           scrubPause.addEventListener("click", pause);

     

       154
       154
       +
           scrubPlay.addEventListener("click", play);

     

       155
       155
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       156
       156
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       157
       157
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       158
       158
       +
           if (scrubPauseOnLoad) {

     

       159
       159
       +
               pause();

     

       160
       160
       +
               scrub(0);

     

       161
       161
       +
           } else {

     

       162
       162
       +
               play();

     

       163
       163
       +
           }

     

       164
       164
       +
       };

     

       165
       165
       +
       svgOnLoad();

     

       166
       166
       +
       /*]]>*/</script>

     

       167
       167
       +
       </svg>

     

       168
       168
       +
       </body>

     

       169
       169
       +
       </html>

+163

examples/playback-controls.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="400" height="200" viewBox="-200.0 -100.0 400 200" onload="svgOnLoad(event);">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       </defs>

     

       6
       6
       +
       <rect x="-200" y="-100" width="400" height="200" fill="#eee" />

     

       7
       7
       +
       <circle cx="0" cy="0" r="40" fill="green" />

     

       8
       8
       +
       <circle cx="0" cy="0" r="0" fill="gray">

     

       9
       9
       +
       <animate attributeName="cx" dur="8s" values="-100;0;100;0;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       10
       10
       +
       <animate attributeName="cy" dur="8s" values="0;-100;0;100;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       11
       11
       +
       <animate attributeName="r" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       12
       12
       +
       </circle>

     

       13
       13
       +
       <rect x="0" y="0" width="0" height="0" fill="silver">

     

       14
       14
       +
       <animate attributeName="x" dur="8s" values="-100;-20;100;-20;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       15
       15
       +
       <animate attributeName="y" dur="8s" values="0;-120;0;80;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       16
       16
       +
       <animate attributeName="width" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       17
       17
       +
       <animate attributeName="height" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />

     

       18
       18
       +
       </rect>

     

       19
       19
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">0<animate attributeName="visibility" dur="8s" values="visible;hidden;hidden" keyTimes="0;0.25;1" repeatCount="indefinite" fill="freeze" /></text>

     

       20
       20
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">1<animate attributeName="visibility" dur="8s" values="hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;1" repeatCount="indefinite" fill="freeze" /></text>

     

       21
       21
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">2<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       22
       22
       +
       <text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">3<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;visible" keyTimes="0;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>

     

       23
       23
       +
       <g id="scrub">

     

       24
       24
       +
       <path d="M-168.0,90.0 L168.0,90.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />

     

       25
       25
       +
       <rect x="-168.0" y="90.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">

     

       26
       26
       +
       <animate attributeName="width" dur="8s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       27
       27
       +
       </rect>

     

       28
       28
       +
       <g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="8" data-startdelay="0" data-enddelay="0" data-pauseonload="0">

     

       29
       29
       +
       <rect x="-170.0" y="80.0" width="340" height="20" fill="rgba(255,255,255,0)" />

     

       30
       30
       +
       <circle cx="-168.0" cy="90.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">

     

       31
       31
       +
       <animate attributeName="cx" dur="8s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />

     

       32
       32
       +
       </circle>

     

       33
       33
       +
       </g>

     

       34
       34
       +
       <g id="scrub-play" visibility="hidden">

     

       35
       35
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       36
       36
       +
       <path d="M-191.0,86.0 v8.0 l8.0,-4.0 Z" fill="#eee" />

     

       37
       37
       +
       </g>

     

       38
       38
       +
       <g id="scrub-pause" visibility="hidden">

     

       39
       39
       +
       <rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />

     

       40
       40
       +
       <rect x="-190.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       41
       41
       +
       <rect x="-186.0" y="86.0" width="2.0" height="8.0" fill="#eee" />

     

       42
       42
       +
       </g>

     

       43
       43
       +
       </g>

     

       44
       44
       +
       <script>/*<![CDATA[*/

     

       45
       45
       +
       /* Animation playback controls generated by drawsvg */

     

       46
       46
       +
       /* https://github.com/cduck/drawsvg/ */

     

       47
       47
       +
       function svgOnLoad(event) {

     

       48
       48
       +
           /* Support standalone SVG or embedded in HTML or iframe */

     

       49
       49
       +
           if (event && event.target && event.target.ownerDocument) {

     

       50
       50
       +
               svgSetup(event.target.ownerDocument);

     

       51
       51
       +
           } else if (document && document.currentScript

     

       52
       52
       +
                      && document.currentScript.parentElement) {

     

       53
       53
       +
               svgSetup(document.currentScript.parentElement);

     

       54
       54
       +
           }

     

       55
       55
       +
       }

     

       56
       56
       +
       function svgSetup(doc) {

     

       57
       57
       +
           var svgRoot = doc.documentElement || doc;

     

       58
       58
       +
           var scrubCapture = doc.getElementById("scrub-capture");

     

       59
       59
       +
           /* Block multiple setups */

     

       60
       60
       +
           if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {

     

       61
       61
       +
               return;

     

       62
       62
       +
           }

     

       63
       63
       +
           scrubCapture.setAttribute("svgSetupDone", true);

     

       64
       64
       +
           var scrubContainer = doc.getElementById("scrub");

     

       65
       65
       +
           var scrubPlay = doc.getElementById("scrub-play");

     

       66
       66
       +
           var scrubPause = doc.getElementById("scrub-pause");

     

       67
       67
       +
           var scrubKnob = doc.getElementById("scrub-knob");

     

       68
       68
       +
           var scrubXMin = parseFloat(scrubCapture.dataset.xmin);

     

       69
       69
       +
           var scrubXMax = parseFloat(scrubCapture.dataset.xmax);

     

       70
       70
       +
           var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);

     

       71
       71
       +
           var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);

     

       72
       72
       +
           var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);

     

       73
       73
       +
           var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);

     

       74
       74
       +
           var paused = false;

     

       75
       75
       +
           var dragXOffset = 0;

     

       76
       76
       +
           var point = svgRoot.createSVGPoint();

     

       77
       77
       +
       

     

       78
       78
       +
           function screenToSvgX(p) {

     

       79
       79
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       80
       80
       +
               point.x = p.x;

     

       81
       81
       +
               point.y = p.y;

     

       82
       82
       +
               return point.matrixTransform(matrix).x;

     

       83
       83
       +
           };

     

       84
       84
       +
           function screenToProgress(p) {

     

       85
       85
       +
               var matrix = scrubKnob.getScreenCTM().inverse();

     

       86
       86
       +
               point.x = p.x;

     

       87
       87
       +
               point.y = p.y;

     

       88
       88
       +
               var x = point.matrixTransform(matrix).x;

     

       89
       89
       +
               if (x <= scrubXMin) {

     

       90
       90
       +
                   return scrubStartDelay / scrubTotalDur;

     

       91
       91
       +
               }

     

       92
       92
       +
               if (x >= scrubXMax) {

     

       93
       93
       +
                   return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;

     

       94
       94
       +
               }

     

       95
       95
       +
               return (scrubStartDelay/scrubTotalDur

     

       96
       96
       +
                       + (x - dragXOffset - scrubXMin)

     

       97
       97
       +
                         / (scrubXMax - scrubXMin)

     

       98
       98
       +
                         * (scrubTotalDur - scrubStartDelay - scrubEndDelay)

     

       99
       99
       +
                         / scrubTotalDur);

     

       100
       100
       +
           };

     

       101
       101
       +
           function currentScrubX() {

     

       102
       102
       +
               return scrubKnob.cx.animVal.value;

     

       103
       103
       +
           };

     

       104
       104
       +
           function pause() {

     

       105
       105
       +
               svgRoot.pauseAnimations();

     

       106
       106
       +
               scrubPlay.setAttribute("visibility", "visible");

     

       107
       107
       +
               scrubPause.setAttribute("visibility", "hidden");

     

       108
       108
       +
               paused = true;

     

       109
       109
       +
           };

     

       110
       110
       +
           function play() {

     

       111
       111
       +
               svgRoot.unpauseAnimations();

     

       112
       112
       +
               scrubPause.setAttribute("visibility", "visible");

     

       113
       113
       +
               scrubPlay.setAttribute("visibility", "hidden");

     

       114
       114
       +
               paused = false;

     

       115
       115
       +
           };

     

       116
       116
       +
           function scrub(playbackFraction) {

     

       117
       117
       +
               var t = scrubTotalDur * playbackFraction;

     

       118
       118
       +
               /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */

     

       119
       119
       +
               var limit = scrubTotalDur - 10e-3;

     

       120
       120
       +
               if (t < 0) t = 0;

     

       121
       121
       +
               else if (t > limit) t = limit;

     

       122
       122
       +
               svgRoot.setCurrentTime(t);

     

       123
       123
       +
           };

     

       124
       124
       +
           function mousedown(e) {

     

       125
       125
       +
               svgRoot.pauseAnimations();

     

       126
       126
       +
               if (e.target == scrubKnob) {

     

       127
       127
       +
                   dragXOffset = screenToSvgX(e) - currentScrubX();

     

       128
       128
       +
               } else {

     

       129
       129
       +
                   dragXOffset = 0;

     

       130
       130
       +
               }

     

       131
       131
       +
               scrub(screenToProgress(e));

     

       132
       132
       +
               /* Global document listeners */

     

       133
       133
       +
               document.addEventListener('mousemove', mousemove);

     

       134
       134
       +
               document.addEventListener('mouseup', mouseup);

     

       135
       135
       +
               e.preventDefault();

     

       136
       136
       +
           };

     

       137
       137
       +
           function mouseup(e) {

     

       138
       138
       +
               dragXOffset = 0;

     

       139
       139
       +
               document.removeEventListener('mousemove', mousemove);

     

       140
       140
       +
               document.removeEventListener('mouseup', mouseup);

     

       141
       141
       +
               if (!paused) {

     

       142
       142
       +
                   svgRoot.unpauseAnimations();

     

       143
       143
       +
               }

     

       144
       144
       +
               e.preventDefault();

     

       145
       145
       +
           };

     

       146
       146
       +
           function mousemove(e) {

     

       147
       147
       +
               scrub(screenToProgress(e));

     

       148
       148
       +
           };

     

       149
       149
       +
           scrubPause.addEventListener("click", pause);

     

       150
       150
       +
           scrubPlay.addEventListener("click", play);

     

       151
       151
       +
           scrubCapture.addEventListener("mousedown", mousedown);

     

       152
       152
       +
           scrubContainer.setAttribute("visibility", "visible");

     

       153
       153
       +
           scrubKnob.setAttribute("visibility", "visible");

     

       154
       154
       +
           if (scrubPauseOnLoad) {

     

       155
       155
       +
               pause();

     

       156
       156
       +
               scrub(0);

     

       157
       157
       +
           } else {

     

       158
       158
       +
               play();

     

       159
       159
       +
           }

     

       160
       160
       +
       };

     

       161
       161
       +
       svgOnLoad();

     

       162
       162
       +
       /*]]>*/</script>

     

       163
       163
       +
       </svg>

mkdocs.yml

···

       1
       1
       +
       site_name: Drawsvg Quick Reference

     

       2
       2
       +
       nav:

     

       3
       3
       +
         - Home: index.md

     

       4
       4
       +
       theme: readthedocs

+25 -9

setup.py

···

       2
       2
        
       import logging

     

       3
       3
        
       logger = logging.getLogger(__name__)

     

       4
       4
        
       

     

       5
       5
       -
       version = '1.4.1'

     

       5
       5
       +
       version = '2.4.0'

     

       6
       6
        
       

     

       7
       7
        
       try:

     

       8
       8
        
           with open('README.md', 'r') as f:

     
···

       12
       12
        
           long_desc = None

     

       13
       13
        
       

     

       14
       14
        
       setup(

     

       15
       15
       -
           name = 'drawSvg',

     

       15
       15
       +
           name = 'drawsvg',

     

       16
       16
        
           packages = find_packages(),

     

       17
       17
        
           version = version,

     

       18
       18
       -
           description = 'A Python 3 library for programmatically generating SVG images (vector drawings) and rendering them or displaying them in an iPython notebook.',

     

       18
       18
       +
           description = 'A Python 3 library for programmatically generating SVG (vector) images and animations.  Drawsvg can also render to PNG, MP4, and display your drawings in Jupyter notebook and Jupyter lab.',

     

       19
       19
        
           long_description = long_desc,

     

       20
       20
        
           long_description_content_type = 'text/markdown',

     

       21
       21
        
           author = 'Casey Duckering',

     

       22
       22
        
           #author_email = '',

     

       23
       23
       -
           url = 'https://github.com/cduck/drawSvg',

     

       24
       24
       -
           download_url = 'https://github.com/cduck/drawSvg/archive/{}.tar.gz'.format(version),

     

       25
       25
       -
           keywords = ['SVG', 'draw', 'graphics', 'iPython', 'Jupyter', 'widget'],

     

       23
       23
       +
           url = 'https://github.com/cduck/drawsvg',

     

       24
       24
       +
           download_url = 'https://github.com/cduck/drawsvg/archive/{}.tar.gz'.format(version),

     

       25
       25
       +
           keywords = ['SVG', 'draw', 'graphics', 'iPython', 'Jupyter', 'widget', 'animation'],

     

       26
       26
        
           classifiers = [

     

       27
       27
        
               'License :: OSI Approved :: MIT License',

     

       28
       28
        
               'Programming Language :: Python :: 3',

     
···

       30
       30
        
               'Framework :: Jupyter',

     

       31
       31
        
           ],

     

       32
       32
        
           install_requires = [

     

       33
       33
       -
               'cairoSVG',

     

       34
       34
       -
               'numpy',

     

       35
       35
       -
               'imageio',

     

       36
       33
        
           ],

     

       34
       34
       +
           extras_require = {

     

       35
       35
       +
               'raster': [

     

       36
       36
       +
                   'cairoSVG~=2.3',

     

       37
       37
       +
                   'numpy~=1.16',

     

       38
       38
       +
                   'imageio~=2.5',

     

       39
       39
       +
                   'imageio_ffmpeg~=0.4',

     

       40
       40
       +
               ],

     

       41
       41
       +
               'color': [

     

       42
       42
       +
                   'pwkit~=1.0',

     

       43
       43
       +
                   'numpy~=1.16',

     

       44
       44
       +
               ],

     

       45
       45
       +
               'all': [

     

       46
       46
       +
                   'cairoSVG~=2.3',

     

       47
       47
       +
                   'numpy~=1.16',

     

       48
       48
       +
                   'imageio~=2.5',

     

       49
       49
       +
                   'imageio_ffmpeg~=0.4',

     

       50
       50
       +
                   'pwkit~=1.0',

     

       51
       51
       +
               ],

     

       52
       52
       +
           },

     

       37
       53
        
       )

     

       38
       54

Compare changes