Supabanner serie 2

SUPA BANNER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at consequat ante, id gravida tortor.Duis et lacinia erat. Nunc vestibulum sapien vel elit placerat, eget tincidunt tortor eleifend.

SUPA BANNER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at consequat ante, id gravida tortor.Duis et lacinia erat. Nunc vestibulum sapien vel elit placerat, eget tincidunt tortor eleifend.

Note

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:

ANIMATED BANNER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at consequat ante, id gravida tortor.Duis et lacinia erat. Nunc vestibulum sapien vel elit placerat, eget tincidunt tortor eleifend.

Note

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:

SUPA BANNER

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram