SVG drawing (2) -- rendering a sky full of stars_html/css_WEB-ITnose

When I see some cool animations, I always want to realize it, but I have no choice but to have a little less code in my belly, so I have to do it without realizing it. My big round eyes are full of The desire for new things.

To embed animations in web pages, Falsh, Java Applet and Microsoft's SilverLight were popular in the past, but they had shortcomings such as web page security, compatibility, difficulty in operation and file size. Many web developers love and hate it. Gif is still a good choice, but unfortunately you cannot use DOM to control its elements. Since the advent of SVG, HTML5 and CSS3, the implementation of some simple flat animations has become convenient and simple. Although they are still not completely satisfactory in some aspects such as compatibility and operability, they are enough to make web developers excited. , so ideas such as "graceful degradation" and "progressive enhancement" became popular. In terms of Web drawing, WebGL is relatively cool. It can render cool three-dimensional animations on the page, but its native interface has a steep learning curve, and WebGL developers need a certain graphics foundation, and the entry barrier is high. , as a result, some frameworks that encapsulate the WebGL native interface have emerged one after another, the most famous of which should be three.js. This article is going to use SVG and JavaScript to make a cool DEMO, so that the browser can automatically render a sky full of stars. (Don’t ask me that nothing is loaded in IE8 and below browsers. This is because SVG is only compatible with IE9 and above and other mainstream browsers. However, this does not stop the charm of SVG~)

This is what we want the effect to be made.


1. First create an SVG canvas

<svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRation="xMinYMid slice"><!-- 绘制星星原型 --><defs><polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon></defs><!-- 装载满天星辰 --><g id="star-group"></g></svg>

Here, we draw a star and create it with a polygon, with the path points="0 - 10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2". We plan to use the use attribute to copy many copies of this star element and place it in . This can be achieved using a JavaScript loop.
In CSS, we first draw a deep blue sky, and we want the page to be full screen without scroll bars. The CSS code is as follows:

html, body {margin: 0; padding: 0; width: 100%; height: 100%; background: #012; font-size: 0; line-height: 0;}

2. Write JavaScript code
Directly enter the code:

window.onload=function () {// 页面加载完毕后，执行满天星辰的渲染rederStar();}// SVG元素的命名空间var svgNS = "http://www.w3.org/2000/svg";var XLINK_NS = "http://www.w3.org/1999/xlink";// 将use属性封装成函数，以便调用function use(origin) {var _use = document.createElementNS(svgNS, "use");_use.setAttributeNS(XLINK_NS, "xlink:href", "#" + origin.id);return _use;}// 创建任意两个数之间的随机数function random(min, max) {return min + (max - min) * Math.random();}// 绘制满天星星function rederStar() {// 获取星星原型和装载满天星星的容器star-groupvar starRef = document.getElementById("star");var starGroup = document.getElementById("star-group");// 星星的总数量var starCount = 500;// 循环，画出 starCount 个星星for(var i = 1; i < starCount; i++) {// star引用starRef原型var star;star = use(starRef);// 让星星的透明度、位置和大小随机变化star.setAttribute("opacity", random(0.1, 0.4));star.setAttribute("transform", "translate(" + random(-1000, 1000) + "," + random(-400, 400) + ") " + "scale(" + random(0.1, 0.6) + ")");// 将绘制好星星置入starGroup的DOM子元素中starGroup.appendChild(star);}}

See the Pen &amp ;amp;amp;amp;amp;lt;a href="http://codepen.io/dengzhirong/pen/ZGKKXd/" data-ke-src="http://codepen.io/dengzhirong/pen/ZGKKXd /">ZGKKXd< /a> by dengzhirong (& lt;a href="http://codepen.io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong"&amp ;amp;amp;gt;@dengzhirong</a&amp ;amp;amp;gt;) on <a href="http://codepen.io" data-ke-src ="http://codepen.io">CodePen& amp;amp;amp;lt;/a>.
Well, it is worth noting that, between two numbers Random numbers generally use this method: min (max - min) * Math.random().
To dynamically create SVG elements, you need to add the namespace http://www.w3.org/2000/svg; to the xlink link attribute of dynamically created SVG elements, you also need to add the namespace http://www.w3 .org/1999/xlink.

Areas worthy of improvement are:
1. Here, 500 DOM elements are inserted into HTML. However, every change of DOM elements will cause a significant decrease in page loading speed, which needs to be optimized. You can consider using creatDocumentFragment, or use a string to store the newly created DOM text, and then insert it into HTML at once.
2. The drawing range of the constellation has a greater impact on the width and height of the SVG and the value of the viewBox, and the coupling degree is slightly higher. (I hope passing experts can give me some pointers~)

Here is the Demo.(2KB)

3. Let’s do something fun
The night sky with only stars is a bit monotonous. We can consider adding some literary and artistic painting elements.

I originally wanted to use AI to draw something myself, but my AI got convulsed, so I took some SVG nude pictures from an unknown person to use. Modify the source code and add some animation effects of wind blowing.

Here is the SVG.(5KB)
Well, generally speaking, simple graphics can be typed directly using SVG code. But for some complex SVG paths, it is recommended to use AI or SVG-Edit to draw and save it as svg format, then extract the path nodes and put them into the SVG file we want to edit, and then modify the fill attributes or add animation effects. .
Insert SVG file in HTML. There are several methods, please refer to http://www.w3school.com.cn/svg/svg_inhtml.asp. I am more accustomed to inserting SVG images as background images.
Finally, modify the style and you’re done.
The effect is as follows:

See the Pen <a href="http://codepen.io/dengzhirong/pen/YXVVEV /" data-ke-src="http://codepen.io/dengzhirong/pen/YXVVEV/">YXVVEV& amp;amp;amp;amp;lt;/a> by dengzhirong (< a href="http://codepen.io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong">@ dengzhirong</a>) on &amp ;amp;amp;lt;a href="http://codepen.io" data-ke-src="http://codepen.io"& gt;CodePen</a>.

Here is the Demo .(7KB)