SVG绘制星空效果

Easter79
• 阅读 483

主要代码:
代码详见GitHub:https://github.com/toly1994328/svg-night:

SVG绘制星空效果

svg星空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: #001122;
        line-height: 0;
        font-size: 0;
    }
</style>
<body>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="main-svg"
     viewBox="-400 -300 800 600"
     preserveAspectRatio="xMidYMid slice">
    <defs>
        <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"></polygon>
    </defs>
    <g id="real">
        <g id="star-group"></g>
        <g id="tower-group" transform="translate(250,0)">
            <defs>
                <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0" stop-color="#999"></stop>
                    <stop offset="1" stop-color="#333"></stop>
                </linearGradient>
            </defs>

            <defs>
                <radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
                    <stop offset="0" stop-color="rgba(255,255,255,0.8)"></stop>
                    <stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
                </radialGradient>
            </defs>

            <clipPath id="light-clip">
                <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,255,255,0.6)">
                    <animateTransform
                            attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="0"
                            to="360"
                            dur="10s"
                            repeatCount="indefinite">
                    </animateTransform>
                </polygon>
                <circle cx="0" cy="0" r="2"></circle>
            </clipPath>

            <polygon points="0 0 5 50 -5 50" fill="url(#tower)">
            </polygon>
            <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-clip)"></ellipse>


        </g>
        <g id="moon-group" transform="translate(0,-50)">
            <mask id="mask">
                <circle cx="-250" cy="-50" r="70" fill="white"></circle>
                <circle cx="-220" cy="-80" r="70" fill="black"></circle>
            </mask>
            <circle cx="-250" cy="-50" r="70" fill="#ff0" mask="url(#mask)"></circle>
        </g>
    </g>

    <g id="ref" transform=" translate(0,50)" mask="url(#ref-mask)">
        <defs>

            <linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="rgba(255,255,255,.3)"></stop>
                <stop offset="0.5" stop-color="rgba(255,255,255,0)"></stop>
            </linearGradient>
            <mask id="ref-mask">
                <rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
            </mask>
        </defs>
        <use xlink:href="#real" transform="scale(1,-1) translate(0,-50)"></use>
    </g>
</svg>

</body>
<script src="jquery-3.3.1.js"></script>
<script src="$utils.js"></script>
<script>
    var starCount = 1000;
    let $star_g = $('#star-group');

    renderStar();

    function renderStar() {
        for (let i = 0; i < starCount; i++) {
            var $use = $.addSVGel('use');
            $use[0].setAttributeNS($.XLINK_NS(), 'xlink:href', '#star');
            $use.attrSVG({
                t: {x: $.range([-400, 400]), y: $.range([-300, 50])},
                sca: $.range([0.2, 0.3]),
                rot: $.range([0, 360]),
                op: $.range([0.2, 0.5])
            });
            $star_g.append($use);
        }
    }

</script>
</html>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数:59593
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法参考文章:(1)Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.codeprj.com%2Fblo
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
3年前
SVG绘制星空效果
主要代码:代码详见GitHub:https://github.com/toly1994328/svgnight:(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2Ftoly1994328%2Fsvgnight)!9414344fe146c
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k