Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;fill:#A67F77;stroke:#4E328A;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;}
    .st1{fill:#A67F77;stroke:#4E328A;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;}
    .st2{fill:#959595;}
    .st3{fill:#D2B2A2;}
    .st4{fill:none;stroke:#4E328A;stroke-width:4;stroke-linecap:round;stroke-miterlimit:3;}
    .st5{fill:none;stroke:#4E328A;stroke-width:6;stroke-miterlimit:10;}
    .st6{fill:#FF9300;stroke:#4E328A;stroke-width:5;stroke-miterlimit:10;}
    .st7{fill:#A67F77;stroke:#4E328A;stroke-width:6;stroke-miterlimit:3;}
    .st8{fill:#4E328A;}
    .st9{fill:#FFE23F;stroke:#4E328A;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;}
    .st10{fill:#FFFFFF;}
    .st11{opacity:0;fill:#B69994;stroke:#645296;stroke-width:6;stroke-miterlimit:10;}
    .st12{display:none;fill:none;stroke:#2AA837;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3;}
    @keyframes eyes_roll{
        0%{
            transform: translateX(0px);
        }
        5%{
            transform: translateY(-8px);
        }
        15%{
            transform: translateY(-8px);
        }
        20%{
            transform: translateX(16px);
        }
        40%{
            transform: translateX(16px);
        }
        45%{
            transform: translateX(-16px);
        }
        65%{
            transform: translateX(-16px);
        }
        70%{
            transform: translateY(16px);
        }
        75%{
            transform: translateY(16px);
        }
        80%{
            transform: translateX(0px);
        }
        100%{
            transform: translateX(0px);
        }
    }
    @keyframes eyebrowl_l_roll{
        0%{
            transform: translateX(0px) rotate(0);
        }
        5%{
            transform: translateY(-4px) rotate(5deg);
        }
        15%{
            transform: translateY(-4px) rotate(5deg);
        }
        20%{
            transform: translateX(0px) rotate(-5deg);
        }
        40%{
            transform: translateX(0px) rotate(-5deg);
        }
        45%{
            transform: translateX(0) rotate(5deg);
        }
        65%{
            transform: translateX(0) rotate(5deg);
        }
        70%{
            transform: translateY(0) rotate(-10deg);
        }
        75%{
            transform: translateY(0) rotate(-10deg);
        }
        80%{
            transform: translateX(0px) rotate(0);
        }
        100%{
            transform: translateX(0px) rotate(0);
        }
    }
    @keyframes eyebrowl_r_roll{
        0%{
            transform: translateX(0px) rotate(0);
        }
        5%{
            transform: translateY(-4px) rotate(-5deg);
        }
        15%{
            transform: translateY(-4px) rotate(-5deg);
        }
        20%{
            transform: translateX(0px) rotate(-5deg);
        }
        40%{
            transform: translateX(0px) rotate(-5deg);
        }
        45%{
            transform: translateX(0) rotate(5deg);
        }
        65%{
            transform: translateX(0) rotate(5deg);
        }
        70%{
            transform: translateY(0) rotate(10deg);
        }
        75%{
            transform: translateY(0) rotate(10deg);
        }
        80%{
            transform: translateX(0px) rotate(0);
        }
        100%{
            transform: translateX(0px) rotate(0);
        }
    }
    @keyframes land {
        0% {
            transform: translateY(-1000px);
        }
        
        70% {
            transform: translateY(-30px);
        }
        
        90% {
            transform: translateY(-50px);
        }
        95% {
            transform: translateY(0) scale(1.2, 0.8);
        }
        
        100% {
            transform: scale(1, 1);
        }
    }
    @keyframes land-feet {
        from {
            transform: translateY(0px);
        }
        
        60%, 95% {
            transform: translateY(15px);
        }
        
        98% {
            transform: translateY(-10px);
        }
        
        to {
            transform: translateY(0);
        }
    }
    #pupil-L{
        animation: eyes_roll 8s 6s ease both infinite;
    }
    #owl{
        animation: land 5s 0s ease both;
    }
    #eyebrow-L-wrapper{
        animation: eyebrowl_l_roll 8s 6s ease both infinite;
        transform-origin: -10px -20px;
    }
    #eyebrow-R-wrapper{
        animation: eyebrowl_r_roll 8s 6s ease both infinite;
        transform-origin: 10px -20px;
    }
    #foot-L{
        animation: land-feet 5s 0s ease both;
    }
    #foot-R{
        animation: land-feet 5s 0.05s ease both;
    }
</style>
<defs>
    <path id="motionpath" class="st12" d="M-0.6-0.3C1.6-4,7.2-11.1,14.6-11.5c7.4-0.4,12.9,5.3,13.3,11C28.3,5.1,22.9,9,15.1,9
    C11.4,9,4.5,4.3-0.6-0.3c-6-5.4-10.9-10.1-16.6-9.9c-10.6,0.4-12.7,5.9-12.9,9.9c-0.2,3.9,5.3,10.7,12.5,10.7
    C-10.1,10.5-3,3.8-0.6-0.3z"/>
</defs>
<g id="owl-wrapper" transform="translate(300, 300)">
    <g id="owl">
        <g id="body">
            <g id="wing-R-wrapper" transform="translate(70, -80)">
                <!-- <path id="wing-R-mid-back" class="st0" d="M-5.4-21.8C25.5-7.2,31-0.4,60.5,5c48,8.8,70.2-16.2,86-15.5c3.3,0.2,7,5.1,1.1,16.8
                    c-5,9.8-27.1,17.8-43.5,21.8c9.9,6.4,45.1-0.1,33.9,14.4c-16.2,20.8-39,1.3-50.8-6.6c7.6,9.9,19.6,20.9,9.6,28.6
                    C80.1,77.4,54.7,48,56.2,33.2C52.5,44.9,63,57.5,54,61c-14.9,5.8-20.4-9.3-16.8-27.2c0,0,1.3,10.6-9.8,11.5S17.2,29,17.2,29
                    s-5,4.5-10.1,3c-6.9-2-4.6-11.5-4.6-11.5S-2,27.3-8.3,27.4c-7.9,0.1-8.7-3-9.7-9.6C-19.5,7.8-16.5-27-5.4-21.8z"/>
                <path id="wing-R-open" class="st0" d="M0.1-14.2c4.5-8.3,97.6-17.7,127.5-20.1c32.6-2.6,81.4,24.6,102,25.1
                    c25.5,0.6,16,16,8.6,18.9c-13.2,5.2-44,0.7-62-8.4c14.2,13.3,55.9,19.6,47.9,29.9c-13.3,17.1-53.9-6.4-70.8-19.2
                    c11.2,12.9,49.1,25.6,39.8,35.6c-13.8,14.8-57.9-14.7-72.6-22.1c9.2,7.9,23.5,17.3,15.7,22.7c-10.1,7.2-34.6-4-48.1-21.6
                    c0,0,12.5,13,1.4,13.9S61.4,25.9,61.4,25.9s0.4,11.4-4.4,10.8c-7.1-0.9-20-8.6-20-8.6s0.2,6.4-6.1,6.5C23,34.7-6.4,25.2-8.7,19
                    C-9.9,15.8-3.6-7.3,0.1-14.2z"/>
                <path id="wing-R-mid" class="st0" d="M-5.4-21.8c31.9,2.3,85.5-12.3,109.9,5.1c32,22.8,9.3,49,26,80.8
                    c1.5,2.9-4.3,14.2-15.5,7.5c-16.5-9.9-12.2-26.2-15.5-43.2c0.1,14.5,11.3,52.8-5.1,44.8C70.6,61.6,76.2,40,79.8,27.5
                    C74.2,39.4,77.7,70,68.1,65c-18.7-9.8-9-23.6-7.5-38.4c-3.7,11.7-3.5,33-12,29.3c-7.9-3.4-12.9-13.2-9.3-31.1
                    c0,0-1.6,13-12.7,13.9s-9.5-13.8-9.5-13.8s-4.9,8.7-10,7.2c-6.9-2-4.6-11.5-4.6-11.5S-2,27.3-8.3,27.4c-7.9,0.1-8.7-3-9.7-9.6
                    C-19.5,7.8-17.6-22.7-5.4-21.8z"/> -->
                <path id="wing-R" transform="rotate(90)" class="st1" d="M-17,3.8c6.8-23.4,20.6-30.1,50.5-32.5c32.6-2.6,43.7,10.5,52.1,29.2c4.1,9.1,3.6,20.9-4.1,23
                    c-5.1,1.4-8.3,1.4-11.6-15.7C70,22.3,68.7,25.1,64.7,26c-5,1.1-9.2-1.4-5.6-13.9c-1.9,11.6-1.7,15.7-8.7,15.7
                    c-5.2,0-9.5-1.6-8-16.4C41.5,23.5,40.1,29.2,36,29c-5.2-0.2-6-7.6-6.5-17.5c0,0,4.4,15.9-6.7,16.8S15,12.5,15,12.5
                    S11.4,27.6,6.5,27c-7.1-0.9-7.1-13.3-7.1-13.3S0.3,25.9-6,26c-7.9,0.1-9-0.7-11.4-6.9C-18.6,15.8-19.2,11.3-17,3.8z">
                    <animate id="winganim" 
                        attributeName="d"  
                        begin="0;body.click"
                        dur="1s"
                        keyTimes="0;0.4;0.7;0.8;1"
                        repeatCount="5"
                        values="
                            M-17,3.8c6.8-23.4,20.6-30.1,50.5-32.5c32.6-2.6,43.7,10.5,52.1,29.2c4.1,9.1,3.6,20.9-4.1,23c-5.1,1.4-8.3,1.4-11.6-15.7C70,22.3,68.7,25.1,64.7,26c-5,1.1-9.2-1.4-5.6-13.9c-1.9,11.6-1.7,15.7-8.7,15.7c-5.2,0-9.5-1.6-8-16.4C41.5,23.5,40.1,29.2,36,29c-5.2-0.2-6-7.6-6.5-17.5c0,0,4.4,15.9-6.7,16.8S15,12.5,15,12.5S11.4,27.6,6.5,27c-7.1-0.9-7.1-13.3-7.1-13.3S0.3,25.9-6,26c-7.9,0.1-9-0.7-11.4-6.9C-18.6,15.8-19.2,11.3-17,3.8z;
                            M-5.4-21.8c31.9,2.3,85.5-12.3,109.9,5.1c32,22.8,9.3,49,26,80.8c1.5,2.9-4.3,14.2-15.5,7.5c-16.5-9.9-12.2-26.2-15.5-43.2c0.1,14.5,11.3,52.8-5.1,44.8C70.6,61.6,76.2,40,79.8,27.5C74.2,39.4,77.7,70,68.1,65c-18.7-9.8-9-23.6-7.5-38.4c-3.7,11.7-3.5,33-12,29.3c-7.9-3.4-12.9-13.2-9.3-31.1c0,0-1.6,13-12.7,13.9s-9.5-13.8-9.5-13.8s-4.9,8.7-10,7.2c-6.9-2-4.6-11.5-4.6-11.5S-2,27.3-8.3,27.4c-7.9,0.1-8.7-3-9.7-9.6C-19.5,7.8-17.6-22.7-5.4-21.8z;
                            M0.1-14.2c4.5-8.3,97.6-17.7,127.5-20.1c32.6-2.6,81.4,24.6,102,25.1c25.5,0.6,16,16,8.6,18.9c-13.2,5.2-44,0.7-62-8.4c14.2,13.3,55.9,19.6,47.9,29.9c-13.3,17.1-53.9-6.4-70.8-19.2c11.2,12.9,49.1,25.6,39.8,35.6c-13.8,14.8-57.9-14.7-72.6-22.1c9.2,7.9,23.5,17.3,15.7,22.7c-10.1,7.2-34.6-4-48.1-21.6c0,0,12.5,13,1.4,13.9S61.4,25.9,61.4,25.9s0.4,11.4-4.4,10.8c-7.1-0.9-20-8.6-20-8.6s0.2,6.4-6.1,6.5C23,34.7-6.4,25.2-8.7,19C-9.9,15.8-3.6-7.3,0.1-14.2z;
                            M-5.4-21.8C25.5-7.2,31-0.4,60.5,5c48,8.8,70.2-16.2,86-15.5c3.3,0.2,7,5.1,1.1,16.8c-5,9.8-27.1,17.8-43.5,21.8c9.9,6.4,45.1-0.1,33.9,14.4c-16.2,20.8-39,1.3-50.8-6.6c7.6,9.9,19.6,20.9,9.6,28.6C80.1,77.4,54.7,48,56.2,33.2C52.5,44.9,63,57.5,54,61c-14.9,5.8-20.4-9.3-16.8-27.2c0,0,1.3,10.6-9.8,11.5S17.2,29,17.2,29s-5,4.5-10.1,3c-6.9-2-4.6-11.5-4.6-11.5S-2,27.3-8.3,27.4c-7.9,0.1-8.7-3-9.7-9.6C-19.5,7.8-16.5-27-5.4-21.8z;
                            M-17,3.8c6.8-23.4,20.6-30.1,50.5-32.5c32.6-2.6,43.7,10.5,52.1,29.2c4.1,9.1,3.6,20.9-4.1,23c-5.1,1.4-8.3,1.4-11.6-15.7C70,22.3,68.7,25.1,64.7,26c-5,1.1-9.2-1.4-5.6-13.9c-1.9,11.6-1.7,15.7-8.7,15.7c-5.2,0-9.5-1.6-8-16.4C41.5,23.5,40.1,29.2,36,29c-5.2-0.2-6-7.6-6.5-17.5c0,0,4.4,15.9-6.7,16.8S15,12.5,15,12.5S11.4,27.6,6.5,27c-7.1-0.9-7.1-13.3-7.1-13.3S0.3,25.9-6,26c-7.9,0.1-9-0.7-11.4-6.9C-18.6,15.8-19.2,11.3-17,3.8z"/>
                    <animateTransform id="wing-rotate" attributeType="xml"
                        attributeName="transform"
                        type="rotate"
                        begin="winganim.begin"
                        values="90; -60; 90"
                        dur="1s"
                        keyTimes="0;0.7;1"
                        repeatCount="5"/>
                </path>
            </g>
            <use xlink:href="#wing-R-wrapper" transform="scale(-1, 1)" />
            <path id="body-color-a" class="st2" d="M0-121.3c46,0,83.3,17.3,83.3,69c0,38.1-21.6,69-83.3,69c-64.5,0-84.2-30.9-83.3-69
                C-81.8-107.1-45.9-121.3,0-121.3z"/>
            <path id="body-color-b" class="st3" d="M-82-42.5c0,0,10-11.1,16.9-13.4c0.3,6.3,2.7,11.1,6.5,14.7c4.6-5.4,10.9-10,18.7-13.9
                c3.4,5.6,8.1,10.9,14,15.8c7.6-4.3,15-8.7,20.1-14.2c5.5,6.7,11.1,11.1,16.7,14.9c4.7-2.1,9-4.5,12.7-7.3
                c3.6-2.6,6.7-5.5,9.2-8.7c6.6,4.1,11.6,9.3,15.3,15.3c7.2-5.5,11.9-15.3,12.8-18.6C72.9-55.5,81-41,81-41s4.6-26.9-2.6-41.5
                c-10.8-22.1-33-39-79.1-39.1c-49.9-0.2-72.1,22.5-79,44.5C-83.9-63.7-82-42.5-82-42.5z"/>
            <path id="body-divider" class="st4" d="M-81.5-42.5c0,0,5.6-10.3,16.9-13.4c0.3,6.3,2.7,11.1,6.5,14.7c3.1-6.6,12-12.3,18.7-13.9
                c1.8,2.9,11.2,13.4,14,15.8c2.3-1.3,19.1-13.1,20.1-14.2c5.5,6.7,11.1,11.1,16.7,14.9c4.1-1.9,19-12.3,21.9-16
                c6.6,4.1,11.6,9.3,15.3,15.3c8.7-5.3,12-15.8,12.8-18.6C75.7-56,81.5-41,81.5-41"/>
            <path id="body-outline" class="st5" d="M0-121.3c46,0,83.3,17.3,83.3,69c0,38.1-21.6,69-83.3,69c-64.5,0-84.2-30.9-83.3-69
                C-81.8-107.1-45.9-121.3,0-121.3z"/>
        </g>
        <g id="foot-L-wrapper" transform="translate(-35, 20)">
            <path id="foot-L" class="st6" d="M-10.9,11.3C-28.5,1.5-26.7-22-18.5-25.6c5.4-2.3,9.8,5.4,9.8,5.4s0.1-11.7,9-12
                c8.9-0.4,8.8,8.8,8.8,8.8S13.7-33.6,20-31c6.4,2.6,4.4,14.8,3.3,19.8c-1.1,4.9-2.1,10.1-1.9,20C12.7,4.3,8.8-3.7,8.8-3.7
                S5.1,5.2,5.2,17.2C-3.3,8.4-7.3,0.4-7.3,0.4S-9.8,2.9-10.9,11.3z"/>
        </g>
        <g id="foot-R-wrapper" transform="translate(35, 20)">
            <path id="foot-R" class="st6" d="M7.8,0.9c0,0-4.8,16.6-12.5,16.8C-4.6,5.7-8.3-1-8.3-1s-7.5,13.2-12.6,10.3
                c0.3-7.8-2-14.9-3.1-19.8s-1.9-15.5,4.5-18.1c6.3-2.5,10.9,5.8,10.9,5.8s-0.1-9.2,8.8-8.8c8.9,0.3,11,10.2,11,10.2
                s1.7-4.5,7.1-2.2c8.3,3.5,9.3,22-1.7,34.2C13.9,2.3,7.8,0.9,7.8,0.9z"/>
        </g>
        <g id="head" transform="translate(0, -150)">
            <path id="head-base" class="st7" d="M-3.8-63.9c47.1-0.4,89.6,21.4,90.7,61.7c0.8,30.5-9.9,30.5-9.2,42.5
                c1.6,2.5,15.6,12.4,11.5,25.3c-11.4-8.9-22.6-13-22.6-13s1.2,13.1-3.5,20c-8.8-10-21.9-13.8-21.9-13.8s-2,9.4-4.6,14.9
                c-4.5,0.4-22.2-12.3-22.2-12.3s-8.8,10.9-13.5,15c-5.6-3.2-14.8-16.6-14.8-16.6s-10.2,7.9-16,17.4c-8.6-3.7-18-18.3-18-18.3
                s-9.6,5.7-14.5,13.7c-8-5.3-10.4-16.1-10.4-16.1s-7.8,1.6-17,9.1c-1.8-13,11.2-15.5,11.5-24.4c0.4-11-10-13.6-9.4-42.3
                C-87-35-49.5-63.5-3.8-63.9z"/>
            <path id="forehead-line-b" class="st8" d="M2.7-22.9C1.3-28,1.1-32.5,4.4-38.2c3.3-5.6,8.4-4.6,8.4-4.6S5.5-35.3,2.7-22.9z"/>
            <path id="firehead-line-a" class="st8" d="M-2.3-17.9c-0.2-7-0.8-10.4-4.3-15.3c-4-5.7-10.8-4.8-10.8-4.8S-7.7-30.6-2.3-17.9z"/>
            <path id="line-b_1_" class="st8" d="M14.8,25.2c-2.5,3.3,2.3,11.3,10.8,17.8s17.5,9,20,5.7c-4.4-1.7-10.7-5.2-16.8-9.9
                S17.7,28.9,14.8,25.2z"/>
            <path id="line-a" class="st8" d="M-48.1,44.7c1.9,3.8,10.5,3.3,19.2-1.1s14.4-10.9,12.5-14.7c-3.1,3-8.5,6.8-14.9,9.9
                C-37.5,42-43.8,44-48.1,44.7z"/>
            <g id="eye-L-wrapper" transform="translate(-40, 0)">
                <g id="eye-L">
                    <circle id="eye-L-base" class="st9" cx="0" cy="0" r="34"/>
                    <g id="pupil-L">
                        <circle id="pupil-L-base" class="st8" cx="0" cy="0" r="20.6"/>
                        <circle id="blik-L-a" class="st10" cx="-3.4" cy="-6.1" r="10"/>
                        <path id="blik-L-b" class="st10" d="M-1.9,11.5c0.2,1.2,5.4,4.2,11.2,1.5c2.3-1.1,3.6-3.8,2.4-5.4c-1.1-1.6-3.5-2.1-5-1
                            C3.8,8.7,2.4,10.8-1.9,11.5z"/>
                    </g>
                    <circle id="eyelid-L" class="st11" cx="0" cy="0" r="34">
                        <animate id="blink-eyelid" attributeType="css"
                        attributeName="opacity"
                        values="0; 0; 1; 1"
                        dur="4s"
                        keyTimes="0;0.96;0.97;1"
                        repeatCount="indefinite"/>
                    </circle>
                    <animateTransform id="blink" attributeType="xml"
                        attributeName="transform"
                        type="scale"
                        values="1,1; 1,1; 1,0.3; 1,1"
                        dur="4s"
                        keyTimes="0;0.98;0.99;1"
                        repeatCount="indefinite"/>
                </g>
            </g>
            <use xlink:href="#eye-L-wrapper" transform="translate(80, 0)" />
            <g id="eyebrow-R-wrapper">
                <path id="eyebrow-R" class="st8" d="M3.9,5.8c0,0-4.3-25.1,19.9-38.3c11-6,25.9-3,41.3-16.4c27.4-24,29.9-48.6,30.7-58.3
                    c13,20.8-3,47.9-5.9,50.5c14.7-6.6,21.8,1.1,25,7.8C96.3-53,88.7-30.2,71.7-19.8C55.7-10,48.1-22,24.2-10
                    C13.9-4.8,3.9,5.8,3.9,5.8z"/>
            </g>
            <g id="eyebrow-L-wrapper">
                <path id="eyebrow-L" class="st8" d="M-3.5,4.6c0,0,4.5-28.1-24.7-39.5C-41.5-40-40.5-37.3-51-46.2c-18.2-15.6-22.1-29-22.3-35.1
                    c-5.1,6.2-9.5,18-8.9,19.7C-94-69-97.8-79.8-107.5-89.1s-14.6-13.1-19.2-14c8.2,7.3,10.1,15.9,14.1,23.5
                    c4.3,7.9,7.5,15.5,10,18.5c-2.9,2.5-14.5-1-14.5-1s12.3,17.8,35.8,35.5c14.8,11.2,45.8,13.1,51.8,14.4
                    C-10.7-8.1-3.5,4.6-3.5,4.6z"/>
            </g>
            <path id="beak" class="st6" d="M0,1.8l14.3,26.3L0,49.5L-14.3,28L0,1.8z"/>
        </g>
    </g>
</g>
<animateTransform id="blink-eyebrow-L" xlink:href="#eyebrow-L" attributeType="xml"
    attributeName="transform"
    type="translate"
    values="0,0; 0,0; 0,10; 0,0"
    dur="4s"
    keyTimes="0;0.98;0.99;1"
    repeatCount="indefinite"/>
<animateTransform id="blink-eyebrow-R" xlink:href="#eyebrow-R" attributeType="xml"
    attributeName="transform"
    type="translate"
    values="0,0; 0,0; 0,10; 0,0"
    dur="4s"
    keyTimes="0;0.98;0.99;1"
    repeatCount="indefinite"/>
<animateMotion id="headbob" xlink:href="#head" dur="1s" begin="click" fill="freeze" repeatCount="2">
    <mpath xlink:href="#motionpath" />
</animateMotion>
<animateTransform id="bodySkew" xlink:href="#body" attributeType="xml"
    attributeName="transform"
    begin="headbob.begin"
    additive="sum"
    type="skewX"
    values="0; -10; 0; 10; 0"
    dur="1s"
    repeatCount="2"/>
</svg>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Grafmagpro
0viewers