Cassio

# Customizing Morphing Letters

The fullscreen menu contains a 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.

Menu Morphing Letters Effect

WARNING

The font of the letters can't be changed through Customizer! The set letters you see are not a custom font that can be easily changed via the theme options. These are manually vectorized letter shapes from the Playfair Display font. There is no way to generate those letters automatically on-the-fly out of a custom font.

Each of the letters represents an SVG path located in the cassio/template-parts/svg/path/letters-*.php file. These template files already contain the vectorized letter sets for the following languages:

  • Latin
  • Extended Latin
  • Cyrillic
  • Numbers 0 – 9

If you’d like to have morphing letters from a custom font, you need to vectorize each of its letters manually and place their paths according to the markup in the files:

<!-- Z -->
<path d="M120.88,18.2 L66.16,124.6 L82.8,124.6 C91.1200416,124.6 98.5066344,121.826694 104.96,116.28 C111.413366,110.733306 115.279994,101.933394 116.56,89.88 L120.24,89.88 C119.919998,93.5066848 119.76,98.1999712 119.76,103.96 C119.76,113.773382 120.13333,121.879968 120.88,128.28 C112.986627,127.959998 99.70676,127.8 81.04,127.8 C61.1999008,127.8 46.8533776,127.959998 38,128.28 L38,125.08 L92.88,18.68 L75.6,18.68 C66.8532896,18.68 59.680028,21.1866416 54.08,26.2 C48.479972,31.2133584 44.9866736,39.6399408 43.6,51.48 L39.92,51.48 C40.2400016,48.3866512 40.4,44.3333584 40.4,39.32 C40.4,32.1732976 40.0266704,24.066712 39.28,15 C46.3200352,15.3200016 58.3199152,15.48 75.28,15.48 C96.2934384,15.48 111.493286,15.3200016 120.88,15 L120.88,18.2 Z" data-vector-id="Z" class="vector-letter"></path>
<!--  -->

<!-- Example template for custom vectors  -->
<path d="..." data-vector-id="VECTOR_NAME" class="vector-letter">...</path>

# Vectorizing Custom Letters

You can vectorize your own letters in any graphic editor (Adobe Illustrator (opens new window) or Sketch (opens new window)). Here is a workflow example for Sketch:

# Step 1

Choose the Text tool and type a letter on the canvas. You will have a text layer with a letter.

# Step 2

Adjust the font options as needed and use the Convert to Outlines function on that text layer.

# Step 3

The C letter is no longer a font but a vector shape. You can export it to SVG format.

# Step 4

Here is the exported SVG code:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="92px" height="102px" viewBox="0 0 92 102" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
  <title>C</title>
  <desc>Created with Sketch.</desc>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Artboard" transform="translate(-180.000000, -111.000000)" fill="#000000" fill-rule="nonzero">
      <path id="C" d="M230.68,212.96 C248.413333,212.96 261.526667,206.006667 270.02,192.1 L270.02,192.1 L271.7,170.12 L270.58,170.12 C268.993333,184.026667 264.42,194.06 256.86,200.22 C249.86,205.913333 241.133333,208.76 230.68,208.76 C218.826667,208.48 209.283333,204.07 202.05,195.53 C194.816667,186.99 191.2,175.72 191.2,161.72 C191.2,147.72 194.863333,136.473333 202.19,127.98 C209.516667,119.486667 219.293333,115.24 231.52,115.24 C240.106667,115.24 247.526667,117.41 253.78,121.75 C260.033333,126.09 264.186667,132.273333 266.24,140.3 L266.24,140.3 L267.5,140.3 L264.7,120.56 C255.086667,114.213333 244.026667,111.04 231.52,111.04 C216.213333,111.04 203.916667,115.706667 194.63,125.04 C185.343333,134.373333 180.7,146.67 180.7,161.93 C180.7,177.19 185.343333,189.486667 194.63,198.82 C203.916667,208.153333 215.933333,212.866667 230.68,212.96 Z"></path>
    </g>
  </g>
</svg>

You need only the <path> tag contents from here.

# Step 5

Remove the id attribute from this <path> and add the extra attributes data-vector-id and class. When a menu item is hovered, the script will parse its first letter and check if a vector with the matching letter value data-vector-id exists. If it does, the morphing effect will kick in.

<path data-vector-id="C" class="vector-letter" d="M230.68,212.96 C248.413333,212.96 261.526667,206.006667 270.02,192.1 L270.02,192.1 L271.7,170.12 L270.58,170.12 C268.993333,184.026667 264.42,194.06 256.86,200.22 C249.86,205.913333 241.133333,208.76 230.68,208.76 C218.826667,208.48 209.283333,204.07 202.05,195.53 C194.816667,186.99 191.2,175.72 191.2,161.72 C191.2,147.72 194.863333,136.473333 202.19,127.98 C209.516667,119.486667 219.293333,115.24 231.52,115.24 C240.106667,115.24 247.526667,117.41 253.78,121.75 C260.033333,126.09 264.186667,132.273333 266.24,140.3 L266.24,140.3 L267.5,140.3 L264.7,120.56 C255.086667,114.213333 244.026667,111.04 231.52,111.04 C216.213333,111.04 203.916667,115.706667 194.63,125.04 C185.343333,134.373333 180.7,146.67 180.7,161.93 C180.7,177.19 185.343333,189.486667 194.63,198.82 C203.916667,208.153333 215.933333,212.866667 230.68,212.96 Z"></path>

Replace the original Playfair Display C path with the new one in the cassio/template-parts/svg/path/letters-latin.php file.

Now, when you hover over the menu item whose name starts with C, you will see your custom vector shape morphing in the menu.

← Editing Footer →