Augh, I spent ages making an animated svg and I can't upload it here and my wordpress doesn't like it.....

Show thread

I used gnome's screen recorder to record my browser (ctrl-alt-shift-R (thanks @sciss!)), then converted it to a gif with
% ffmpeg -i Screencast\ from\ 29-05-20\ 16\:53\:09.webm -vf "fps=10,scale=700:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 output.gif

And then cropped it to the right size in glimpse

Show thread

And then get it to go forwards and then backwards to a seamless loop by

convert cropped2.gif -coalesce -set delay 10 -reverse cropped2.gif -set delay 10 -loop 0 -background White bouncing.gif

· · Web · 1 · 0 · 1

So this is made using:

inkscape, vscodium, firefox, gnome recorder, ffmpeg, glimpse, imagemagick

1. I wrote Fuck the Tories in inkscape using the Bravura text font (my fave) and set the stroke to black and the fill to a gradient (which I'd have to re-read the manual to explain)
2. Then, under the Extensions menu, under Text, I selected Split Text to separate every letter. It did but also trashed the layout.
3. Then I selected all and under the path menu, selected Object to Path ...

Show thread

...That keeps the letter shaped from depending on what fonts you happen to have installed.

4. Then I opened the SVG in a text editor and added an <animateTransform> to every letter with an ID.
<animateTransform attributeName="transform" id="F"
values="0 0 ; 126 266; 37 226 ; 190 269; 0 0"

5. Then I put some javascript at the bottom of the file to re-write the values and dur of every transform....

Show thread

... If you open , you can right click on it to view the source. There's a call set interval function on every letter so as soon as it finishes it's animate transform, it gets a new path.

6. But you can't upload SVGs anywhere because they have javascript in them, so I recorded it and did the ffmpeg and imagemagick things mentioned upthread.

Show thread
Sign in to participate in the conversation

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!