pug + scssでインフィニティ・ストーンを作る

Last updated at 2019-12-24Posted at 2019-12-24

はっぴーめりーくりすます！
とは言いますが、もう年末間近です。
年末といえば、一年の振り返りをする方も多いと思います。
今年は、例年に比べて観に行った映画が多かった気がしました。
自分が今年一番印象に残っているのは、アベンジャーズです。
ということで、今回は、アベンジャーズ劇中に登場するインフィニティ・ストーンを
pug + scssで作ってみました。

インフィニティ・ストーンって何ぞや

詳しくはこちら
今回は、ガントレットに装着されている状態を作ります。

完成品

See the Pen css infinity stone by Harold Winston (@harold_winston) on CodePen.

概要

今回作成にあたって
https://codepen.io/YusukeNakaya/pen/RjQGzg?editors=1100
↑こちらを参考にさせていただきました。
cssのみで、色々な作品を作ってらっしゃる方です。
しゅごい

基本の形を作る

最初に、石の原型を作ります。

stong.pug

.stone--space

stone.scss


.stone {
  position: relative;
  width: 23vh;
  height: 37vh;
  filter: blur(1px);
  overflow: hidden;
  border-radius: 50%;
  box-shadow: inset 0 0 13px 3px #000;
}

縦長の楕円形を作ります。サイズはcodepen上でのバランスで設定しています。
ポイントとして、blurで少しだけぼかす事で表面の滑らかさを出します。
そして、内に力が溜まってそうな感じを出すために、box-shadowを内側に設定しています。

エネルギー源を作ってみる

内に秘めたるパワー・・・
勝手ではありますが入れてみました。

stone.pug

.stone--space
  .stone_inner--space

stone.scss

&_inner {
  width: 70%;
  height: 70%;
  filter: blur(3px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
    
  &--space {
    @extend .stone_inner;
    background-color: #13B4FF;
  }
}

scssは追加した内容を抜粋したものです。
インナー部分には、外枠よりも少し強めにblurをかけて、色は明るめにしています。

輝きの再現

仕上げとなる輝きが反射しているのを再現します。

stone.pug

.stone--space
  .stone_inner--space
  - for (i = 0; i < 60; i++)
    .cut--space

stone.scss

.cut {
  mix-blend-mode: color-dodge;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &--space {
    @extend .cut;
      
    @for $i from 1 through 100 {
      &:nth-child(#{$i}) {
        width: random(150) + 200px;
        height: random(300) + 200px;
        clip-path: polygon(
          random(100) + 0% random(100) + 0%,
          random(100) + 0% random(100) + 0%,
          random(100) + 0% random(100) + 0%
        );
        animation: sapphireBlue random(3000) + 2000ms random(1000) * -1ms ease-in-out infinite alternate;
        background: linear-gradient(
            random(360) + 0deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(103, 195, 252, 0.5) 8%,
            rgba(38, 0, 255, 0.5) 16%,
            rgba(255, 255, 255, 0.5) 25%,
            rgba(38, 0, 255, 0.5) 34%,
            rgba(103, 195, 252, 0.5) 42%,
            rgba(0,0,0,0.5) 50%
        );
        background-size: 100% 200%;
      }
    }
  }
}
@keyframes sapphireBlue {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

共通の設定として、positionによる中央配置とmix-blend-modeを設定しています。

mix-blend-mode

CSS の mix-blend-mode プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

引用：mix-blend-mode - CSS: カスケーディングスタイルシート | MDN

輝きを再現するために、サイズが様々な多数の要素を重ね合わせるので、変化をつけるために使用しています。

forでwrap内に、複数の要素をrandom()を使用してサイズや配置を設定しています。
clip-pathは、頂点の数を3つに、サイズはランダムで設定しています。

clip-path: polygon(
  random(100) + 0% random(100) + 0%,
  random(100) + 0% random(100) + 0%,
  random(100) + 0% random(100) + 0%
);

background: linear-gradient(
  random(360) + 0deg,
  rgba(0, 0, 0, 0.5) 0%,
  rgba(103, 195, 252, 0.5) 8%,
  rgba(38, 0, 255, 0.5) 16%,
  rgba(255, 255, 255, 0.5) 25%,
  rgba(38, 0, 255, 0.5) 34%,
  rgba(103, 195, 252, 0.5) 42%,
  rgba(0,0,0,0.5) 50%
);