Motivation

I like al-folio website template. It is simple and elegant. Still, I’ve always wanted to add some “fun” parts to my website. Besides, I am such a fan of the LTI logo, thus I decide to play around with it.

Background

I barely have any experience in graphic design, which I figure out most of the steps below via YouTube videos and random websites (Online learning :clap:). I would love to hear from you if you have better ways of doing this :eyes:

Step-by-step logo making process

Tools that I use
  • Adobe Illustrator (Ai): This is the tool for graphic design, which helps turn a .jpg version of the LTI logo into a .svg. One can probably use Affinity Design as well since Adobe Illustrator is kind of pricey.
  • SVG Editor: This is a VS Code extension, which allows you to perform some simple operations to your SVG in a coding level.
  • CSS Animation: There exists a bunch of tools/websites that can help you create amazing CSS animations. I really like https://animate.style/, or simply searching CSS animations examples would yield a bunch of animations, which can serve as inspirations.

This is the hardest part of the whole process since there is not a publicly available SVG version of the LTI logo (as far as the first page of Google search knows). Therefore, I need to make the two wifi-like waves match perfectly myself. It is a winding process of figuring out the best approach to doing this. I have tried:

  • Directly vectorize the logo from the .jpg file with the Ai’s image trace tool. This yields small messy curves.
  • Download a wifi .svg online, copy and assemble them to look like the logo. This gives me roughly the LTI logo. But due to the different bandwidth, curvature, the resulting image still lacks some original “flavor”.
  • It turns out that I would like to reproduce the exact LTI-logo first before doing some creative modifications. Then I turn my attention to using the Curvature tool in Ai, this is the point where I am on the right track.

With the Curvature tool, I can draw the logo with the .jpg file as the template. Tips:

  • use the double click to make straight lines there (Gosh, it took so loooooog to figure that out. :cry:)
  • For the color, you can simply use the Eyedropper tool in Ai.
Find the CSS animation you like

Now it comes the fun part!! With the vectorized image in hand, you can almost do any manipulation you want. But first you need to find a suitable one. There is little technical difficulty in this process and it’s more about exploring and appreciating. Yayyyyy! :star2:

Here the SVG Editor comes in handy. With the visualizing mode of the editor, you can resize the logo or the animation to make them fit together. I also change the color of the logo to pure white to match the style of the animation. For Jekyll users, you can add the animation css file to \_sass\_layout.scss.

Technical improvements

Make the logo interactive

I also want to let the visitors play with the logo themselves. The following code enables the visitor stop the animation by clicking it.

<script>
    var clickDiv = document.getElementsByClassName("box");
    var svgLogo = document.getElementsByClassName("svg_logo")
svgLogo[0].addEventListener("click", function(){
    for (click of clickDiv){
    if (click.style.animationPlayState == "" ||
        click.style.animationPlayState == "running"
    ) {
click.style.animationPlayState = "paused";
    }else{
click.style.animationPlayState = "running"; // assuming you want to toggle
    }
    }
  })
</script>

For Jekyll users, you can add this script to \_includes\scripts\custom.html.

Make the logo disappear if the screen is not wide enough

The logo could look bad if the screen is not wide enough. Here I am being lazy choosing to let it disapear with the following code added to _sass/_layouts.scss:

@media screen and (max-width: 1200px) {
  .svg_logo {display:none;}
}

Conclusion

Now it looks like it is not so difficult to do that haha! I encourage you to get your hands dirty and looking forward to seeing your :art: soon :blush: