Congratulations Jon!
You need to use a monospaced font (all characters have the same width)
1 Like
But of course! Easy! Should have thought of that! Thanks.
1 Like
I did some detective work and deduced that you used the “monofonto” font. Would I be right? Elementary, my Dear Watson. 
2 Likes
Sorry Holmes, the font I used is BEBAS NEUE.
Somewhat similar to MONOFONTO, but the characters are thinner, and have no lower case.
1 Like
Puisque l’on en est à ajouter des filtres pour la décoration, voici une autre variante.
Since we are adding filters for decoration, here is another variation.
2 Likes
Vous êtes un bon détective, pas pour la police, mais vous savez désormais filtrer
You’re a good detective, not for the police, but you know now how to filtrate
(This is a French pun)
1 Like
I used the standard “mask from file” filter in Shotcut with the standard parameter “concentric_cones_5_true(1920x1080.png”:
<filter id="filter2" in="00:00:10.000" out="00:00:10.000">
<property name="filter">shape</property>
<property name="mlt_service">mask_start</property>
<property name="shotcut:filter">maskFromFile</property>
<property name="filter.mix">00:00:00.040=0</property>
<property name="filter.softness">1</property>
<property name="filter.invert">0</property>
<property name="filter.use_luminance">1</property>
<property name="filter.resource">C:/Users/xxxxx/AppData/Local/Meltytech/Shotcut/transitions/concentric_cones_5_true(1920x1080.png</property>
<property name="filter.use_mix">1</property>
<property name="filter.audio_match">0</property>
<property name="filter.alpha_operation">overwrite</property>
<property name="shotcut:animOut">00:00:00.000</property>
<property name="shotcut:animIn">00:00:00.000</property>
</filter>
2 Likes
Oh, yes. Sherlock got the wrong guy… but to be fair, he was a good look-alike …
LOL! I think we would probably say, “infiltrate”, but I get the joke!.. 
MDR ! Je pense que nous dirions probablement « infiltrer », mais je comprends la blague !..
Superb, @namna! 
Interesting! So is that PNG included with the SC download?
I got mine from the Kdenlive store here:
… remembering that the standard SC “Clock Top” transition does not give a truly linear effect:
1 Like
Yes, I remember the Clock “bug”, that is why I thought Dan had included the new PNG with the installation.
Just out of interest I tried creating an HTML/CSS file (no Javascript) to create a circular progress bar. It works, but unfortunately, without Javascript, I cannot get it to update the data in the centre.
<html>
<head>
<style>
:root { --start : 2; --end : 8; }
@property --progress {
syntax : '<number>';
inherits : true;
initial-value: 0.0;
}
@property --degrees {
syntax : '<angle>';
inherits : true;
initial-value: 0deg;
}
@keyframes progress { from { --progress: var(--start); } to { --progress: var(--end); } }
.progress-bar {
width : 200px; height: 200px; border-radius: 50%;
display : flex; justify-content: center; align-items: center;
--progress: var(--start);
--degrees : calc(360deg * var(--progress) / var(--end));
background:
radial-gradient(closest-side, white 79%, transparent 80% 100%),
conic-gradient(darkblue 0deg, darkblue var(--degrees), yellow var(--degrees));
animation : progress linear calc((var(--end) - var(--start)) * 1s) calc(var(--start) * 1s) forwards;
}
.progress-bar::before { counter-reset: start var(--start) end var(--end); content: counter(start) ' to ' counter(end); }
</style>
</head>
<body> <div class="progress-bar"></div> </body>
</html>
2 Likes
Looks good, @elusien. I’m sure @musicalbox would allow a use of a touch of javascript to get the data updated… 
PS I tried the “Clock Top” transition first, and it still isn’t linear.
Yes me too. I only found the other problem when I made the square video.
waiting for the tutorial how to make it 
OK here it is with 7 lines of Javascript.
<html>
<head>
<style>
:root { --start : 2; --end : 10; }
@property --progress { syntax: '<number>'; inherits : true; initial-value: 0.0; }
@property --degrees { syntax: '<angle>' ; inherits : true; initial-value: 0deg; }
@keyframes progress { from { --progress: var(--start); } to { --progress: var(--end); } }
#progress-bar {
width : 200px; height: 200px; border-radius: 50%; font-size: 48px; color: red;
display : flex; justify-content: center; align-items: center;
--progress: var(--start);
--degrees : calc(360deg * var(--progress) / var(--end));
background:
radial-gradient(closest-side, white 80%, transparent 80%),
conic-gradient(blue 0deg, blue var(--degrees), yellow var(--degrees));
animation : progress linear calc((var(--end) - var(--start)) * 1s) calc(var(--start) * 1s) forwards;
}
/*.progress-bar::before { counter-reset: start var(--progress) end var(--end); content: counter(start) ' to ' counter(end); }*/
</style>
</head>
<body> <div id="progress-bar"></div> </body>
<script>
const pbar = document.getElementById("progress-bar");
function step(timestamp) {
const prog = +getComputedStyle(pbar).getPropertyValue("--progress");
pbar.textContent = (prog.toFixed(1)).padStart(4, '0');
requestAnimationFrame(step);
}
step();
</script>
</html>
1 Like
Marche pas chez moi, je n’ai qu’une image fixe 
Don’t work at home, I only have a still image
Ça fonctionne chez moi. L’animation commence à 2 secondes, mais peut-être que c’est intentionnel.
It works for me. The animation starts at 2 seconds, but maybe that’s intentional.
1 Like
1 Like
It does work for me, too. Just like @musicalbox’s demo.
Windows > 2
Mac> 0
1 Like
Coming soon
1 Like
I notice you can change that in line 4. Replace “2” with “0”:
1 Like