Bjorn's GIF-merge
Merge data and SVG into animated GIFs
- a web app -
Merge a SVG template with data from a spreadsheet to create an animated GIF. Each row in the data becomes one frame in the GIF. The SVG templates are designed with a WYSIWYG editor.
Bind spreadsheet data columns to assorted SVG properties, for example use a glow factor column to control the text glow effect for each animation frame.
SVG templates can be fairly complex - use advanced text effects such as drop shadow, glow, inner shadow, water effect and n-th letter effect.
Large library of predefined customizable shapes, such as arrows, callouts, connectors, and flowchart symbols.
Image data (urls) in the spreadsheet data can be displayed using image place holders in the template. Use image clip shapes such as ellipses, round rectangles, n-gons (i.e. octagons) etc to customize the look. Another example of binding a property to element attributes is to use a column for setting the n-gon edge count for the clip shape for each frame in the GIF.
Basic example - using variable text
1. Assume the data in the table below.
| Name |
|---|
| Alexandra |
| Kristofer |
| Margareta |
| Fred |
2. Assume a SVG template with size 200 x 100 with a placeholder text element
3. You can then merge the table and the template into the animated GIF below.
(The SVG template is using the variable [[data-text]] in the placeholder SVG text element)
Merging attributes
1. You can also bind columns to SVG attributes. Assume the data below.
| Name | Name-Color |
|---|---|
| Alexandra | darkred |
| Kristofer | darkorange |
| Margareta | yellow |
| Fred | purple |
2. You can bind the color column to the color attribute of the placeholder element.
3. If you merge this data with the template you end up with animated GIF below.
Another sample
There are close to one hundered attributes you can merge. Here is an example just setting the glow factor.
| Glow |
|---|
| 5 |
| 10 |
| 15 |
| 20 |
An arrow
Here is an example with an arrow shape, animating the size of the head and the tail.
| Arrow-Color | Head | Tail |
|---|---|---|
| orange | 30 | 20 |
| darkorange | 40 | 30 |
| orange | 50 | 40 |
| darkorange | 40 | 30 |
Clip shape
Here is an example with images and animating the clipping shape.
| Picture | Edge Count |
|---|---|
| https://www.backlund.org/Images/PictureMerge/Male_1.jpg | 5 |
| https://www.backlund.org/Images/PictureMerge/Male_2.jpg | 7 |
| https://www.backlund.org/Images/PictureMerge/Male_3.jpg | 9 |
| https://www.backlund.org/Images/PictureMerge/Female_1.jpg | 11 |
| https://www.backlund.org/Images/PictureMerge/Female_2.jpg | 9 |
| https://www.backlund.org/Images/PictureMerge/Female_3.jpg | 7 |
More
Check out this short YouTube video.
Launch the app.
Pricing
This app is in the TIER-1, a TIER-1 subscription costs $8.95 per month.
You can try the app for 7 days for free.
Note that a TIER-1 subscription covers all TIER-1 products.
There is a 5-user subscription with a great discount, $29.95 per month.
Use Bjorn's Account Manager to buy/manage your subscription.
Use your PayPal account to cancel your subscription.
Support
Please report bugs here or reach out 2 me with questions @ support@backlund.org.
Follow me at Instagram @bjornsplayground and check out more videos at my YouTube channel.
You can view our privacy policy here.
