Using HTML/CSS to produce a "lower-third" banner effect as seen mainly on videos and TV programs
1. SVG path animation
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:
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 - https://inkscape.org/) 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.
The parameters you can modify to alter the type of animation are:
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:
Obtain an image (jpeg/png) of the map, e.g. from Google Maps, or OpenStreetMap.org, but be sure to follow their guidelines
concerning copyright and fair use etc.
Open your favourite SVG editor (I use Inkscape, but Illustrator, or any of the others e.g.
https://boxy-svg.com/ 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.
The second way is called "Embedding", where the image is converted to Base64-encoded data which is actually embedded in the SVG, e.g.
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.
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.
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.
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.
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.
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.
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:
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.
path_length_multiplier - this provides a workaround for SVGs produced with this new utility. Basically I need to discover the length of each
path but for some of the letters the system returns a length that is between 2 and 3 times too small. This parameter is a workaround for the
problem. So if you experience problems when using solid lines (it does not really affect particles so much), just try experimenting with
different values for this parameter.
path_width_multiplier - The web-based utility creates SVGs with a "path-width" of 0.25mm for the paths.
This is usually too narrow to give a good effect, which is where this parameter comes in. Again, experiment with it to get the result you want.
The instructions for creating text animation effects such as those shown in the videos above are:
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:
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.
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.
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:
one (ECG_Heartbeat.mp4) a 1 MB MP4 file showing the ECG as a green trace on a black background
the other (ECG_Heartbeat.mov) a 100 MB MOV file showing the ECG as a green trace on a transparent background
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:
The shotcut logo itself for the front and back
A small image for the left and right sides
A small image for the top and bottom
The code itself is:
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
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: