前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

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

作者头像
Jeff
发布2018-01-22 10:31:27
1.9K0
发布2018-01-22 10:31:27
举报
文章被收录于专栏:DeveWorkDeveWork

在升级了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主题主页的源代码。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015/02/21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 所需元素介绍
    • d3.js
      • Trianglify
      • 使用方法
      相关产品与服务
      数据库
      云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档