Short animated graphics forum challenge

Tutorial
1

Hi folks,
I came across this short animated graphic at the start of YouTube video I was watching and thought it would be good to present it as a little challenge for anyone interested on this forum.
The challenge will be to create a SIMILAR (not necessarily identical) effect, using Shotcut alone, or Shotcut plus Glaxnimate. Text can be anything you like, maybe with a reference to “Shotcut” in it?
All the better if you can make it even more effective and creative than the original…
I haven’t tried this yet myself - still a little busy with a couple of music videos, but I will as soon as possible.
It would be nice for people to post their efforts, then maybe in a few day’s time to post their methods.
Here’s the video - I’ve repeated the logo a few times:

3 Likes
2

not necessarily identical
Meaning we don’t need to replicate the same logo?
Could I use, for example, the Shotcut logo and make it appear in a somewhat similar way?

Or do you want the same logo with the same animation?

1 Like
3

I am too much of a beginner to do this, but im interested about how u guys did it.

4

Hi @musicalbox, oops, I wasn’t too clear was I :smiley: ?
I suppose what I meant was that the logo should build up in a series of revealing strips, stripes or blocks. So you COULD replicate the same logo - or make another variant of the design, and yes the Shotcut logo would be fine, as long as it reveals as I just described.
I hope that makes it 1% clearer… :wink:

5

Thanks for your interest, @stormthesource , hopefully we’ll get some demo videos in a while.

1 Like
6

I’d say it is 100% clearer :slight_smile:

1 Like
7

First attempt.
Might try different animations for the logo though.
I’ll see tomorrow. Maybe this one will grow on me.

I only used tools available in Shotcut.
2 tracks, 2 clips.

3 Likes
8

J’ai choisi de reproduire à l’identique car je pense que la difficulté principale est d’obtenir les extrémités des segments coupées en biseau.

I chose to reproduce identically because I think the main difficulty is to obtain the ends of the segments cut at an angle.

3 Likes
9

Excellent! Ooh - you’ve pixellated your clips until your method is revealed!! Clever!

Brilliant. A fine reproduction!
Congratulations to both @MusicalBox and @namna so far!
I’m a little stuck for time myself but I will try to have a go sometime today…

Brillant. Une belle reproduction !
Félicitations à @MusicalBox et @namna jusqu’à présent !
Je suis un peu à court de temps moi-même, mais je vais essayer de faire un essai aujourd’hui…

1 Like
10

Hi @namna, just noticed the typewriter effect on “Festival”. Excellent touch!

Salut @namna, je viens de remarquer l’effet machine à écrire sur “Festival”. Excellente touche !

11

I went for a creative variation on a theme - opting for brush strokes instead of shapes. I’m not totally happy with the final effect but it was the best I could do in the time I had:

12

Yeah, I’ve been picking my brain about that. I might give it a try too, but there is no way I could come up with something better. Nicely done @Namna !

Looks good. The Christmas tree shape is in season :slight_smile: :christmas_tree:

I also used a typewriter effect on the Video Editor text. But now I see that I didn’t make the duration between strokes long enough.
Here’s a revised version:

2 Likes
13

Hello again, I’m hoping to get back into using Shotcut again over the winter. I’ve been messing about with SVG animation for a little project and thought I’d try it here. Just copy this and run in a browser:

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans">
<style>
    body    {display:flex; background-color: black;}
    div     {width:200px; height:200px; padding: 10px; background-color: black;}
    span    {display: inline-block;}
    #text   {font-family: "Noto Sans", sans-serif; font-weight: bold; color: #115c77; z-index: -1}
    path    {stroke-dasharray: 1; stroke-dashoffset: 1; animation: dash 2s linear forwards;}
    #line_1 {font-size: 36px; transform: translateX(-200px); animation: grow_1 1s 2s linear forwards;}
    #line_2 {font-size: 24px; transform: translateX(-100px); animation: grow_2 1s 3s linear forwards;}
    @keyframes dash   {from {stroke-dashoffset: 1;       } to {stroke-dashoffset: 0;     }}
    @keyframes grow_1 {from {transform: translateX(-200);} to {transform:  translateX(0);}}
    @keyframes grow_2 {from {transform: translateX(-100);} to {transform:  translateX(0);}}
</style>
</head>
<body>
    <div id="spiral">
        <svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
        <path pathlength="1" stroke-linejoin="round" d="M100 100 h10 v20 h-30 v-40 h50 v60 h-70 v-80 h90 v100 h-110 v-120 h130 v140 h-150 v-160 h180"  style="fill:none;stroke:#115c77;stroke-width:12" />
        Sorry, your browser does not support inline SVG.
        </svg>
    </div>
    <div id="text">
        <span id="line_1">SHOTCUT</span><br>
        <span id="line_2">Forum</span>
    </div>
</body>
</html>
2 Likes
14

Hi @Elusien

chrome_9P7msYNQOe

Nice ! I’m always amazed to see what can be done with only a few lines of code :slight_smile:

2 Likes
15

Oh yes, it does look like a Christmas tree … which gave me an idea :wink::

PS to the mean-spirited juvenile who is still giving me dislikes for EVERY video I post:
Dislikes from meany
… here’s a little present :
https://youtu.be/DF1k4xH12sQ?si=ZWCfX2UOr-B1TSfw

5 Likes
16

Hi @elusien, that is fantastic news! Can’t wait so see some more of your coding masterpieces!
The animation is great. Very clever. Thanks for making it available.

17

I had a go at replicating the original. Added a lens flare for extra effect…

J’ai essayé de reproduire l’original. J’ai ajouté un reflet d’objectif pour un effet supplémentaire…

2 Likes
18

Hi @elusien, it has been very educational trying to work out how you made the animation with the SVG tag in HTML. I’m looking through the W3 SVG tutorial and getting to learn some of the basics. Thank you!!

19

@elusien - A-HA! so that’s how it all works… the plot thickens… :wink:

SVG code HTML example
SVG code HTML example1273×504 91.3 KB

20

J’aime beaucoup le coté artistique de votre sapin, quelques traits suffisent. :smiley:
Cependant, il ne respecte pas le défi initial car je suis sûr que vous avez utilisé autre chose que Shotcut, par exemple des fichiers images externes pour l’étoile et les coups de pinceau.
Voici donc un autre sapin, beaucoup moins artistique, mais réalisé entièrement avec Shotcut SEUL. Pas de fichiers ni de logiciel externe.
Qui saura reproduire?

I really like the artistic side of your tree, a few strokes are enough. :smiley:
However, it does not respect the initial challenge because I am sure that you used something other than Shotcut, for example external image files for the star and the brush strokes.
So here is another tree, much less artistic, but made entirely with Shotcut ALONE. No files or external software.
Who will be able to reproduce?

2 Likes