banner.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 192 72" style="enable-background:new 0 0 192 72;" xml:space="preserve">
<style type="text/css">
    .no-events {
        pointer-events: none;
    }
    .hover-box {
        fill: none;
        pointer-events: all;
    }

    .font {
        font-family:
            system-ui,
            -apple-system,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji';
    }
    .font-bold {
        font-weight: 600;
    }
    .font-small {
        font-size: 4px;
    }
    .font-large {
        font-size: 12px;
    }
    .font-brown {
        fill: #543F0B;
    }

    .hand-outer {
        fill: #D58D00;
    }
    .hand-inner {
        fill: #FFC93A;
    }
    .popup-box {
        fill: #FFC93A;
    }

    .cat-dark {
        fill: #1A1A1A;
    }
    .cat-light {
        fill: #333333;
    }
    .cat-eye {
        fill: #457D11;
    }

    #hand-popup {
        opacity: 0;
        transform-origin: 62.5px 14px;
    }
    #hand-wrapper:hover #hand-popup {
        animation: .5s ease-out popup;
        opacity: 1;
    }

    @keyframes popup {
        from {
            opacity: 0;
            transform: translateY(3px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0px) scale(1);
        }
    }

    @keyframes popup-popdown {
        0% {
            opacity: 0;
            transform: translateY(3px) scale(0.95);
        }
        10% {
            opacity: 1;
            transform: translateY(0px) scale(1);
        }
        90% {
            opacity: 1;
            transform: translateY(0px) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(3px) scale(0.95);
        }
    }

    .wave{
        animation: 2s ease-out infinite waves;
        fill: #2CD1F4;
        opacity: 0;
        transform-origin: 40px 31px;
    }

    @keyframes waves {
        from {
            opacity: 0;
            transform: scale(0.75);
        }
        75% {
            opacity: 1;
        }
        to {
            opacity: 0;
            transform: scale(1);
        }
    }

    #hand {
        animation: 1s ease infinite alternate waving;
        transform-origin: 48px 51px;
    }

    @keyframes waving {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(25deg);
        }
    }

    #cat-face {
        animation: 0.5s ease cat-face-hello;
        transform-origin: 196px 20px;
    }
    #cat:hover #cat-face {
        animation: 0.75s ease cat-face-bye;
        transform: rotate(30deg) translateX(10px) translateY(-5px);
    }

    @keyframes cat-face-hello {
        from {
            transform: rotate(10deg) translateX(10px);
        }
        to {
            transform: rotate(0deg) translateX(0px) translateY(0px);
        }
    }
    @keyframes cat-face-bye {
        from {
            transform: rotate(0deg) translateX(0px) translateY(0px);
        }
        to {
            transform: rotate(30deg) translateX(10px) translateY(-5px);
        }
    }

    #cat:hover #cat-tail {
        animation: 0.75s ease cat-tail-bye;
        transform-origin: 196px 20px;
    }

    @keyframes cat-tail-bye {
        from {
            transform: rotate(0deg) translateX(0px) translateY(0px);
        }
        50% {
            transform: rotate(35deg) translateX(10px) translateY(-5px);
        }
        to {
            transform: rotate(60deg) translateX(30px) translateY(-25px);
        }
    }

    .cat-popup {
        opacity: 0;
        transform-origin: 159px 66px;
    }
    #cat:hover #cat-popup-1 {
        animation: 2s ease-out 2s popup-popdown;
    }
    #cat:hover #cat-popup-2 {
        animation: 2s ease-out 8s popup-popdown;
    }
    #cat:hover #cat-popup-3 {
        animation: 2s ease-out 12s popup-popdown;
    }
    #cat-popup-meow {
        transform-origin: 179.688px 18px;
        opacity: 0;
    }
    #cat:hover #cat-popup-meow {
        animation: 1s ease-out 18s popup-popdown;
    }
    #cat:hover #cat-popup-4 {
        animation: 2s ease-out 20s popup-popdown;
    }
</style>
<text transform="matrix(1 0 0 1 88.9863 31.3401)">
    <tspan x="0" y="0" class="font font-large">Hi,</tspan>
    <tspan x="-13.1" y="14.4" class="font font-large">I’m </tspan>
    <tspan x="6.5" y="14.4" class="font font-large font-bold">Lior</tspan>
</text>
<g id="hand-wrapper">
    <g>
        <path class="wave" d="M58.9,33.5c0,0.3,0.2,0.5,0.5,0.5c0.3,0,0.5-0.2,0.5-0.4c0,0,0,0,0,0c0,0,0,0,0,0c0-0.7,0-1.4,0-2.1
            c0-0.2,0-0.3-0.1-0.5c0-0.2-0.1-0.4-0.1-0.6c0-0.2-0.1-0.4-0.1-0.6c0-0.1-0.1-0.3-0.1-0.4c-0.1-0.5-0.3-1.1-0.5-1.6
            c-0.1-0.1-0.1-0.3-0.2-0.4c-0.1-0.2-0.2-0.4-0.2-0.6c-0.1-0.2-0.2-0.4-0.3-0.6c-0.1-0.1-0.1-0.3-0.2-0.4c-0.3-0.6-0.7-1.2-1.2-1.8
            c0,0,0,0,0,0c0,0,0,0,0,0c-0.2-0.2-0.5-0.2-0.7-0.1c-0.2,0.2-0.3,0.5-0.1,0.7c0.1,0.2,0.3,0.4,0.4,0.5c0.1,0.2,0.2,0.3,0.3,0.5
            c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.2,0.2,0.4,0.3,0.5c0.5,1.1,0.8,2.2,1,3.5c0,0.2,0.1,0.4,0.1,0.6
            c0,0.2,0,0.4,0.1,0.6c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.6C58.9,33,58.9,33.3,58.9,33.5z"/>
        <path class="wave" d="M62.9,33.7c0,0.3,0.2,0.5,0.5,0.5c0.3,0,0.5-0.2,0.5-0.4c0,0,0,0,0-0.1c0,0,0,0,0,0c0.1-0.9,0-1.8,0-2.7
            c0-0.2,0-0.4-0.1-0.6c0-0.3-0.1-0.6-0.1-0.9c0-0.2-0.1-0.4-0.1-0.7c-0.1-0.3-0.1-0.6-0.2-0.9c-0.1-0.3-0.1-0.5-0.2-0.8
            C63,27,63,26.7,62.9,26.5c-0.1-0.3-0.2-0.6-0.3-0.9c-0.1-0.2-0.2-0.4-0.3-0.6c-0.1-0.3-0.3-0.6-0.4-0.8c-0.1-0.2-0.2-0.3-0.3-0.5
            c-0.4-0.8-0.9-1.5-1.4-2.2c0,0,0-0.1-0.1-0.1c-0.2-0.2-0.4-0.2-0.7-0.1c-0.2,0.2-0.3,0.5-0.1,0.7c0.2,0.2,0.3,0.4,0.5,0.7
            c0.1,0.2,0.3,0.4,0.4,0.7c0.5,0.9,1,1.8,1.4,2.8c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.2,0.2,0.5,0.2,0.7c0.1,0.5,0.3,1,0.4,1.5
            c0.2,1,0.3,2,0.4,3.1c0,0.3,0,0.5,0,0.8C62.9,33.2,62.9,33.5,62.9,33.7z"/>
        <path class="wave" d="M16.8,35.2c0.1,0.3,0.2,0.5,0.2,0.8c0.1,0.3,0.2,0.6,0.3,0.9c0.1,0.2,0.2,0.4,0.3,0.6
            c0.1,0.3,0.3,0.6,0.4,0.8c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.8,0.9,1.5,1.4,2.2c0,0,0,0.1,0.1,0.1c0.2,0.2,0.4,0.2,0.7,0.1
            c0.2-0.2,0.3-0.5,0.1-0.7c-0.2-0.2-0.3-0.4-0.5-0.7c-0.1-0.2-0.3-0.4-0.4-0.7c-0.5-0.9-1-1.8-1.4-2.8c-0.2-0.5-0.4-1-0.5-1.5
            c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.1-0.5-0.2-0.8c-0.2-1-0.3-2-0.4-3.1c0-0.3,0-0.5,0-0.8c0-0.3,0-0.6,0-0.8
            c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.4c0,0,0,0,0,0.1c0,0,0,0,0,0c-0.1,0.9,0,1.8,0,2.7c0,0.2,0,0.4,0.1,0.6
            c0,0.3,0.1,0.6,0.1,0.9c0,0.2,0.1,0.4,0.1,0.7c0.1,0.3,0.1,0.6,0.2,0.9C16.7,34.6,16.8,34.9,16.8,35.2z"/>
        <path class="wave" d="M20.4,33.2c0.1,0.5,0.3,1.1,0.5,1.6c0.1,0.1,0.1,0.3,0.2,0.4c0.1,0.2,0.2,0.4,0.2,0.6
            c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.1,0.1,0.3,0.2,0.4c0.3,0.6,0.7,1.2,1.2,1.8c0,0,0,0,0,0c0,0,0,0,0,0l0,0c0.2,0.2,0.5,0.2,0.7,0.1
            c0.2-0.2,0.3-0.5,0.1-0.7c-0.1-0.2-0.3-0.4-0.4-0.5c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.2-0.2-0.4-0.3-0.5
            c-0.1-0.2-0.2-0.4-0.3-0.5c-0.5-1.1-0.8-2.2-1-3.5c0-0.2-0.1-0.4-0.1-0.6c0-0.2,0-0.4-0.1-0.6s0-0.4,0-0.6c0-0.2,0-0.4,0-0.6
            c0-0.2,0-0.4,0-0.7c0-0.3-0.2-0.5-0.5-0.5c-0.3,0-0.5,0.2-0.5,0.4c0,0,0,0,0,0c0,0,0,0,0,0c0,0.7,0,1.4,0,2.1c0,0.2,0,0.3,0.1,0.5
            c0,0.2,0.1,0.4,0.1,0.6c0,0.2,0.1,0.4,0.1,0.6C20.4,32.9,20.4,33.1,20.4,33.2z"/>
    </g>
    <g id="hand">
        <path class="hand-outer" d="M30.2,42.8C30.2,42.8,30.2,42.8,30.2,42.8C30.3,42.9,30.3,42.9,30.2,42.8l6.3,1.7c1.7,0.5,3.6,0.3,5.2-0.6
            c0.1,0,0.2-0.1,0.3-0.2s0.2-0.1,0.3-0.2c0.1,0,0.1-0.1,0.2-0.1c2.1-1.5,2.9-4.4,1.8-6.8c-0.1-0.2-0.1-0.3-0.2-0.4l-4.5-7.8
            c-0.4-0.7-1.3-1-2-0.5c-0.3,0.2-0.6,0.5-0.7,0.8L36.4,28c-0.4-0.7-1.3-1-2-0.5c-0.3,0.2-0.6,0.5-0.7,0.8L33.5,28
            c-0.4-0.7-1.3-1-2-0.5s-1,1.3-0.5,2l0.2,0.3c-0.3-0.1-0.7,0-1.1,0.2c-0.7,0.4-1,1.3-0.5,2l5.1,8.9L34,40.8L33,40.5
            c-0.4-0.1-0.8-0.1-1.2,0c-0.9,0.2-1.6,0.9-1.9,1.8c0,0,0,0.1,0,0.1C29.9,42.6,30,42.8,30.2,42.8z"/>
        <path class="hand-inner" d="M30.6,42.4l3.6,1l2.4,0.7c1.6,0.4,3.3,0.3,4.8-0.5c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.3-0.2
            c2-1.4,2.8-4,1.8-6.2c-0.1-0.2-0.1-0.3-0.2-0.4l-4.5-7.7c-0.2-0.4-0.8-0.7-1.2-0.5c-0.6,0.2-0.8,0.9-0.5,1.4l2.7,4.8
            c0.1,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.3,0-0.3-0.1L36,28.3c-0.2-0.4-0.8-0.7-1.2-0.5c-0.6,0.2-0.8,0.9-0.5,1.4l3.7,6.5
            c0.1,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.3,0-0.3-0.1l-4.5-7.7c-0.3-0.4-0.8-0.7-1.2-0.5c-0.6,0.2-0.8,0.9-0.5,1.4l4.5,7.8
            c0.1,0.1,0,0.3-0.1,0.3c-0.1,0.1-0.3,0-0.3-0.1l-3.7-6.4c-0.2-0.4-0.8-0.7-1.2-0.5c-0.6,0.2-0.8,0.9-0.5,1.4l5.2,9.1l1.3-0.7
            c0.6-0.4,1.4-0.3,2,0c0.1,0.1,0.2,0.2,0.1,0.3c-0.1,0.1-0.2,0.2-0.3,0.1c-0.5-0.3-1-0.3-1.5,0l-1.4,0.8c-0.2,0.1-0.4,0.1-0.6,0.1
            L32.9,41c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0c-0.9-0.1-1.7,0.4-2.1,1.2C30.4,42.2,30.5,42.4,30.6,42.4z"/>
    </g>
    <path class="hover-box" d="M54,53.5h-28c-8.3,0-15-6.7-15-15v-5c0-8.3,6.7-15,15-15h28c8.3,0,15,6.7,15,15v5C68.9,46.8,62.2,53.5,54,53.5z"/>
    <g id="hand-popup" class="no-events">
        <path class="popup-box" d="M91,11v4c0,1.1-0.9,2-2,2H40.5c-0.5,0-1,0.2-1.4,0.6l-1.9,1.9c-0.2,0.2-0.5,0.2-0.7,0l-1.9-1.9
            c-0.4-0.4-0.6-0.9-0.6-1.4V11c0-1.1,0.9-2,2-2h53C90.1,9,91,9.9,91,11z"/>
        <text transform="matrix(1 0 0 1 37.4219 14.3779)" class="font font-small font-brown">Yeah it’s a left handed wave!</text>
    </g>
</g>
<g id="cat">
    <g id="cat-face">
            <path class="cat-dark" d="M196.2,14.5c0.6,0.8,0.9,2.4,0.6,4l-0.6,3.3c-0.3,1.7-1.1,3-1.9,3.6c-0.4,0.3-1,0.3-1.5,0.1l-0.1-0.1l0,0
                l-5.4-2.2l-0.4-0.2c0,0,0,0,0,0l0,0c-0.4,0-0.8,0-1.3-0.1c-1.5-0.3-2.6-0.8-2.5-1.4s1-1.2,2.5-1.4c0,0,0,0,0,0
                c0-0.6,0-1.2,0.1-1.8c0.1-0.6,0.3-1.2,0.5-1.8c0,0,0,0,0,0c-1.3-0.7-1.9-1.5-1.8-2.2c0.1-0.7,1.3-0.8,2.8-0.5
                c0.5,0.1,0.9,0.2,1.2,0.3l0,0c0,0,0,0,0,0l0.5,0l5.8-0.2l0,0l0.1,0C195.3,13.9,195.8,14.1,196.2,14.5z"/>
            <path class="cat-light" d="M185.5,20.6c0.1,0.7,0.2,1.3,0.4,1.8c0,0,0,0,0,0c0.1,0.2,0.2,0.3,0.3,0.4c-0.2,0-0.5,0-0.7-0.1
                c-1.3-0.2-2.2-0.7-2.2-1.1C183.4,21.3,184.2,20.8,185.5,20.6z"/>
            <path class="cat-light" d="M187,14.1c0.2,0,0.5,0.1,0.7,0.2c-0.2,0.1-0.3,0.2-0.4,0.3c0,0,0,0,0,0c-0.4,0.4-0.7,0.9-1,1.5
                c-1.1-0.6-1.7-1.4-1.7-1.7C184.7,14.1,185.8,13.9,187,14.1z"/>
            <ellipse transform="matrix(0.1736 -0.9848 0.9848 0.1736 135.8201 203.8499)" class="cat-eye" cx="189.4" cy="21" rx="0.7" ry="0.8"/>
            <ellipse transform="matrix(0.9962 -8.715574e-02 8.715574e-02 0.9962 -1.0851 16.5729)" class="cat-dark" cx="189.2" cy="20.7" rx="0.3" ry="0.2"/>
            <ellipse transform="matrix(0.1736 -0.9848 0.9848 0.1736 140.2735 201.2787)" class="cat-eye" cx="190.1" cy="17.1" rx="0.7" ry="0.8"/>
            <ellipse transform="matrix(0.9962 -8.715574e-02 8.715574e-02 0.9962 -0.7391 16.6184)" class="cat-dark" cx="189.9" cy="16.8" rx="0.3" ry="0.2"/>
    </g>
    <g id="cat-tail">
        <path class="cat-dark" d="M197.8,47.8c0.4,0.4,0.4,1,0,1.4c-3.1,3.1-3.1,8.2,0,11.3c0.4,0.4,0.4,1,0,1.4s-1,0.4-1.4,0
            c-3.9-3.9-3.9-10.2,0-14.1C196.8,47.4,197.4,47.4,197.8,47.8z"/>
        <path class="cat-dark" d="M203.4,42.2c-0.4-0.4-0.4-1,0-1.4c3.1-3.1,3.1-8.2,0-11.3c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0
            c3.9,3.9,3.9,10.2,0,14.1C204.5,42.6,203.8,42.6,203.4,42.2z"/>
        <path class="cat-dark" d="M204.9,40.8c0.4,0.4,0.4,1,0,1.4l-7.1,7.1c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l7.1-7.1
            C203.8,40.4,204.5,40.4,204.9,40.8z"/>
    </g>
    <path class="hover-box" d="M192,0c0,0-25.8,0-35,0c0,34.7-30,34.7-30,72c13.2,0,65,0,65,0V0z"/>
    <g id="cat-popup-1" class="cat-popup no-events">
        <path class="popup-box" d="M186,70h-54c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h54c1.1,0,2,0.9,2,2v4C188,69.1,187.1,70,186,70z"/>
        <text transform="matrix(1 0 0 1 133.96 67.3779)" class="font font-small font-brown">Why did you startle my cat?!</text>
    </g>
    <g id="cat-popup-2" class="cat-popup no-events">
        <path class="popup-box" d="M184,70h-50c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h50c1.1,0,2,0.9,2,2v4C186,69.1,185.1,70,184,70z"/>
        <text transform="matrix(1 0 0 1 135.4639 67.3779)" class="font font-small font-brown">You can leave it alone now</text>
    </g>
    <g id="cat-popup-3" class="cat-popup no-events">
        <path class="popup-box" d="M171,70h-24c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h24c1.1,0,2,0.9,2,2v4C173,69.1,172.1,70,171,70z"/>
        <text transform="matrix(1 0 0 1 148.3926 67.3779)" class="font font-small font-brown">Just let it be</text>
    </g>
    <g id="cat-popup-4" class="cat-popup no-events">
        <path class="popup-box" d="M187,70h-56c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h56c1.1,0,2,0.9,2,2v4C189,69.1,188.1,70,187,70z"/>
        <text transform="matrix(1 0 0 1 132.3691 67.3779)" class="font font-small font-brown">Do you enjoy bullying my cat?</text>
    </g>
    <g id="cat-popup-meow" class="no-events">
        <path class="popup-box" d="M189.9,19.5l-1.9,1.9c-0.4,0.4-0.9,0.6-1.4,0.6h-15.2c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h14
            c1.1,0,2,0.9,2,2v0c0,0.2,0.1,0.4,0.2,0.6l2.2,2.2C190,19,190,19.3,189.9,19.5z"/>
        <text transform="matrix(1 0 0 1 172.918 19.3779)" class="font font-small font-brown">Meow</text>
    </g>
</g>
</svg>