These 2 previous banners use the exact same SVG shape.
By using some CSS, we can easily change the position, size, rotation and colors.
Example with the first banner:
And the second one. You will see that only the 'fill', 'transform' and 'background-color' are different.
You will notice a huge 'scale' number. It's normal, the SVG is actually super huge (6000px).
It doesn't matter as it's a vector graphic, so the quality will be always good whatever the resolution.
But don't use a scale transform higher than 1 if you want to animate the SVG. Or it will look crap. See the next one for more info:
It's still the same SVG but now it's animated. And because I can't use a scale higher than 1, I will change his size with the 'width' instead.
Then I center it with the 'left' property.
Note that I can also center the SVG in this way:
left: 50%;
transform: scale(1) translatex(calc(-50% + 530px)) rotate(25deg);
And if you are wondering why the SVG is so big, well check his out:
The shape is actually transparent in the middle, so it can work like a mask. But as I want to be sure it can cover all the banner, I have to make it quite large.
Here is how it looks like if the SVG if I don't change the scale or the width:
