Closing envelope with a letter inside SVG-CSS snippet
A small envelope into which a letter slides and then closes.
The SVG can be used, among other things, to visually highlight links to contact details. The CSS information is embedded in the SVG, but can also be loaded externally - but this can cause display problems in some CMS.
The animation plays 10 times.
See how it works
Get the code
SVG
<?xml version="1.0" encoding="UTF-8"?>
<svg class="cd" xmlns="http://www.w3.org/2000/svg" width="474.1717" height="393.9304" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 474.1717 393.9304">
<defs>
<style>
.space {fill: transparent;}
.frontlight {fill: url(#gradient_2);}
.light {fill: url(#gradient_1);}
.letter {fill: #e4f8ab;transform: translateY(-5%);}
.lines {fill: #8cc63f;}
.dark {fill: #079876;}
.shadow {fill: #0089c0;}
.foldlight {transform:translateY(-1px);}
.foldlight .fold {transform: rotateX(90deg);}
#envelope {transform:rotate(0deg);transform-origin:center center;animation: wobble 16s 10 linear;animation-fill-mode: forwards;}
#envelope .folddark .dark {animation: folddark 16s 10 linear;animation-fill-mode: forwards;}
#envelope .foldlight .fold {transform:rotateX(90deg) ;animation: foldlight 16s 10 linear;animation-fill-mode: forwards;}
#envelope .fold,
#envelope .dark {
transform-origin: center 100%;will-change: transform; transform: translateZ(0);perspective: 580px;transform-box: fill-box;transform-style: preserve-3d;
animation-fill-mode: forwards;}
#envelope .letter {
animation: drop 16s 10 cubic-bezier(.86,0,.62,1.2);animation-fill-mode: forwards;will-change: transform; transform: translateZ(0);z-index:0;position:absolute;
position:center bottom;}
@keyframes wobble{
0%{transform: rotate(0deg);}
3%{transform: rotate(0deg);}
5%{transform: rotate(-1deg);}
7%{transform: rotate(2deg);}
9%{transform: rotate(0);}
100%{transform: rotate(0deg);}
}
@keyframes drop{
0%{transform: translateY(-5%);}
15%{transform: translateY(-5%);}
20%{transform: translateY(19%);}
95%{transform: translateY(19%);}
96.5%{transform: translateY(-5%);}
98%{transform: translateY(-4%);}
100%{transform: translateY(-5%);}
}
@keyframes folddark{
0%{transform:rotateX(0deg);}
25%{transform:rotateX(0deg);}
28%{transform:rotateX(90deg);}
90%{transform:rotateX(90deg);}
91%{transform:rotateX(0deg);}
100%{transform:rotateX(0deg);}
}
@keyframes foldlight{
0%{transform:rotateX(90deg);}
28%{transform:rotateX(90deg);}
29%{transform:rotateX(180deg);}
89%{transform:rotateX(180deg);}
90%{transform:rotateX(90deg);}
100%{transform:rotateX(90deg);}
}
</style>
<linearGradient id="gradient_4" data-name="gradient 1" x1="75.0394" y1="268.9985" x2="479.4641" y2="424.2282" gradientTransform="translate(0 453.475) scale(1 -1)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#81c4de"/>
<stop offset=".1366" stop-color="#77c0dd"/>
<stop offset=".3638" stop-color="#5eb5db"/>
<stop offset=".6517" stop-color="#35a5d8"/>
<stop offset=".7944" stop-color="#1e9cd7"/>
</linearGradient>
<linearGradient id="gradient_2" data-name="gradient 2" x1="38.3751" y1="152.9605" x2="418.2804" y2="361.1133" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#81c4de"/>
<stop offset=".172" stop-color="#77c0dd"/>
<stop offset=".4579" stop-color="#5eb5db"/>
<stop offset=".8203" stop-color="#35a5d8"/>
<stop offset="1" stop-color="#1e9cd7"/>
</linearGradient>
</defs>
<g id="envelope" >
<rect class="space" width="474.1717" height="393.9304"/>
<g class="folddark">
<path class="dark" d="M223.4026,19.6785L26.0581,128.218c-3.4927,1.921-5.6626,5.591-5.6626,9.577v9.1613h433.1924v-9.1613c0-3.9861-2.17-7.6561-5.6626-9.577L250.5807,19.6785c-8.4617-4.6539-18.7165-4.6539-27.1782,0Z"/>
</g>
<g class="back">
<rect class="dark" x="20.3955" y="146.4358" width="433.1924" height="227.5061"/>
</g>
<g class="letter">
<rect class="paper" x="40.9706" y="71.0758" width="390.9036" height="221.9661"/>
<g>
<rect class="lines" x="80.616" y="111.9255" width="143.5163" height="4.9641"/>
<rect class="lines" x="80.616" y="141.8593" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="162.0059" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="182.1525" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="202.2991" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="222.4457" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="242.5923" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="262.7389" width="308.6174" height="3.5345"/>
<rect class="lines" x="80.616" y="282.8855" width="308.6174" height="3.5345"/>
</g>
</g>
<g class="front">
<path class="frontlight" d="M439.228,149.5733c-1.5085,0-2.9913.3909-4.3037,1.1346l-180.6148,102.3484-7.6881-3.9047c-4.7509-2.613-14.5086-2.613-19.2595,0l-7.6881,3.9047L39.0591,150.7079c-1.3125-.7437-2.7953-1.1347-4.3039-1.1347h-14.3597v224.4213h433.1924v-224.4213h-14.3598Z"/>
<path class="shadow" d="M217.4924,251.8765s-139.9882,74.6805-185.2848,99.0596c-6.3117,3.397-11.8122,10.9549-11.8122,10.9549v1.4526s3.9672-6.8021,12.6739-11.6205c42.1853-23.346,168.264-88.5117,186.6223-98.6532-.121-.0758-2.0897-1.1061-2.1992-1.1935Z"/>
<path class="shadow" d="M256.9471,251.5906c-.1818.1423-2.4042,1.3531-2.6039,1.4621,14.0867,8.0293,146.5596,73.3682,190.5945,100.3021,4.107,2.512,8.6501,9.7508,8.6501,9.7508v-.0649s-1.8267-6.0746-9.0574-10.624c-34.1981-21.5166-187.5833-100.8261-187.5833-100.8261Z"/>
</g>
<g class="foldlight">
<g class="fold">
<path class="light" d="M223.4968,19.82L26.1523,128.3595c-3.4927,1.921-5.6626,5.591-5.6626,9.577v9.1613h433.1924v-9.1613c0-3.9861-2.17-7.6561-5.6626-9.577L250.6749,19.82c-8.4617-4.6539-18.7165-4.6539-27.1782,0Z"/>
<path class="shadow" d="M453.1144,134.4627c-.9265-2.3018-2.8485-4.1481-5.0951-5.3838L250.675,20.5395c-4.2308-2.3269-8.91-3.4905-13.5891-3.4905s-9.3583,1.1636-13.5891,3.4905L26.1523,129.0789c-2.2467,1.2357-4.1368,3.0889-5.0634,5.3907h0c.9739-2.6713,2.4371-4.4704,5.0085-5.8845L223.0148,19.6633c4.2991-2.3644,9.1647-3.6143,14.071-3.6143s9.772,1.2499,14.071,3.6143l197.4352,109.0438c1.9117,1.3156,3.569,3.105,4.5429,5.7763l-.0206-.0206Z"/>
</g></g>
</g>
</svg>
