<div class="logo">
<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" width="283.464px" height="283.464px" viewBox="0 0 283.464 283.464" style="enable-background:new 0 0 283.464 283.464;"
	 xml:space="preserve">
<g>
	<rect x="0" style="fill:none;" width="283.464" height="283.464"/>
	<g>
		<path class="logo_path pink" d="M155.392,149.169c0,0,0.783-0.23,2.254-0.66c1.47-0.445,3.49-1.137,6.098-2.181
			c5.142-2.14,12.338-5.619,19.851-11.304c7.528-5.593,15.408-13.327,21.611-22.811c3.076-4.743,5.668-9.938,7.557-15.333
			c1.925-5.388,3.003-11.04,3.176-16.614l0.021-2.089l0.004-0.261c-0.002,0.074,0.009-0.255-0.007,0.148l-0.003-0.076l-0.007-0.153
			l-0.026-0.61c-0.025-0.365-0.023-0.909-0.068-1.127c-0.127-0.937-0.331-2.269-0.604-3.398c-0.631-2.309-1.555-4.459-2.784-6.398
			c-2.442-3.899-5.932-6.911-9.559-9.486c-3.669-2.539-7.608-4.644-11.573-6.092c-3.974-1.419-7.917-2.181-11.532-2.238
			c-3.599-0.029-6.917,0.508-9.776,1.675c-2.858,1.143-5.332,2.803-7.256,4.521c-1.909,1.728-3.347,3.414-4.277,4.62
			c-0.951,1.243-1.456,1.904-1.456,1.904l-2.105-0.548c0,0-0.114-0.884-0.113-2.574c0.004-1.688,0.149-4.225,1.12-7.415
			c0.968-3.158,2.736-7.135,6.216-10.807c3.406-3.691,8.438-6.993,14.441-8.806c5.987-1.808,12.838-2.292,19.734-1.067
			c6.902,1.15,13.942,3.976,20.064,8.726c6.146,4.685,11.227,11.442,14.171,19.196c1.478,3.869,2.416,7.961,2.773,12.06
			c0.188,2.078,0.255,3.988,0.17,6.301c-0.013,0.592-0.064,0.863-0.094,1.31l-0.054,0.609l-0.035,0.527l-0.043,0.348l-0.338,2.779
			c-1.057,7.377-3.302,14.468-6.413,20.854c-3.03,6.441-7.097,12.077-11.332,17.08c-4.314,4.954-8.885,9.292-13.604,12.85
			c-4.691,3.591-9.394,6.548-13.883,8.944c-9.019,4.757-17.142,7.207-22.861,8.391c-2.852,0.58-5.186,0.924-6.703,1.092
			c-1.521,0.159-2.334,0.242-2.334,0.242L155.392,149.169z"/>
		<path class="logo_path blue" d="M148.23,186.017c0,0,0.84-0.312,2.414-0.894c1.539-0.633,3.97-1.328,6.741-2.636
			c1.39-0.628,2.928-1.32,4.603-2.076c1.664-0.762,3.417-1.766,5.302-2.73c1.91-0.929,3.81-2.168,5.833-3.404
			c2.052-1.186,4.072-2.648,6.181-4.142c4.251-2.94,8.464-6.62,12.664-10.651c3.977-4.261,8.177-8.713,11.506-13.991
			c3.382-5.202,6.454-10.805,8.521-16.778c2.112-5.949,3.423-12.167,3.739-18.348c-0.147-0.623,0.096-3.845-0.244-4.332
			c-0.121-0.537-0.137-1.013-0.28-1.585l-0.517-1.751c-0.812-2.234-1.955-4.108-3.381-5.643c-2.939-2.985-6.964-4.903-11.577-6.081
			c-4.555-1.258-9.605-1.683-14.462-1.532c-4.866,0.254-9.564,1.147-13.797,2.515c-4.228,1.387-8.003,3.231-11.187,5.306
			c-0.855,0.466-1.534,1.067-2.286,1.581c-0.751,0.517-1.477,1.034-2.092,1.607c-0.671,0.55-1.314,1.078-1.931,1.582
			c-0.569,0.563-1.111,1.1-1.628,1.61c-2.07,2.08-3.666,3.94-4.658,5.279c-1.063,1.348-1.63,2.067-1.63,2.067l-2.12-0.644
			c0,0-0.013-0.947,0.086-2.768c0.021-0.922,0.104-2.052,0.377-3.348c0.25-1.301,0.433-2.885,1.031-4.512
			c0.919-3.396,2.714-7.372,5.575-11.554c2.865-4.163,6.929-8.434,12.213-11.984c5.257-3.578,11.684-6.468,18.953-8.04
			c7.248-1.554,15.439-1.8,23.782,0.592c8.243,2.27,16.847,7.742,22.204,16.199c2.645,4.2,4.35,8.931,5.151,13.615l0.416,3.504
			c0.118,1.187,0.096,2.502,0.118,3.74c0.061,3.07-0.269,3.416-0.478,6.356c-1.255,8.027-3.778,15.689-7.135,22.674
			c-3.262,7.058-7.804,13.158-12.449,18.619c-4.631,5.519-9.91,9.989-14.972,13.989c-5.251,3.779-10.356,7.063-15.338,9.556
			c-2.471,1.282-4.843,2.472-7.203,3.381c-2.331,0.968-4.506,1.936-6.653,2.593c-2.131,0.698-4.069,1.433-5.942,1.956
			c-1.88,0.484-3.606,0.927-5.165,1.329c-3.1,0.836-5.511,1.083-7.166,1.447c-1.652,0.301-2.533,0.463-2.533,0.463L148.23,186.017z"
			/>
		<path class="logo_path blue" d="M191.457,205.601c0,0-1.101,0.151-3.165,0.433c-2.111,0.238-5.267,0.531-9.219,0.622
			c-7.94,0.256-19.326-0.482-32.759-3.181c-13.376-2.822-28.915-7.465-44.429-15.828c-7.759-4.138-15.526-9.214-22.745-15.523
			c-7.125-6.378-13.846-13.937-18.87-22.933c-1.318-2.205-2.403-4.56-3.507-6.909l-1.451-3.326c-0.47-1.204-0.991-2.557-1.421-3.792
			c-1.647-4.89-3.124-10.002-3.777-15.443c-0.712-5.415-0.718-11.123,0.262-16.85c1.033-5.699,3.084-11.408,6.279-16.431
			C62.996,76.266,73.565,69.5,83.903,67.263c10.398-2.399,20.461-0.896,28.383,2.435c7.996,3.354,13.9,8.445,18.009,13.387
			c4.123,4.99,6.519,9.906,8.032,13.965c1.494,4.088,2.122,7.376,2.463,9.606c0.308,2.244,0.362,3.441,0.362,3.441l-2.592,1.14
			c0,0-0.814-0.807-2.34-2.322c-1.513-1.48-3.726-3.597-6.592-5.919c-5.628-4.646-14.347-10.038-23.986-10.843
			c-4.761-0.499-9.661,0.237-13.933,2.067c-4.267,1.918-7.825,4.686-10.64,8.442c-2.829,3.704-5.141,8.925-5.495,15.553
			c-0.178,3.271,0.067,6.833,0.829,10.42l0.564,2.526l0.85,2.893c0.616,1.726,1.182,3.484,1.98,5.175
			c2.91,6.871,7.459,13.308,12.736,19.128c5.343,5.787,11.354,11.107,17.777,15.599c12.816,9.055,26.521,15.593,38.68,19.947
			c12.166,4.46,22.847,6.745,30.367,7.855c3.784,0.557,6.724,0.784,8.761,0.904c2.081,0.071,3.192,0.11,3.192,0.11L191.457,205.601z
			"/>
		<path class="logo_path pink" d="M155.392,151.3c0,0-0.813-0.083-2.335-0.242c-1.517-0.168-3.851-0.512-6.702-1.092
			c-5.719-1.185-13.843-3.634-22.862-8.393c-4.49-2.395-9.192-5.352-13.883-8.942c-4.719-3.558-9.291-7.896-13.604-12.85
			c-4.236-5.003-8.303-10.639-11.333-17.08c-3.112-6.386-5.357-13.477-6.414-20.854l-0.338-2.779l-0.042-0.348l-0.036-0.527
			l-0.053-0.609c-0.029-0.447-0.081-0.718-0.093-1.31c-0.085-2.313-0.018-4.224,0.17-6.302c0.357-4.097,1.296-8.19,2.773-12.058
			c2.944-7.754,8.024-14.512,14.171-19.196c6.123-4.75,13.162-7.575,20.064-8.726c6.897-1.225,13.748-0.741,19.734,1.067
			c6.003,1.813,11.036,5.115,14.442,8.806c3.479,3.672,5.248,7.649,6.216,10.807c0.971,3.19,1.115,5.727,1.12,7.415
			c0.001,1.69-0.114,2.574-0.114,2.574l-2.104,0.548c0,0-0.506-0.662-1.456-1.904c-0.932-1.206-2.368-2.892-4.277-4.62
			c-1.924-1.718-4.398-3.379-7.256-4.521c-2.859-1.167-6.178-1.705-9.777-1.675c-3.614,0.057-7.559,0.819-11.532,2.238
			c-3.965,1.448-7.904,3.553-11.573,6.092c-3.628,2.575-7.116,5.587-9.559,9.486c-1.229,1.938-2.154,4.089-2.784,6.398
			c-0.272,1.129-0.477,2.461-0.603,3.398c-0.045,0.219-0.044,0.762-0.069,1.127l-0.027,0.61l-0.007,0.153l-0.002,0.076
			c-0.015-0.403-0.004-0.075-0.007-0.148l0.004,0.261l0.021,2.089c0.173,5.575,1.251,11.226,3.176,16.614
			c1.889,5.395,4.481,10.588,7.556,15.333c6.204,9.484,14.084,17.218,21.612,22.811c7.513,5.685,14.708,9.165,19.851,11.304
			c2.608,1.044,4.629,1.735,6.099,2.181c1.47,0.43,2.254,0.66,2.254,0.66L155.392,151.3z"/>
	</g>
		<g>
			<path class="logo_path black" d="M84.372,239.868c0.064,0.191,0.096,0.352,0.096,0.544c0,0.607-0.416,1.088-1.056,1.248
				c-0.224,0.063-0.48,0.096-0.704,0.096c-0.544,0-1.024-0.224-1.248-0.832l-0.8-2.048c-2.304-6.239-3.2-8.512-6.4-8.512h-5.887
				v10.048c0,0.896-0.608,1.344-1.472,1.344c-0.896,0-1.536-0.448-1.536-1.376v-20.286c0-2.464,0.992-3.456,3.264-3.456h7.487
				c4.64,0,7.2,2.464,7.2,6.399c0,3.68-2.08,5.6-5.056,6.239c1.92,0.576,2.944,2.72,5.312,8.704L84.372,239.868z M75.732,227.741
				c2.72,0,4.512-1.696,4.512-4.256c0-2.72-1.472-4.192-4.32-4.192h-6.496c-0.672,0-1.056,0.353-1.056,1.12v7.328H75.732z"/>
			<path class="logo_path black" d="M91.029,224.924c0-0.863,0.608-1.279,1.472-1.279c0.864,0,1.472,0.416,1.472,1.279v10.239
				c0,2.752,1.12,4.288,3.488,4.288c1.696,0,3.072-0.8,4.16-2.304c0.768-1.088,1.088-2.08,1.088-3.328v-8.896
				c0-0.863,0.608-1.279,1.472-1.279c0.832,0,1.44,0.416,1.44,1.279v15.551c0,0.864-0.576,1.28-1.408,1.28
				c-0.864,0-1.472-0.384-1.472-1.184v-0.896c0-0.352,0.096-0.992,0.192-1.504c-0.992,2.24-2.848,3.872-6.048,3.872
				c-3.775,0-5.855-2.368-5.855-6.271V224.924z"/>
			<path class="logo_path black" d="M128.147,240.475c0,0.864-0.641,1.28-1.473,1.28c-0.863,0-1.472-0.416-1.472-1.28v-10.239
				c0-2.72-1.088-4.255-3.487-4.255c-1.729,0-3.168,0.768-4.256,2.271c-0.8,1.088-1.12,2.016-1.12,3.264v8.959
				c0,0.864-0.608,1.28-1.44,1.28c-0.896,0-1.472-0.416-1.472-1.28v-15.583c0-0.831,0.608-1.247,1.504-1.247
				c0.832,0,1.408,0.416,1.408,1.247v0.864c0,0.416-0.096,0.736-0.128,1.344c1.12-2.271,3.04-3.712,6.079-3.712
				c3.809,0,5.856,2.305,5.856,6.24V240.475z"/>
			<path class="logo_path black" d="M136.403,217.821c0-0.96,0.672-1.376,1.536-1.376c0.896,0,1.536,0.416,1.536,1.345v19.774
				c0,0.735,0.416,1.119,1.151,1.119h11.327c0.832,0,1.313,0.608,1.313,1.408c0,0.769-0.48,1.472-1.313,1.472h-12.287
				c-2.271,0-3.264-0.991-3.264-3.424V217.821z"/>
			<path class="logo_path black" d="M170.002,228.86c0-2.111-1.15-3.039-3.68-3.039c-2.336,0-3.486,0.896-4.031,2.367
				c-0.225,0.608-0.703,0.832-1.248,0.832c-0.256,0-0.512-0.063-0.736-0.128c-0.607-0.224-1.055-0.64-1.055-1.216
				c0-0.128,0.031-0.256,0.063-0.384c0.32-0.992,1.152-1.92,1.889-2.496c1.119-0.864,2.561-1.408,5.152-1.408
				c4.287,0,6.398,1.696,6.398,5.472v8.735c0,1.12,0.16,2.208,0.352,2.816c0.033,0.096,0.064,0.224,0.064,0.319
				c0,0.544-0.48,0.96-1.279,1.024c-0.096,0-0.191,0-0.289,0c-0.672,0-1.215-0.192-1.344-0.768c-0.096-0.385-0.16-0.96-0.191-1.601
				c-1.215,1.376-2.912,2.624-6.08,2.624c-3.52,0-5.662-1.983-5.662-5.279c0-3.008,1.791-4.928,4.83-5.76
				c1.76-0.48,3.424-0.672,6.848-0.736V228.86z M170.002,232.54c-3.742,0.097-5.504,0.416-6.783,1.057
				c-1.279,0.64-1.951,1.632-1.951,3.168c0,1.663,1.279,2.783,3.199,2.783c2.016,0,3.68-0.992,4.703-2.271
				c0.609-0.769,0.832-1.376,0.832-2.592V232.54z"/>
			<path class="logo_path black" d="M195.444,240.475c0,0.864-0.641,1.28-1.473,1.28c-0.863,0-1.473-0.416-1.473-1.28v-10.239
				c0-2.72-1.088-4.255-3.486-4.255c-1.729,0-3.168,0.768-4.256,2.271c-0.801,1.088-1.121,2.016-1.121,3.264v8.959
				c0,0.864-0.607,1.28-1.439,1.28c-0.896,0-1.473-0.416-1.473-1.28v-15.583c0-0.831,0.609-1.247,1.504-1.247
				c0.832,0,1.408,0.416,1.408,1.247v0.864c0,0.416-0.096,0.736-0.127,1.344c1.119-2.271,3.039-3.712,6.078-3.712
				c3.809,0,5.857,2.305,5.857,6.24V240.475z"/>
			<path class="logo_path black" d="M215.698,217.725c0-0.864,0.609-1.28,1.408-1.28c0.896,0,1.439,0.416,1.439,1.28v22.75
				c0,0.864-0.574,1.28-1.471,1.28c-0.928,0-1.377-0.512-1.377-1.184V239.9c0-0.353,0.064-1.024,0.098-1.473
				c-1.088,2.24-2.912,3.616-5.889,3.616c-4.672,0-7.615-3.68-7.615-9.439c0-5.6,2.912-9.216,7.646-9.216
				c2.977,0,4.77,1.408,5.889,3.681c-0.064-0.736-0.129-1.664-0.129-2.368V217.725z M205.235,232.636
				c0,4.191,1.855,6.911,5.088,6.911c3.359,0,5.439-2.912,5.439-6.879c0-3.904-1.92-6.784-5.439-6.784
				C207.09,225.884,205.235,228.573,205.235,232.636z"/>
		</g>
	</g>
