Resources for Shotcut

Below are a set of resources for use with the Shotcut video editor.

1 SVG Path Animation Animate the paths specified within an SVG file to make it appear that they are slowly being drawn on the screen.
2 Animating Routes on a Map Using an SVG to animate routes on a map as well as icons travelling those routes.
3 Animated Text Strokes A special case of the technique used in Section 1, without needing any knowledge of SVG editors, such as Inkscape and Illustrator.
4 Heartbeat A video simulating a heartbeat, or electrocardiogram graph
5 3D_Animation Using HTML/CSS to produce a 3D-Animation of the Shotcut Logo
6 Lower-Thirds Banner Application Using HTML/CSS to produce a "lower-third" banner effect as seen mainly on videos and TV programs

1. SVG path animation

SVG files are Scalable Vector Graphics files that are XML files which can easily be manipulated with Javascript. In particular the paths specified within the SVG file can be animated to make it appear that they are slowly being drawn on the screen. The HTML file SVG_animation.html is such an example.

You can replace the <svg>....</svg> in the HTML with your own SVG file and easily tailor its animation by modifting the parameters (see below). A tutorial on how to do this can be seen here: SVG_animation_tutorial.mp4. Play around with the parameters and please remember, PATHs are being animated; if you have objects like RECTANGLEs or ELLIPSEs you must convert these to PATHs (e.g. using Inkscape - in order to animate them.

For those new to SVGs, Inkscape and/or OBS, have a look at the following useful Introductory videos:

To obtain the source (to edit in your SVG) click on the SVG_animation.html link above, then Right-click on the webpage and choose "view source" and copy-paste this into a text editor (such as notepad++) to edit in your own SGV file.

Here is another SVG animation, this time of the Shotcut logo shotcut_Logo_Animation.html.

The parameters you can modify to alter the type of animation are:

 //                                                 =============================
//============================= You may change the value of the PARAMETERS below ============================
//                                                 =============================
  const animate_separately  =   true          ;  // true = animate paths consecutively, false = animate paths concurrently
  const drawn_out           =   true          ;  // true = first path and last path complete simultaneously.
  const particles           =   true          ;  // true = draw using "particles", false = draw using lines
  const particle_size       =       1         ;  // in the "user units" of the SVG e.g. px, cm, pt, inch etc...
  const stroke_start        =       0         ;  //  0 seconds before starting to animate the stroke
  const stroke_duration     =   12000         ;  // 12 seconds (6000 msecs) spent animating the stroke
  const   fill_start        =   12000         ;  // 12 seconds before starting to animate the fill
  let     fill_duration     =    2000         ;  //  2 seconds spent animating the fill
  const backgroundColor     =   'black'       ;  // Any CSS colour (see
  const use_original_colors =   false         ;  // true = use the colours in the SVG, false = use the colours below
  const stroke_colors       = [ 'red', 'green', 'blue', 'magenta', 'orange', 'teal' ];  // Any CSS colours
  const   fill_colors       = [ 'teal', 'red', 'green', 'blue', 'magenta', 'orange' ];
  const first_stroke        =   'yellow'      ;  // The stroke colour for the first path (it may be unique)
  const first_fill          =   '#aaa'        ;  // The   fill colour for the first path (it may be unique)
  const easing              =   'easeInOutQuad';  // The type of motion acceleration (see
  easing value = one of the following: 
    'linear', 'easeInQuad' , 'easeOutQuad' , 'easeInOutQuad' , 'easeInCubic', 'easeOutCubic', 'easeInOutCubic',
              'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'

//                             ========================================================
//============================= You may change the VALUE of any of the PARAMETERS above ==============================
//                             ========================================================


2. Animating Routes on a Map

Several users of Shotcut have asked how they can create an animated route on a map. There are ways of doing this just using Shotcut, which mainly involves using a chroma key filter with mask filters that are keyframed. A good example of this has been provided by Shotcut forum member "Namna" here: However, this can quite fiddly and complicated if the route crosses itself or partway reverses or changes direction drastically. I have experimented with a different approach using SVGs (Scalable Vector Graphics). See "1. SVG Path Animation" above for more information on SVGs - though that technique and this one are similar they are totally independent of each other, you don't have to use one to use the other. Before going into detail on what to do it is worth looking at the finished result, so click here for an animated tour around Cyprus. It is a bit on the "gaudy" side as I have tried to include as many options as I could and the start times for each path is set to zero, whereas in reality each path would wait for the previous path to complete first.

Here are the steps to produce this:

  1. Obtain an image (jpeg/png) of the map, e.g. from Google Maps, or, but be sure to follow their guidelines concerning copyright and fair use etc.
  2. Open your favourite SVG editor (I use Inkscape, but Illustrator, or any of the others e.g. will do), and import your map image. There are 2 ways of importing an image, one is called "Linking", where the SVG that is created will have an <image> element with a reference to the (relative) location of the file e.g.
    <image  width="1280" height="720" xlink:href="my_map.png"/>
    The second way is called "Embedding", where the image is converted to Base64-encoded data which is actually embedded in the SVG, e.g.
    <image  width="1280" height="720" xlink:href="data:image/jpeg;base64,/9j/4AAQS..."/>
    While embedding greatly inflates the size of your SVG, it means that the SVG can be used "standalone" almost anywhere, whereas linking means that the image file (my_map.png) must always be available on the system in the same position in the filesystem relative to the SVG itself. Also, if you were to create an HTML file with the SVG in it. e.g. as the source of an <img> element, the HTML file would have to reside in the same directory/folder as the SVG itself, unless you edited the filepath. Not all editors offer both methods. My utility can handle both types of import.
  3. Using the "Freehand Drawing" tool (or the Bezier Curve tool or similar) trace over the route on the map. If you want to have several paths, e.g. splitting the route at points along it, just draw several traces, or use the editor's "Split Path" tool.
  4. Once you are happy with the traces (e.g. their smoothness, colour, width etc.) export the result as an SVG file, e.g. "Tour_of_Cyprus.svg". Don't worry too much about the colour or width of the traces (or "paths") as you can change these later.
  5. Open my click on the button near the top that says: "Load the SVG" and play around with the options until you are happy with the result. For each individual path/trace you can change:
    • whether it is visible or not
    • how thick it is
    • what colour it is
    • how opaque it is
    • whether is is animated or not
    • when the animation starts
    • the duration of the animation
    • whether an icon or text is animated to travel along the path
    You can restart the animation at any time by clicking the "Restart the Animation" button.
  6. When you are happy with the animation click the "Create New (Animated) SVG" button. This will bring up a "Textarea" element that has all the text for the new animated SVG. The utility inserts SMIL (Simultaneous Multimedia Integration Language) instructions inside the SVG itself and as such when you display that SVG in (most) browsers it animates automatically. Just left-click on the text to select it and then Copy-Paste it into a simple text editor, like Notepad++, and save it as an SVG file e.g. Animated_Tour_of_Cyprus.svg. You may click (or right-click) on that link to download the SVG itself and use that to familiarise yourself with the utility.
  7. If after saving the SVG you realised you made a mistake, or want to change some part of the animation, just open my utility afresh and select the animated SVG as the one you wish to open.
  8. You can simply open the SVG in browser window and it will fill the window and perform the animation. You can use a screen recorder like Sharex to record this to a video file and use this as a clip within Shotcut. Rather than use Sharex, I used OBS to record the animation as a "browser source". To use the browser source feature I created the simple HTML file shown below (please note the specification of "utf-8" is very important:
    <meta charset="utf-8">
      body {display: flex; flex-direction: column; align-items: center; justify-content: center;}
      svg  {width: 1080px; height: auto;}
           REPLACE  THIS TEXT WITH YOUR <svg>....</svg>


The utility is fairly intuitive. Hovering over the title of a column will bring up a tool-tip explaining about that column. You can use "Drag & Drop" on the elements/cells in the first column to move a path upwards or downwards. This makes it easier sometimes when altering the "Start" and "Duration" cells to link paths sequentially.

3. Animated Text Strokes (without needing to use an SVG editor)

Animating text strokes, such as is shown in these two videos is a special case of the technique used in Section 1 (SVG path animation) above. Some people feel a bit intimidated using SVG editors like Inkscape or Illustrator. To ensure that because of this these people don't miss out on using my path animation utility I have come up with a simpler procedure for animating text that does not require using an SVG editor.

There is simple web-base utility that enables you to input a line of text, choose a Google Font to display it and decide whether to view the characters separately or as a continuous string. You are presented with the SVG representing this, which you can then copy-paste into the following HTML (replacing the <svg>...</svg> element in it). Then you can simply view this HTML file in a browser (or as a browser source in OBS) and use a screen recorder to create a video clip that you can use in Shotcut.

There are quite a few parameters near the top of the HTML (See Section 1 above) that you can modify to change the behaviour of the animation. Try different combinations to see which suits your requirements best. Two new parameters have been added.

The instructions for creating text animation effects such as those shown in the videos above are:

  1. Open in a text editor such as Notepad++ one of the two HTML files used to produce the animated videos above. The idea is to replace the <svg>...</svg> element with one that you are now going to create. The two html files for downloading are: .
  2. Go to the following website and create your SVG by typing the text choosing the Google font, font-variant and font-size, as well as whether or not you want seperate characters (each character has its own path). You can preview Google fonts by going to:
  3. The SVG source will appear in the textarea at the bottom of the webpage. Highlight the text and copy-paste it into the file in the text editor replacing the <svg>...</svg> element that is already there. Save the changed HTML file.
  4. Run the HTML file in a browser and take a screen recording, e.g. using Sharex, or run it as a browser source in OBS and make a video recording that you can edit as a clip in Shotcut.

4. Heartbeat

Several users of Shotcut have asked how they can simulate a heartbeat, or electrocardiogram graph. The easiest way is to obtain a clip from the web and use that. I generated two such clips:

If you are interested in how I produced the videos I downloaded an actual ECG dataset from the web, wrote a javascript program to massage the data and display it in an HTML canvas and then added some CSS animation. I then played it as a “browser source” in OBS and recorded it. I then fed it into shotcut, tidied it up and created the 2 videos. N.B. The flatlining at the end is my invention, the patient being monitored did not die. Feel free to use them in your projects.

5. 3D-Animation of the Shotcut Logo

I created an HTML/CSS file to show how easy it is to produce very acceptable 3-D animations using this technology. Here is the result:

The HTML file was run as a browser source in OBS studio, which recorded the animation. This video was then tidied up within Shotcut. It required 3 images:

  1. The shotcut logo itself for the front and back
  2. A small image for the left and right sides
  3. A small image for the top and bottom

The code itself is:

<!DOCTYPE html>
<html class="language-html">
<title>Revolving 3-D Shotcut Logo</title>
<meta charset="UTF-8">
<meta    name="description" content="A revolving 3-dimensional Shotcut Video Editor logo."/>
<meta    name="keywords"    content="Shotcut, 3D, animation"/>
<meta    name="viewport"    content="width=device-width, initial-scale=1.0">
<meta    name="author"      content="Neil (">

body {display:flex; flex-direction: column; align-items: center; justify-content: center;
      width: 1368px; height: 912px; background-color: black;}
.container {
  width      : 327px;
  height     : 78px;
  perspective: 500px;
  margin     : 100px;

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0     ); }
  to   { transform: rotate3d(1, 1, 0, 360deg); }

.cuboid {
  position       : relative;
  width          : 327px;
  height         : 78px;
  transform-style: preserve-3d;
  animation      : turn 5s linear infinite;

.face {
  background     : transparent;
  border         : 1px solid black;
  position       : absolute;
  opacity        : 1;
  display        : flex;
  align-items    : center;
  justify-content: center;

.front {
  width           : 327px;
  height          :  78px;
  background-image: url("shotcut_logo.png");
  transform       : translateZ(10px);

.back {
  width           : 327px;
  height          :  78px;
  background-image: url("shotcut_logo.png");
  transform       : translateZ(-10px); /* rotateY(180deg); */

.left {
  width           : 20px;
  height          : 78px;
  background-image: url("shotcut_side.png");
  transform       : translateX(-10px) rotateY(-90deg);

.right {
  width           : 20px;
  height          : 78px;
  background-image: url("shotcut_side.png");
  transform       : translateX(317px) rotateY(90deg);

.top {
  width           : 327px;
  height          : 20px;
  background-image: url("shotcut_top_n_bottom.png");
  transform       : translateY(-10px) rotateX(90deg);

.bottom {
  width           : 327px;
  height          : 20px;
  background-image: url("shotcut_top_n_bottom.png");
  transform       : translateY(68px) rotateX(-90deg);

<div class="container">
  <div class="cuboid">
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face front"></div>
    <div class="face back"></div>

6. Creating a lower-thirds banner effect as seen on videos and TV programs

CSS animations lead themselves quite well to creating reasonably sophisticated "low-third" effects, such as are shown in the sample video above. There are some who are not confident at creating the HTML files needed to do this, so I have created a simple utility that people can use to do this. Initially the utility will only create the type of effect shown above, but I may extend it to other animations. The utility enables the user to tailor the various parameters needed to create the effect in a simple way. It creates the HTML/CSS text needed to create the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut, or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it.

The icon that is used in the animation can be chosen from a set of over 1,600 free icons provided by those great people over at The licence for these free icons is very liberal and allows the icon set to be used for commercial projects, open source projects, or really almost whatever you want. If you want to use something else you can do that also e.g. you could use an emoji character.

My web application can be accessed by pressing here: