<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 187.2 29.4" style="enable-background:new 0 0 187.2 29.4;" xml:space="preserve">
<g>
	<path d="M19.5,1.9l-0.3,5.7c-4.1,0.1-7.8,0.2-11.1,0.3L8,12.4c4.3-0.4,7.5-0.7,9.5-0.7l-0.1,5.7l-9.4-0.6L8.4,22
		c4,0.1,7.6-0.2,10.9-0.7l-0.2,7c-3.5,0.1-6.6,0.2-9.3,0.2c-4.5,0-7.6-0.1-9.4-0.4C0.1,22,0,15.9,0,9.7c0-2.6,0-5.2,0-7.9
		c2.7-0.1,5.6-0.1,8.5-0.1C12.5,1.7,16.2,1.7,19.5,1.9z"/>
	<path d="M45.7,24.9l-5.1,4.4c-3.4-4.4-5.5-7.3-6.3-8.6L30.4,21l0.2,7.3h-5.9V1.8c2.7-0.7,5.1-1,7.4-1c6,0,9.5,2.3,10.6,6.9
		c0.1,0.6,0.2,1.2,0.2,1.9c0,1.7-0.4,3.1-1.3,4.4c-0.9,1.3-2.1,2.2-3.6,2.9C41,20.4,43.7,23.1,45.7,24.9z M36.6,9.5
		c-0.2-2-1.8-3-4.8-3c-0.5,0-1,0-1.5,0.1l0.1,7.8C34.9,14.2,37,12.6,36.6,9.5z"/>
	<path d="M76.3,28.2c-2.9,0.3-5.7,0.6-8.3,0.8c-0.8-2.6-1.6-4.9-2.4-6.9l-9,0.1l-2.7,6.5l-6.6-1.4c3.5-7.7,6.2-13.4,8.1-17.1
		C56,9.2,57.9,5.7,61,0c2.5,4.1,5.3,9.1,8.5,15C72.5,20.5,74.7,24.9,76.3,28.2z M63.7,15.7c-0.4-0.9-1.4-3-2.9-6.3L58,15.9
		C60,15.9,61.9,15.9,63.7,15.7z"/>
	<path d="M107.4,22.3c-0.9,4.3-4.2,6.6-10,7c-2.9,0.2-5.6-0.4-8.2-1.7V1.7c3.4-0.9,6.3-1.2,8.6-1.1c5.5,0.3,8.6,2.6,9.2,7
		c0.2,3.4-1,5.6-3.7,6.7c2.9,1.5,4.3,3.7,4.3,6.6C107.6,21.3,107.5,21.8,107.4,22.3z M101.7,19.5c0-1.5-0.6-2.8-1.8-3.8
		c-0.9-0.7-2.2-1.3-4-1.9c3.3-0.5,5-1.9,5-4.2c0-1.1-0.5-1.9-1.3-2.5c-0.8-0.5-1.7-0.8-2.9-0.8c-0.8,0-1.7,0.1-2.6,0.4l0.1,13.9
		c0,1.9,1.2,2.9,3.5,2.9c1.1,0,1.9-0.3,2.7-0.9C101.2,21.9,101.7,20.8,101.7,19.5z"/>
	<path d="M130.9,20.7l-0.3,7.5c-3.8,0.1-7.2,0.2-10.1,0.2c-3.8,0-6.4-0.1-7.9-0.3c-0.1-13.7-0.2-22.6-0.4-26.5h7.4l-0.9,20.2
		L130.9,20.7z"/>
	<path d="M157.8,14.6c0.2,3.6-0.4,6.6-1.9,9.2c-1.7,2.9-4.1,4.6-7.4,5.3c-0.8,0.2-1.6,0.3-2.3,0.3c-3.6,0-6.5-1.3-8.8-3.8
		c-2.2-2.4-3.4-5.4-3.6-9.1c-0.3-5.7,1.1-9.9,4-12.6c2.2-2,4.9-3,8.1-3C153.4,1.1,157.3,5.6,157.8,14.6z M151.7,15.1
		c-0.2-5.8-2.3-8.6-6.4-8.6c-3.8,0.4-5.6,3.5-5.4,9.3c0.1,2.2,0.6,4,1.5,5.5c1.1,1.8,2.7,2.7,4.8,2.7s3.5-1,4.4-3.1
		C151.5,19.3,151.8,17.4,151.7,15.1z"/>
	<path d="M187.2,14.3c0.1,0.7,0.1,1.3,0.1,1.9c0,3.8-1.1,6.9-3.4,9.3c-2.3,2.4-5.3,3.6-9.1,3.6c-4,0-7.2-1.3-9.6-3.8
		c-2.3-2.5-3.6-5.7-3.6-9.8c-0.1-4.1,1-7.5,3.3-10.1c2.3-2.8,5.5-4.2,9.6-4.3c3.1-0.1,5.8,0.7,8,2.3c2.4,1.7,3.7,4.1,4.1,7.1
		l-6.5,0.6c-0.3-1.4-0.9-2.5-2.1-3.4c-1.1-0.8-2.4-1.2-3.8-1.1c-1.7,0.1-3.1,0.8-4.1,2.1c-1,1.2-1.6,2.6-1.8,4.4
		c-0.1,0.8-0.1,1.4-0.1,1.9c0,2.3,0.4,4.1,1.3,5.7c1.1,1.9,2.6,2.9,4.7,3.3c0.4,0.1,0.8,0.1,1.2,0.1c1.5,0,2.8-0.5,3.9-1.4
		c1.1-0.9,1.6-2.1,1.6-3.6l-4.7,0.4v-5.5L187.2,14.3z"/>
</g>
</svg>
body{
	background:#000;
}

/* animation */
svg {
    width: 200px;
    backface-visibility: hidden;
    transform: translateZ(0);
}
path {
    fill: none;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: WAROTA 1.5s ease-in 0.5s forwards;
    -webkit-animation: WAROTA 1.5s ease-in 0.5s forwards;
    stroke: #fff;
    stroke-width:0.8px;
}


@keyframes WAROTA {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(255, 255, 255, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(255, 255, 255, 0.5);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(255, 255, 255, 0.8);
    }
    100% {
        stroke-dashoffset: 100;
        fill: rgba(255, 255, 255, 1);
        
    }
}

@-webkit-keyframes WAROTA {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(255, 255, 255, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(255, 255, 255, 0);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(255, 255, 255, 0.8);
    }
    100% {
        stroke-dashoffset: 100;
        fill: rgba(255, 255, 255, 1);
        stroke: rgba(255,255,255,0)
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.