CSS animation で遊び倒す - SVG Clip Path -

Last updated at 2019-03-16Posted at 2019-03-16

CSS animation day 53 となりました。

本日は、SVG-Clip Path を用いて、前回の作品をアレンジします。

#1. 完成版

See the Pen Sakura Fall by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
CSS Tricks
BRISK

#3. 分解してみる

❶.

Figma で桜を作ります。

上のUnion ボタンを押してグループ化します。
その後、右クリック　→　Copy as SVG で、SVG コードをコピーします。

できたら、マークアップしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <svg
        width="189"
        height="180"
        viewBox="0 0 189 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
          fill="#C4C4C4"
        />
      </svg>
    </div>
  </body>
</html>

styles.scss

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #200122, #6f0000);
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Figma で作ったSVG画像を、ブラウザで表示できました。

❷.
では、ClipPath を作成していきますが、やり方としては、3stepに分かれます。

まず、切り抜きたいSVGを非表示にし、次にClipPath要素を作り、最後に切り抜きたい画像へ適応して完成します。
では、やっていきましょう。

1: SVG 自体を非表示にする。

<svg width: 0, height: 0, style=”position: absolute; top: 0; left: 0;” >
　　　　　　　　・・・
</svg>

2: ClipPath 要素を作る。

<svg width: 0, height: 0, style=”position: absolute; top: 0; left: 0;” >
   <clipPath>
      <path d = "~">
   </clipPath>
</svg>

実際にコードを見てみましょう。

index.html

     <svg
        width="0"
        height="0"
        style="position: absolute; top: 0; left: 0;"
        xmlns="http://www.w3.org/2000/svg"
      >
        <clipPath id="sakura">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
            fill="#C4C4C4"
          />
        </clipPath>
      </svg>

これで、桜型の鋳型が完成します。

❸.
最後のステップとして、❷で作った鋳型を、切り抜きたい画像に適応します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <svg
        width="0"
        height="0"
        style="position: absolute; top: 0; left: 0;"
        xmlns="http://www.w3.org/2000/svg"
      >
        <clipPath id="sakura">
          <path
            d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
          />
        </clipPath>
      </svg>

      <svg width="300" height="300" viewBox="0 0 300 300">
        <image
          xlink:href="https://dl.dropbox.com/s/pzaxobsyspbfrjw/wa.png?dl=0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          clip-path="url(#sakura)"
        />
      </svg>
    </div>
  </body>
</html>

clip-path="url(#sakura)"

で、適応していることがわかりますね。
これで、完成です。

❹.
では、このclip-path へアニメーションをつけましょう。

index.html

  <clipPath id="sakura">
          <path class = "clip"
            d="・・・
  </clipPath>

  <svg width="1000" height="1000" viewBox="-500 0 1000 1000">
        <image
          xlink:href="https://dl.dropbox.com/s/pzaxobsyspbfrjw/wa.png?dl=0"
          width="200%"
          height="200%"
          preserveAspectRatio="xMidYMid slice"
          clip-path="url(#sakura)"
        />
  </svg>

styles.scss


.clip {
  animation: move 10s linear infinite;
}

@keyframes move {
  0% {
    transform: translate(0px, -400px);
  }
  20% {
    transform: translate(-30px, -200px) scale(1);
  }
  40% {
    transform: translate(0px, 0px) scale(1);
  }
  60% {
    transform: translate(-5px, 200px) scale(1);
  }
  80% {
    transform: translate(15px, 400px) scale(1);
  }

  100% {
    transform: translate(0px, 700px) scale(1);
  }
}

See the Pen Sakura Fall by hiroya iizuka (@hiroyaiizuka) on CodePen.

SVG アニメーションも簡単に設定できましたね。
それでは、また明日〜

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up