FigmaでSVG Octocatを作る その2
昨日の記事でOctocatの顔パーツを作ったので、今回は体パーツを作ってみた。
足の先の曲線部分はペンツールのベジェ曲線を駆使して作成。
ペンツールに慣れていなくて一部カクついていたりするが、いい感じにできた気がする。
うまくなるには色んなパーツを作り続けていくしかない。
完成したSVGは↓
Octcat.tsx
import React from 'react'
const SIZE = 280
type Props = {
size?: number
}
export const Octocat = ({ size = 560 }: Props) => {
return (
<svg
width={size}
height={size}
fill="none"
viewBox={`0 0 ${SIZE} ${SIZE}`}
xmlns="http://www.w3.org/2000/svg"
>
<g id="Octocat">
<g id="Head">
<path
id="Head_2"
fillRule="evenodd"
clipRule="evenodd"
d="M73.3725 38.0421C90.1845 37.5133 96.0899 42.0022 106.037 49.5636C106.398 49.8379 106.764 50.1163 107.137 50.3986L106.795 50.6378C116.076 48.6262 127.178 47.4563 139.106 47.4563C149.957 47.4563 160.124 48.4245 168.859 50.1137C178.925 40.6419 187.284 39.4159 201.961 38.1058C207.033 51.7331 206.076 59.1534 203.183 68.6981C211.762 76.8921 217.106 88.4436 217.106 101.243V112.028C217.106 139.416 196.982 163.104 169.666 165.091C148.308 166.643 129.018 166.622 107.668 165.06C80.3022 163.058 60.1059 139.35 60.1059 111.912V101.243C60.1059 89.4662 64.6301 78.7457 72.0354 70.7252C67.5833 59.284 69.4573 51.3716 73.3725 38.0421Z"
fill="black"
/>
<path
id="Face"
d="M80.1059 127.869C80.1059 109.601 96.2876 95.7986 114.499 97.2327C131.494 98.571 146.674 98.5833 163.665 97.253C181.896 95.8258 198.106 109.633 198.106 127.919V128.586C198.106 141.397 190.024 153.042 177.619 156.24C151.447 162.987 130.238 162.931 101.419 155.943C88.6328 152.843 80.1059 141.026 80.1059 127.869V127.869Z"
fill="#F4CAB1"
/>
<g id="LeftEye">
<ellipse id="LeftEyeWhite" cx="107.106" cy="126.243" rx="12" ry="18" fill="white" />
<ellipse id="LeftEyeColor" cx="107.606" cy="126.243" rx="8.5" ry="12" fill="#AC5C51" />
</g>
<g id="RightEye">
<ellipse id="RightEyeWhite" cx="173.106" cy="126.243" rx="12" ry="18" fill="white" />
<ellipse id="RightEyeColor" cx="173.606" cy="126.243" rx="8.5" ry="12" fill="#AC5C51" />
</g>
<circle id="Nose" cx="139.606" cy="141.743" r="3.5" fill="#AC5C51" />
<path
id="Mouth"
d="M133.106 149.243C137.606 155.243 143.606 153.743 146.106 149.243"
stroke="#AC5C51"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
id="LeftBeard"
fillRule="evenodd"
clipRule="evenodd"
d="M7.14281 136.239C29.5315 133.009 42.1053 132.361 64.5973 132.743L64.6143 131.743C42.0744 131.36 29.4468 132.011 7 135.25L7.14281 136.239ZM8.22488 147.21C19.923 142.274 35.609 140.676 67.069 138.248L66.992 137.251C35.5949 139.674 19.7181 141.275 7.83612 146.288L8.22488 147.21Z"
fill="black"
/>
<path
id="RightBeard"
fillRule="evenodd"
clipRule="evenodd"
d="M211.126 132.244C240.455 132.967 256.757 133.386 272.047 136.236L272.23 135.253C256.844 132.385 240.451 131.967 211.151 131.245L211.126 132.244ZM207.144 138.247C243.05 140.359 259.096 142.097 273.001 147.217L273.346 146.279C259.278 141.098 243.079 139.359 207.203 137.249L207.144 138.247Z"
fill="black"
/>
</g>
<g id="Body">
<g id="Body_2">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M108.985 181.664C101.605 183.957 86.4693 186.423 81 179C80.427 178.222 79.8641 177.445 79.3057 176.673C73.0426 168.022 67.354 160.164 54.5 162C53.8333 162.667 53.7 164.8 58.5 168C62 170.167 69 178 72 186.5C73.6876 191.282 83.7577 201.749 108.601 198.136L108.006 223.722C107.303 225.458 106.221 227.644 105.031 228.759C103.383 230.303 100.567 231.655 99.3652 232.138C98.335 233.103 96.8927 235.228 99.3652 236C106.783 236 110.011 235.356 110.698 235.034C113.946 234.273 120.266 230.892 120.941 223.339C120.979 223.233 121 223.119 121 223V222V190.16L121.685 187.53C121.811 187.047 122.021 186.59 122.305 186.181C122.837 185.415 123.606 184.846 124.494 184.562L125 184.4V224C123.5 232.5 121 237.5 119 237.5C118.333 238.833 117.7 241.5 120.5 241.5C124 241.5 126.5 241 128 240C128.192 239.872 128.475 239.735 128.825 239.567C131.204 238.418 136.692 235.77 138 224V182.5H142V224C142.5 230.167 146.8 242.3 160 241.5C162.4 240.7 161 237.833 160 236.5C158.167 234.667 154.6 229.6 155 224V184C156.333 185.167 159 188.5 159 192.5V224V225H159.111C159.782 228.339 163.497 234.189 170 235.575C172.673 235.896 179.249 236.344 180.051 235.575C182 233.706 181.555 232.961 180.051 232L180.041 231.994C178.524 231.024 172.998 227.49 172 223L171.954 223.004L171 180.977L170.963 180.978C170.415 172.586 163.764 165.737 155.254 165.351C144.72 164.872 135.588 164.886 124.808 165.377C116.286 165.765 109.606 172.601 109.039 181H109L108.985 181.664Z"
fill="black"
/>
<path
d="M81 179L81.4025 178.703L81.4025 178.703L81 179ZM108.985 181.664L109.133 182.141L109.476 182.035L109.484 181.676L108.985 181.664ZM79.3057 176.673L78.9007 176.967L78.9007 176.967L79.3057 176.673ZM54.5 162L54.4293 161.505L54.2643 161.529L54.1464 161.646L54.5 162ZM58.5 168L58.2226 168.416L58.2297 168.421L58.2368 168.425L58.5 168ZM72 186.5L71.5285 186.666L71.5285 186.666L72 186.5ZM108.601 198.136L109.101 198.147L109.115 197.556L108.53 197.641L108.601 198.136ZM108.006 223.722L108.47 223.91L108.504 223.825L108.506 223.733L108.006 223.722ZM105.031 228.759L105.373 229.123L105.373 229.123L105.031 228.759ZM99.3652 232.138L99.1789 231.674L99.0918 231.709L99.0233 231.773L99.3652 232.138ZM99.3652 236L99.2161 236.477L99.2889 236.5H99.3652V236ZM110.698 235.034L110.584 234.548L110.533 234.56L110.486 234.582L110.698 235.034ZM120.941 223.339L120.471 223.169L120.449 223.23L120.443 223.294L120.941 223.339ZM121 190.16L120.516 190.034L120.5 190.096V190.16H121ZM121.685 187.53L122.169 187.656L122.169 187.656L121.685 187.53ZM122.305 186.181L121.894 185.895L121.894 185.895L122.305 186.181ZM124.494 184.562L124.646 185.038L124.646 185.038L124.494 184.562ZM125 184.4H125.5V183.715L124.848 183.924L125 184.4ZM125 224L125.492 224.087L125.5 224.044V224H125ZM119 237.5V237H118.691L118.553 237.276L119 237.5ZM128 240L128.277 240.416L128.277 240.416L128 240ZM128.825 239.567L129.042 240.017L129.042 240.017L128.825 239.567ZM138 224L138.497 224.055L138.5 224.028V224H138ZM138 182.5V182H137.5V182.5H138ZM142 182.5H142.5V182H142V182.5ZM142 224H141.5V224.02L141.502 224.04L142 224ZM160 241.5L160.03 241.999L160.096 241.995L160.158 241.974L160 241.5ZM160 236.5L160.4 236.2L160.379 236.172L160.354 236.146L160 236.5ZM155 224L155.499 224.036L155.5 224.018V224H155ZM155 184L155.329 183.624L154.5 182.898V184H155ZM159 225H158.5V225.5H159V225ZM159.111 225L159.601 224.901L159.52 224.5H159.111V225ZM170 235.575L169.896 236.064L169.918 236.069L169.94 236.072L170 235.575ZM180.051 235.575L180.397 235.936L180.397 235.936L180.051 235.575ZM180.051 232L179.782 232.421L179.782 232.421L180.051 232ZM180.041 231.994L180.311 231.573L180.311 231.573L180.041 231.994ZM172 223L172.488 222.892L172.394 222.468L171.962 222.501L172 223ZM171.954 223.004L171.454 223.015L171.466 223.543L171.993 223.502L171.954 223.004ZM171 180.977L171.5 180.966L171.489 180.466L170.989 180.477L171 180.977ZM170.963 180.978L170.465 181.011L170.496 181.489L170.975 181.478L170.963 180.978ZM155.254 165.351L155.231 165.85L155.231 165.85L155.254 165.351ZM124.808 165.377L124.785 164.877L124.785 164.877L124.808 165.377ZM109.039 181V181.5H109.506L109.538 181.034L109.039 181ZM109 181V180.5H108.511L108.5 180.988L109 181ZM80.5975 179.297C83.4806 183.209 88.8488 184.45 94.2735 184.475C99.7284 184.5 105.409 183.298 109.133 182.141L108.836 181.186C105.18 182.322 99.6031 183.5 94.2781 183.475C88.9229 183.451 83.9888 182.213 81.4025 178.703L80.5975 179.297ZM78.9007 176.967C79.4589 177.738 80.023 178.517 80.5975 179.297L81.4025 178.703C80.831 177.928 80.2693 177.152 79.7107 176.38L78.9007 176.967ZM54.5707 162.495C60.8682 161.595 65.3716 163.068 69.0773 165.806C72.815 168.568 75.7581 172.626 78.9007 176.967L79.7107 176.38C76.5903 172.07 73.5575 167.873 69.6716 165.002C65.7537 162.107 60.9858 160.568 54.4293 161.505L54.5707 162.495ZM58.7773 167.584C56.4102 166.006 55.3289 164.734 54.9016 163.835C54.4794 162.947 54.7134 162.494 54.8536 162.354L54.1464 161.646C53.6199 162.173 53.4539 163.119 53.9984 164.265C54.5378 165.399 55.7898 166.794 58.2226 168.416L58.7773 167.584ZM72.4715 186.334C70.9488 182.019 68.4174 177.889 65.832 174.568C63.2535 171.256 60.5857 168.703 58.7632 167.575L58.2368 168.425C59.9143 169.464 62.4965 171.911 65.043 175.182C67.5826 178.444 70.0512 182.481 71.5285 186.666L72.4715 186.334ZM108.53 197.641C83.8304 201.233 74.0524 190.813 72.4715 186.334L71.5285 186.666C73.3229 191.75 83.685 202.264 108.673 198.631L108.53 197.641ZM108.506 223.733L109.101 198.147L108.102 198.124L107.507 223.71L108.506 223.733ZM105.373 229.123C106.023 228.515 106.62 227.638 107.137 226.718C107.657 225.792 108.113 224.791 108.47 223.91L107.543 223.534C107.196 224.389 106.759 225.349 106.265 226.228C105.767 227.114 105.229 227.888 104.69 228.394L105.373 229.123ZM99.5516 232.602C100.768 232.113 103.655 230.734 105.373 229.123L104.69 228.394C103.111 229.873 100.366 231.197 99.1789 231.674L99.5516 232.602ZM99.5143 235.523C98.9664 235.352 98.7165 235.131 98.6044 234.947C98.4957 234.768 98.4688 234.545 98.5378 234.259C98.6838 233.652 99.2167 232.962 99.7071 232.503L99.0233 231.773C98.4835 232.279 97.7801 233.134 97.5656 234.024C97.4543 234.486 97.466 234.999 97.7501 235.466C98.0308 235.928 98.5278 236.262 99.2161 236.477L99.5143 235.523ZM110.486 234.582C110.37 234.636 110.088 234.727 109.58 234.831C109.084 234.933 108.4 235.042 107.501 235.141C105.703 235.34 103.061 235.5 99.3652 235.5V236.5C103.088 236.5 105.768 236.339 107.61 236.135C108.532 236.033 109.247 235.92 109.781 235.811C110.303 235.704 110.682 235.594 110.91 235.487L110.486 234.582ZM120.443 223.294C119.795 230.545 113.723 233.812 110.584 234.548L110.812 235.521C114.168 234.735 120.737 231.24 121.439 223.383L120.443 223.294ZM120.5 223C120.5 223.06 120.49 223.117 120.471 223.169L121.412 223.508C121.469 223.349 121.5 223.177 121.5 223H120.5ZM120.5 222V223H121.5V222H120.5ZM120.5 190.16V222H121.5V190.16H120.5ZM121.201 187.404L120.516 190.034L121.484 190.286L122.169 187.656L121.201 187.404ZM121.894 185.895C121.576 186.353 121.342 186.864 121.201 187.404L122.169 187.656C122.28 187.23 122.465 186.827 122.716 186.466L121.894 185.895ZM124.342 184.086C123.349 184.403 122.489 185.039 121.894 185.895L122.716 186.466C123.185 185.791 123.863 185.289 124.646 185.038L124.342 184.086ZM124.848 183.924L124.342 184.086L124.646 185.038L125.152 184.876L124.848 183.924ZM125.5 224V184.4H124.5V224H125.5ZM119 238C119.711 238 120.368 237.561 120.943 236.92C121.528 236.266 122.1 235.326 122.642 234.146C123.728 231.782 124.738 228.362 125.492 224.087L124.508 223.913C123.762 228.138 122.772 231.468 121.733 233.729C121.213 234.861 120.691 235.702 120.198 236.252C119.695 236.814 119.289 237 119 237V238ZM120.5 241C119.876 241 119.518 240.852 119.311 240.679C119.108 240.509 118.988 240.263 118.946 239.936C118.856 239.248 119.131 238.356 119.447 237.724L118.553 237.276C118.202 237.977 117.827 239.086 117.954 240.064C118.02 240.57 118.225 241.074 118.67 241.446C119.111 241.815 119.724 242 120.5 242V241ZM127.723 239.584C126.352 240.498 123.979 241 120.5 241V242C124.021 242 126.648 241.502 128.277 240.416L127.723 239.584ZM128.607 239.116C128.271 239.279 127.951 239.432 127.723 239.584L128.277 240.416C128.434 240.312 128.678 240.192 129.042 240.017L128.607 239.116ZM137.503 223.945C136.857 229.756 135.186 233.265 133.425 235.453C131.664 237.64 129.782 238.55 128.607 239.116L129.042 240.017C130.247 239.435 132.298 238.447 134.204 236.08C136.108 233.714 137.835 230.014 138.497 224.055L137.503 223.945ZM137.5 182.5V224H138.5V182.5H137.5ZM142 182H138V183H142V182ZM142.5 224V182.5H141.5V224H142.5ZM159.97 241.001C153.557 241.39 149.336 238.649 146.637 235.062C143.92 231.451 142.743 226.974 142.498 223.96L141.502 224.04C141.757 227.193 142.98 231.865 145.838 235.663C148.714 239.485 153.243 242.41 160.03 241.999L159.97 241.001ZM159.6 236.8C160.078 237.437 160.627 238.414 160.783 239.288C160.86 239.72 160.832 240.079 160.701 240.355C160.578 240.614 160.335 240.861 159.842 241.026L160.158 241.974C160.865 241.739 161.347 241.328 161.605 240.783C161.856 240.254 161.865 239.664 161.767 239.112C161.573 238.02 160.922 236.896 160.4 236.2L159.6 236.8ZM154.501 223.964C154.293 226.879 155.117 229.635 156.213 231.882C157.308 234.128 158.691 235.898 159.646 236.854L160.354 236.146C159.476 235.269 158.158 233.589 157.112 231.443C156.066 229.298 155.307 226.721 155.499 224.036L154.501 223.964ZM154.5 184V224H155.5V184H154.5ZM159.5 192.5C159.5 190.39 158.797 188.472 157.936 186.942C157.075 185.414 156.039 184.245 155.329 183.624L154.671 184.376C155.294 184.922 156.259 186.003 157.064 187.433C157.869 188.862 158.5 190.61 158.5 192.5H159.5ZM159.5 224V192.5H158.5V224H159.5ZM159.5 225V224H158.5V225H159.5ZM159.111 224.5H159V225.5H159.111V224.5ZM170.104 235.086C166.977 234.42 164.512 232.679 162.742 230.688C160.966 228.69 159.917 226.471 159.601 224.901L158.621 225.099C158.976 226.868 160.12 229.243 161.995 231.352C163.876 233.468 166.519 235.345 169.896 236.064L170.104 235.086ZM179.705 235.214C179.71 235.209 179.639 235.263 179.386 235.322C179.158 235.375 178.852 235.417 178.479 235.446C177.733 235.505 176.773 235.512 175.741 235.484C173.679 235.428 171.382 235.237 170.06 235.079L169.94 236.072C171.291 236.234 173.619 236.427 175.714 236.484C176.76 236.512 177.761 236.506 178.558 236.443C178.955 236.412 179.316 236.365 179.611 236.296C179.882 236.234 180.191 236.134 180.397 235.936L179.705 235.214ZM179.782 232.421C180.149 232.656 180.417 232.857 180.597 233.046C180.772 233.23 180.836 233.374 180.848 233.499C180.861 233.626 180.831 233.815 180.656 234.106C180.48 234.399 180.178 234.761 179.705 235.214L180.397 235.936C180.899 235.455 181.272 235.023 181.513 234.621C181.756 234.216 181.886 233.809 181.843 233.396C181.8 232.981 181.592 232.641 181.322 232.357C181.056 232.078 180.705 231.825 180.32 231.579L179.782 232.421ZM179.772 232.415L179.782 232.421L180.32 231.579L180.311 231.573L179.772 232.415ZM171.512 223.108C172.044 225.504 173.767 227.596 175.487 229.184C177.218 230.783 179.011 231.928 179.772 232.415L180.311 231.573C179.555 231.089 177.826 229.983 176.165 228.45C174.493 226.906 172.954 224.986 172.488 222.892L171.512 223.108ZM171.993 223.502L172.038 223.499L171.962 222.501L171.916 222.505L171.993 223.502ZM170.501 180.989L171.454 223.015L172.454 222.992L171.5 180.966L170.501 180.989ZM170.975 181.478L171.012 181.477L170.989 180.477L170.952 180.478L170.975 181.478ZM155.231 165.85C163.476 166.225 169.932 172.861 170.465 181.011L171.462 180.946C170.898 172.31 164.052 165.25 155.276 164.851L155.231 165.85ZM124.831 165.876C135.596 165.386 144.713 165.373 155.231 165.85L155.276 164.851C144.727 164.372 135.58 164.386 124.785 164.877L124.831 165.876ZM109.538 181.034C110.088 172.879 116.572 166.252 124.831 165.876L124.785 164.877C115.999 165.277 109.123 172.324 108.54 180.966L109.538 181.034ZM109 181.5H109.039V180.5H109V181.5ZM109.484 181.676L109.5 181.012L108.5 180.988L108.485 181.652L109.484 181.676Z"
fill="black"
/>
</g>
<path
id="Dot"
fillRule="evenodd"
clipRule="evenodd"
d="M61.5 165C62.6046 165 63.5 164.328 63.5 163.5C63.5 162.672 62.6046 162 61.5 162C60.3954 162 59.5 162.672 59.5 163.5C59.5 164.328 60.3954 165 61.5 165ZM69.5 167C69.5 167.828 68.6046 168.5 67.5 168.5C66.3954 168.5 65.5 167.828 65.5 167C65.5 166.172 66.3954 165.5 67.5 165.5C68.6046 165.5 69.5 166.172 69.5 167ZM71 172.5C72.1046 172.5 73 171.828 73 171C73 170.172 72.1046 169.5 71 169.5C69.8954 169.5 69 170.172 69 171C69 171.828 69.8954 172.5 71 172.5ZM76.5 176C76.5 176.828 75.6046 177.5 74.5 177.5C73.3954 177.5 72.5 176.828 72.5 176C72.5 175.172 73.3954 174.5 74.5 174.5C75.6046 174.5 76.5 175.172 76.5 176ZM78 182C79.1046 182 80 181.328 80 180.5C80 179.672 79.1046 179 78 179C76.8954 179 76 179.672 76 180.5C76 181.328 76.8954 182 78 182ZM85 184.5C85 185.328 84.1046 186 83 186C81.8954 186 81 185.328 81 184.5C81 183.672 81.8954 183 83 183C84.1046 183 85 183.672 85 184.5ZM106 186.5C106 187.328 105.105 188 104 188C102.895 188 102 187.328 102 186.5C102 185.672 102.895 185 104 185C105.105 185 106 185.672 106 186.5ZM99 187.5C99 188.328 98.1046 189 97 189C95.8954 189 95 188.328 95 187.5C95 186.672 95.8954 186 97 186C98.1046 186 99 186.672 99 187.5ZM90 189C91.1046 189 92 188.328 92 187.5C92 186.672 91.1046 186 90 186C88.8954 186 88 186.672 88 187.5C88 188.328 88.8954 189 90 189Z"
fill="#C3E3D7"
/>
<path
id="Drops"
d="M55.8417 168.631C53.9551 171.964 51.9486 179.131 55.8417 179.131C59.5 179.131 57.7282 171.964 55.8417 168.631Z"
fill="#9CDAF0"
/>
</g>
</g>
</svg>
)
}