JavaScriptを使った面白い作品

#はじめに
javascriptを初めて触って学習していた時に、codepenで見つけた面白い作品を紹介していきます。
学習のモチベーションやインスピレーションになれば幸いです。

#時計をモチーフにした作品

##1 Color Clock

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YXOZpR" data-user="guardian" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/guardian/pen/YXOZpR">
  Color Clock</a> by Ellgine (<a href="https://codepen.io/guardian">@guardian</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##2 Hex Clock

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LLQbyR" data-user="mavrK" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mavrK/pen/LLQbyR">
  Hex Clock</a> by Kyle Shanks (<a href="https://codepen.io/mavrK">@mavrK</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##3 Binary Clock

https://codepen.io/Hammertime38/details/crtEg

##4 3D Clock

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NBgWLW" data-user="shshaw" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/shshaw/pen/NBgWLW">
  Splitting: 3D Clock</a> by Shaw (<a href="https://codepen.io/shshaw">@shshaw</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##5 Neu Times!

https://codepen.io/MananTank/details/bGdOedL

##6 Slide Clock

https://codepen.io/Alca/details/BZbPrE

##7 Column clock

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eInHA" data-user="nelsonr" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nelsonr/pen/eInHA">
  Column clock</a> by Nelson Rodrigues (<a href="https://codepen.io/nelsonr">@nelsonr</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##8 Proportionate Clock

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YyxJNQ" data-user="sketchbrook" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sketchbrook/pen/YyxJNQ">
  Proportionate Clock</a> by Jamie Brook (<a href="https://codepen.io/sketchbrook">@sketchbrook</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#円運動をモチーフにした作品

##1 Cursor with progress indicator

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zXVGem" data-user="ig_design" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ig_design/pen/zXVGem">
  Cursor with progress indicator</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##2 Back to top with progress indicator

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yrwgwO" data-user="ig_design" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ig_design/pen/yrwgwO">
  Back to top with progress indicator</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#雨をモチーフにした作品

##1 Animated Weather Cards

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="Gqakbo" data-user="ste-vg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ste-vg/pen/Gqakbo">
  Animated Weather Cards</a> by Steve Gardner (<a href="https://codepen.io/ste-vg">@ste-vg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##2 rain

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GyJnv" data-user="REast" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/REast/pen/GyJnv">
  rain</a> by Rich East (<a href="https://codepen.io/REast">@REast</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##3 Pure CSS random rain w/ SVG + CSS variables ☔️🦆

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WyNdMG" data-user="jh3y" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/jh3y/pen/WyNdMG">
  Pure CSS random rain w/ SVG + CSS variables ☔️🦆</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##4 rainy season

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YVYvdW" data-user="K-T" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/K-T/pen/YVYvdW">
  rainy season</a> by K-T (<a href="https://codepen.io/K-T">@K-T</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##5 Rain Cloud

https://codepen.io/franeq/details/JKyjkz

##6 Rain

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="aLqJmV" data-user="minten" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/minten/pen/aLqJmV">
  Rain</a> by minten (<a href="https://codepen.io/minten">@minten</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#色相環をモチーフにした作品

##1 wheel color picker [vue.js]

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qpvgJy" data-user="jakub_antolak" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/jakub_antolak/pen/qpvgJy">
  wheel color picker [vue.js]</a> by Kuba (<a href="https://codepen.io/jakub_antolak">@jakub_antolak</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##2 Vue Color Picker Wheel basic demo

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ePaELe" data-user="nino-vrijman" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/nino-vrijman/pen/ePaELe">
  Vue Color Picker Wheel basic demo</a> by Nino Vrijman (<a href="https://codepen.io/nino-vrijman">@nino-vrijman</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##3 Radial Color Picker - Vue

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zjEmwV" data-user="rkunev" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/rkunev/pen/zjEmwV">
  Radial Color Picker - Vue</a> by Rosen (<a href="https://codepen.io/rkunev">@rkunev</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>