【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新,访问主页你会看到首屏的Low-Poly 背景(每次刷新都不同),这个效果就是利用了d3.js 与Trianglify 制作的。

所需元素介绍

d3.js

维基百科:D3.js(D3或Data-Driven Documents)是一个用动态图形显示数据的JavaScript库,一个数据可视化的工具。兼容W3C标准,并且利用广泛实现的SVG,JavaScript,和CSS标准。

Trianglify

Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景。它的灵感来自于 Btmills 的 Geopattern,并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染。它还包括 colorbrewer 调色板库,让您快速启动和运行。

Github主页 演示站点

使用方法

导入相关文件:

<script src="http://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script>

绑定元素,如body标签:

var t = new Trianglify(); var pattern = t.generate(document.body.clientWidth, document.body.clientHeight); document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);

更多例子可以查看Github主页或者DeveMobile主题主页的源代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

12120
来自专栏移动端开发

这个断点可以帮你检查布局约束

前言:     在现在iOS布局中,估计有很多很多开发者会使用到 Masonry 或者用到 SDAutoLayout 或者Storyboard或者还有Xib等等...

22890
来自专栏h5

支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

68620
来自专栏向治洪

React 介绍及实践教程

概述 React 是近期非常热门的一个前端开发框架,其本身作为 MVC 中的 View 层可以用来构建 UI,也可以以插件的形式应用到 Web 应用非 UI 部...

20790
来自专栏知晓程序

一键搞定!小程序调用日历本该如此简单

28640
来自专栏IMWeb前端团队

jQuery日历价格、库存设置Web组件2,前后台适用,可自定义字段及颜色风格

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 calendar-price-jquery 基于Jquer...

31450
来自专栏jiajia_deng

react-router 环境使用锚点的方法

26020
来自专栏编程坑太多

「小程序JAVA实战」 小程序远程调试(九)

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

13510
来自专栏应兆康的专栏

Selenium放弃PhantomJS改用Chrome headless

现在还可以通过使用Chrome或Firefox的headless方式来进行无界面的浏览器模拟。

43930
来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

10210

扫码关注云+社区

领取腾讯云代金券