https://qwerty.work/tags/canvas/ Recent content in Canvas on qwerty.work Hugo -- gohugo.io ja-JP Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ Thu, 10 Feb 2022 09:31:06 +0900 https://qwerty.work/post/2022/02/csss-svg-animation-sample/ <h2 id="こういう背景ってどうやって作るんだろう">こういう背景ってどうやって作るんだろう？ </h2><p>以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。</p> <div class="link-card"> <a href="https://fukurou-labo.co.jp/recruit/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fukurou-labo.co.jp/recruit/" alt="https://fukurou-labo.co.jp/recruit/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fukurou-labo.co.jp/recruit/</span> <span class="link-card-url">https://fukurou-labo.co.jp/recruit/</span> </div> </a> </div> <p>「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。</p> <h2 id="参考ページ">参考ページ </h2><h3 id="動くバブルみたいなやつはこれっぽい">動くバブルみたいなやつはこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-3/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-3/" alt="https://coco-factory.jp/ugokuweb/move02/5-3/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-3/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-3/</span> </div> </a> </div> <h3 id="動く波はこれっぽい">動く波はこれっぽい？ </h3> <div class="link-card"> <a href="https://coco-factory.jp/ugokuweb/move02/5-13/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://coco-factory.jp/ugokuweb/move02/5-13/" alt="https://coco-factory.jp/ugokuweb/move02/5-13/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://coco-factory.jp/ugokuweb/move02/5-13/</span> <span class="link-card-url">https://coco-factory.jp/ugokuweb/move02/5-13/</span> </div> </a> </div> <div class="link-card"> <a href="http://kachibito.net/css/simple-css-waves-with-svg" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://kachibito.net/css/simple-css-waves-with-svg" alt="http://kachibito.net/css/simple-css-waves-with-svg" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://kachibito.net/css/simple-css-waves-with-svg</span> <span class="link-card-url">http://kachibito.net/css/simple-css-waves-with-svg</span> </div> </a> </div> <h4 id="静的ウェーブをオンラインで簡単に作れるサイト">静的ウェーブをオンラインで簡単に作れるサイト </h4> <div class="link-card"> <a href="https://www.shapedivider.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.shapedivider.app/" alt="https://www.shapedivider.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.shapedivider.app/</span> <span class="link-card-url">https://www.shapedivider.app/</span> </div> </a> </div> <h3 id="その他">その他 </h3> <div class="link-card"> <a href="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://deshinon.com/2019/03/06/koseiteki-haikei-css/" alt="https://deshinon.com/2019/03/06/koseiteki-haikei-css/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> <span class="link-card-url">https://deshinon.com/2019/03/06/koseiteki-haikei-css/</span> </div> </a> </div> <div class="link-card"> <a href="https://webdesignfacts.net/entry/css-background-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://webdesignfacts.net/entry/css-background-animation/" alt="https://webdesignfacts.net/entry/css-background-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://webdesignfacts.net/entry/css-background-animation/</span> <span class="link-card-url">https://webdesignfacts.net/entry/css-background-animation/</span> </div> </a> </div> <div class="link-card"> <a href="https://web-navigator.blog/background-anime/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://web-navigator.blog/background-anime/" alt="https://web-navigator.blog/background-anime/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://web-navigator.blog/background-anime/</span> <span class="link-card-url">https://web-navigator.blog/background-anime/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/blob-animated-backgrounds/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/blob-animated-backgrounds/" alt="https://goworkship.com/magazine/blob-animated-backgrounds/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/blob-animated-backgrounds/</span> <span class="link-card-url">https://goworkship.com/magazine/blob-animated-backgrounds/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/liquid-effect-web/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/liquid-effect-web/" alt="https://goworkship.com/magazine/liquid-effect-web/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/liquid-effect-web/</span> <span class="link-card-url">https://goworkship.com/magazine/liquid-effect-web/</span> </div> </a> </div> <div class="link-card"> <a href="https://goworkship.com/magazine/glsl-shader-effect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://goworkship.com/magazine/glsl-shader-effect/" alt="https://goworkship.com/magazine/glsl-shader-effect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://goworkship.com/magazine/glsl-shader-effect/</span> <span class="link-card-url">https://goworkship.com/magazine/glsl-shader-effect/</span> </div> </a> </div> <h3 id="svgアニメーション">SVGアニメーション </h3> <div class="link-card"> <a href="https://b-risk.jp/blog/2017/06/svg-animation/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://b-risk.jp/blog/2017/06/svg-animation/" alt="https://b-risk.jp/blog/2017/06/svg-animation/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://b-risk.jp/blog/2017/06/svg-animation/</span> <span class="link-card-url">https://b-risk.jp/blog/2017/06/svg-animation/</span> </div> </a> </div> <h3 id="cssでマスクやアニメーションの参考">CSSでマスクやアニメーションの参考 </h3> <div class="link-card"> <a href="https://ics.media/entry/210701/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ics.media/entry/210701/" alt="https://ics.media/entry/210701/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ics.media/entry/210701/</span> <span class="link-card-url">https://ics.media/entry/210701/</span> </div> </a> </div> <h3 id="svgのストライプなどのパターンを作るサイト">SVGのストライプなどのパターンを作るサイト </h3> <div class="link-card"> <a href="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" alt="https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> <span class="link-card-url">https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration</span> </div> </a> </div> <div class="link-card"> <a href="https://svg-pattern-maker.netlify.app/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://svg-pattern-maker.netlify.app/" alt="https://svg-pattern-maker.netlify.app/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://svg-pattern-maker.netlify.app/</span> <span class="link-card-url">https://svg-pattern-maker.netlify.app/</span> </div> </a> </div> <div class="link-card"> <a href="https://patterns.helloyes.dev/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://patterns.helloyes.dev/" alt="https://patterns.helloyes.dev/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://patterns.helloyes.dev/</span> <span class="link-card-url">https://patterns.helloyes.dev/</span> </div> </a> </div>