这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

svg-waves波浪形背景设计设计神器
最美UI小编收集整理的这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!教程,供你快速学习设计工具

这几年看过一些波浪状、具有弧度的图形设计,可能运用于网页、应用程序等,这些图案可以利用生成器制作,像是之前介绍过的 Svg Wave 能在浏览器上建立出符合自己需求的波浪图,包括波浪类型、波峰数量、层数、高度、颜色密度等等,有些还能搭配上渐变色效果,如果要寻找波浪图的话就不需以绘图软件自行绘制:

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

本文要介绍的「SVG Waves」是一个免费的 SVG 波浪图生成器,来自加拿大一位 12 岁年轻开发者,交互式的操作界面让使用者以拖拉方式设计波浪,为波浪自定义颜色、背景色或选择喜爱的波浪样式。

SVG Waves 有好几个可自定义选项,像是调整左右波峰高度、前景色、背景色、曲线的曲度,调整时会实时反映在网页上,点选输出 SVG 格式的程序代码,包括 SVG、CSS 原始码和反向或翻转选项,就能快速将图案导入你的网页或文件中。

SVG Waves

网站链接:httPS://www.svgwaves.io/

使用教学

开启 SVG Waves 网站后,波浪中间有个编号 1 的按钮,点选调整可拖曳出波浪的形状和曲度,当然你也可以维持默认值。

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

如果你想要增加更多波峰,点选右侧「+」加入更多数字,就能以相同方式调整。

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

下方的设定选项左右颜色调整前景和背景色。

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

左右两条设定轴调整波峰高度,中间选项选择波浪曲线或是直线样式,可调整曲度。

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

点选下方按钮会出现「Export Wave」画面,将 SVG 原始码、CSS 原始码分别复制就能呈现出你在网页里设定的波浪效果。最底下还有选项可以将波浪进行反向或翻转。

这位12岁少年开发的免费网站,能帮你快速生成波浪形背景!

值得一试的三个理由:

  • SVG Waves 免费的 SVG 波浪图产生器,以拖拽方式设计波浪
  • 自定义颜色、背景色、波浪样式和波峰高度数量
  • 输出 SVG 和 CSS 原始码

如果觉得最美UI所整理的设计内容对你有所帮助,欢迎将最美UI网站推荐给身边设计好友。

本设计资源来源于网友网络收集整理提供,主要用于学习设计之用,请勿直接用于商业化设计。

猜你在找的设计工具


Fontworks和谷歌合作啦!免费开放8款开放日本字体下载
Fontworks Inc.(フォントワークス株式会社)是一家成立于 1993 年的日本字体公司,旗下有知名的筑紫系列、UD 字体系列和 Klee(クレー)字体,经常出现在广告的标题,看起来很有气质,筑紫系列和 Klee 也被内建于
设计师必备的12个APP,你有几个?
大家好,我是小凹,我又来分享干货了。 大家平时手机APP中有多少是跟提升和学习有关的?自己碎片化的时间都用来做什么呢?是否在微博、微信、淘宝、抖音之间游走?在这些APP里获得即时的快乐后,又很空虚?
想录制屏幕?这个谷歌扩展插就可以满足你!
有时候会需要录制计算机屏幕画面,可能是介绍产品、操作教学或是制作课程,也会搭配摄影机和麦克风进行讲解,就要寻找一款适合自己的屏幕录像工具。现在有不少浏览器扩充功能就能做到这些事,而且操作上很简便。
设计圈超火的3个Sketch插件,让你效率逆天(已打包)
不知道大家日常有没有使用插件的习惯,反正我是经常使用,为什么?因为效率更高了,做图更快了。今天给大家推荐 3 个我常用的 Sketch 插件,它们真的很实用,而且我身边很多设计师也在使用。
为什么我10秒就能做出漂亮的背景图?有这个神器你也行!
前言 我相信大家肯定有遇到过,时间短,还需要一张漂亮的背景图,这肯定是弄不出来的呀,那么办?今天就给大家带来一个免费生成背景的神器。