<div class="bg">
<div class="center">
<svg version="1.1" viewBox="0 0 1600 1066" enable-background="new 0 0 1600 1066" xml:space="preserve" class="manologo">
<g id="logo-mano">
<path class="mano-letter" id="M" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M264.86,604.947c-6.816,1.777-12.457,4.192-18.227,4.552
c-11.111,0.69-22.326,0.727-33.434,0.015c-5.609-0.359-10.996-3.53-16.637-4.283c-2.889-0.386-6.125,1.728-9.188,2.757
c-1.588,0.533-3.139,1.66-4.713,1.674c-13.652,0.116-27.324,0.469-40.953-0.126c-9.471-0.412-18.875-2.808-23.658-12.193
c-2.406-4.721-4.182-10.358-4.221-15.598c-0.328-42.642-0.594-85.293,0.012-127.93c0.279-19.765,9.055-36.253,27.172-45.067
c8.949-4.353,19.832-6.183,29.916-6.469c29.189-0.829,57.709-1.171,86.934,0.026c21.936,0.898,43.656,5.352,60.307,21.436
c6.688,6.46,12.727,14.304,16.762,22.632c5.936,12.257,9.059,25.682,9.066,39.555c0.014,31.484,0.115,62.969-0.049,94.451
c-0.053,10.235-2.805,19.638-12.574,24.938c-3.699,2.007-8.109,3.76-12.205,3.785c-15.246,0.096-30.506-0.385-45.74-1.11
C270.169,607.835,266.999,605.745,264.86,604.947z M178.917,583.668c0-2.234,0-4.188,0-6.141c0-31.325-0.006-62.651,0.01-93.978
c0.002-2.497,0.01-5.007,0.248-7.488c0.531-5.549,2.4-7.327,7.963-7.443c5.662-0.118,11.352,0.278,16.988-0.129
c4.914-0.354,6.512,0.961,6.471,6.242c-0.266,34.323-0.137,68.649-0.137,102.975c0,1.936,0,3.872,0,5.87
c12.885,0,25.092,0,37.576,0c0-2.386,0-4.376,0-6.366c0-34.326,0.068-68.651-0.09-102.976c-0.02-4.199,0.795-5.806,5.414-5.765
c16.77,0.151,24.037,6.505,25.713,23.227c0.133,1.324,0.309,2.652,0.314,3.979c0.1,27.323,0.18,54.647,0.264,81.971
c0.006,1.945,0,3.891,0,5.961c13.133,0,25.682,0,38.252,0c0.137-1.009,0.305-1.665,0.305-2.32
c0.018-32.992,0.311-65.988-0.115-98.975c-0.17-13.237-4.189-25.698-13.197-35.863c-12.318-13.899-28.99-18.113-46.465-18.457
c-30.305-0.597-60.631-0.217-90.947-0.031c-17.738,0.109-28.264,10.874-28.279,28.531c-0.033,40.657-0.014,81.314,0,121.971
c0,1.758,0.15,3.516,0.229,5.205C152.802,583.668,165.575,583.668,178.917,583.668z"/>
<path class="mano-letter" id="A" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M468.418,407.968c16.664,0.002,33.342-0.428,49.988,0.114
c19.258,0.627,37.158,5.972,51.902,19.016c8.08,7.147,14.184,16.039,17.646,26.264c3.84,11.34,6.697,22.962,6.625,35.142
c-0.137,23.162,0.246,46.331-0.148,69.487c-0.234,13.771-2.799,27.031-11.822,38.354c-9.369,11.761-22.01,16.7-36.283,18.602
c-3.457,0.461-6.971,0.691-10.461,0.697c-31.828,0.049-63.658,0.256-95.482-0.085c-14.25-0.152-28.135-2.385-39.982-11.629
c-9.803-7.65-16.549-17.304-19.945-29.139c-6.32-22.032-7.514-44.3-0.918-66.462c1.955-6.577,5.416-12.745,8.568-18.906
c1.113-2.175,1.555-3.552,0.727-6.162c-1.588-5.001-2.535-10.363-2.734-15.613c-0.396-10.483-0.361-21-0.031-31.488
c0.307-9.697,2.979-18.853,12.275-23.552c5.16-2.606,11.32-4.253,17.092-4.437C433.078,407.61,450.754,407.967,468.418,407.968z
M510.551,491.685c-1.9,0-3.861-0.005-5.822,0.001c-23.49,0.059-46.984-0.152-70.467,0.271
c-17.219,0.311-28.018,9.617-31.361,26.503c-2.912,14.703-2.703,29.518,0.49,44.163c2.008,9.207,6.447,17.116,14.594,22.456
c6.596,4.324,14.143,4.771,21.637,4.799c32.488,0.114,64.975,0.062,97.463,0.024c2.488-0.003,4.992-0.223,7.459-0.566
c14.85-2.067,23.244-9.978,23.65-24.888c0.727-26.795,1.449-53.673,0.16-80.42c-1.643-34.065-20.121-50.269-54.221-50.269
c-31.988-0.001-63.977,0-95.965,0c-1.969,0-3.939,0-6.025,0c0,13.19,0,25.892,0,38.903c2.6,0,4.754-0.004,6.908,0.001
c25.488,0.06,50.98-0.121,76.463,0.292C506.613,473.135,511.775,479.952,510.551,491.685z"/>
<path class="mano-letter" id="dot" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M510.074,530.891
c0.363,0.681,0.494,0.817,0.506,0.965c1.313,15.828-0.779,18.116-16.615,18.107c-8.484-0.005-16.977,0.154-25.453-0.137
c-7.348-0.252-10.1-3.632-9.631-10.916c0.314-4.901,2.893-7.893,7.818-7.955C481.143,530.774,495.592,530.891,510.074,530.891z"/>
<path class="mano-letter" id="icono" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M626.62,471.207c2.1-5.169,3.508-10.773,6.432-15.423
c8.396-13.351,21.895-18.422,36.691-20.406c5.682-0.762,11.551-0.124,17.621-0.124c0.063-0.536,0.27-1.483,0.27-2.431
c0.004-26.498,0.16-52.998-0.08-79.494c-0.203-22.636,12.191-40.099,33.889-46.807c18.545-5.733,35.902-3.323,51.617,8.235
c12.232,8.996,17.764,21.61,18.471,36.546c0.063,1.33,0.049,2.665,0.129,3.994c0.018,0.303,0.279,0.59,0.43,0.884
c20.898-3.225,38.475,2.51,52.211,19.645c10.953-3.409,22.025-4.855,33.609-1.407c11.299,3.363,20.52,9.179,26.748,17.526
c9.572-0.979,18.512-3.227,27.215-2.526c24.268,1.95,39.572,16.417,44.346,40.251c0.387,1.935,0.322,3.976,0.326,5.968
c0.074,42.663,0.291,85.327,0.113,127.99c-0.078,18.621-9.828,32.408-23.936,43.471c-17.387,13.635-37.662,21.023-58.717,26.617
c-37.02,9.836-74.748,13.383-112.871,11.049c-39.088-2.395-77.482-8.744-112.885-26.791c-12.51-6.377-24.332-14.246-31.729-26.652
c-3.68-6.17-5.715-13.32-8.465-20.039c-0.545-1.33-0.961-2.715-1.436-4.074C626.62,535.207,626.62,503.207,626.62,471.207z
M952.085,496.916c0-19.663,0.002-39.326-0.002-58.99c-0.002-15.199-8.725-24.24-23.912-24.801
c-14.988-0.553-23.836,7.12-25.73,22.096c-0.184,1.451-1.129,3.376-2.307,4.035c-5.822,3.262-11.277-0.143-11.324-6.849
c-0.025-3.666-0.004-7.332-0.004-10.998c0-14.542-6.441-22.136-20.777-24.497c-15.391-2.534-26.537,4.928-29.609,19.956
c-0.629,3.07-2.555,4.593-5.25,3.935c-2.055-0.502-4.316-2.017-5.477-3.754c-0.961-1.438-0.521-3.86-0.57-5.849
c-0.125-4.983,0.465-10.079-0.385-14.928c-1.791-10.212-11.854-17.013-24.039-16.997c-11.799,0.016-20.27,6.294-23.654,17.53
c-1.041,3.457-3.238,5.448-6.977,5.061c-3.98-0.413-5.059-3.055-5.039-6.705c0.074-14.331-0.086-28.663,0.066-42.992
c0.113-10.68-5.197-17.713-14.535-21.774c-8.256-3.589-16.881-3.658-25.357-0.513c-9.891,3.669-15.6,11.754-15.582,21.515
c0.059,35.16,0.09,70.321,0.131,105.481c0.004,4.999-0.004,9.998-0.014,14.997c-0.006,3.203-1.711,5.042-4.799,5.287
c-2.857,0.226-4.83-0.734-6.074-3.886c-1.223-3.096-3.098-6.446-5.662-8.409c-10.406-7.961-27.369-7.731-37.998-0.075
c-3.928,2.829-5.99,6.553-5.988,11.418c0.006,28.329,0.01,56.659-0.004,84.988c-0.004,8.248,2.99,15.154,8.703,21.113
c8.98,9.365,20.109,15.297,31.869,20.104c26.639,10.889,54.705,15.518,83.182,17.623c28.639,2.119,57.236,1.021,85.604-3.717
c21.916-3.658,43.371-8.957,63.277-19.275c18.701-9.695,31.268-22.293,28.625-46.18
C950.505,533.085,952.085,514.914,952.085,496.916z"/>
<path class="mano-letter" id="N" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M1131.206,494.218c-4.762,0-8.711,0-13.301,0
c0,2.129,0,4.066,0,6.006c0,25.99,0.182,51.982-0.086,77.969c-0.109,10.736-2.039,21.363-12.713,26.955
c-4.838,2.537-10.662,4.229-16.098,4.398c-17.311,0.541-34.656,0.516-51.971,0.049c-9.859-0.268-19.559-2.693-24.549-12.418
c-2.414-4.705-4.061-10.385-4.1-15.637c-0.318-42.48-0.559-84.971,0.002-127.445c0.264-19.998,9.084-36.557,27.418-45.436
c8.814-4.268,19.527-6.059,29.451-6.326c29.633-0.797,59.334-1.135,88.947-0.004c21.951,0.84,43.287,5.684,60.541,21.121
c7.691,6.879,13.938,14.938,17.629,24.494c4.863,12.584,8.283,25.578,8.229,39.311c-0.123,31.152,0.09,62.309-0.102,93.461
c-0.061,10.043-2.725,19.533-12.441,24.451c-5.02,2.541-11,4.186-16.607,4.369c-16.975,0.561-33.988,0.529-50.971,0.094
c-10.035-0.258-19.988-2.541-25.002-12.502c-2.516-4.996-4.006-11.039-4.092-16.637c-0.412-26.816-0.186-53.643-0.186-80.467
C1131.206,498.226,1131.206,496.427,1131.206,494.218z M1214.425,583.718c0.146-1.059,0.352-1.859,0.352-2.658
c0.018-32.994,0.443-65.996-0.123-98.98c-0.422-24.631-13.416-42.787-35.006-49.516c-8.625-2.689-17.877-3.936-26.93-4.543
c-11.109-0.744-22.309-0.121-33.471-0.107c-19.16,0.021-38.332-0.357-57.48,0.15c-18.482,0.49-27.998,10.854-28.004,29.248
c-0.014,40.158-0.004,80.318-0.004,120.477c0,1.947,0,3.895,0,5.873c19.574,0,38.475,0,57.723,0c0-2.152,0-3.963,0-5.773
c0-31.328-0.004-62.656,0.01-93.982c0-2.498,0.008-5.006,0.223-7.49c0.512-5.896,2.338-7.658,8.168-7.773
c9.488-0.188,18.99-0.035,28.469-0.434c22.305-0.934,28.559,11.121,28.609,27.258c0.088,27.492,0.172,54.982,0.256,82.475
c0.006,1.916,0,3.832,0,5.777C1176.757,583.718,1195.517,583.718,1214.425,583.718z"/>
<path class="mano-letter" id="O" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M1388.921,611.483
c-20.045,0.551-38.977-0.873-57.756-5.666c-28.375-7.242-47.322-24.348-56.166-52.045c-10.438-32.693-10.268-65.635,1.057-98.074
c8.994-25.764,27.281-42.195,53.857-48.635c39.703-9.621,79.604-9.703,119.096,0.684c26.996,7.1,44.563,25.189,52.689,51.848
c9.578,31.414,9.623,63.029-0.398,94.357c-8.689,27.162-27.205,44.178-54.824,51.578
C1427.294,610.669,1407.827,612.226,1388.921,611.483z M1388.636,587.261c15.064-1.557,30.4-2.318,45.428-4.887
c23.596-4.029,38.85-18.258,44.762-41.549c6.049-23.824,6.002-47.797-0.705-71.539c-5.867-20.768-19.695-33.629-40.547-38.529
c-8.379-1.969-17.047-3.158-25.643-3.66c-22.455-1.309-44.975-1.824-67.23,2.242c-27.547,5.033-43.039,20.129-48.551,47.541
c-3.906,19.434-3.881,39.08-0.004,58.547c5.188,26.039,20.441,42.748,47.041,47.145
C1358.067,585.032,1373.239,585.731,1388.636,587.261z"/>
<path class="mano-letter" id="dot" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M1355.3,503.841
c0.791-4.646,1.738-11.527,3.18-18.305c1.422-6.68,5.992-11.299,11.984-13.832c12-5.074,24.408-5.082,36.393-0.068
c8.105,3.389,13.014,10.225,13.525,18.961c0.611,10.402,0.871,20.961-0.232,31.289c-1.266,11.86-10.283,20.448-22.23,21.499
c-7.623,0.672-15.609,0.154-23.105-1.404c-11.072-2.303-16.426-10.62-18.039-21.383
C1356.062,515.843,1355.909,511.007,1355.3,503.841z M1395.675,506.144c-0.26-13.961,1.732-11.643-9.557-12.033
c-3.361-0.115-4.398,1.412-4.363,4.443c0.053,4.479,0.201,8.973-0.105,13.434c-0.34,4.971,1.525,6.766,6.58,6.525
c7.324-0.346,7.342-0.057,7.441-7.391C1395.692,509.462,1395.673,507.802,1395.675,506.144z"/>
</g>
</svg>
</div>
</div>
.bg {
background: #000;
}
svg {
width: 30%;
position: relative;
}
.mano-letter {
-webkit-animation: pop 3s ease alternate infinite;
animation: pop 3s ease alternate infinite;
}
.mano-letter:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.mano-letter:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.mano-letter:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.mano-letter:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes pop {
90% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes pop {
90% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
#dot {
-webkit-transform: translateY(150px);
transform: translateY(150px);
-webkit-animation: popup 5s 6.5s ease infinite;
animation: popup 5s 6.5s ease infinite;
}
@-webkit-keyframes popup {
0% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
34% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
37% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
@keyframes popup {
0% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
34% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
37% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
100% {
-webkit-transform: translateY(150px);
transform: translateY(150px);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.