CSS animation で遊び倒す - Conic Gradient -

CSS animation day 54 となりました。
本日で、31歳の誕生日を迎えました。　

4月から、BeatFit 社でフロントエンドエンジニアとして働きます。
これからもどうぞよろしくお願いいたします。

本日は、conic gradient についてです。

#1. 完成版

![スクリーンショット 2019-03-17 17.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/232715/1de876a2-0677-7576-fa41-0a07eaced17b.png)


#2. 参考文献
[CSS TRICKS](https://css-tricks.com/snippets/css/css-conic-gradient/)
[ICS MEDIA](https://ics.media/entry/18966/2)
[Alligator.io](https://alligator.io/css/conic-gradients/)

#3. 分解してみる

❶. 


conic gradient は、中心点を回りながら、放射状にグラデーションを生成するプロパティです。

![スクリーンショット 2019-03-17 15.47.41.png](https://qiita-image-store.s3.amazonaws.com/0/232715/317dccec-c269-86a2-2d73-68126da1bc48.png)




__conic__は、円錐という意味です。上から見ると円錐に見えることから命名されました。構文は以下の通りです。
<br/>

```
conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)
```

##第1引数
conic-gradient（）は、第一引数に、グラデーションの開始位置と中心点の位置を指定します。
例えば、 ``from 30deg at 10% 10%`` と設定することで、グラデーションは30度の位置から、中心を10% 10% に設定されます。

```
background: conic-gradient(from 30deg at 30% 30%, #fff, #000);
```

![スクリーンショット 2019-03-17 16.52.27.png](https://qiita-image-store.s3.amazonaws.com/0/232715/cdd99edb-9cf0-dbaa-d232-4913b48a0411.png)


なお、この引数を省略することも可能で、その場合はデフォルトで、角度は0度でcenter を中心にして作られます。


##第2引数
第2 引数で色を設定します。
始点と終点の最低2種類の色を設定します。

```
conic-gradient(red, orange, yellow, green, blue);
```

![スクリーンショット 2019-03-17 17.05.52.png](https://qiita-image-store.s3.amazonaws.com/0/232715/6abbbdf1-07e6-0c72-0a41-b3fe10e72912.png)

0度から時計回りで順に、赤、橙、黄、緑、青と、なっております。
どこからどこまで色を付けるか、自分で角度を設定することもできます。

```
conic-gradient(
    red 0deg,
    orange 50deg,
    yellow 100deg,
    green 300deg,
    blue 360deg
  );
```

![スクリーンショット 2019-03-17 17.08.18.png](https://qiita-image-store.s3.amazonaws.com/0/232715/0ffae3e6-98d7-8b80-7f95-02cd9c23cc49.png)

デフォルトでは、　360/色の数　に、均等に角度が割り振られます。
また、開始色は0度、終了色は360度となってます。



##注意点
[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/conic-gradient) によると、現時点(2019.3)では、Goodle Chrome とOpera のみ対応可です。今後使用できるブラウザは増えていくことでしょう。 

![スクリーンショット 2019-03-17 13.48.41.png](https://qiita-image-store.s3.amazonaws.com/0/232715/216cf8e1-187a-d8ae-6d36-f34651a6c9a0.png)



<br/>
❷.
これから、ドーナッツのグラフを作っていきます。
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="image"></div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
}

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

.image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(#ff5722 0% 35%, #ffeb3b 35% 60%, #2196f3 60% 100%);
}

```

![スクリーンショット 2019-03-17 17.48.52.png](https://qiita-image-store.s3.amazonaws.com/0/232715/e83fa6f9-dba6-b035-7fe2-7154fd79a0fa.png)

円形のチャートができました。

では、ドーナッツを作るにはどうしたら良いでしょうか？
前回の[記事](https://qiita.com/duka/items/e65354f103ebc9280959)のmaskやclipPath でできそうですが、せっかくなので、radial gradientを使いましょう。

[radial gradient](https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient)は、 中央から放射状へ最終的な形状(円や楕円)に向けて、一連の同心円の形状をかくプロパティです。

```
radial-gradient(#fff, transparent) 
```

と設定すれば、内側に白い円を外側に透明な形状の円を作ることができます。

先ほどのconic-gradient　と合成しましょう。


```styles.scss
background: radial-gradient(white 40%, transparent 25%),
    conic-gradient(#ff5722 0% 35%, #ffeb3b 35% 60%, #2196f3 60% 100%);
```

![スクリーンショット 2019-03-17 17.58.51.png](https://qiita-image-store.s3.amazonaws.com/0/232715/9fc08ad7-4087-88ad-d3e7-9ecd2109c5b1.png)


プレゼン資料とかにも応用できますね。
conic-gradient はかなり奥深いプロパティであり、明日以降、アニメーションやその他の表現方法について模索していきます。
それでは、また明日〜