body {
    margin: 0;
    background: #fed;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 30px;
    color: #aa7d4f;
}

#svgWrapper {
    display: inline-block;
    width: 200px;
    height: 100px;
    cursor: pointer;
}

#svgWrapper svg {
    stroke-width: 17;
    width: 200px;
    height: 100px;
    transition: -webkit-transform .5s ease-out;
    transition: transform .5s ease-out;
    transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}

#svgWrapper svg #stroke .s {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    stroke-width: 5;
    -webkit-animation: summerbird-s .75s linear forwards .5s;
    animation: summerbird-s .75s linear forwards .5s;
}

#svgWrapper svg #stroke .ummerbird {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    stroke-width: 5;
    -webkit-animation: summerbird-ummerbird 1.5s linear forwards 1.1s;
    animation: summerbird-ummerbird 1.5s linear forwards 1.1s;
}

#svgWrapper svg #stroke .dot {
    opacity: 0;
    stroke-width: 30;
    stroke-linecap: round;
    -webkit-animation: summerbird-dot .175s linear forwards 2.75s;
    animation: summerbird-dot .175s linear forwards 2.75s;
}

#svgWrapper svg #stroke-organic .organic {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    stroke-width: 30;
    -webkit-animation: summerbird-organic .15s linear forwards 3s;
    animation: summerbird-organic .15s linear forwards 3s;
}

#svgWrapper:not(.clicked):hover svg {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    transition: -webkit-transform 0.3s cubic-bezier(0.3, 0.86, 0.61, 1.63);
    transition: transform 0.3s cubic-bezier(0.3, 0.86, 0.61, 1.63);
    transition: transform 0.3s cubic-bezier(0.3, 0.86, 0.61, 1.63), -webkit-transform 0.3s cubic-bezier(0.3, 0.86, 0.61, 1.63);
}

@-webkit-keyframes summerbird-s {
    0% {
        stroke-dashoffset: 1200;
    }
    33% {
        stroke-width: 5;
    }
    90% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
        stroke-width: 17;
    }
}

@keyframes summerbird-s {
    0% {
        stroke-dashoffset: 1200;
    }
    33% {
        stroke-width: 5;
    }
    90% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
        stroke-width: 17;
    }
}

@-webkit-keyframes summerbird-ummerbird {
    0% {
        stroke-dashoffset: 2400;
    }
    100% {
        stroke-dashoffset: 0;
        stroke-width: 15;
    }
}

@keyframes summerbird-ummerbird {
    0% {
        stroke-dashoffset: 2400;
    }
    100% {
        stroke-dashoffset: 0;
        stroke-width: 15;
    }
}

@-webkit-keyframes summerbird-dot {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes summerbird-dot {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes summerbird-organic {
    0% {
        opacity: 0;
        stroke-dashoffset: 200;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes summerbird-organic {
    0% {
        opacity: 0;
        stroke-dashoffset: 200;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}