Our app shows a loading animation every time a user logs in. So, that’s how I used a conic gradient in an SVG to keep the design fully vector and scalable with less than 20 lines of code, and less than 2KB in file size.īut that was the easy part. I first created a short that represents the shape of the ring and used it as a clip-path on a simple element. And what I found was a lot of cool, unique, creative ways to add a conic gradients to SVG, most of them relying on some sort of clip-path implementation. So the first question I asked myself was how to create a conic gradient in SVG. But how?!Įven though CSS fully supports conic gradients, SVG does not. That’s a big difference, so we’ve decided to recreate the logo with SVG. Multiply that difference by three themes (no text, light text, and dark text variations), and we’re looking at 3MB worth of images instead of 3KB worth of code. That’s also what we got from the branding agency, and I trust them to know the best way to export an SVG.īut, since the final SVG file now contains a PNG base64 string, the file size jumped to nearly 1MB, which might not be a total disaster, but it’s much higher than the 2KB that it should be. Now, I’m no expert when it comes to working with vector graphic software, so there might be a different (and perhaps better) way to do this, but I know that the most common way to export conic gradients to SVG is to convert the gradient element to an image and insert that image into the SVG as a base64 string. The problem is that SVG doesn’t support angled gradients (for now, at least), so when we export a design that has a conic gradient as an SVG, we need some sort of hack to get the desired result. The logo is a ring with a conic gradient that consists of five colors, and… that’s it. Let’s take a look at the logo: We call the new logo “The Halo.” We had everything, including SVGs, for the logo and the loader animation. They came in all sizes and in every available format. The branding agency that designed our logo sent us a full set of assets categorized by themes. And, as a bonus, we’ll look at animating it!īut first, I guess some of you are asking yourselves… Recreate it? Why? I’ll explain exactly how I did it, share the problems I had, and walk you through the solution I came up with. The wonderful company I work for, Payoneer, has a new logo, and my job was to recreate it and animate it for a loader component in our app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |