Morphing Letters

In overlay menu there is circle with a letter inside. If you hover over a menu item, you will see a morphing effect to another letter depending on the first letter of the item.

Here is how it works under the hood.

<ul class="menu-overlay js-menu-overlay">
  <li class="menu-item-has-children">
    <a href="#" data-letter="H"> <!-- The letter ID is in [data-letter] attribute -->
      <div class="menu-overlay__item-wrapper js-text-to-fly split-text js-split-text" data-split-text-type="lines, words, chars">Homepages</div>
    </a>
  </li>
  ...
</ul>

There is an SVG container .vector-letters which holds all the English letters. Each letter is vectorized and has a relative ID.

<div class="header__circle-letters">
  <div class="header__circle-letters-inner">
    <svg class="vector-letters" width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg"	xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Vector path of letter A -->
      <path d="M124.16,114.16 C125.546674,117.680018 127.146658,120.239992 128.96,121.84 C130.773342,123.440008 132.533325,124.293333 134.24,124.4 L134.24,127.6 C127.839968,127.279998 119.733382,127.12 109.92,127.12 C99.0399456,127.12 90.93336,127.279998 85.6,127.6 L85.6,124.4 C89.6533536,124.186666 92.5333248,123.680004 94.24,122.88 C95.9466752,122.079996 96.8,120.666677 96.8,118.64 C96.8,116.71999 96.1600064,114.160016 94.88,110.96 L85.28,84.72 L50.4,84.72 L46.24,95.76 C43.2533184,103.440038 41.76,109.359979 41.76,113.52 C41.76,117.466686 42.959988,120.213326 45.36,121.76 C47.760012,123.306674 51.3066432,124.186666 56,124.4 L56,127.6 C48.7466304,127.279998 42.1333632,127.12 36.16,127.12 C31.2533088,127.12 27.200016,127.279998 24,127.6 L24,124.4 C29.2266928,123.439995 33.8133136,117.840051 37.76,107.6 L74.24,14 C75.4133392,14.1066672 77.2799872,14.16 79.84,14.16 C82.4000128,14.16 84.213328,14.1066672 85.28,14 L124.16,114.16 Z M84.16,81.52 L68.32,38.32 L51.68,81.52 L84.16,81.52 Z" id="vector-A" class="vector-letter current"></path>
      <!-- - Vector path of letter A -->
      <!-- Vector path of letter B -->
      <path d="M86.96,68.76 C100.826736,69.826672 111.013301,73.02664 117.52,78.36 C124.026699,83.69336 127.28,89.9866304 127.28,97.24 C127.28,107.16005 123.386706,114.813306 115.6,120.2 C107.813294,125.586694 96.986736,128.28 83.12,128.28 C80.0266512,128.28 77.413344,128.226667 75.28,128.12 C68.2399648,127.906666 61.3600336,127.8 54.64,127.8 C43.6532784,127.8 35.4400272,127.959998 30,128.28 L30,125.08 C33.5200176,124.866666 36.1066584,124.440003 37.76,123.8 C39.4133416,123.159997 40.5333304,121.933342 41.12,120.12 C41.7066696,118.306658 42,115.373354 42,111.32 L42,31.96 C42,27.9066464 41.7066696,24.9733424 41.12,23.16 C40.5333304,21.3466576 39.4133416,20.1200032 37.76,19.48 C36.1066584,18.8399968 33.5200176,18.4133344 30,18.2 L30,15 C35.4400272,15.3200016 43.5466128,15.48 54.32,15.48 L72.08,15.32 C74.213344,15.2133328 76.6666528,15.16 79.44,15.16 C92.240064,15.16 102.026633,17.4533104 108.8,22.04 C115.573367,26.6266896 118.96,32.7066288 118.96,40.28 C118.96,46.4666976 116.266694,52.22664 110.88,57.56 C105.493306,62.89336 97.5200528,66.5199904 86.96,68.44 L86.96,68.76 Z M77.36,18.2 C74.4799856,18.2 72.37334,18.5733296 71.04,19.32 C69.70666,20.0666704 68.773336,21.3999904 68.24,23.32 C67.706664,25.2400096 67.44,28.1199808 67.44,31.96 L67.44,68.12 L74.32,68.12 C81.253368,68.12 86.1066528,65.7466904 88.88,61 C91.6533472,56.2533096 93.04,49.9333728 93.04,42.04 C93.04,34.03996 91.7866792,28.0666864 89.28,24.12 C86.7733208,20.1733136 82.8000272,18.2 77.36,18.2 Z M78.48,124.6 C93.3067408,124.6 100.72,115.26676 100.72,96.6 C100.72,88.1732912 98.586688,81.7733552 94.32,77.4 C90.053312,73.0266448 83.3333792,70.84 74.16,70.84 L67.44,70.84 L67.44,111.32 C67.44,115.160019 67.706664,117.986658 68.24,119.8 C68.773336,121.613342 69.8133256,122.866663 71.36,123.56 C72.9066744,124.253337 75.279984,124.6 78.48,124.6 Z" id="vector-B" class="vector-letter"></path>
      <!-- - Vector path of letter B -->
      ...
    </svg>
  </div>
</div>

So when you hover over the item with attribute [data-letter=”A”] the script will morph the current letter to the path with id=”vector-A”.

Localization

If your website is not in English, you may want to place your own letters. To do this, you need to vectorize your letter in any graphic editor (Adobe Illustrator or Sketch) and export it in SVG format. So basically you need to type a letter in the editor and vectorize it into a path.

After this you’ll need to:

  1. Open your letter SVG file with any text editor.
  2. Copy the contents of <path>…</path> and place it inside template’s .vector-letters container.
  3. Assign a correct markup <path id=”vector-MY-LETTER” class=”vector-letter”>…</path>
  4. In the overlay menu put the correct alias in relative data attribute <a href=”#” data-letter=”MY-LETTER“>…</a>

I also suggest you to check the official MorphSVG plugin documentation