"Catch The Late Train" - a video with a SVG animated text title

Hi folks, this is a recent video I made with Shotcut. It’s an instructional video featuring a piece of music I composed for flute and backing track. Target audience is flute players and flute teachers. They can play along and/or download the sheet music and backing track.

The main content of the video will probably be dead boring for non-musicians and/or non-flute players!! (although there is a little bit of video action at 2:02 and later at 2:48).

I’m posting it though to showcase my animated text title - “Catch The Late Train” - right at the beginning…

To do it, I used @elusien’s brilliant SVG animation method. For anyone interested, here’s how I did it:

  1. In Inkscape, create a 1920x1080px canvas, type some text, open the “Fill and stroke” panel, and set the parameters:
    Fill - No Paint
    Stroke Paint - Flat color, Black,
    Stroke Style - Line, 1.2mm width
    … to give an outline border (stroke):

  1. Ungroup the letters and save as an .svg file (“Catch The Late Train.svg”).

  2. Go to https://www.elusien.co.uk/shotcut/resources/SVG_animation.html

  3. Right click, select “View Page Source”

  4. Copy all the code, paste it into Notepad (Notepad++ is better)

  5. Save as an HTML file

  6. Open “Catch The Late Train.svg” also in Notepad or Notepad++ and copy the code

  7. Paste into the HTML file in between the “< div >” and “< /div >” tag, REPLACING the code that’s there, and save as “Catch The Late Train.html”

  8. Double-click on this HTML file. The animated text will show in your browser, showing as coloured particles.

  9. Open the text in Notepad++, and tweak the settings as follows, to give white text on a black background. This also makes the text appear gradually as a series of evolving lines, not particles:

    const animate_separately  =   false ;      
    const drawn_out               =   false ;
    const particles             =   false      ; 
    const particle_size       =   10     ; 
    const stroke_start        =   1000  ;   
    const stroke_duration   =   2000 ;
    const   fill_start        =   2000  ;
    let     fill_duration     =   2000 ;
    const backgroundColor     =   'black';    
    const use_original_colors  =   false ;   
    const stroke_colors        = [ 'white' ];
    const   fill_colors        = [ 'black' ];
    const first_stroke        =   'white'      ;  
    const first_fill            =   'black'        ; 
    const easing               =    'linear'    ;
  10. Save the file,double click it, and the effect will appear in your browser:

  1. Run a screen capture program and capture the animation as a MP4 video. I use ShareX but there’s OBS or others.
  2. Import the MP4 into Shotcut and place on V2 or any track above your main video on V1
  3. Add a “Blend Mode” filter to the MP4 clip and set it to “Add”. This makes the black transparent but keeps the white text white and is far superior to the ChromaKey (simple) filter (for black and white images)
    13 use the Size Position and Rotate filter to resize and position the text where you want it.


SVG and HTML files for anyone to play with:
Catch the Late Train - svg and HTML files.zip (7.8 KB)

@elusien has made this excellent tutorial to explain the process:

See also: (although beware, it’s a long thread!):

Message to @elusien - thank you so much for this SVG animation tool!


Why did I have the feeling I was watching an old Pierre Richard movie when I heard that song ? :slight_smile:
Oh, I know:

A ha, that’s uncanny! Very similar! These sound like pan-pipes. But why have I not ever heard of Pierre Richard? I suspect he’s Canadian.

No, Pierre Richard is an actor/comedian from France. You may not know him but maybe you saw a couple of English remakes of his movies.

The Man with One Red Shoe with Tom Hanks was a remake of Le Grand Blond avec une Chaussure Noire (the clip I shared above)
Another one is Three Fugitives with Nick Nolte and Martin Short. The original French version was Les Fugitifs, with Gérard Depardieu and of course Pierre Richard.

1 Like

Excellent steps, description, and results! Thanks for providing a simple start-to-finish workflow for a complex effect!

1 Like

Non, nous pouvons très bien aimer votre musique sans être musicien.
No, we can very well like your music without being musicians.

Merci du partage, je ne connaissais pas cette astuce.
Thanks for sharing, I didn’t know this trick.

1 Like

@MusicalBox, thanks! never knew!

Thanks, @Austin!

After reading this, I immediately realised my original comment was pretty stupid! Of course non-musicians can enjoy music! If you did enjoy this piece, I am honoured. Thank you.

Après avoir lu ceci, j’ai immédiatement réalisé que mon commentaire original était assez stupide! Bien sûr, les non-musiciens peuvent profiter de la musique! Si vous avez apprécié cette pièce, je suis honoré. Merci.

Actually it was @MusicalBox who kind of alerted me to this. It’s a really useful technique.

En fait, c’est @MusicalBox qui m’a en quelque sorte alerté. C’est une technique vraiment utile.

1 Like