My quest is to use and activate the Konk gradient in SVG

  • Home / Web Development / My quest is…

My quest is to use and activate the Konk gradient in SVG

For Peoner, the amazing company I work for has a new logo, and my job was Rebuild and animate it For a loader component in our app. I will explain exactly what I did, share the problems I have, and work on the solution I came up with. And, as a bonus, we’ll see it animate!

But first, I guess some of you are asking yourself; Retrieve it Why?

The branding agency that designed our logo sent us a complete set of assets categorized by themes. They came in all sizes and in all available forms. We had everything including the logo and SVGs for loader animation. But we could not use them.

Why is here Let’s take a look at the logo:

We call the new logo “Hello.”

The logo is a cone-colored color consisting of five colors, and 2 bus. The problem is that SVG does not support angle gradient (at least, for now), so when we export a design that has a conical inclination as SKG, to get the desired result We need some kind of hack.

Now, I’m not an expert when it comes to working with vector graphic software, so there may be a different (and maybe better) way to do this, but I know that SVG has to export conical gradient. The most common method is to change. Create a gradient element in an image and insert that image into SVG as base 64. The same thing happened with the branding agency, and I trust them to know the best way to export SVG.

But, now that the final SVG file contains a PNG base 64 string, the file size has grown to about 1MB, which may not be a disaster, but it is much more than the 2KB that should be. Multiply this difference by three subjects (no text, light text, and black text variations), and we’re looking for images that cost 3MB instead of 3MB worth of code. That’s a big difference, so we decided to recreate the logo with SVG.

But how ?!

Although CSS fully supports Konk gradient, SVG does not. So the first question I asked myself was how to make Konk Granite in SVG. Actually, I asked Google. And what I found were great, unique, creative ways that could add a conical gradient to the SVG, most of which depend somehow. clip-path Process. I first created a short <path> Which represents the shape of the color and is used as clip-path On a simple <rect> Element

Next, I need to fill it out <rect> With the conical gradient, but first, to recreate the look, I had to find all the stops of the right color. It took a while, but after a lot of tinning, I came to a conclusion that I’m happy:

div.gradient {
  background-image: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
}

The last step was to change it <rect> With something else that supports distorted gradients, and the easiest way to meet me is to use an SVG <foreignObject> Element with a regular <div> Inside it, and one conic-gradient Is one background-image. All I had to do then was set up clip-path On <foreignObject> Element, and that’s it.

So, this is how I used a cone gradient in SVG so that the design could be made entirely with less than 20 lines of vector and code, and less than 2KB in file size.

But that was the easy part. Now let’s talk about animation.

Loader

Each time a user logs in, our app displays a loading animation. We used to use a GIF file for this, but for months I meant to update it to pure CSS / SVG animation. The advantages are obvious: faster rendering means a smoother loading experience, and a smaller file size means faster loading. We just get a low price, which is especially good for loading animation.

This is the animation I intended to:

This kind of animation is actually quite easy with SVG. All we really need is a trick stroke-dasharray And stroke-dashoffset. That was my starting point. I created a new one <path> In the middle of the color, removed fill, Included a stroke With the truth stroke-width, And then worked on animation.

To achieve this movement, I had to play around with what the designers wanted. I ended up using two animations, actually: one controls stroke-dashoffset, And the other rotates completely <path> A complete twist

But, since clip-path Refers to property fill Of course, triggering the stroke meant I had to solve one of two problems: I could either find a different way to stimulate the movement, or find a different way to add color to the stroke. Was

So Google got back to Google and all the creative ideas I had found before, but most of them were inactive, so I made a good non-clip-path How to add color to paralysis. I looked at some “out-of-the-box” solutions, checked the masks, and ended up with a simple closing solution:

.logoBlend {
  mix-blend-mode: lighten;
}

A lighten Blend mode looks at the RGB colors of each pixel of the provided element, compares it to the RGB value of the background pixel behind it, and retains whatever is higher. This means that the parts of the element that are white will remain white, and the dark parts will get the values ​​of the background pixel.

By adding a white <rect> By the way, I must have blocked everything behind it. Meanwhile, everything behind the dynamic black stroke is visible. That meant I could bring it back <foreignObject> with the conic-gradient, Put behind mix-blend-mode Create a layer, and give it a simple rotating animation to match the design.

Note that the final result of this procedure will be a white background, not as transparent as a static logo, but I was fine with that. If you need to, you can turn it around, use a dark background, and hide the light parts of your element by adjusting the blend format. darken.

Last touch

I was working very hard at the time, and was very happy with the end result. But a few days later, I received a JSON file from the branding agency with the exact same animation. In the past, maybe I could quit my job and use their file, it worked fine. Even the file size was surprisingly small, but it was still 8✕ ​​larger than SVG, so we stopped using our animation anyway.

But, that meant I had one last thing to do. There was a “start animation” in Lotti animation where a small orange grows in perspective, and I had to add it to my animation as well. I initially added all three animations as well as a short 0.5 delay in scaling animation.

Click “Rear” on the pen to see the animation again from the starting point.

that’s it! My company now has a new logo and a set of lightweight, fully scalable assets for use in our web platforms.

And for those of you who are thinking, yes, I have started to develop a very small logo component in response since we have been using it. It even approves SVG according to a theme, which makes it easier to implement, and keeps all future changes in one place.

What do you think?

Do you think there is a better way to get the same result? Share your thoughts in the comments! And thanks for reading.

Write a Comment

Your email address will not be published. Required fields are marked *

x