···

       
181
       
181
       
 
       


     

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

     

       
183
       
183
       
 
       


     

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

     

       
185
       
185
       
+
       
```python

     

       
186
       
186
       
+
       
import drawSvg as draw

     

       
187
       
187
       
+
       


     

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

     

       
189
       
189
       
+
       


     

       
190
       
190
       
+
       
# Animate the position and color of circle

     

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

     

       
192
       
192
       
+
       
# See for supported attributes:

     

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

     

       
194
       
194
       
+
       
c.appendAnim(draw.Animate('cy', '6s', '-80;80;-80',

     

       
195
       
195
       
+
       
                          repeatCount='indefinite'))

     

       
196
       
196
       
+
       
c.appendAnim(draw.Animate('cx', '6s', '0;80;0;-80;0',

     

       
197
       
197
       
+
       
                          repeatCount='indefinite'))

     

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

     

       
199
       
199
       
+
       
                          calcMode='discrete',

     

       
200
       
200
       
+
       
                          repeatCount='indefinite'))

     

       
201
       
201
       
+
       
d.append(c)

     

       
202
       
202
       
+
       


     

       
203
       
203
       
+
       
# Animate a black circle around an ellipse

     

       
204
       
204
       
+
       
ellipse = draw.Path()

     

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

     

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

     

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

     

       
208
       
208
       
+
       
ellipse.Z()

     

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

     

       
210
       
210
       
+
       
# See for supported attributes:

     

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

     

       
212
       
212
       
+
       
c2.appendAnim(draw.AnimateMotion(ellipse, '3s',

     

       
213
       
213
       
+
       
                                 repeatCount='indefinite'))

     

       
214
       
214
       
+
       
# See for supported attributes:

     

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

     

       
216
       
216
       
+
       
c2.appendAnim(draw.AnimateTransform('scale', '3s', '1,2;2,1;1,2;2,1;1,2',

     

       
217
       
217
       
+
       
                                    repeatCount='indefinite'))

     

       
218
       
218
       
+
       
d.append(c2)

     

       
219
       
219
       
+
       


     

       
220
       
220
       
+
       
d.saveSvg('animated.svg')  # Save to file

     

       
221
       
221
       
+
       
d  # Display in Jupyter notebook

     

       
222
       
222
       
+
       
```

     

       
223
       
223
       
+
       


     

       
224
       
224
       
+
       
[![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)

     

       
225
       
225
       
+
       


     

       
184
       
226
       
 
       
### Interactive Widget

     

       
185
       
227
       
 
       
```python

     

       
186
       
228
       
 
       
import drawSvg as draw

     
···

       
230
       
272
       
 
       


     

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

     

       
232
       
274
       
 
       


     

       
233
       
233
       
-
       
### Animation

     

       
275
       
275
       
+
       
### Animation with Python

     

       
234
       
276
       
 
       
```python

     

       
235
       
277
       
 
       
import drawSvg as draw

     

       
236
       
278
       
 
       


     
···

       
282
       
324
       
 
       
```

     

       
283
       
325
       
 
       


     

       
284
       
326
       
 
       
![Example output image](https://raw.githubusercontent.com/cduck/drawSvg/master/examples/example7.gif)

     

       
285
       
285
       
-
       


     

       
286
       
286
       
-
       
### SVG-Native Animation

     

       
287
       
287
       
-
       
```python

     

       
288
       
288
       
-
       
import drawSvg as draw

     

       
289
       
289
       
-
       


     

       
290
       
290
       
-
       
d = draw.Drawing(200, 200, origin='center')

     

       
291
       
291
       
-
       


     

       
292
       
292
       
-
       
# Animate the position and color of circle

     

       
293
       
293
       
-
       
c = draw.Circle(0, 0, 20, fill='red')

     

       
294
       
294
       
-
       
# See for supported attributes:

     

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

     

       
296
       
296
       
-
       
c.appendAnim(draw.Animate('cy', '6s', '-80;80;-80',

     

       
297
       
297
       
-
       
                          repeatCount='indefinite'))

     

       
298
       
298
       
-
       
c.appendAnim(draw.Animate('cx', '6s', '0;80;0;-80;0',

     

       
299
       
299
       
-
       
                          repeatCount='indefinite'))

     

       
300
       
300
       
-
       
c.appendAnim(draw.Animate('fill', '6s', 'red;green;blue;yellow',

     

       
301
       
301
       
-
       
                          calcMode='discrete',

     

       
302
       
302
       
-
       
                          repeatCount='indefinite'))

     

       
303
       
303
       
-
       
d.append(c)

     

       
304
       
304
       
-
       


     

       
305
       
305
       
-
       
# Animate a black circle around an ellipse

     

       
306
       
306
       
-
       
ellipse = draw.Path()

     

       
307
       
307
       
-
       
ellipse.M(-90, 0)

     

       
308
       
308
       
-
       
ellipse.A(90, 40, 360, True, True, 90, 0)  # Ellipse path

     

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

     

       
310
       
310
       
-
       
ellipse.Z()

     

       
311
       
311
       
-
       
c2 = draw.Circle(0, 0, 10)

     

       
312
       
312
       
-
       
# See for supported attributes:

     

       
313
       
313
       
-
       
# https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

     

       
314
       
314
       
-
       
c2.appendAnim(draw.AnimateMotion(ellipse, '3s',

     

       
315
       
315
       
-
       
                                 repeatCount='indefinite'))

     

       
316
       
316
       
-
       
# See for supported attributes:

     

       
317
       
317
       
-
       
# https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

     

       
318
       
318
       
-
       
c2.appendAnim(draw.AnimateTransform('scale', '3s', '1,2;2,1;1,2;2,1;1,2',

     

       
319
       
319
       
-
       
                                    repeatCount='indefinite'))

     

       
320
       
320
       
-
       
d.append(c2)

     

       
321
       
321
       
-
       


     

       
322
       
322
       
-
       
d.saveSvg('/Users/cduck/Downloads/animated.svg')  # Save to file

     

       
323
       
323
       
-
       
d  # Display in Jupyter notebook

     

       
324
       
324
       
-
       
```

     

       
325
       
325
       
-
       


     

       
326
       
326
       
-
       
[![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)

     

···

       
2
       
2
       
 
       
import logging

     

       
3
       
3
       
 
       
logger = logging.getLogger(__name__)

     

       
4
       
4
       
 
       


     

       
5
       
5
       
-
       
version = '1.5.0'

     

       
5
       
5
       
+
       
version = '1.5.1'

     

       
6
       
6
       
 
       


     

       
7
       
7
       
 
       
try:

     

       
8
       
8
       
 
       
    with open('README.md', 'r') as f: