Undefined

この記事は1年以上前に書かれたものです。現在の状況にそぐわない場合がございますのでご注意ください。

今日のらくがき 第1回

くろくてフワフワとんでるやつ

今日のらくがき

インラインSVGです。対応ブラウザはこちら 

SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve" id="svg-illust">
  <g id="root">
    <g id="legs">
      <path id="leg-r" d="M94.022,493.451c-2.778-31.115,1.275-77.14,19.126-91.803c16.398-13.47,73.557-23.295,62.477-10.2
        C161.599,408.023,97.21,529.152,94.022,493.451z"/>
      <path id="leg-l" d="M286.553,367.222c-2.55,57.377,15.804,140.539-6.375,124.954C256.59,475.6,222,404,186.025,386.523
        C162.002,383.151,288.704,318.818,286.553,367.222z"/>
    </g>
    <g id="arms">
      <g id="arm-l">
        <path id="arm-l-main" d="M262.906,261.48C284,236,304,210,326.905,187.063c2.455-2.539,4.929-5.045,7.435-7.518
          c5.012-4.946,10.149-9.759,15.446-14.402c1.71-1.506,3.437-2.993,5.199-4.476C380,141,410,117,444,122c5,1,7,10,9.343,16.484
          c0.798,3.354,1.409,7.058,1.846,11.013c3.495,31.64-4.156,79.383-16.906,93.408c-1.447,1.592-3.073,3.196-4.859,4.802
          C414,264,391,275,368.791,284.788c-3.225,1.363-6.469,2.688-9.713,3.971c-2.163,0.855-12.902,4.983-16.126,6.239
          C320,305,285,323,259,314c-15-6-9-31-1.359-44.173C259.061,266.828,260.855,264,262.906,261.48z"/>
        <path id="arm-l-0" fill="#FFFFFF" d="M400.852,129.731c-12.95,6.118-25.087,14.814-36.329,23.482
          c-0.39,4.096-0.643,8.244-0.699,12.575c0.019,2.779-0.988,13.625-1.505,16.28C361,193,354,201,348,210c-12,18-46,39-30,55
          c9,8,43-9,45.995,14.959c0.002,0.752,0.003,3.366,0.004,6.82c1.601-0.654,3.199-1.318,4.792-1.992
          c8.103-3.571,16.31-7.308,24.411-11.399c-2.358-4.213-4.222-7.277-4.229-8.055c-9.973-26.333-0.339-96.196,0.029-99.672
          C389.621,153.47,397.542,141.148,400.852,129.731z"/>
      </g>
      <g id="arm-r">
        <path id="arm-r-main" d="M164.149,303.47c-16.576-5.1-97.171,24.647-100.728,47.176c-3.825,24.226-3.65,57.002,11.65,76.127
          c9.289,11.611,78.878-77.402,78.878-77.402S180.725,308.57,164.149,303.47z"/>
        <path id="arm-r-0" fill="#FFFFFF" d="M69.961,339.953c-0.661,3.262-0.741,6.556,0.039,9.818c0.226,1.657-0.402,3.358-0.117,5.1
          c0.285,1.742,0.576,3.525,0.872,5.338c0.215,1.289,0.43,2.593,0.648,3.909C77,376,81,388,79.763,400.905
          c0.062,1.626,0.104,3.262,0.131,4.906c0.026,1.645,0.036,3.298,0.037,4.96c-0.898,7.083,1.003,11.519,4.485,14.117
          c3.593-2.365,7.913-6.031,12.618-10.499c-0.221-1.287-0.275-2.6-0.032-3.946c0.071-1.794,0.173-3.578,0.284-5.349
          C96,390,112,378,107,364c-3-8-19-2-20.593-12.037c-0.21-1.284-0.415-2.542-0.604-3.778c0.172-8.023,5.533-15.905,5.554-23.102
          C82.618,329.805,75.034,334.896,69.961,339.953z"/>
      </g>
    </g>
    <g id="body">
      <path id="body-main" d="M183.275,270.319c-22.951,35.701-85.428,118.579-89.253,183.606
        c29.326-12.75,104.553-35.701,192.531-28.051c-2.55-79.052,0.725-130.054,18.576-192.531
        C316.604,196.367,206.226,234.618,183.275,270.319z"/>
      <path id="body-0" fill="#FFFFFF" d="M172.206,346.473C173,347,175,347,175,347c0-10,8-19,18-17c4,1,8,3,10,7c1,2,3,5,2,8
        c-1-2-2-5-5-6c2,10-4,23-16,20c-5-1-9-4-10.944-9.018C172.551,348.582,172.294,347.423,172.206,346.473z"/>
      <path id="body-1" fill="#FFFFFF" d="M169.279,374.592C166,380,163,385,166,391c4-10,15-16,22-7c5,6,3,15-4,20c-4,3-8,2-12,2
        s-7-3-9-6c-1-2-2-5-3-7c-1-7,1-13,7.121-17.364C167.984,375.081,168.689,374.763,169.279,374.592z"/>
    </g>
    <g id="head">
      <path id="head-ear-l" d="M63.971,230.968C55.046,90.713,162.889-22.653,156.499,36.987c-3.825,35.701-8.925,119.854-8.925,119.854
        S66.985,278.323,63.971,230.968z"/>
      <path id="head-ear-r" d="M225.901,109.114c0,0,48.452-95.628,117.304-107.103c34.426-1.275-13.3,116.203-20.951,171.03
        S225.901,109.114,225.901,109.114z"/>
      <path id="head-main" d="M320,155.565C325.746,204,299,264,178.175,309.845c-55.813,21.177-110.538-3.65-114.203-73.777
        c-2.522-48.251,31.326-111.103,113.934-133.292C236.484,87.043,312.382,91.347,320,155.565z"/>
    </g>
    <g id="face">
      <g id="face-mouse">
        <path id="face-mouse-0" fill="#FFFFFF" d="M126,297c13.536-1.128,58-6,113-35c7.5,0-12.5,36-66,50C131,321,108,298.5,126,297z"/>
        <path id="face-mouse-1" fill="#FF0000" d="M173,312c26.178-6.85,44.315-18.964,55.155-29.554
          c-4.811-4.058-36.679-18.511-61.155-9.446c-27,10-20,30-14.057,41.112C158.979,314.175,165.701,313.564,173,312z"/>
      </g>
      <g id="face-eye-r">
        <path id="face-eye-r-0" fill="#FFFFFF" d="M127,253.514c0,14.436-11.71,25.676-26.138,26.138C90,280,80,270.436,80,256
          s4-33,21.499-35C115.842,219.361,127,239.078,127,253.514z"/>

          <ellipse id="face-eye-r-1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -149.9696 150.9413)" cx="107.218" cy="256.5" rx="14.649" ry="14.649"/>
        <circle id="face-eye-r-2" fill="#FFFFFF" cx="114.5" cy="256.5" r="9.5"/>
      </g>
      <g id="face-eye-l">
        <path id="face-eye-l-0" fill="#FFFFFF" d="M257,218.68c0,14.436-16.575,28.32-31.011,28.32S196,233.116,196,218.68
          s4.691-28.772,19-30.68C234.126,185.45,257,204.244,257,218.68z"/>
        <circle id="face-eye-l-1" cx="216" cy="222" r="14"/>
        <circle id="face-eye-l-2" fill="#FFFFFF" cx="211.5" cy="226.5" r="9.5"/>
      </g>
    </g>
  </g>
</svg>

スタイル

#svg-illust {
  display: block;
  width: 60%;
  margin: 0 auto;
}

#svg-illust {
  animation-duration: 3s;
  animation-name: root;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes root {
  from {
      transform: translateY(-5%);
  }
  50% {
      transform: translateY(0);
  }
  to {
      transform: translateY(-5%);
  }
}

#arms {
  animation-duration: 3s;
  animation-name: arms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

@keyframes arms {
  from {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5%);
  }
  to {
      transform: translateY(0);
  }
}

#arm-l {
  animation-duration: 3s;
  animation-name: arm-l;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  transform-origin: left center;
}

@keyframes arm-l {
  from {
      transform: rotate(10deg);
  }
  50% {
      transform: rotate(-5deg);
  }
  to {
      transform: rotate(10deg);
  }
}

#arm-r {
  animation-duration: 3s;
  animation-name: arm-r;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  transform-origin: right center;
}

@keyframes arm-r {
  from {
      transform: rotate(-5deg);
  }
  50% {
      transform: rotate(10deg);
  }
  to {
      transform: rotate(-5deg);
  }
}
to top