</g>
</svg>
</div>
.logo{
	display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    width: 100%;
    height: 100%;
}
svg{
	width: 200px;
	height: 200px;	
}

/*共通*/
.logo_path{
fill:transparent; /*内部の色*/
stroke-width:1;/*線の太さ*/
stroke-dasharray: 3000;/*線の間隔*/
stroke-dashoffset:3000;/*線の始まりの位置*/
}

/*------------------
  ピンク部分の指定 
------------------*/
.pink { 
stroke:#F2A3C5;/*線の色*/
animation:PINK 4s ease-in alternate forwards;/*PINKはanimation用の任意のclass名*/
}
/*変化の指定*/
@keyframes PINK{
	
0%{
	stroke-dashoffset:3000;/*線の開始位置*/
	fill:transparent; /*内部の色*/
	}
100%{
	stroke-dashoffset:0;/*線の終了の位置*/	
	fill:#F2A3C5; /*内部の色*/
	}
}
@-moz-keyframes PINK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#F2A3C5; }
}
@-webkit-keyframes PINK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#F2A3C5; }
}
@-o-keyframes PINK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#F2A3C5; }
}
@-ms-keyframes PINK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#F2A3C5; }
}
/*------------------
  ブルー部分の指定 
------------------*/
.blue { 
stroke:#8FD3F5;/*線の色*/
animation:BLUE 4s ease-in 0s forwards;/*BLUEはanimation用の任意のclass名*/
}
@keyframes BLUE{
0%{
	stroke-dashoffset:3000;/*線の開始位置*/
	fill:transparent; /*内部の色*/
	}
100%{
	stroke-dashoffset:0;/*線の終了の位置*/	
	fill:#8FD3F5; /*内部の色*/
	}
}
@-moz-keyframes BLUE{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#8FD3F5; }
}
@-webkit-keyframes BLUE{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#8FD3F5; }
}
@-o-keyframes BLUE{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#8FD3F5; }
}
@-ms-keyframes BLUE{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#8FD3F5; }
}
/*------------------
  ブラック部分の指定 
------------------*/
.black { 
stroke:#494645;/*線の色*/
animation:BLACK 4s ease-in alternate forwards;/*BLACKはanimation用の任意のclass名*/
}
@keyframes BLACK{
0%{
	stroke-dashoffset:3000;/*線の開始位置*/
	fill:transparent; /*内部の色*/
	}
100%{
	stroke-dashoffset:0;/*線の終了の位置*/	
	fill:#494645; /*内部の色*/
	}
}
@-moz-keyframes BLACK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#494645; }
}
@-webkit-keyframes BLACK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#494645; }
}
@-o-keyframes BLACK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#494645; }
}
@-ms-keyframes BLACK{	
0%{ stroke-dashoffset:3000; fill:transparent; }
100%{ stroke-dashoffset:0; fill:#494645; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.