<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>
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #012;
	font-size: 0;
	line-height: 0;
}
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-group
	var 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);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.