)
Svg Wave - 綺麗な波のデザインを描く
自然の動きを表現するのはとても難しいです。コンピュータは直線を描いたり、繰り返す動きを描くのは得意ですが、滑らかな曲線を自然に描くのは容易ではありません。しかし自然物のデザインはそうした繰り返しではないところに魅力があります。 今回紹介するSvg WaveはSVGで波を描けるソフトウェアになります。 Svg Waveの使い方 メイン画面です。 波の高さや数を変更できます。 さらにカラーリングを変更することも。 ダークモードもあります。 Svg Waveを使うことで滑らかな波の動きを作成できます。できあがったデザインはSVGまたはPNGで出力できます。Webページの背景に適用したり、スライドに使ってみたりするのも面白そうです。こうした自然物のデザインを手軽に作れるのは面白いですし、便利です。 Svg WaveはJavaScript製のオープンソース・ソフトウェア（MIT License）です
コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート
ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に変更できます。
さまざまなタイプのSVGの背景を手軽に作れるWebアプリ・「BGJar」 - かちびと.net
BGJarはさまざまなタイプのSVGの背景を手軽に作れるWebアプリです。既に用意されている雛型を元に好みの形にカスタマイズしてコードをコピーしたりDL出来る、というもの。 シンプルなものやアニメーションするもの、波のような形状など、どこかで見たことがあるような背景を直感的な操作で作成する事が出来ます。 編集できる要素はサイズ、背景やオブジェクトの色やグラデーションなど。オブジェクトの編集等は雛型によるみたいです。 配布されるコードのライセンスはCC BY 4.0との事なのでクレジット表記すれば商用でも利用可能にはなっています。 BGJar
SVGとanimationで滑らかな動きの波っぽいやつ
Result ヒーローイメージに目が疲れない程度のアニメーションフレームを用意して注視を促し、訴求力向上を期待する的なやつ。向上するかは分かりません ユーザーにストレスないものが望ましいという事で癒されそうな波をSVGとCSSだけで表現するサンプルです まぁこれでもストレス感じる人がいないわけではないでしょうけども。 css.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration:
[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス
a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.
![[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d41a2b3d32f975af021789ebc336e7dd920a95d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201804%2F2018101603.gif)
CSSスニペット：テキストリンクの下線をマウスホバーで波のようにアニメーションさせる | かちびと.net
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css:root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;ch
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebサイトやスマホアプリのUIに！ 抽象的で美しいSVGの背景デザインを簡単に作成できる無料ツール -Mossaik.app
Get Waves – Create SVG waves for your next design
SVGによる波状のラインをランダムで作成できるジェネレーター・「Get Waves」