魚(さかな)を変(か)えてみた
水族館の魚を変えてみることにしました。
上の絵は娘が小学校の頃、イベントの魚釣り用に使ったものです。
この中の魚の骨をSVGにしてみました。SVGはちょっと長いですがこんな感じです。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="988" height="400" viewBox="0 0 247 100">
<polygon points="117.1,5.7 117.8,8.3 119.1,11.8 121.2,14.5 121.2,16.7 121.7,19.7 122.9,22.4 122,25.3 121.5,27.7 122.2,30.1 121.1,31.6 120.6,32.8 120.5,34.8 99,24.6 99,18.8" width="2" fill="#ffffff" stroke="#333333"/>
<line x1="100.1" y1="19.7" x2="121.2" y2="13.7" width="2" stroke="#333333"/>
<line x1="100.1" y1="21.3" x2="122.9" y2="22.4" width="2" stroke="#333333"/>
<line x1="100" y1="23.3" x2="122.2" y2="30.1" width="2" stroke="#333333"/>
<path d="M89.1,21.1c0-1.7-0.1-2,1.5-5.9c0,0,1.5-3.3,3.2-4.2c0.5-0.3,0.7-0.2,0.8-0.2c0.3,0.1-0.1,0.7-0.2,0.9c-0.8,1.3-2.6,5.3-2.7,5.6C91,20,91.3,24,92.9,27c0,0,1.5,2.1,2.8,3.7c0.1,0.1,0.5,0.7,0.2,0.8c-0.2,0.1-0.5,0-0.6-0.1c-0.5-0.2-4-1.8-5.5-6.6C89.5,24.1,89.1,22.7,89.1,21.1L89.1,21.1L89.1,21.1z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M77.2,21c0-2.4-0.1-2.8,2.1-8.3c0,0,2.1-4.6,4.4-5.9c0.6-0.4,0.9-0.3,1.1-0.3c0.5,0.2-0.2,1-0.3,1.2c-1.1,1.9-3.6,7.4-3.7,7.9c-1,3.9-0.6,9.5,1.7,13.7c0,0,2.1,3,3.9,5.2c0.1,0.2,0.7,0.9,0.2,1.1c-0.3,0.1-0.7,0-0.9-0.1c-0.6-0.2-5.5-2.5-7.6-9.2C77.7,25.3,77.2,23.4,77.2,21L77.2,21L77.2,21z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M65.2,21c0-3.2-0.2-3.7,2.8-11.2c0,0,2.9-6.2,5.8-8c0.8-0.5,1.2-0.5,1.4-0.4c0.6,0.2-0.2,1.3-0.4,1.7c-1.5,2.6-4.8,10-4.9,10.7C68.5,19.1,69,26.6,72,32.3c0,0,2.8,4,5.1,7c0.2,0.3,0.9,1.3,0.3,1.5c-0.4,0.2-1,0-1.1-0.1c-0.9-0.3-7.2-3.3-10-12.4C65.8,26.8,65.2,24.2,65.2,21L65.2,21L65.2,21z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M53.2,23.2c-0.3-3.7-0.6-4.2,1.7-12.9c0,0,2.2-7.3,5-9.6C60.7-0.1,61.1,0,61.3,0c0.6,0.2-0.1,1.5-0.2,1.9c-1.3,3.1-3.8,11.8-3.9,12.6c-0.6,4.6,1.3,16.2,3.9,20.8c0,0,3.1,4.3,5.8,7.5c0.2,0.3,1.1,1.3,0.5,1.7c-0.4,0.2-0.9,0.1-1.2,0c-0.9-0.3-7.5-3.2-11.1-13.2C54.4,29.7,53.5,26.8,53.2,23.2L53.2,23.2L53.2,23.2z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M92.1,18.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C91.7,18.7,91.8,18.7,92.1,18.8L92.1,18.8L92.1,18.8z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M84.5,19.4c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C84.1,19.3,84.2,19.3,84.5,19.4L84.5,19.4L84.5,19.4z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M77.1,19.9c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C76.7,19.8,76.8,19.8,77.1,19.9L77.1,19.9L77.1,19.9z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M70.1,20.3c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C69.6,20.2,69.7,20.2,70.1,20.3L70.1,20.3L70.1,20.3z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M62.5,20.7c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C62,20.5,62.1,20.5,62.5,20.7L62.5,20.7L62.5,20.7z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M54.6,20.8c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C54.2,20.6,54.3,20.7,54.6,20.8L54.6,20.8L54.6,20.8z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M46.8,21.2c1.6,0.5,1.7,0.8,2.2,0.9c0.8,0.1,1.6-0.3,3.2-1.1c0.6-0.3,0.7-0.4,1-0.4c0.9,0.1,1.5,1.9,1.6,3.1c0.1,1.2-0.1,3.1-1.1,3.4c-0.2,0.1-0.3,0-1-0.2c-1.7-0.4-2.5-0.6-2.8-0.5c-0.9,0.1-1.8,0.8-2.1,1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.3-0.1-0.7-0.4-0.8-0.9c-0.8-2.3-0.6-2-0.6-2.3c-0.2-1.3,0-3.2,0.8-3.4C46.4,21,46.5,21.1,46.8,21.2L46.8,21.2L46.8,21.2z" width="2" fill="#ffffff" stroke="#333333"/>
<path d="M46.7,31.2c3.8-1.6,8.4,0.6,11.8,2.2c3,1.4,4.5,2.1,5.2,3.5c1.2,2.7-0.5,6.4-3.5,8.1c-2.6,1.4-5.4,0.9-6.7,0.7c-4.2-0.8-6.6-3.6-8.4-5.7c-1.3-1.6-1.7-2.5-1.8-3.4c-0.2-2.1,1.1-3.6,1.3-3.8C45.3,31.8,46.3,31.3,46.7,31.2L46.7,31.2L46.7,31.2z" width="2" fill="#ffffff" stroke="#333333" style="fill-rule: evenodd;"/>
<line x1="44.6" y1="34.3" x2="62.4" y2="43.1" width="2" stroke="#333333"/>
<line x1="43" y1="36.8" x2="58.6" y2="45.4" width="2" stroke="#333333"/>
<line x1="46.1" y1="32.8" x2="64.1" y2="38.3" width="2" stroke="#333333"/>
<path d="M0,24.1c1.8-2.5,5.9-7.8,9.9-11.8c8-8,12.1-12.2,17.7-12.1C35.8,0.3,41.5,9,43.1,11.4c3.9,6,4.1,11.6,4.3,16.2c0.2,5.3,0.6,15.8-6.6,20.1c-1.7,1.1-3.3,1.4-4.7,1.7c-1.4,0.3-28.6-8.3-26-7.1l0,0c3.1-4.2,10.1-5.7,13.2-9.9L0,24.1L0,24.1zM20,18.4c0-3.2,3.3-5.9,7.3-5.9c4,0,7.3,2.6,7.3,5.9l0,0c0,3.2-3.3,5.9-7.3,5.9S20,21.7,20,18.4L20,18.4z" width="2" fill="#ffffff" stroke="#333333" style="fill-rule: evenodd;"/>
<path d="M2.5,21.1c0.3-0.3,26.2,11,26.2,11L13.9,43.4" fill="none" width="2" stroke="#333333"/>
<ellipse rx="10.4" ry="8.2" cx="27.3" cy="18.5" fill="none" width="2" stroke="#333333"/>
</svg>この魚の骨を使ったプログラムについての詳細はブログ「JavaScript (47) 次の魚は？」をご覧ください。
この記事が気に入ったらサポートをしてみませんか？