<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="900px">
        <defs>
            <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <path stroke="#f0f0f0" fill="none" d="M0,0H20V20"></path>
            </pattern>
        </defs>
        <rect width="1200" height="1000" fill="url(#grid)"></rect>
        <text id="sintext" x="100" y="160" style="font-size: 14px;font-family:'Arial'"></text>
    </svg>
<script>
    var NS = 'http://www.w3.org/2000/svg';
    var text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var n = text.length;
    var x = [];
    var y = null;
    var i = n;
    var s = 100;
    var w = 0.02;
    var t = 0;

    while(i--) {
        x.push(10);
        var tspan = document.createElementNS(NS,'tspan');
        tspan.textContent = text[n - i - 1];
        sintext.appendChild(tspan);
        var h = Math.round(360/26*i);    //色环360度放到26个字母上，i当前字母
        tspan.setAttribute('fill','hsl('+h+',100%,80%)');
    };
    function arrange(t){
        y = [];
        var ly = 0,cy;
        for (i=0;i<n;++i){
            cy = -s * Math.sin(w * i * 20 + t);
            y.push(cy-ly);
            ly = cy;
        }
        console.table(y);
    }
    function render(){
        sintext.setAttribute('dx', x.join(' '));
        sintext.setAttribute('dy', y.join(' '));
    }
    function frame(){
        t += 0.01;
        arrange(t);
        render();
        requestAnimationFrame(frame);
    }
   frame();
</script>
</body>
</html>

SVG彩虹字的更多相关文章

  1. Week2 Team Homework: 必应输入法的软件分析和用户需求调查

    一.选题和目标人群的确定 4月8日,微软宣布推出首款整合搜索的中文云输入法“必应Bing输入法”,其前身是“英库拼音输入法”.微软宣称,该输入法界面干净,无广告.无插件,即使是在性能相对不高的电脑上, ...

  2. CSS3立体文字最佳实践

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,当中3d文字效果最为流行,限于篇幅只展示了其3D ...

  3. Bash - 趣味Shell

    好消息:本人博客已开通.很多其它博客请进 http://swplzj.github.io 今天抽闲玩了一下Shell.发现几个比較有意思的.记录一下. 终端彩虹字:lolcat 图形化文字:figle ...

  4. 基于HTML5 SVG炫酷文字爆炸特效

    这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...

  5. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  6. ttf,eot,woff,svg,字体格式介绍及使用方法

    而由于网页中使用的字体类型,也是各浏览器对字体类型有不同的支持规格. 字体格式类型主要有几个大分类:TrueType.Embedded Open Type .OpenType.WOFF .SVG. T ...

  7. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  8. SVG DOM常用属性和方法介绍

    将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...

  9. Flex 加载 wmf，svg

    最近做gis系统发现要在flex加载wmf图片.我记得flash的loader只能是png,gis,jpg.wmf格式居然是window出的,flash居然不支持我也是醉了,没办法,只能后台转格式,首 ...

随机推荐

  1. 【中途相遇+二进制】【NEERC 2003】Jurassic Remains

    例题25  侏罗纪(Jurassic Remains, NEERC 2003, LA 2965) 给定n个大写字母组成的字符串.选择尽量多的串,使得每个大写字母都能出现偶数次. [输入格式] 输入包含 ...

  2. linux上大量tcp端口处于TIME_WAIT的问题

    今天发现网站突然无法访问,登陆webserver已经无法连接mysql,转战mysql一看,发现竟然有三千多个TIME_WAIT连接,擦,被SYN攻击了?百度&&google,发现通过 ...

  3. Excel中将时间格式转化成时间戳格式

    时间戳转成正常日期的公式:C1=(A1+8*3600)/86400+70*365+19其中A1表示当时的1249488000时间戳数值其中C1就是所需的日期格式,C1单元格属性改成日期格式就可以了.正 ...

  4. javascript模式——Flyweight

    Flyweight是一种共享数据内存的模式. Flyweight模式是将一些公有属性从个人中剔除,放在共享的对象当中. 下面以一个项目实例,通过不断的改进,以显示Flyweight模式的优点. 现在我 ...

  5. 反射操作辅助类ReflectionUtil

    这篇文章的目的是介绍这样一种方式,就是在写一个函数的时候,传递的参数是object类型的,在这个函数里面想访问这个参数对象的某一属性值,我们知道这个属性值的name,但是一般情况下,object对象是 ...

  6. JS获取request字符串

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  7. 关于ASP.NET 中站点地图sitemap 的使用

    在ASP.NET  MVC 如此火热的时期,我竟然不适时宜的谈起ASP.NET ,恐怕会引来一阵嘲笑.最为无趣的是,讲解的竟然还是其中的一个控件.oh~~  my god!my out! ^_^ Si ...

  8. 03-树2. Tree Traversals Again (25)

    03-树2. Tree Traversals Again (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue ...

  9. Sql Server专题一：索引（下）

    首先这次的内容是全文索引,跟前面讲的其实没有多大关系 两种索引的功能和结构都是不同的,普通索引的结构主要以B+树和哈希索引为主,用于实现对字段中数据的精确查找,比如查找某个字段值等于给定值的记录,A= ...

  10. Arduino红外遥控系列教程2013——红外转码

    教程三:红外转码教程——用电视遥控器取代机顶盒遥控器 前言前段时间看到了使用红外遥控的X-Bot机器人[链接],感觉很有意思.最近开始玩Arduino与红外,一方面打算将来用于BOXZ的之间的通讯控制 ...