SVG plotting (2) -- rendering the sky and stars and svg the sky

SVG plotting (2) -- rendering the sky and stars and svg the sky

Seeing some cool animations, there is always a kind of hope to implement it, but the amount of code in the box is a little less, so I don't have to be aware of it. The big round eyes are full of desires for new things.

Embedded animation in webpages, Falsh, Java Applet, and Microsoft SilverLight were popular in the past, however, many Web developers love and hate their website security, compatibility, operability, file size, and other defects. Gif is still a good choice, but unfortunately it cannot be manipulated by DOM. With SVG, HTML5, and CSS3, some simple implementations of plane animations have become convenient and simple. Although they are still not fully satisfied in some aspects, such as compatibility and operability, but it is enough to make Web developers excited, so the idea of "elegant degradation" and "progressive enhancement" is very popular. In terms of Web graphics, WebGL is another NB-developed product. It can render Cool 3D animated images on pages, but its Native Interface learning curve is steep, in addition, WebGL developers need a certain degree of graphics, and the entry threshold is high. Therefore, some frameworks that encapsulate the native WebGL interfaces emerge one after another. The most famous one is three. js. This article is going to make a cool DEMO with SVG and JavaScript, so that the browser can automatically render the sky and stars. (Do not ask me if all the browsers in IE8 and below are loaded. This is because SVG can only be compatible with IE9 and other mainstream browsers. However, this does not block the charm of SVG ~)

This is what we want to do.


1. Create an SVG canvas first

<Svg width = "100%" height = "100%" viewBox = "-400-300 800 600" preserveAspectRation = "xMinYMid slice"> <! -- Draw a star prototype --> <defs> <polygon id = "star" points = "0-10 2-2 10 0 2 0 10-2 2-10 0-2- 2 "fill =" white "> </polygon> </defs> <! -- Load stars --> <g id = "star-group"> </g> </svg>

Here, we draw a star and create it with a polygon, the path is points = "0-10 2-2 10 0 2 0 10-2 2 2-10 0-2-2 ". We plan to use the use attribute to copy many copies of the star element and place it in <g id = "star-group"> </g>. This can be achieved through JavaScript loops.
In CSS, we first draw a deep blue sky, and want the page to be full screen without a scroll bar. 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. Compile JavaScript code
Directly run the Code:

Window. onload = function () {// After the page is loaded, execute the rendering rederStar ();} // The namespace var svgNS = "http://www.w3.org/2000/svg" for SVG elements "; var XLINK_NS = "http://www.w3.org/1999/xlink"; // encapsulate the use attribute as a function to call function use (origin) {var _ use = document. createElementNS (svgNS, "use"); _ use. setAttributeNS (XLINK_NS, "xlink: href", "#" + origin. id); return _ use;} // create a random number function random (min, max) {return min + (max-min) * Math. random ();} // draw the star function rederStar () {// obtain the star prototype and container star-groupvar starRef = document. getElementById ("star"); var starGroup = document. getElementById ("star-group"); // The total number of stars var starCount = 500; // loop, draw the starCount stars for (var I = 1; I <starCount; I ++) {// star references the starRef prototype var star; star = use (starRef); // randomly changes the transparency, position, and size of the stars. setAttribute ("opacity", random (0.1, 0.4); star. setAttribute ("transform", "translate (" + random (-1000,100 0) + "," + random (-400,400) + ") "+" scale ("+ random (0.1, 0.6) +"); // place the stars in starGroup's DOM sub-element. appendChild (star );}}

See the Pen & amp; lt; a href = "http://codepen.io/dengzhirong/pen/ZGKKXd/" data-ke-src = "http://codepen.io/dengzhirong/pen/ZGKKXd/" & amp; gt; ZGKKXd & amp; lt;/a & amp; amp; gt; by dengzhirong (& amp; lt; a href = "http://codepen.io/dengzhirong" data-ke-src = "http://codepen.io/dengzhirong" & amp; gt; @ dengzhirong & amp; lt;/a & amp; amp; gt;) on & amp; amp; lt; a href = "http://codepen.io" data-ke-src = "http://codepen.io" & amp; amp; gt; CodePen & amp; lt;/a & amp; amp; gt ;.
Yes, it is worth noting that this method is generally used to obtain a random number between two numbers: min + (max-min) * Math. random ().
To dynamically create SVG elements, add the namespace "alias.

The following are perfect examples:
1. 500 DOM elements are inserted into HTML. However, every DOM element change may cause a great reduction in page loading speed, which needs to be optimized. You can use creatDocumentFragment or use a string to store the new DOM text and insert it into HTML at a time.
2. The drawing range of the Star Group has a great influence on the width and height of SVG and the value of viewBox, and the coupling degree is slightly higher. (Hope the passing experts can give me some advice ~)

Here is the Demo. (2 KB)

3. Have fun
Only the stars in the night sky are monotonous. We can consider adding some elements of literature and art.

I wanted to use AI to draw something or something, but I tried to use AI, so I used SVG bare images of some big cows. Modify the source code to add some windswept animation effects.

Here is the SVG. (5KB)
In general, simple graphics can be directly typed out using SVG code. However, for some complex SVG paths, we recommend that you use AI or SVG-Edit to plot and save them as svg, and then extract the path node into the SVG file we want to Edit, then modify the fill attribute or add an animation effect.
Insert an SVG file into HTML. There are several methods available, refer to http://www.w3school.com.cn/svg/svg_inhtml.asp. I prefer to insert SVG images as background images.
Finally, you can modify the style.
The effect is as follows:

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

Here is the Demo. (7KB)