hugo/layouts/partials/icon-content.html

			<h3><span class="icon-syui"></span> :two:</h3>
			<blockquote>
			    <a href="/icon/two.png"><img src="/icon/two.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p><code>yui</code>というオリジナル作品のロゴを作ったときのもので2章目を意味する。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :three:</h3>
			<blockquote>
			    <a href="/icon/three.png"><img src="/icon/three.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p><code>yui</code>というオリジナル作品のロゴを作ったときのもので3章目を意味する。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-cloud"></span> :cloud:</h3>
			<blockquote>
			    <a href="/icon/cloud.png"><img src="/icon/cloud.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>雲のアイコン。よく自分のイラストに登場している。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-sandar"></span> :sandar:</h3>
			<blockquote>
			    <a href="/icon/sandar.png"><img src="/icon/sandar.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>かみなりのアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-home"></span> :home:</h3>
			<blockquote>
			    <a href="/icon/home.png"><img src="/icon/home.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>作品に登場する家のマーク。</p>
			<p style="clear:both;"></p>
			</blockquote>
			<h3><span class="icon-syui"></span> :planet:</h3>
			<blockquote>
			    <a href="/icon/planet.png"><img src="/icon/planet.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>惑星をイメージして作ったアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>
			<h3><span class="icon-syui"></span> :sword:</h3>
			<blockquote>
			    <a href="/icon/sword.png"><img src="/icon/sword.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>ソードをイメージして作ったアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :shield:</h3>
			<blockquote>
			    <a href="/icon/shield.png"><img src="/icon/shield.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>シールドをイメージして作ったアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :monster:</h3>
			<blockquote>
			    <a href="/icon/monbo.png"><img src="/icon/monbo.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>作品に登場するモンスターを意味するアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :design:</h3>
			<blockquote>
			    <a href="/icon/design.png"><img src="/icon/design.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>作品に登場するモンスターボックスの設計図。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :egg:</h3>
			<blockquote>
			    <a href="/icon/egg.png"><img src="/icon/egg.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>タマゴのアイコン</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :hat:</h3>
			<blockquote>
			    <a href="/icon/hat.png"><img src="/icon/hat.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>ポケモンのレッドからインスピレーションを受けて作ったアイコン。帽子をモデルにしている。</p>
			<p style="clear:both;"></p>
			</blockquote>


			<h3><span class="icon-syui"></span> :syui-ai:</h3>
			<blockquote>
			    <a href="/icon/syui-ai.png"><img src="/icon/syui-ai.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p>何かの記念日等に使用したい変身アイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-phoenix-power"></span> :syui-poke:</h3>
			<blockquote>
			    <a href="/icon/syui_poke.png"><img src="/icon/syui_poke.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
							<p>ポケモンのオオタチが好きなので作ったアイコン。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-ai"></span> :ai-circle:</h3>
			<blockquote>
			    <a href="/icon/ai_circle.png"><img src="/icon/ai_circle.png" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
			    <p>アイというキャラのサークルアイコンを作ってみた</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :syui-svg:</h3>
			<blockquote>
			    <a href="/icon/syui_2.svg"><img src="/icon/syui_2.svg" width="128"style="float:left;margin-right:10px;margin-bottom:0px;"/></a>
					<p><code>github profile(readme)</code>のために作ったsvgファイル。imgタグで再生できる。</p>
			<p style="clear:both;"></p>
			</blockquote>

			<h3><span class="icon-syui"></span> :svg-animation:</h3>
			<blockquote>
<style>
.likeButton .syuiold {
  fill: #EF454A;
}
.likeButton.clicked .syuiold {
  fill: #EF454A;
  -webkit-animation: syuioldAnime 400ms;
  animation: syuioldAnime 400ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes syuioldAnime {
  40% {
      fiil:#ef454a63;
    transform-origin:0 0 0;
    transform: scale(1,0.9) translate(-9%, 9%);
    -webkit-transform: scale(1,0.9) translate(-9%, 9%);
  }
  50% {
      fill:#ef454ab8;
    transform-origin:0 0 0;
    transform: scale(1,0.9) translate(-7%, 7%);
    -webkit-transform: scale(1,0.9) translate(-7%, 7%);
  }
  60% {
    transform-origin:0 0 0;
    transform: scale(1) translate(-7%, 7%);
    -webkit-transform: scale(1) translate(-7%, 7%);
  }
  70% {
    transform-origin:0 0 0;
    transform: scale(1) translate(-5%,5%);
    -webkit-transform: scale(1) translate(-5%,5%);
  }
  80% {
    fill: #ef454a91;
    transform-origin:0 0 0;
    transform: scale(1) translate(-5%,5%);
    -webkit-transform: scale(1) translate(-5%,5%);
  }
  90% {
    fill: #f4a316b3;
    transform-origin:0 0 0;
    transform: scale(1) translate(0%);
    -webkit-transform: scale(1) translate(0%);
  }
  100% {
    transform-origin:0 0 0;
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
    fill: #EF454A;
  } 

}
</style>

<svg width="128px" height="128px" viewBox="0 0 512 512" class="likeButton" >
  <circle class="explosion" r="150" cx="250" cy="250"></circle>
  <g class="particleLayer">
    <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/>
    <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/>
    <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/>
    <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
    <circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"/>
    <circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"/>
    <circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"/>
    <circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"/>
    <circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"/>
    <circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"/>
    <circle fill="#CC8EF5" cx="401.5" cy="166" r="13"/>
    <circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"/>
    <circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"/>
    <circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"/>
  </g>
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">

<path class="syuiold" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
</g>
</svg>

<p>
    アイコンに動きをつけるSVGアニメーションを作ってみました。
</p>
			</blockquote>

			<h3><span class="icon-archlinuxjp"></span> :svg-animation:</h3>
			<blockquote>
<style>

.likeButton {
    cursor: pointer;
}

.likeButton .border {
    fill: white;
}

.likeButton .explosionarch {
    transform-origin: 250px 250px;
    transform: scale(1);
    stroke: #3ad;
    fill: none;
    opacity: 0;
    stroke-width: 1;
    transform-origin: 250px 250px;
}

.likeButton .particleLayer {
    opacity: 0;
}

.likeButton .particleLayer circle {
    opacity: 0;
    transform-origin: 250px 250px;
}

.likeButton.clicked .explosionarch {
    animation: explosionAnimearch 800ms;
    animation-fill-mode: forwards;
}

@keyframes explosionAnimearch {
    0% {
	opacity: 0;
	transform: scale(0.01);
    }
    1% {
	opacity: 1;
	transform: scale(0.01);
    }
    5% {
	stroke-width: 400;
    }
    20% {
	stroke-width: 500;
    }
    50% {
	stroke: #07b;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	stroke-width: 1;
    }
    50.1% {
	stroke-width: 0;
    }
    100% {
	stroke: #07b;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	stroke-width: 0;
    }
}

@keyframes archAnime {
    40% {
	fiil:#ccc;
	opacity: 0.9;
	transform-origin:0 0 0;
    }
    50% {
	fill:#ccc;
	transform-origin:0 0 0;
	transform-origin:0 0 0;
    }
    60% {
	transform-origin:0 0 0;
	transform-origin:0 0 0;
    }
    70% {
	opacity: 0.7;
	transform-origin:0 0 0;
    }
    80% {
	fill: #7cd;
	opacity: 0.8;
	transform-origin:0 0 0;
    }
    90% {
	fill: #7cd;
	transform-origin:0 0 0;
	transform: scale(1) translate(0%);
    }
    100% {
	transform-origin:0 0 0;
	transform: scale(1, 1) translate(0%, 0%);
	fill: #3ad;
    } 
}

.likeButton .arch {
    fill:#ccc;
    transform: scale(1);
    transform-origin: 250px 250px;
}

.likeButton.clicked .arch {
    fill: #3ad;
    animation-fill-mode: forwards;
    animation: archAnime 600ms;
}
</style>
<svg width="128px" height="128px" viewBox="0 0 512 512" class="likeButton" >
  <circle class="explosionarch" r="20" cx="255" cy="255"></circle>
  <g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000">
  <path class="arch" d="M1478 4427 l-1078 -622 0 -1245 0 -1245 1080 -623 1080 -623 1080 623 1080 623 0 1245 0 1245 -1079 623 c-593 342 -1080 622 -1082 622 -2 0 -489 -281 -1081 -623z m1125 -339 c30 -70 56 -131 147 -343 20 -47 63 -143 80 -180 11 -22 40 -85 66 -140 86 -184 324 -655 445 -882 22 -40 56 -106 78 -145 21 -40 62 -118 91 -173 29 -55 66 -124 82 -153 16 -30 27 -56 24 -59 -3 -3 -43 11 -88 32 -75 35 -208 86 -208 80 0 -1 28 -19 63 -41 105 -65 320 -228 342 -262 7 -9 36 -62 65 -117 58 -110 91 -170 139 -257 18 -33 27 -58 20 -58 -6 0 -52 23 -103 52 -279 157 -535 277 -741 346 -72 24 -202 60 -230 65 -14 2 -19 9 -17 22 2 11 6 67 9 125 12 236 -78 448 -222 523 -77 39 -175 16 -246 -60 -50 -53 -73 -95 -104 -188 -23 -68 -28 -98 -29 -200 0 -66 1 -142 4 -170 5 -47 4 -50 -20 -53 -32 -4 -158 -38 -235 -64 -210 -71 -462 -189 -741 -346 -108 -61 -123 -64 -96 -19 11 17 34 59 52 92 73 135 94 173 135 245 23 41 61 111 85 155 24 44 60 109 80 145 20 36 59 106 85 155 26 50 60 113 75 140 89 161 191 355 328 625 85 168 158 309 162 313 4 4 29 -10 56 -31 27 -22 63 -47 79 -56 17 -9 46 -26 65 -38 19 -11 51 -27 70 -35 34 -13 33 -13 -15 29 -82 70 -215 201 -215 211 0 5 25 66 56 136 31 69 72 164 91 211 18 47 40 99 48 117 8 17 15 34 15 37 0 3 9 25 20 49 16 35 51 122 91 225 5 12 12 22 17 22 5 0 25 -37 45 -82z"/>
  </g>
</svg>
<p>アイコンにSVGエフェクトをつけてみました。アニメーションも可。</p>
			</blockquote>