<svg width="100%" height="100%" viewBox="0 0 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>
<!-- <svg data-src="boy-land.svg" width="200" height="100"></svg> -->
<div class="boy-land">
</div>
html, body {
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #012;
}
.boy-land {
		width: 100%;
		height: 200px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
		background: url(http://7xipdd.com1.z0.glb.clouddn.com/boy-land.svg) center center no-repeat;
	}
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.3));
		star.setAttribute("transform", "translate(" + random(-1000, 1000) + "," + random(-500, 500) + ") " + "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.