Z overlap

SVG is rich in possibilities. You can implement exotic features with the many elements and even more numerous attributes available in the syntax, but there’s plenty you can achieve with just the basics.

Consider the following graphic.

In and of itself, the vector makes for a fitting illustration for any comforting newsletter or helpful mailing service. There are a few elements, but focusing on the center-piece you have a series of <path>s.

<!-- envelope -->
<path d="M 0 -65 L 85 -15 L 85 65 A 20 20 0 0 1 65 85 L -65 85 A 20 20 0 0 1 -85 65 L -85 -15 L 0 -65 Z" />
<!-- letter -->
<path d="M 0 -45 L 59.5 -10 L 0 20 L -59.5 -10 L 0 -45 Z" />
<!-- ...lines -->

First the envelope, then the letter and the legible lines. But really, there’s only a portion to the piece of paper. With the goal of having the letter pop out of the rounded container, you draw only the top half, a squished rhombus.

The trick is simple, but effective. You believe there is a letter, where there is none.

But what if you wanted the letter actually escaping the envelope? Well, there’s no concept of dimensions in SVG. You might have sampled the feature with 3D libraries and other utilities like Zdog, but again, in the two-dimensional world of vector graphics, you don’t have access to the z-axis.

But the mentioned libraries do provide a solution. How would you go about drawing the full letter, but show only the top half? You would position multiple shapes at different depths.

First the envelope, then the letter, then an additional shape, tracing the letter below.

Look at the shapes from the front and the illusion is restored. This time however, you have gained a full letter. This means you can entertain something you previously could not. Like having the paper slide out, visible in its entirety.

Neat, you can achieve this with a 3D library. I certainly tried with Zdog. Then again, SVG comes back in the spotlight. You might not have access to a z-axis so to speak, but promptly, you benefit from a simple trait.

In the markup, in the <svg> element, shapes are drawn in sequence, each on top of the previous one.

All you need is one more shape and the right source order.

<!-- full letter -->
<path d="M 0 -45 L 59.5 -10 L 59.5 45 A 20 20 0 0 1 39.5 65 L -39.5 65 A 20 20 0 0 1 -59.5 45 L -59.5 -10 L 0 -45 Z" />
<!-- ...lines -->
<!-- overlay -->
<path d="M -74.36474 -11 A 15 15 0 0 0 -74.5 -10 V 45 C -74.5 64.1516 -58.65151 80 -39.5 80 H 39.5 C 58.65249 80 74.5 64.1516 74.5 45 V -10 A 15 15 0 0 0 74.5 -10.33829 A 15 15 0 0 1 66.254368 3.39371 L 6.754368 33.39371 A 15 15 0 0 1 -6.753632 33.39371 L -66.253632 3.39371 A 15 15 0 0 1 -74.364932 -11 Z" />

And there you have it. Even in 2D, the illusion is restored. You decide if it’s entertaining as well.