Adobe的Web平台团队正在实施一些新的图形特性，并在一个网页中通过讲故事的形式展示出来，你可以直接在thegraphicalweb.com中观看。！！请使用支持HTML5的浏览器观看。！！首推谷歌浏览器，当前稳定版支持70%以上的特性。IE10支持57%的特性。

该项目使用到的技术主要包括：

1.  SVG（Scalable Vector Graphics，可缩放矢量图形）

由于SVG的扩展性以及易于与CSS/ JavaScript操作特性，该技术被贯穿使用在thegraphicalweb.com网站中。其中动态SVG创建和动画效果，基于一个流行的SVG数据可视化库D3.js。D3在该网站中主要用于在背景中生成群山的形状。

2.  CSS3和SASS

在网站中，主要使用CSS Animation和Transforms属性来实现闪烁和移动效果，这些属性被应用到内联SVG的路径和元素上。SASS是构建于CSS之上的元语言，扩展了CSS3，增加了规则、变量、混入、选择器、继承等特性。该网站主要使用Sass来生成良好格式化的CSS代码。

3.  2D Canvas

在网站中，使用Processing.js来实现一个粒子系统，通过切换点阵的组合形式，来呈现一个说话的人脸效果。

4.  着色器

该网站使用了一个自定义的GLSL着色器，来实现WebGL场景中发光的背景效果。通过CSS Filter Lab这个工具，编写自定义着色器的难度大大降低。

此外，该网站还使用3D Transforms来实现场景旋转、缩放效果，使用HTML5 Audio来播放音频。

该网站的源码托管在Github，感兴趣的Web开发者可以下载学习。

演示网站：thegraphicalweb.com

项目源码：https://github.com/adobe/graphicalweb-keynote