JS酷炫红色LED数字时钟

发布时间：2017-12-27, 10:55:21 分类：HTML | 编辑 off 网址 | 辅助

正文 6372字数 237,728阅读

<style>.clock {
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  width:900px;
  margin-left:-450px;
  margin-top:-100px;
  text-align:center;
}

.digit {
  width:120px;
  height:200px;
  margin:0 5px;
  position:relative;
  display:inline-block;
}

.digit .segment {
  background:#c00;
  border-radius:5px;
  position:absolute;
  opacity:0.15;
  transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
  -ms-transition:opacity 0.2s;
  -moz-transition:opacity 0.2s;
  -o-transition:opacity 0.2s;
}

.digit .segment.on, .separator {
  opacity:1;
  box-shadow:0 0 50px rgba(255,0,0,0.7);
  transition:opacity 0s;
  -webkit-transition:opacity 0s;
  -ms-transition:opacity 0s;
  -moz-transition:opacity 0s;
  -o-transition:opacity 0s;
}

.separator {
  width:20px;
  height:20px;
  background:#c00;
  border-radius:50%;
  display:inline-block;
  position:relative;
  top:-90px;
}

.digit .segment:nth-child(1) {
  top:10px;
  left:20px;
  right:20px;
  height:10px;
}

.digit .segment:nth-child(2) {
  top:20px;
  right:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}

.digit .segment:nth-child(3) {
  bottom:20px;
  right:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}

.digit .segment:nth-child(4) {
  bottom:10px;
  right:20px;
  height:10px;
  left:20px;
}

.digit .segment:nth-child(5) {
  bottom:20px;
  left:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}

.digit .segment:nth-child(6) {
  top:20px;
  left:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}

.digit .segment:nth-child(7) {
  bottom:95px;
  bottom:calc(50% - 5px);
  right:20px;
  left:20px;
  height:10px;
}
</style>
	
<div class="clock">
	<div class="digit hours">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>

	<div class="digit hours">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>

	<div class="separator"></div>
	
	<div class="digit minutes">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>

	<div class="digit minutes">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>

	<div class="separator"></div>

	<div class="digit seconds">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>

	<div class="digit seconds">
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
		<div class="segment"></div>
	</div>
</div>

<script>var digitSegments = [
    [1,2,3,4,5,6],
    [2,3],
    [1,2,7,5,4],
    [1,2,7,3,4],
    [6,7,2,3],
    [1,6,7,3,4],
    [1,6,5,4,3,7],
    [1,2,3], 
    [1,2,3,4,5,6,7],
    [1,2,7,3,6]
]

document.addEventListener('DOMContentLoaded', function() {
  var _hours = document.querySelectorAll('.hours');
  var _minutes = document.querySelectorAll('.minutes');
  var _seconds = document.querySelectorAll('.seconds');
  
  setInterval(function() {
    var date = new Date();
    var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds();  
    
    setNumber(_hours[0], Math.floor(hours/10), 1);
    setNumber(_hours[1], hours%10, 1);

    setNumber(_minutes[0], Math.floor(minutes/10), 1);
    setNumber(_minutes[1], minutes%10, 1);

    setNumber(_seconds[0], Math.floor(seconds/10), 1);
    setNumber(_seconds[1], seconds%10, 1);
  }, 1000);
});

var setNumber = function(digit, number, on) {
  var segments = digit.querySelectorAll('.segment');
  var current = parseInt(digit.getAttribute('data-value'));

  // only switch if number has changed or wasn't set
  if (!isNaN(current) && current != number) {
    // unset previous number
    digitSegments[current].forEach(function(digitSegment, index) {
      setTimeout(function() {
        segments[digitSegment-1].classList.remove('on');
      }, index*45)
    });
  }
  
  if (isNaN(current) || current != number) {
    // set new number after
    setTimeout(function() {
      digitSegments[number].forEach(function(digitSegment, index) {
        setTimeout(function() {
          segments[digitSegment-1].classList.add('on');
        }, index*45)
      });
    }, 250);
    digit.setAttribute('data-value', number);
  }
}</script>

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 红色1 LED1 数字17 时钟4

有过 3 条评论 »

广西南宁市 2017-12-27, 11:02:59

Canvas火箭飞行动画特效

<style>
html { overflow: hidden; }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #333;
	background: #01374b;
}
</style>



<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/e1a69117e6aecb75c3395c448e18f25b"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/c2a59b97857e9d09aa1a7b115ae3c004"></script>
<script type="text/javascript" src="https://out.img.pan.lizhenqiu.com/06a8f1198a7210b3a891b79a4af9242e"></script>

<div id="container"></div>

<script type="text/javascript">
var OutlineShader = {

	uniforms: {
		offset: { type: 'f', value: 0.3 },
		color: { type: 'v3', value: new THREE.Color('#000000') },
		alpha: { type: 'f', value: 1.0 }
	},

	vertexShader: [

		"uniform float offset;",

		"void main() {",
		"  vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );",
		"  gl_Position = projectionMatrix * pos;",
		"}"

	].join('\n'),

	fragmentShader: [

		"uniform vec3 color;",
		"uniform float alpha;",

		"void main() {",
		"  gl_FragColor = vec4( color, alpha );",
		"}"

	].join('\n')

};

var container = document.getElementById( 'container' );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
renderer.domElement.style.cursor = 'pointer';

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 100000 );
camera.position.set( 0, -6, 3 );

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.y = 1;
controls.enableDamping = true;
controls.enabled = false;

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x01374b );
scene.fog = new THREE.Fog( scene.background, 10, 20 );

// lights
var aLight = new THREE.AmbientLight( 0x555555 );
scene.add( aLight );

var dLight1 = new THREE.DirectionalLight( 0xffffff, 0.4 );
dLight1.position.set( 0.7, 1, 1 );
scene.add( dLight1 );

// var dlh1 = new THREE.DirectionalLightHelper( dLight1, 0.5 );
// scene.add( dlh1 );

// var gh = new THREE.GridHelper( 2, 10, 0x000000, 0x808080 );
// scene.add( gh );

// -------------------------------------------

var rocketGroup = new THREE.Group();
scene.add( rocketGroup );

var rocket = new THREE.Group();
rocket.position.y = -1.5; // vertically center
rocketGroup.add( rocket );

// -------------------------------------------

// body

var points = [];

points.push( new THREE.Vector2( 0, 0 ) ); // bottom

for ( var i = 0; i < 11; i ++ ) {
	var point = new THREE.Vector2(
		Math.cos( i * 0.227 - 0.75 ) * 8,
		i * 4.0
	);

	points.push( point );
}

points.push( new THREE.Vector2( 0, 40 ) ); // tip

var rocketGeo = new THREE.LatheGeometry( points, 32 );

var rocketMat = new THREE.MeshToonMaterial({
	color: 0xcccccc,
	shininess: 1
});

var rocketOutlineMat = new THREE.ShaderMaterial({
	uniforms: THREE.UniformsUtils.clone( OutlineShader.uniforms ),
	vertexShader: OutlineShader.vertexShader,
	fragmentShader: OutlineShader.fragmentShader,
	side: THREE.BackSide,
});

var rocketObj = THREE.SceneUtils.createMultiMaterialObject(
	rocketGeo, [ rocketMat, rocketOutlineMat ]
);
rocketObj.scale.setScalar( 0.1 );
rocket.add( rocketObj );

// var wireframe = new THREE.WireframeGeometry( rocketGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// rocketObj.add( line );

// -------------------------------------------

// window

var portalGeo = new THREE.CylinderBufferGeometry( 0.26, 0.26, 1.6, 32 );
var portalMat = new THREE.MeshToonMaterial({ color: 0x90dcff });
var portalOutlineMat = rocketOutlineMat.clone();
portalOutlineMat.uniforms.offset.value = 0.03;
var portal = THREE.SceneUtils.createMultiMaterialObject(
	portalGeo, [ portalMat, portalOutlineMat ]
);
portal.position.y = 2;
portal.rotation.x = Math.PI / 2;
rocket.add( portal );

// ------------

var circle = new THREE.Shape();
circle.absarc( 0, 0, 3.5, 0, Math.PI * 2 );

var hole = new THREE.Path();
hole.absarc( 0, 0, 3, 0, Math.PI * 2 );
circle.holes.push( hole );

var tubeExtrudeSettings = {
	amount: 17,
	steps: 1,
	bevelEnabled: false
};
var tubeGeo = new THREE.ExtrudeGeometry( circle, tubeExtrudeSettings );
tubeGeo.computeVertexNormals();
tubeGeo.center();
var tubeMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1
});
var tubeOutlineMat = rocketOutlineMat.clone();
tubeOutlineMat.uniforms.offset.value = 0.2;
var tube = THREE.SceneUtils.createMultiMaterialObject(
	tubeGeo, [ tubeMat, tubeOutlineMat ]
);
tube.position.y = 2;
tube.scale.setScalar( 0.1 );
rocket.add( tube );

// var wireframe = new THREE.WireframeGeometry( tubeGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// tube.add( line );

// -------------------------------------------

// wing

var shape = new THREE.Shape();

shape.moveTo( 3, 0 );
shape.quadraticCurveTo( 25, -8, 15, -37 );
shape.quadraticCurveTo( 13, -21, 0, -20 );
shape.lineTo( 3, 0 );

var extrudeSettings = {
	steps: 1,
	amount: 4,
	bevelEnabled: true,
	bevelThickness: 2,
	bevelSize: 2,
	bevelSegments: 5
};

var wingGroup = new THREE.Group();
rocket.add( wingGroup );

var wingGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );
wingGeo.computeVertexNormals();
var wingMat = new THREE.MeshToonMaterial({
	color: 0xff0000,
	shininess: 1,
});
var wingOutlineMat = rocketOutlineMat.clone();
wingOutlineMat.uniforms.offset.value = 1;
var wing = THREE.SceneUtils.createMultiMaterialObject(
	wingGeo, [ wingMat, wingOutlineMat ]
);
wing.scale.setScalar( 0.03 );
wing.position.set( .6, 0.9, 0 );
wingGroup.add( wing );

// var wireframe = new THREE.WireframeGeometry( wingGeo );
// var line = new THREE.LineSegments( wireframe );
// line.material.color.setHex( 0x000000 );
// wing.add( line );

var wing2 = wingGroup.clone();
wing2.rotation.y = Math.PI;
rocket.add( wing2 );

var wing3 = wingGroup.clone();
wing3.rotation.y = Math.PI / 2;
rocket.add( wing3 );

var wing4 = wingGroup.clone();
wing4.rotation.y = - Math.PI / 2;
rocket.add( wing4 );

// -------------------------------------------

// fire and stars particles

// https://aerotwist.com/tutorials/creating-particles-with-three-js/
// https://aerotwist.com/static/tutorials/creating-particles-with-three-js/demo/
// downloads/paul-lewis-aerotwist/particles-r88

var Particles = function( options ) {

	var color = this.color = options.color || 0x333333;
	var size = this.size = options.size || 0.4;

	var pointCount = this.pointCount = options.pointCount || 40; // 1800
	var rangeV = this.rangeV = options.rangeV || 2; // 600
	var rangeH = this.rangeH = options.rangeH || 1;

	var speed = this.speed = this.speedTarget = options.speed || 0.0005;

	THREE.Group.call( this );

	// circle texture

	var canvas = document.createElement('canvas');
	canvas.width = canvas.height = 128;
	var ctx = canvas.getContext( '2d' );

	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.width / 3;

	ctx.beginPath();
	ctx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
	ctx.fillStyle = '#fff';
	ctx.fill();

	var texture = new THREE.Texture( canvas );
	texture.premultiplyAlpha = true;
	texture.needsUpdate = true;

	//

	var pointsGeo = new THREE.Geometry();
	var pointsMat = new THREE.PointsMaterial({
		color: color,
		size: size,
		map: texture,
		transparent: true,
		depthWrite: false
	});

	for (var p = 0; p < pointCount; p++) {

		var point = new THREE.Vector3(
			THREE.Math.randFloatSpread( rangeH ),
			THREE.Math.randFloatSpread( rangeV ),
			THREE.Math.randFloatSpread( rangeH )
		);

		point.velocity = new THREE.Vector3( 0, -Math.random() * speed * 100, 0);

		pointsGeo.vertices.push( point );
	}

	var points = this.points = new THREE.Points( pointsGeo, pointsMat );
	points.position.y = - rangeV / 2;
	points.sortParticles = true;

	this.add( points );

}

Particles.prototype = Object.create( THREE.Group.prototype );
Particles.prototype.constructor = Particles;

Particles.prototype.update = function(){
	// this.points.rotation.y -= 0.01; // 0.01

	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
			point.velocity.y = 0;
		}

		// update the velocity
		point.velocity.y -= Math.random() * this.speed; // .1

		// and the position
		point.add( point.velocity );
	}

	this.points.geometry.verticesNeedUpdate = true;
}

Particles.prototype.updateConstant = function(){
	var pCount = this.pointCount;
	while ( pCount-- ) {

		var point = this.points.geometry.vertices[pCount];

		// check if we need to reset
		if ( point.y < - this.rangeV / 2 ) {
			point.y = this.rangeV / 2;
		}

		point.y -= this.speed;
	}

	this.points.geometry.verticesNeedUpdate = true;
}

// orange
var fire = new Particles({
	color: 0xff5a00,
	size: 0.4,
	rangeH: 0.8,
	rangeV: 2.5,
	pointCount: 50 
});
rocket.add( fire );

// yellow
var fire2 = new Particles({
	color: 0xffc000,
	size: 0.6,
	rangeH: 0.5
});
rocket.add( fire2 );

// var box = new THREE.BoxHelper( fire.points );
// fire.add( box );

// -------------------------------------------

// stars

var stars = new Particles({
	color: 0xffffff,
	size: 0.6,
	rangeH: 20,
	rangeV: 20,
	pointCount: 400,
	size: 0.2,
	speed: 0.1
});

stars.points.position.y = 0;
scene.add( stars );

// -------------------------------------------

// input

//

var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
// var helper = new THREE.PlaneHelper( plane, 5, 0xffff00 );
// scene.add( helper );

var rocketTarget = new THREE.Vector3();

var cameraTarget = new THREE.Vector3();
cameraTarget.copy( camera.position );

var raycaster = new THREE.Raycaster();

//

var mouse = new THREE.Vector2();

// var targetSphere = new THREE.Mesh(
// 	new THREE.SphereBufferGeometry( 0.2 ),
// 	new THREE.MeshPhongMaterial({ color: 0x00ff00 })
// );

// scene.add( targetSphere );

function mousemove(e){
	mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;

	cameraTarget.x = - mouse.x * 1;
	cameraTarget.z = 3 + mouse.y * 1;

	raycaster.setFromCamera( mouse, camera );
	raycaster.ray.intersectPlane( plane, rocketTarget );
	// targetSphere.position.copy( rocketTarget );
}

function mousedown(e){

	TWEEN.removeAll();

	// rotation
	var dir = mouse.x < 0 ? -1 : 1;
	var tween = new TWEEN.Tween( rocket.rotation )
		.to( { y: dir * Math.PI }, 1000 )
		.easing( TWEEN.Easing.Quadratic.InOut )
		.start();

	// scale
	var tween = new TWEEN.Tween( rocketGroup.scale )
		.to( { y: 0.7 }, 300 )
		.easing( TWEEN.Easing.Cubic.Out )
		.onComplete(function(){
			
			var tween = new TWEEN.Tween( rocketGroup.scale )
				.to( { y: 1.3 }, 300 )
				.easing( TWEEN.Easing.Cubic.In )
				.onComplete(function(){

					var tween = new TWEEN.Tween( rocketGroup.scale )
						.to( { y: 1 }, 200 )
						.easing( TWEEN.Easing.Cubic.Out )
						.start();

				})
				.start();

		})
		.start();

	stars.speedTarget = 0.3;

	renderer.domElement.style.cursor = 'none';
}

function mouseup(e){
	stars.speedTarget = 0.1;
	renderer.domElement.style.cursor = 'pointer';
}

renderer.domElement.addEventListener('mousemove', mousemove, false);
renderer.domElement.addEventListener('mousedown', mousedown, false);
renderer.domElement.addEventListener('mouseup', mouseup, false);

// -------------------------------------------

window.addEventListener( 'resize', resize, false );

function resize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

var clock = new THREE.Clock();
var time = 0;
var angle = THREE.Math.degToRad( 3 );

loop();

function loop() {
	requestAnimationFrame( loop );
	TWEEN.update();
	controls.update();

	time += clock.getDelta();

	rocketGroup.rotation.y = Math.cos( time * 8 ) * angle;

	fire.update();
	fire2.update();

	stars.updateConstant();

	lerp(rocketGroup.position, 'y', rocketTarget.y);
	lerp(rocketGroup.position, 'x', rocketTarget.x);

	lerp(camera.position, 'x', cameraTarget.x);
	lerp(camera.position, 'z', cameraTarget.z);

	lerp(stars, 'speed', stars.speedTarget);

	renderer.render( scene, camera );
}

function lerp( object, prop, destination ) {
	if (object && object[prop] !== destination) {
		object[prop] += (destination - object[prop]) * 0.1;

		if (Math.abs(destination - object[prop]) < 0.01) {
			object[prop] = destination;
		}
	}
}
</script>

Run code

Cut to clipboard

reply | quote | #¹

广西南宁市 2017-12-27, 11:07:13

HTML5 SVG自行车行驶动画特效

<style>html {background-color: #78D89B;}
.container {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.st0{fill:#1E0F02;}
.st1{fill:none;}
.st2{fill:#23110D;}
.st3{fill:#FFFFFF;}
.st4{fill:#E14C00;}
.st5{fill:#807B7C;}
.st6{fill:#4D4A4A;}
.st7{fill:#6A1D02;}
.st8{fill:#6EC48C;}
.st9{fill:#64B380;}
.st10{fill:#807B7C;}
.st11{fill: none; stroke:none; stroke-miterlimit="10"}
.bg{fill:url(#pattern);}
</style>
<div class="container">
  <svg id="bike" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="750px"
  	height="500px" viewBox="0 0 750 500" style="enable-background:new 0 0 750 500;" xml:space="preserve">
<rect id="city" class="bg" width="750" height="500" x="0" y="0"/>
<g id="wheel">
	<path class="st0" id="anima_wheel_1" d="M234,222.25c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S280.53,222.25,234,222.25z M263.192,323.776l-13.949-11.086l18.36-1.271l41.305,10.665c-1.185,5.727-3.025,11.211-5.413,16.392
		L263.192,323.776z M303.081,339.39c-1.837,3.852-3.998,7.518-6.428,10.982l-30.986-24.628L303.081,339.39z M272.533,372.577
		c-4.94,2.887-10.222,5.253-15.787,6.984l-16.052-39.808l-1.095-17.785l13.229,12.793L272.533,372.577z M255.102,336.96
		l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L255.102,336.96z M255.779,379.836c-4.024,1.193-8.187,2.059-12.459,2.578
		l-2.432-39.506L255.779,379.836z M210.673,379.365c-5.549-1.775-10.821-4.167-15.739-7.094l18.832-38.545l12.485-12.714
		l-0.655,18.392L210.673,379.365z M225.484,342.562l-1.416,39.775c-4.266-0.553-8.425-1.443-12.441-2.669L225.484,342.562z
		 M194.072,371.758c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.237L194.072,371.758z M164.253,337.917
		c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.82L164.253,337.917z M201.502,324.302
		L170.99,349.87c-2.402-3.482-4.518-7.173-6.325-11.041L201.502,324.302z M157.5,306.5c0-5.785,0.663-11.411,1.88-16.828
		l42.474,5.999l15.95,7.944l-17.694,5.061l-42.601-1.843C157.508,306.721,157.5,306.611,157.5,306.5z M310.5,306.5
		c0,0.318-0.02,0.63-0.024,0.947l-42.783,2.963l-17.252-4.454l16.255-8.629l42.063-7.056C309.889,295.503,310.5,300.929,310.5,306.5
		z M229.058,294.881l-2.494-1.561l-4.258-15.332l9.216,13.683l-0.379,2.541C230.423,294.379,229.724,294.597,229.058,294.881z
		 M227.993,295.394c-0.251,0.136-0.49,0.29-0.73,0.442l-0.302-1.089L227.993,295.394z M223.501,299.491l-0.713-0.864l1.223,0.173
		C223.836,299.026,223.66,299.253,223.501,299.491z M222.951,300.396c-0.351,0.634-0.641,1.304-0.88,1.998l-2.842,0.813
		l-14.243-7.094l16.334,2.307L222.951,300.396z M221.741,303.529c-0.067,0.278-0.125,0.558-0.173,0.843l-1.011-0.504
		L221.741,303.529z M221.43,305.421c-0.03,0.357-0.055,0.715-0.055,1.079c0,0.372,0.024,0.738,0.056,1.102l-2.265,1.898
		l-15.896-0.688l15.862-4.536L221.43,305.421z M221.59,308.773c0.052,0.284,0.117,0.563,0.188,0.84l-1.131-0.049L221.59,308.773z
		 M228.129,317.672l-0.786,0.801l0.044-1.234C227.63,317.39,227.874,317.538,228.129,317.672z M232.349,292.9l0.689,1.023
		c-0.289,0.022-0.573,0.056-0.856,0.097L232.349,292.9z M246.6,305.995l1.099,0.284l-1.092,0.579
		c0.003-0.12,0.018-0.238,0.018-0.359C246.625,306.33,246.606,306.164,246.6,305.995z M246.519,304.942
		c-0.091-0.735-0.236-1.452-0.448-2.142l1.814-2.318l15.694-2.633l-14.572,7.735L246.519,304.942z M245.671,301.69
		c-0.109-0.265-0.235-0.52-0.362-0.776l1.115-0.187L245.671,301.69z M242.703,297.369c-0.207-0.197-0.415-0.394-0.635-0.577
		l0.934-0.619L242.703,297.369z M241.221,296.152c-0.594-0.415-1.227-0.775-1.89-1.085l-0.512-2.914l8.545-13.424l-4.002,16.005
		L241.221,296.152z M238.236,294.619c-0.269-0.096-0.542-0.185-0.819-0.263l0.606-0.952L238.236,294.619z M238.374,318.331
		l0.069,1.129l-0.882-0.852C237.837,318.526,238.106,318.43,238.374,318.331z M245.722,311.17l0.881,0.7l-1.231,0.085
		C245.496,311.697,245.616,311.437,245.722,311.17z M246.078,310.174c0.21-0.69,0.355-1.406,0.445-2.139l2.61-1.386l15.407,3.978
		l-16.458,1.14L246.078,310.174z M269.488,295.844l35.176-18.673c1.616,3.888,2.907,7.942,3.868,12.123L269.488,295.844z
		 M266.372,296.367l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L266.372,296.367z M247.337,299.56
		l-2.538,0.426c-0.377-0.624-0.804-1.214-1.28-1.761l0.717-2.869l13.267-8.788L247.337,299.56z M244.596,293.916l4.464-17.853
		l22.897-35.972c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L244.596,293.916z M249.828,272.996l9.659-38.63
		c4.034,1.425,7.911,3.176,11.602,5.227L249.828,272.996z M248.131,275.662l-9.568,15.032l-3.183-18.125l6.288-42.186
		c5.845,0.582,11.488,1.839,16.87,3.661L248.131,275.662z M237.766,291.944l-1.377,2.164c-0.705-0.135-1.43-0.209-2.171-0.222
		l-1.651-2.451l2.346-15.738L237.766,291.944z M231.739,290.206l-10.28-15.263l-11.414-41.095
		c5.395-1.778,11.051-2.976,16.901-3.511l7.42,42.246L231.739,290.206z M219.692,272.319l-22.248-33.033
		c3.707-2.02,7.607-3.725,11.652-5.117L219.692,272.319z M220.538,275.365l4.768,17.169l-15.601-9.763l-27.141-32.898
		c4.256-3.868,8.961-7.248,14.01-10.086L220.538,275.365z M225.703,293.961l0.689,2.481c-0.58,0.439-1.12,0.925-1.615,1.456
		l-2.933-0.414l-10.127-12.275L225.703,293.961z M220.377,297.276l-18.221-2.573l-38.176-19.015
		c2.342-5.314,5.255-10.319,8.688-14.917l36.369,22.76L220.377,297.276z M199.024,294.261l-39.418-5.567
		c0.995-4.172,2.314-8.218,3.962-12.094L199.024,294.261z M197.069,309.545l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657
		L197.069,309.545z M219.51,310.516l2.569,0.111c0.24,0.694,0.532,1.364,0.884,1.997l-1.295,2.65l-14.803,5.838L219.51,310.516z
		 M223.585,313.631c0.162,0.236,0.336,0.462,0.513,0.686l-1.05,0.414L223.585,313.631z M224.791,315.117
		c0.497,0.53,1.038,1.016,1.618,1.454l-0.105,2.958l-11.149,11.354l7.242-14.822L224.791,315.117z M227.289,319.955l1.791-1.824
		c0.666,0.282,1.365,0.498,2.084,0.663l1.105,2.741l-5.567,14.908L227.289,319.955z M232.326,319.001
		c0.283,0.038,0.57,0.064,0.859,0.082l-0.397,1.063L232.326,319.001z M234.241,319.113c0.742-0.014,1.468-0.088,2.173-0.224
		l2.12,2.05l0.978,15.883l-6.17-15.301L234.241,319.113z M239.508,320.49l-0.158-2.567c0.663-0.311,1.295-0.672,1.889-1.089
		l2.775,1.012l7.353,14.111L239.508,320.49z M242.175,316.111c0.218-0.185,0.43-0.377,0.635-0.577l0.52,0.998L242.175,316.111z
		 M243.534,314.76c0.475-0.548,0.9-1.138,1.276-1.763l2.954-0.205l12.457,9.901l-15.499-5.653L243.534,314.76z M270.756,311.2
		l39.695-2.749c-0.108,4.314-0.565,8.539-1.359,12.647L270.756,311.2z M295.094,260.464l-33.007,21.865l24.52-31.34
		C289.687,253.909,292.533,257.071,295.094,260.464z M240.667,230.307l-5.835,39.147l-6.883-39.194
		c1.999-0.157,4.012-0.26,6.051-0.26C236.248,230,238.468,230.117,240.667,230.307z M181.839,250.564l25.186,30.529l-33.738-21.114
		C175.875,256.607,178.736,253.459,181.839,250.564z M171.571,350.687l32.872-27.545l16.575-6.537l-8.078,16.535l-29.873,30.423
		C178.767,359.723,174.914,355.4,171.571,350.687z M225.064,382.463l1.526-42.862l6.234-16.692l6.883,17.068l2.62,42.564
		C239.59,382.837,236.815,383,234,383C230.975,383,227.997,382.805,225.064,382.463z M284.468,363.966l-30.827-29.81l-8.234-15.802
		l17.289,6.306l33.377,26.527C292.693,355.874,288.799,360.159,284.468,363.966z"/>
	<circle class="st1" cx="234" cy="306.649" r="84.25"/>
</g>
<g id="wheel_2">
	<path class="st0" id="anima_wheel_front" d="M517.471,222.963c-46.53,0-84.25,37.72-84.25,84.25s37.72,84.25,84.25,84.25s84.25-37.72,84.25-84.25
		S564.001,222.963,517.471,222.963z M546.665,324.49l-13.95-11.088l18.359-1.271l41.305,10.665
		c-1.185,5.727-3.026,11.212-5.413,16.392L546.665,324.49z M586.552,340.103c-1.837,3.852-3.998,7.518-6.428,10.981l-30.985-24.627
		L586.552,340.103z M556.004,373.29c-4.94,2.887-10.222,5.254-15.788,6.984l-16.052-39.808l-1.095-17.785l13.23,12.793
		L556.004,373.29z M538.573,337.673l28.607,27.663c-3.219,2.756-6.659,5.258-10.308,7.455L538.573,337.673z M539.249,380.549
		c-4.024,1.193-8.187,2.059-12.458,2.578l-2.432-39.505L539.249,380.549z M494.144,380.078c-5.549-1.775-10.821-4.167-15.738-7.094
		l18.833-38.546l12.483-12.713l-0.655,18.391L494.144,380.078z M508.954,343.278l-1.416,39.771
		c-4.265-0.553-8.424-1.443-12.439-2.669L508.954,343.278z M477.543,372.471c-3.63-2.226-7.05-4.757-10.248-7.539l27.727-28.238
		L477.543,372.471z M447.724,338.63c-2.345-5.198-4.137-10.698-5.277-16.437l41.253-11.798l17.801,0.77l-14.105,11.819
		L447.724,338.63z M484.974,325.014l-30.513,25.568c-2.402-3.482-4.518-7.174-6.325-11.041L484.974,325.014z M440.971,307.213
		c0-5.785,0.663-11.411,1.88-16.828l42.475,5.999l15.949,7.944l-17.693,5.06l-42.602-1.843
		C440.979,307.434,440.971,307.324,440.971,307.213z M593.971,307.213c0,0.318-0.02,0.63-0.024,0.947l-42.782,2.962l-17.253-4.455
		l16.254-8.628l42.063-7.056C593.36,296.216,593.971,301.642,593.971,307.213z M507.305,303.644
		c-0.258,0.736-0.443,1.505-0.537,2.303l-2.742-1.366L507.305,303.644z M502.7,303.92l-14.243-7.094l16.334,2.307l2.796,3.389
		L502.7,303.92z M506.534,306.948l-3.896,3.265l-15.897-0.688l15.86-4.536L506.534,306.948z M506.732,308.087
		c0.064,0.801,0.208,1.58,0.438,2.322l-3.051-0.132L506.732,308.087z M508.211,301.707l-1.952-2.367l3.378,0.477
		C509.095,300.392,508.618,301.025,508.211,301.707z M513.312,297.263c-0.733,0.307-1.421,0.698-2.061,1.151l-0.821-2.955
		L513.312,297.263z M510.033,294.031l-4.259-15.333l9.217,13.686l-0.648,4.345L510.033,294.031z M512.962,316.998l-2.149,2.188
		l0.121-3.412C511.56,316.253,512.238,316.664,512.962,316.998z M515.819,293.613l1.906,2.83c-0.085-0.002-0.169-0.013-0.254-0.013
		c-0.72,0-1.422,0.074-2.103,0.208L515.819,293.613z M522.084,297.478c-0.707-0.336-1.454-0.6-2.235-0.776l1.645-2.585
		L522.084,297.478z M522.289,292.868l8.544-13.424l-4.002,16.003l-3.664,2.427L522.289,292.868z M521.726,317.121l0.188,3.052
		l-2.449-2.368C520.252,317.657,521.009,317.429,521.726,317.121z M526.473,296.885l-0.827,3.308
		c-0.516-0.6-1.098-1.138-1.732-1.612L526.473,296.885z M528.204,306.226l2.965,0.766l-3.013,1.6
		c0.058-0.452,0.098-0.91,0.098-1.379C528.254,306.88,528.234,306.552,528.204,306.226z M528.223,305.199l3.133-4.004l15.693-2.633
		l-14.571,7.735L528.223,305.199z M527.798,304.12c-0.229-0.764-0.54-1.491-0.923-2.173l3.019-0.507L527.798,304.12z
		 M527.675,310.676l2.399,1.907l-3.404,0.236C527.079,312.148,527.419,311.432,527.675,310.676z M528.113,309.746l4.49-2.384
		l15.407,3.978l-16.457,1.14L528.113,309.746z M552.959,296.557l35.177-18.673c1.616,3.888,2.907,7.942,3.868,12.124
		L552.959,296.557z M549.842,297.08l-17.573,2.948l11.34-14.494l35.55-23.55c3.396,4.624,6.286,9.642,8.585,14.976L549.842,297.08z
		 M530.808,300.273l-4.333,0.727l1.233-4.933l13.266-8.788L530.808,300.273z M528.068,294.628l4.464-17.853l22.896-35.971
		c5.025,2.879,9.697,6.301,13.923,10.205l-26.428,33.779L528.068,294.628z M533.299,273.707l9.659-38.628
		c4.034,1.425,7.911,3.176,11.602,5.227L533.299,273.707z M531.601,276.376l-9.568,15.032l-3.184-18.127l6.287-42.185
		c5.845,0.582,11.488,1.839,16.871,3.661L531.601,276.376z M521.238,292.657l-2.359,3.707l-2.841-4.218l2.346-15.74L521.238,292.657
		z M515.211,290.918l-10.283-15.267l-11.413-41.09c5.395-1.778,11.051-2.976,16.902-3.511l7.419,42.245L515.211,290.918z
		 M503.163,273.03l-22.247-33.032c3.706-2.02,7.606-3.724,11.652-5.117L503.163,273.03z M504.009,276.078l4.768,17.168
		l-15.602-9.764l-27.14-32.898c4.256-3.868,8.961-7.247,14.01-10.086L504.009,276.078z M509.174,294.674l1.176,4.234l-5.035-0.711
		l-10.127-12.275L509.174,294.674z M503.848,297.99l-18.221-2.574l-38.176-19.015c2.342-5.314,5.255-10.319,8.688-14.917
		l36.369,22.76L503.848,297.99z M482.496,294.974l-39.419-5.568c0.995-4.172,2.314-8.218,3.962-12.094L482.496,294.974z
		 M480.54,310.258l-38.27,10.946c-0.761-4.114-1.192-8.341-1.266-12.657L480.54,310.258z M502.982,311.229l4.39,0.19l-2.232,4.568
		l-14.802,5.838L502.982,311.229z M508.011,312.389c0.381,0.695,0.843,1.337,1.362,1.929l-2.855,1.126L508.011,312.389z
		 M509.955,315.163l-0.181,5.082l-11.148,11.353l7.242-14.823L509.955,315.163z M510.76,320.667l3.079-3.136l1.901,4.714
		l-5.567,14.907L510.76,320.667z M514.984,317.696c0.755,0.179,1.539,0.282,2.346,0.293l-1.071,2.869L514.984,317.696z
		 M518.35,318.117l3.655,3.534l0.978,15.883l-6.17-15.301L518.35,318.117z M522.979,321.202l-0.27-4.385l4.777,1.742l7.353,14.112
		L522.979,321.202z M523.601,316.078c0.651-0.451,1.245-0.976,1.781-1.556l1.419,2.723L523.601,316.078z M526.163,313.856
		l5.072-0.351l12.457,9.901l-15.498-5.653L526.163,313.856z M554.227,311.913l39.694-2.749c-0.108,4.314-0.565,8.539-1.359,12.647
		L554.227,311.913z M578.565,261.177l-33.007,21.865l24.52-31.34C573.158,254.622,576.004,257.784,578.565,261.177z M524.138,231.02
		l-5.835,39.149l-6.884-39.196c1.999-0.157,4.013-0.26,6.052-0.26C519.719,230.713,521.939,230.83,524.138,231.02z M465.31,251.276
		l25.185,30.528l-33.737-21.113C459.346,257.32,462.207,254.171,465.31,251.276z M455.042,351.4l32.873-27.545l16.575-6.536
		l-8.079,16.536l-29.872,30.422C462.239,360.436,458.385,356.114,455.042,351.4z M508.535,383.176l1.526-42.862l6.234-16.693
		l6.883,17.069l2.62,42.564c-2.736,0.296-5.512,0.459-8.326,0.459C514.446,383.713,511.468,383.518,508.535,383.176z
		 M567.939,364.679l-30.826-29.809l-8.234-15.802l17.288,6.305l33.377,26.528C576.164,356.587,572.27,360.872,567.939,364.679z"/>
	<circle class="st1" cx="517.471" cy="307.166" r="84.25"/>
</g>
<g id="velik">
	<g id="rul">
		<g>
			<path class="st2" d="M405.833,142.563l0.468,3.846l0.574-0.221v-0.679c0-0.971,0.521-2.868,1.365-3.349l6.923-3.949
				c0.669-0.382,1.419-0.587,2.189-0.596c2.782-0.035,9.683,0.834,11.023,0.387c1.688-0.563,4.313-4,5.563-4.5
				c0.746-0.298,1.625-0.463,2.213-0.548c0.38-0.055,0.662-0.377,0.662-0.761v-1.22c0-0.451-0.385-0.806-0.834-0.766
				c-1.936,0.171-6.704,0.512-8.479-0.079c-1.266-0.422-1.78-1.595-1.987-2.541c-0.157-0.714-0.9-1.136-1.607-0.952l-7.236,1.879
				l0.44,1.951c0,0,1.953-0.765,2.828-0.003c0.875,0.762,1.813,1.729,0.75,3.229s-3.188,0.688-4.75,1.313s-9.125,5.479-9.771,5.938
				C405.657,141.299,405.833,142.563,405.833,142.563z"/>
		</g>
		<g>
			<path class="st3" d="M438.982,171.934l-9.929-23.101l1.648-0.857c0.008-0.004,1.387-0.74,4.102-2.766
			c4.438-3.312,5.013-8.982,3.613-13.133c-1.771-5.256-6.309-6.468-9.959-5.854c-3.603,0.608-12.615,2.94-12.706,2.964
			l-1.004-3.872c0.377-0.098,9.271-2.399,13.044-3.036c6.642-1.119,12.295,2.226,14.416,8.521
			c2.234,6.631,0.221,13.711-5.012,17.616c-1.278,0.954-2.295,1.651-3.048,2.141l8.51,19.799L438.982,171.934z"/>
		</g>
		<g>
			<path class="st2" d="M417.351,131.53l-1.968-8.732c-0.121-0.54-0.658-0.875-1.195-0.756c-0.539,0.122-0.877,0.657-0.756,1.195
				l0.011,0.048l-26.907,7.552l-0.041-0.201c-0.098-0.481-0.566-0.79-1.046-0.694c-0.481,0.097-0.792,0.566-0.694,1.047l1.215,6.007
				c0.085,0.421,0.455,0.712,0.869,0.712c0.059,0,0.117-0.006,0.177-0.018c0.481-0.097,0.792-0.566,0.694-1.047l-0.04-0.197
				l27.724-4.502l0.006,0.026c0.104,0.465,0.518,0.78,0.975,0.78c0.073,0,0.146-0.008,0.221-0.024
				C417.134,132.604,417.472,132.069,417.351,131.53z"/>
		</g>
	</g>
	<g id="krilya">
		<g>
			<path class="st4" d="M323.54,301.67l-6.21-0.44C314.62,257.57,278.35,223,234,223c-40.654,0-74.511,29.039-81.971,67.508
				c-0.536,2.765-2.148,5.204-4.537,6.697l-0.2,0.125c-1.089,0.68-2.478-0.209-2.327-1.483
				c5.259-44.497,43.118-79.016,89.035-79.016C281.9,216.83,321.03,254.39,323.54,301.67z"/>
		</g>
		<g>
			<path class="st4" d="M522.133,223.791c-17.449-1.06-35.376,3.33-51.078,13.72c-33.904,22.434-46.116,65.334-31.109,101.532
				c1.079,2.602,1.081,5.525-0.088,8.088l-0.098,0.215c-0.533,1.168-2.182,1.194-2.76,0.047
				c-20.168-40.011-7.644-89.69,30.65-115.028c18.863-12.482,40.718-16.899,61.5-14.08C533.5,219,525.928,224,522.133,223.791z"/>
		</g>
	</g>
	<g id="tormoz">
		<g>
			<path class="st5" d="M285.745,248.074l-6.156-5.109c-0.846-0.702-0.964-1.97-0.262-2.816l0,0
			c0.703-0.846,1.97-0.964,2.816-0.262l6.156,5.109c0.846,0.702,0.964,1.97,0.262,2.816l0,0
			C287.859,248.658,286.592,248.776,285.745,248.074z"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -89.0755 287.0871)" class="st3" cx="287.012" cy="246.415" rx="1" ry="1"/>
			<ellipse transform="matrix(0.6843 -0.7292 0.7292 0.6843 -87.3724 281.0121)" class="st3" cx="280.848" cy="241.41" rx="1" ry="1"/>
		</g>
		<path class="st2" d="M305.545,234.594c0,0-0.419-0.671-1.043-1.321c-0.609-0.659-1.394-1.314-2.29-1.839
			c-0.324-0.177-0.659-0.342-1.002-0.491c0.99-1.812,3.258-3.399,5.015-3.399c0.001,0,0.001,0,0.001,0c0.552,0,1-0.447,1-1
			s-0.447-1-1-1c-0.001,0-0.001,0-0.002,0c-2.838,0-5.81,2.428-6.952,4.77c-0.932-0.246-2.032-0.454-3.094-0.316
			c-0.545,0.047-1.058,0.2-1.551,0.358c-0.479,0.18-0.92,0.386-1.321,0.6c-0.382,0.23-0.753,0.41-1.079,0.646
			c-0.308,0.219-0.654,0.468-0.821,0.554c-0.391,0.232-0.648,0.342-0.648,0.342l-0.009,0.003c-1.069,0.459-1.817,1.523-1.816,2.76
			c0.002,1.656,1.347,2.997,3.003,2.994s2.997-1.347,2.994-3.003c0,0,0-0.28,0.058-0.732c0.041-0.267,0.028-0.39,0.069-0.621
			c0.01-0.226,0.124-0.477,0.233-0.744c0.067-0.116,0.134-0.249,0.217-0.379c0.089-0.111,0.181-0.234,0.287-0.353
			c0.222-0.205,0.483-0.416,0.802-0.536c0.316-0.132,0.677-0.199,1.063-0.187c0.387,0.017,0.781,0.09,1.213,0.23l0.314,0.098
			l0.329,0.12c0.195,0.09,0.343,0.153,0.518,0.258c0.345,0.199,0.641,0.451,0.894,0.715c0.492,0.549,0.767,1.178,0.849,1.739
			c0.056,0.273,0.035,0.545,0.024,0.768c-0.008,0.223-0.07,0.424-0.114,0.579c-0.097,0.313-0.211,0.478-0.211,0.478
			c-0.344,0.59-0.913,0.466-0.504,1.631L305.545,234.594z"/>
		</g>
		<g>
		<path class="st3" d="M283.51,242.235c0,0,0.636-0.265,1.423-0.816c0.803-0.536,1.757-1.358,2.606-2.276
			c0.851-0.916,1.596-1.93,2.053-2.782c0.478-0.834,0.677-1.5,0.677-1.5c0.264-0.882,1.193-1.383,2.075-1.119
			c0.882,0.264,1.383,1.193,1.119,2.075c-0.151,0.505-0.528,0.888-0.982,1.071c0,0-0.646,0.256-1.435,0.805
			c-0.81,0.53-1.755,1.359-2.594,2.287c-0.841,0.925-1.577,1.947-2.041,2.794c-0.48,0.832-0.689,1.488-0.689,1.488
			c-0.277,0.87-1.206,1.351-2.077,1.075c-0.87-0.277-1.351-1.206-1.075-2.077C282.723,242.78,283.08,242.416,283.51,242.235z"/>
	</g>
	<g id="tormoz_front">
		<g>
			<path class="st5" d="M476.648,240.727l7.159-3.572c0.984-0.491,1.388-1.698,0.897-2.683l0,0
				c-0.491-0.984-1.698-1.388-2.683-0.897l-7.159,3.572c-0.984,0.491-1.388,1.698-0.897,2.683l0,0
				C474.457,240.815,475.664,241.219,476.648,240.727z"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -56.6651 237.4861)" class="st3" cx="475.644" cy="238.994" rx="1" ry="1"/>
			<ellipse transform="matrix(0.8948 -0.4464 0.4464 0.8948 -54.2761 240.3562)" class="st3" cx="482.929" cy="235.359" rx="1" ry="1"/>
		</g>
			<path class="st0" d="M472.077,226.041c0,0,0.041-0.252,0.077-0.685c0.003-0.142,0.056-0.315,0.034-0.542
				c-0.013-0.232-0.032-0.494-0.105-0.766c-0.084-0.26-0.166-0.563-0.34-0.833c-0.163-0.277-0.375-0.554-0.639-0.813
				c-0.539-0.509-1.306-0.905-2.152-1.154c-0.202-0.055-0.45-0.135-0.621-0.158l-0.701-0.125c-0.403-0.029-0.8-0.048-1.203-0.009
				c-0.393,0.04-0.76,0.119-1.085,0.241c-0.325,0.117-0.608,0.258-0.84,0.425c-0.466,0.326-0.611,0.703-0.71,0.962l-1.244-3.19
				c0.369-0.156,0.74-0.219,0.99-0.275c0.444-0.078,0.908-0.159,1.394-0.188c0.487-0.02,0.987-0.017,1.492,0.019
				c0.497,0.035,1.023,0.11,1.557,0.2l0.697,0.147c0.299,0.062,0.511,0.117,0.772,0.184c0.997,0.265,2.013,0.646,2.923,1.207
				c0.448,0.287,0.881,0.598,1.241,0.959c0.361,0.357,0.689,0.719,0.956,1.086c0.248,0.372,0.49,0.714,0.66,1.038
				c0.178,0.322,0.332,0.65,0.456,0.91c0.193,0.391,0.323,0.61,0.323,0.61c0.603,1.009,0.274,2.317-0.735,2.92
				c-1.009,0.603-2.317,0.274-2.92-0.735C472.083,227.03,472,226.519,472.077,226.041z"/>
		<g>
			<path class="st3" d="M480.252,235.605c0,0-0.533-0.436-1.129-1.19c-0.616-0.744-1.294-1.804-1.844-2.927
				c-0.553-1.122-0.975-2.306-1.169-3.254c-0.218-0.936-0.219-1.631-0.219-1.631c0-0.921-0.746-1.667-1.667-1.667
				c-0.92,0-1.667,0.746-1.667,1.667c0,0.527,0.251,1.002,0.634,1.308c0,0,0.545,0.431,1.144,1.182
				c0.624,0.74,1.292,1.806,1.829,2.935c0.54,1.128,0.952,2.317,1.154,3.262c0.222,0.935,0.234,1.624,0.234,1.624
				c0.016,0.913,0.768,1.641,1.681,1.625c0.913-0.016,1.641-0.768,1.625-1.681C480.85,236.353,480.612,235.902,480.252,235.605z"/>
		</g>
	</g>
	<g id="sedlo">
		<rect x="302.547" y="205.617" transform="matrix(0.9322 -0.362 0.362 0.9322 -57.1172 124.9964)" class="st3" width="5" height="18.645"/>
		<path class="st6" d="M285.492,205.5h-8.367c-0.552,0-1-0.448-1-1s0.448-1,1-1h8.367c5.497,0,9.62-6.465,9.661-6.531
				c0.294-0.467,0.91-0.608,1.378-0.316c0.467,0.293,0.61,0.909,0.317,1.377C296.657,198.335,292.103,205.5,285.492,205.5z"/>
		<path class="st5" d="M274.5,204.417c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.03,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,204.416,274.517,204.417,274.5,204.417z"/>
		<path class="st5" d="M274.5,203.204c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,203.203,274.517,203.204,274.5,203.204z"/>
		<path class="st5" d="M274.5,201.991c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.031,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,201.99,274.517,201.991,274.5,201.991z"/>
		<path class="st5" d="M274.5,200.778c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.023,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,200.777,274.517,200.778,274.5,200.778z"/>
		<path class="st5" d="M274.5,199.565c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,199.564,274.517,199.565,274.5,199.565z"/>
		<path class="st5" d="M274.5,198.352c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.52,0.446-0.549l12.917-1.333
						c0.272-0.024,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,198.351,274.517,198.352,274.5,198.352z"/>
		<path class="st5" d="M274.5,197.139c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,197.138,274.517,197.139,274.5,197.139z"/>
		<path class="st5" d="M274.5,195.926c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.025,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.521-0.446,0.549l-12.917,1.333
						C274.534,195.925,274.517,195.926,274.5,195.926z"/>
		<path class="st5" d="M274.5,194.713c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,194.712,274.517,194.713,274.5,194.713z"/>
		<path class="st5" d="M274.5,193.5c-0.253,0-0.47-0.191-0.497-0.449c-0.028-0.274,0.171-0.521,0.446-0.549l12.917-1.333
						c0.272-0.026,0.52,0.171,0.549,0.446c0.028,0.274-0.171,0.52-0.446,0.549l-12.917,1.333
						C274.534,193.499,274.517,193.5,274.5,193.5z"/>
		<path class="st6" d="M287.59,194.377c0,0,0.292,0.024,0.804,0.067c0.257,0.023,0.569,0.05,0.927,0.082
				c0.376,0.055,0.8,0.117,1.263,0.185c0.469,0.065,0.949,0.189,1.477,0.295c0.525,0.106,1.068,0.289,1.641,0.444
				c0.559,0.202,1.154,0.387,1.734,0.654c0.292,0.132,0.587,0.266,0.883,0.4l0.867,0.474c0.572,0.332,1.141,0.696,1.667,1.103
				c0.539,0.395,1.027,0.838,1.499,1.278c0.915,0.902,1.666,1.852,2.246,2.702c0.564,0.855,0.976,1.598,1.244,2.121
				c0.259,0.526,0.407,0.827,0.407,0.827c0.737,1.497,0.121,3.309-1.376,4.046c-1.497,0.737-3.309,0.121-4.046-1.376
				c-0.102-0.207-0.178-0.419-0.229-0.635l-0.011-0.052c0,0-0.057-0.245-0.157-0.674c-0.106-0.426-0.276-1.021-0.528-1.713
				c-0.265-0.682-0.624-1.452-1.109-2.231c-0.256-0.377-0.523-0.774-0.843-1.143c-0.306-0.382-0.659-0.741-1.03-1.091l-0.573-0.514
				l-0.616-0.469c-0.407-0.319-0.857-0.576-1.278-0.853c-0.447-0.235-0.866-0.498-1.298-0.692c-0.429-0.191-0.836-0.405-1.217-0.548
				c-0.384-0.151-0.736-0.289-1.048-0.411c-0.338-0.11-0.634-0.205-0.877-0.284c-0.489-0.156-0.769-0.244-0.769-0.244
				c-0.471-0.15-0.732-0.653-0.582-1.125C286.79,194.593,287.183,194.343,287.59,194.377z"/>
		<path class="st5" d="M306.093,209.853l-5.311,2.123c-0.461,0.184-0.989-0.042-1.174-0.503l-1.711-4.281
				c-0.184-0.461,0.042-0.989,0.503-1.174l5.311-2.123c0.461-0.184,0.989,0.042,1.174,0.503l1.711,4.281
				C306.781,209.141,306.555,209.669,306.093,209.853z"/>
		<path class="st7" d="M271.014,194.342c-1.465,0.238-2.868-0.682-3.208-2.126c-0.967-4.103-1.359-8.154,0.694-9.591
				c2.5-1.75,4.55-2,7.275-2s10.725,2.75,19.35,2.125S315,179.5,319,179.5s9.928,0.422,12.625,4.5c1.708,2.583,2.5,4.875,1.125,6
				c-1.61,1.317-9.625,0.625-18.875,4.875c-6.089,2.798-10.932,5.649-13.531,7.272c-0.956,0.597-2.201,0.256-2.743-0.733
				c-1-1.824-3.537-4.442-9.975-6.164C280.418,193.323,274.278,193.811,271.014,194.342z"/>
		<path class="st5" d="M304.919,223.297c-1.799,0.725-2.66,2.764-1.939,4.554c0.725,1.799,2.755,2.663,4.554,1.939l6.493-2.616
				l-2.616-6.493L304.919,223.297z M306.881,228.166c-0.9,0.362-1.915-0.07-2.277-0.969c-0.359-0.89,0.07-1.915,0.969-2.277
				c0.89-0.359,1.918,0.079,2.277,0.969C308.212,226.789,307.771,227.808,306.881,228.166z"/>
		<circle class="st3" cx="306.227" cy="226.545" r="1.75"/>
	</g>
	<g id="rama">
		<path class="st4" d="M230.922,295.308L230.922,295.308l80.55-65.536l3.155,3.879l-76.672,62.38
						C235.814,297.774,232.665,297.45,230.922,295.308z"/>
		<rect x="322.381" y="225.473" transform="matrix(0.9254 -0.379 0.379 0.9254 -76.5191 143.3384)" class="st4" width="7" height="81.175"/>
		<path class="st4" d="M443.035,169.136c0,0,3.577,9.265,8.943,23.162c2.706,6.939,5.864,15.035,9.247,23.709
					c1.691,4.337,3.439,8.818,5.215,13.372c1.771,4.556,3.582,9.179,5.495,13.762l1.425,3.44c0.441,1.045,0.973,2.199,1.482,3.29
					c0.997,2.224,2.06,4.409,3.119,6.566c2.129,4.294,4.388,8.485,7.004,12.022c2.746,3.577,5.737,6.945,8.504,10.182
					c2.805,3.209,5.456,6.242,7.904,9.043c9.839,11.176,16.398,18.627,16.398,18.627l-2.042,1.884c0,0-1.719-1.794-4.727-4.934
					c-1.5-1.573-3.322-3.483-5.412-5.674c-2.096-2.186-4.413-4.696-6.959-7.418c-2.532-2.738-5.275-5.705-8.176-8.843
					c-1.438-1.586-2.916-3.216-4.426-4.881c-0.754-0.851-1.515-1.71-2.284-2.578c-0.748-0.882-1.511-1.712-2.275-2.716
					c-3.031-3.877-5.459-8.139-7.796-12.529c-1.16-2.198-2.224-4.458-3.269-6.739c-0.509-1.163-0.993-2.27-1.489-3.521l-1.34-3.473
					c-1.775-4.638-3.652-9.235-5.512-13.755c-1.854-4.522-3.679-8.973-5.446-13.28c-3.532-8.614-6.829-16.654-9.655-23.546
					c-5.698-13.764-9.497-22.94-9.497-22.94L443.035,169.136z"/>
		<rect x="357.208" y="257.429" transform="matrix(0.6315 -0.7754 0.7754 0.6315 -48.2292 420.3728)" class="st4" width="121.918" height="7"/>
		<path class="st4" d="M359.333,294c-15.566,0-29.331-11.209-29.909-11.686l3.816-4.63c0.125,0.103,12.714,10.316,26.093,10.316
					c12.561,0,25.665-13.077,31.076-25.719l0.067-0.158c5.724-13.375,23.142-54.076,34.025-67.512
					c8.907-10.995,19.791-13.899,20.25-14.017l1.496,5.811c-0.084,0.022-9.479,2.597-17.084,11.983
					c-6.873,8.484-18.034,30.722-33.171,66.096l-0.068,0.158C389.833,278.874,374.939,294,359.333,294z"/>
	</g>
	<g id="tros">
		<path class="st2" d="M384.511,310.318l-0.771-0.637c0.63-0.764,63.196-76.643,80.892-100.728
					c16.055-21.851,19.178-55.031,15.26-70.582c-3.871-15.36-14.15-21.748-20.235-21.373c-3.911,0.24-8.325,6.017-11.548,10.235
					c-1.682,2.202-3.01,3.94-4.032,4.672c-2.843,2.037-5.122,1.359-8.276,0.422c-0.379-0.113-0.773-0.23-1.187-0.348l0.275-0.962
					c0.416,0.119,0.813,0.237,1.195,0.351c3.098,0.921,4.965,1.477,7.41-0.276c0.9-0.646,2.253-2.416,3.819-4.467
					c3.526-4.615,7.914-10.358,12.282-10.626c6.421-0.395,17.256,6.213,21.265,22.127c3.967,15.743,0.814,49.32-15.422,71.418
					C447.725,233.653,385.141,309.554,384.511,310.318z"/>
		<path class="st2" d="M444.065,170.664l-0.563-0.827c0.007-0.004,0.659-0.449,1.681-1.285c3.207-2.621,9.06-8.214,12.227-16.235
					c3.637-9.215,2.241-14.905,0.874-18.384c-1.095-2.787-3.132-7.974-14.62-10.822c-10.841-2.688-29.352,2.075-29.538,2.124
					l-0.252-0.968c0.769-0.2,18.942-4.875,30.03-2.126c10.537,2.613,13.586,7.036,15.312,11.428
					c1.428,3.636,2.892,9.573-0.876,19.116c-3.25,8.232-9.241,13.96-12.523,16.643C444.757,170.192,444.093,170.645,444.065,170.664
					z"/>
		<path class="st2" d="M470.737,221.422c-6.604-11.103-23.22-51.689-23.387-52.098l0.926-0.378
					c0.167,0.408,16.753,40.925,23.32,51.964L470.737,221.422z"/>
		<path class="st4" d="M373.011,299.594l0.005-0.024l-0.386-0.025c-1.081-0.135-2.179-0.213-3.296-0.213h0l-132.456-8.546
			c-0.617-0.073-1.24-0.121-1.877-0.121c-8.745,0-15.833,7.089-15.833,15.833c0,7.916,5.816,14.456,13.404,15.628l-0.002,0.02
			l130.464,29.093l0.001-0.004c2.019,0.496,4.127,0.764,6.299,0.764c14.544,0,26.333-11.79,26.333-26.333
			C395.667,312.372,385.813,301.384,373.011,299.594z M336.505,314.902c-0.079,0.771-0.725,1.339-1.478,1.333
			c-0.051,0-0.103-0.004-0.154-0.009l-91.684-10.329c0.023,0.257,0.039,0.516,0.039,0.779c0,0.76-0.109,1.493-0.296,2.192
			l91.473,12.624c0.815,0.112,1.391,0.869,1.286,1.69c-0.098,0.768-0.758,1.32-1.51,1.295c-0.051-0.002-0.103-0.006-0.154-0.013
			l-92.469-12.761c-1.526,2.044-3.954,3.361-6.697,3.337c-4.621-0.041-8.367-3.851-8.367-8.511s3.746-8.404,8.367-8.364
			c3.229,0.029,6.025,1.901,7.42,4.614l92.896,10.465C335.995,313.336,336.589,314.078,336.505,314.902z"/>
		<path class="st5" d="M229.557,306.651c-0.143,0-0.289-0.021-0.433-0.064l-81.333-24.5c-0.793-0.239-1.243-1.076-1.003-1.869
					c0.239-0.793,1.075-1.244,1.869-1.003l81.333,24.5c0.793,0.239,1.243,1.076,1.003,1.869
					C230.797,306.232,230.202,306.651,229.557,306.651z"/>
		<circle class="st5" cx="517.471" cy="307.166" r="3.5"/>
		<circle class="st5" cx="234.667" cy="306.5" r="4"/>
		<polygon class="st4" points="467.535,230.287 461.867,232.754 459.535,226.866 465.202,224.4 				"/>
		<path class="st0" d="M459.07,226.998c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C459.333,226.973,459.201,226.998,459.07,226.998z"/>
		<path class="st0" d="M462.034,234.55c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C462.297,234.525,462.165,234.55,462.034,234.55z"/>
		<polygon class="st4" points="446.285,177.032 440.617,179.498 438.285,173.611 443.952,171.144 				"/>
		<path class="st0" d="M437.57,173.274c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l10-3.988
					c0.527-0.216,1.127,0.034,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-10,3.988
					C437.833,173.249,437.701,173.274,437.57,173.274z"/>
		<path class="st0" d="M440.784,181.294c-0.404,0-0.788-0.241-0.951-0.638c-0.217-0.525,0.034-1.127,0.56-1.343l6-2.466
					c0.526-0.216,1.127,0.035,1.343,0.561c0.217,0.525-0.034,1.127-0.56,1.343l-6,2.466
					C441.047,181.27,440.915,181.294,440.784,181.294z"/>
	<g id="pedali_1_">
	<g id="pedali">
		<g>
			<circle class="st3" cx="368.5" cy="325" r="14.5"/>
			<path class="st5" d="M368.5,340c-8.271,0-15-6.729-15-15s6.729-15,15-15c8.271,0,15,6.729,15,15S376.771,340,368.5,340z
				 M368.5,311c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S376.22,311,368.5,311z"/>
		</g>
		<g>
			<circle class="st0" cx="368.5" cy="325" r="10.625"/>
		</g>
		<g>
			<circle class="st5" cx="368.5" cy="325" r="6.75"/>
		</g>
	</g>
	<g>
<path class="st11" id="motionPath" d="M414.07,325c0,12.584-5.101,23.976-13.347,32.223c-8.247,8.247-19.639,13.347-32.223,13.347
	s-23.976-5.101-32.223-13.347c-8.247-8.247-13.347-19.639-13.347-32.223s5.101-23.976,13.347-32.223
	c8.247-8.247,19.639-13.347,32.223-13.347s23.976,5.101,32.223,13.347C408.969,301.024,414.07,312.416,414.07,325z"/>
		<path class="st3" id="pedal_a" d="M407.688,348.412l-41.117-19.84c-1.981-0.956-2.82-3.359-1.864-5.341l0,0c0.956-1.981,3.359-2.82,5.341-1.864
			l41.117,19.84c1.981,0.956,2.82,3.359,1.864,5.341v0C412.073,348.529,409.67,349.368,407.688,348.412z"/>
		<circle class="st5" cx="368.5" cy="325" r="2.938"/>
	</g>
	<g id="pedal" transform="translate(-409.518, -344.854)">
		<path class="st0" d="M419.783,344.066l-15.02,9.92c-2.295,1.516-5.412,0.878-6.928-1.417l0,0
			c-1.516-2.295-0.878-5.412,1.417-6.928l15.02-9.92c2.295-1.516,5.412-0.878,6.928,1.417l0,0
			C422.715,339.433,422.078,342.55,419.783,344.066z"/>
		<circle class="st3" cx="409.518" cy="344.854" r="2.938"/>
	</g>
</g>
 <defs>
  <pattern id="pattern" x="0" y="0" width="750" height="500" patternUnits="userSpaceOnUse" >
    <path class="st8" d="M741.936,284.582v1.411h-3.629v-3.83h-3.628v-4.839h-13.509v3.025h-2.419v2.621h-2.419v-12.904h-5.645v2.017
	h-8.872v2.823h-2.823v-4.234h-13.709v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.662v-2.218h-2.419v3.226h-2.823v12.702
	h-3.226v-13.71h-2.419v-2.419h-3.226v2.822h-1.613v7.662h-1.412v9.879h-2.017v-5.444h-2.419v-38.106h-2.015v-4.234h-17.743v4.435
	h-1.411v-15.323h-7.057v-2.419h-4.84v3.024h-2.218v30.646h-4.011V235.8v-0.588v-1.47h-5.071v1.47h-7.79v-1.47h-1.47v1.47h-2.94
	v-1.102h-8.451v1.102h-3.748v-10.877h-3.087v-1.176h-3.013v1.176h-1.029v-0.588h-2.646v0.588h-7.643v5.108h-12.861v0.919h-1.102
	v-1.837h-1.911v1.837h-3.601v-0.735h-2.499v0.735h-7.202v4.85h-0.955v5.732h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911
	h0.955v2.572h-0.955v1.911h0.955v2.572h-0.955v1.911h0.955v8.367h-5.009v3.226h-0.587c-1.808-12.568-3.408-27.552-4.71-43.757
	c0.901-0.131,2.148-2.217,2.148-3.477c0-1.3-0.174-1.222-1.342-1.221c-0.387,0-0.791,0.201-1.133,0.522
	c-0.091-1.193-0.18-2.392-0.268-3.596c0.455-0.506,0.863-1.371,0.863-1.966c0-0.886-0.118-0.833-0.915-0.832
	c-0.048,0-0.097,0.012-0.146,0.021c-0.936-13.342-1.669-27.294-2.151-41.247h0.054v-1.419h-0.101
	c-0.014-0.433-0.029-0.867-0.043-1.3h1.641v-1.025h-1.674c-0.123-3.937-0.226-7.87-0.308-11.784h1.076v-0.67h-1.497v-1.511h1.497
	v-0.67h-1.497v-1.511h1.536v-0.67h-1.536v-1.511h1.536v-0.67h-1.536h-0.927l0.001-4.056h0.927v-10.329h0.551v-0.63h-0.551v-2.446
	h-1.065v-8.983h-0.591v8.983h-1.025v2.446h-0.67v0.63h0.67v10.329h0.808l-0.001,4.056h-0.808h-1.536v0.67h1.536v1.511h-1.536v0.67
	h1.536v1.511h-1.576v0.67h1.576v1.511h-1.576v0.67h1.016c-0.082,3.914-0.184,7.846-0.307,11.784h-1.615v1.025h1.582
	c-0.554,17.23-1.495,34.521-2.735,50.72c-0.198-0.074-0.399-0.117-0.596-0.117c-1.462-0.001-1.679-0.1-1.679,1.527
	c0,1.209,0.919,3.03,1.856,3.886c-0.709,8.661-1.503,16.961-2.368,24.713H493.54v5.041h-9.678v17.541h-6.25v-2.117h-2.557v-36.838
	v-4.859h-0.572v-1.262h-7.458v-13.341v-6.941h-0.817v-1.803h-75.396v-0.374h1.565v-2.45l-5.308-2.041h-2.382l-1.361,2.041v2.45
	h1.633v0.374h-24.633v1.803h-2.722v-7.281h5.852l5.512-0.68v-0.68h-9.635l-0.367-1.021h-4.287l-0.367,1.021h-1.878v1.361h4.015
	v7.281h-0.885v6.941h0.272l-0.06,1.803h-0.195c-0.365,0-0.663,0.299-0.663,0.664c0,0.365,0.298,0.663,0.663,0.663h0.151
	l-0.313,9.362c-0.287,0.073-0.501,0.332-0.501,0.641c0,0.293,0.194,0.541,0.459,0.628l-1.323,39.607l-1.619-0.023v7.088h-4.03
	l-2.85,0.112v-10.143h0.975c0.288,0,0.367-0.397,0.1-0.506l-1.076-0.442v-0.004h-0.01l-6.17-2.536v-0.945h-0.165v-1.685h0.165
	v-0.586h-0.266v-0.909h0.001l-0.597-0.634v-0.382c0.079-0.032,0.134-0.11,0.134-0.2c0-0.091-0.056-0.168-0.134-0.2v-0.111
	c0-0.045-0.037-0.082-0.082-0.082c-0.046,0-0.083,0.037-0.083,0.082v0.111c-0.079,0.032-0.134,0.11-0.134,0.2
	c0,0.091,0.055,0.168,0.134,0.2v0.382l-0.596,0.634h0.003v0.909h-0.267v0.586h0.165v1.685h-0.165v0.879h-9.089v-9.489l0.339-0.142
	v-0.234l0.412-0.165l0.179-1.333l-1.195-0.385c0,0,0.027-0.508-0.083-0.893c-0.11-0.385-1.951-2.473-2.102-3.023
	c-0.151-0.55-0.137-2.322-0.247-2.652c-0.11-0.33-0.687-0.962-1.237-1.759c-0.55-0.797-0.783-1.223-0.948-1.772
	c-0.12-0.401-0.307-2.15-0.398-3.065v-0.651c0.077-0.024,0.133-0.094,0.133-0.179c0-0.084-0.056-0.155-0.133-0.179v-0.525
	c0.059-0.022,0.102-0.079,0.102-0.146c0-0.067-0.042-0.124-0.102-0.146v-0.528c0.045-0.021,0.076-0.065,0.076-0.118
	c0-0.052-0.031-0.097-0.076-0.118v-0.267c0-0.03-0.025-0.055-0.055-0.055s-0.055,0.025-0.055,0.055v0.267
	c-0.045,0.021-0.076,0.066-0.076,0.118c0,0.052,0.031,0.097,0.076,0.118v0.528c-0.059,0.022-0.102,0.079-0.102,0.146
	c0,0.067,0.042,0.124,0.102,0.146v0.525c-0.077,0.024-0.133,0.094-0.133,0.179c0,0.085,0.056,0.155,0.133,0.179v0.651
	c-0.092,0.915-0.278,2.664-0.398,3.065c-0.165,0.55-0.398,0.976-0.948,1.772c-0.549,0.797-1.127,1.429-1.237,1.759
	s-0.096,2.102-0.247,2.652c-0.151,0.549-1.992,2.638-2.102,3.023c-0.11,0.385-0.082,0.893-0.082,0.893l-1.195,0.385l0.179,1.333
	l0.412,0.165v0.234l0.339,0.142v15.608l-8.287,4.706c-0.325,0.185-0.194,0.68,0.18,0.68h-0.503c-0.635,0-1.154,0.519-1.154,1.154
	v0.147c0,0.635,0.519,1.154,1.154,1.154h0.728v2.448h-2.419v2.621h-2.419v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234h-13.709
	v6.855h-6.855v-11.089h-3.63v-3.428h-2.419v3.428h-7.075c-0.005-0.233-0.009-0.465-0.014-0.698
	c-0.025-1.179-0.061-2.358-0.073-3.537c-0.004-0.422,0.064-0.845,0.062-1.268c-0.001-0.16-0.112-0.318-0.168-0.478
	c-0.031-0.088-0.069-0.178-0.074-0.269c-0.007-0.137,0.023-0.275,0.021-0.412c-0.021-1.167-0.042-2.333-0.074-3.5
	c-0.003-0.098-0.083-0.196-0.139-0.287c-0.013-0.021-0.104-0.024-0.107-0.017c-0.083,0.239-0.268,0.108-0.397,0.092
	c-0.234-0.028-0.221-0.26-0.249-0.421c-0.013-0.078,0.074-0.203,0.151-0.259c0.195-0.143,0.399-0.285,0.62-0.378
	c0.274-0.115,0.355-0.327,0.353-0.579c-0.002-0.298-0.026-0.599-0.07-0.894c-0.12-0.801-0.272-1.597-0.38-2.4
	c-0.14-1.033-0.223-2.074-0.384-3.104c-0.082-0.523-0.284-1.027-0.428-1.541c-0.218-0.777-0.408-1.565-0.937-2.211
	c-0.049-0.061-0.08-0.143-0.101-0.22c-0.112-0.404-0.226-0.808-0.325-1.216c-0.152-0.628-0.224-1.261-0.049-1.899
	c0.06-0.219,0.117-0.438,0.178-0.657c0.107-0.382,0.196-0.771,0.331-1.143c0.22-0.608,0.794-0.908,1.224-1.332
	c0.405-0.4,0.836-0.774,1.238-1.177c0.295-0.295,0.549-0.63,0.845-0.923c0.291-0.288,0.587-0.586,0.929-0.804
	c0.425-0.27,0.682-0.663,0.904-1.076c0.274-0.512,0.355-0.598,0.929-0.532c0.097,0.011,0.244,0.092,0.264,0.168
	c0.039,0.147,0.021,0.323-0.133,0.36c0.034,0.105,0.095,0.203,0.094,0.3c-0.009,1.085-0.032,2.171-0.043,3.256
	c-0.013,1.305-0.019,2.611-0.028,3.917c-0.001,0.089-0.012,0.186,0.018,0.265c0.031,0.081,0.096,0.182,0.169,0.205
	c0.054,0.017,0.176-0.057,0.21-0.122c0.071-0.133,0.122-0.284,0.15-0.433c0.256-1.336,0.531-2.669,0.75-4.01
	c0.244-1.494,0.457-2.994,0.643-4.497c0.118-0.955,0.166-1.919,0.238-2.88c0.016-0.218,0.039-0.446-0.006-0.655
	c-0.107-0.5-0.38-0.739-0.785-0.495c-0.384,0.232-0.767,0.502-0.798,1.027c-0.003,0.055-0.018,0.124-0.054,0.159
	c-0.295,0.286-0.331,0.65-0.333,1.03c-0.001,0.15-0.085,0.26-0.242,0.244c-0.529-0.056-0.806,0.286-1.086,0.646
	c-0.096,0.123-0.235,0.212-0.361,0.31c-0.074,0.058-0.162,0.097-0.238,0.153c-0.509,0.37-1.014,0.746-1.525,1.114
	c-0.469,0.337-1.019,0.575-1.297,1.138c-0.052,0.106-0.204,0.197-0.328,0.229c-0.28,0.073-0.487,0.229-0.692,0.424
	c-0.289,0.275-0.567,0.594-1.005,0.635c-0.319,0.03-0.593,0.126-0.826,0.36c-0.149,0.15-0.339,0.087-0.384-0.123
	c-0.033-0.155-0.037-0.323-0.015-0.48c0.047-0.328,0.13-0.651,0.179-0.979c0.112-0.766-0.085-1.163-0.74-1.561
	c-0.113-0.068-0.213-0.165-0.301-0.264c-0.189-0.214-0.409-0.182-0.521,0.076c-0.037,0.085-0.108,0.155-0.164,0.232
	c-0.226,0.312-0.529,0.594-0.549,1.003c-0.025,0.522,0.003,1.047,0,1.571c-0.001,0.124-0.036,0.247-0.063,0.419
	c-0.081-0.072-0.121-0.09-0.124-0.113c-0.049-0.377-0.205-0.71-0.406-1.027c-0.017-0.026-0.022-0.061-0.026-0.093
	c-0.078-0.576-0.201-1.151-0.221-1.73c-0.021-0.587-0.117-1.157-0.205-1.733c-0.135-0.879-0.218-1.766-0.348-2.646
	c-0.076-0.512-0.266-0.97-0.797-1.191c-0.054-0.022-0.092-0.082-0.16-0.147c0.077-0.028,0.106-0.046,0.135-0.048
	c0.139-0.012,0.313,0.045,0.365-0.152c0.05-0.186-0.102-0.263-0.212-0.372c-0.076-0.076-0.141-0.203-0.144-0.308
	c-0.035-1.28-0.063-2.56-0.083-3.84c-0.013-0.819-0.008-1.638-0.014-2.457c-0.008-0.963-0.016-1.927-0.031-2.89
	c-0.002-0.151-0.007-0.319-0.073-0.447c-0.124-0.243-0.282-0.473-0.448-0.691c-0.167-0.22-0.453-0.224-0.624-0.005
	c-0.221,0.283-0.401,0.596-0.391,0.972c0.017,0.68,0.052,1.359,0.068,2.039c0.031,1.256,0.053,2.512,0.08,3.768
	c0.024,1.142,0.043,2.284,0.083,3.426c0.009,0.252,0.021,0.447-0.251,0.582c-0.19,0.094-0.168,0.295,0.034,0.362
	c0.198,0.066,0.219,0.193,0.207,0.354c-0.008,0.104-0.026,0.209-0.053,0.31c-0.173,0.629,0.208,1.056,0.541,1.501
	c0.022,0.029,0.069,0.041,0.106,0.057c0.4,0.185,0.476,0.308,0.326,0.719c-0.194,0.53-0.233,1.082-0.224,1.628
	c0.017,1.024,0.096,2.048,0.15,3.072c0.003,0.048,0.014,0.096,0.023,0.144c0.085,0.47,0.197,0.937,0.247,1.411
	c0.078,0.726,0.262,1.42,0.572,2.075c0.473,0.999,0.751,2.052,0.918,3.138c0.022,0.141-0.033,0.3-0.075,0.444
	c-0.154,0.528-0.324,1.05-0.472,1.58c-0.045,0.162-0.02,0.342-0.063,0.505c-0.257,0.969-0.575,1.926-0.531,2.95
	c0.001,0.024-0.007,0.048-0.009,0.072c-0.089,0.784,0.031,1.525,0.372,2.247c0.135,0.287,0.177,0.643,0.17,0.966
	c-0.011,0.468-0.1,0.934-0.164,1.399c-0.114,0.824-0.034,1.635,0.171,2.433c0.159,0.618,0.167,1.199-0.267,1.719
	c-0.04,0.048-0.075,0.112-0.085,0.173c-0.053,0.318-0.129,0.636-0.14,0.956c-0.022,0.663-0.007,1.328-0.01,1.992
	c-0.001,0.195,0.017,0.395-0.022,0.582c-0.053,0.256-0.157,0.501-0.232,0.753c-0.149,0.502-0.308,1.002-0.432,1.51
	c-0.045,0.185-0.008,0.393,0.004,0.59c0.017,0.279,0.045,0.559,0.068,0.838c-0.022,0.004-0.045,0.009-0.067,0.014
	c-0.041-0.07-0.081-0.14-0.152-0.262c-0.042,0.231-0.098,0.416-0.107,0.604c-0.029,0.563-0.041,1.128-0.057,1.692
	c-0.013,0.459-0.026,0.919-0.037,1.378h-7.208v6.311c-0.561,0.024-1.121,0.058-1.682,0.087c-0.625,0.033-1.25,0.069-1.875,0.096
	c-0.499,0.022-0.998,0.033-1.497,0.051c-0.055,0.002-0.109,0.027-0.163,0.028c-0.209,0.004-0.422,0.029-0.63,0.028v-32.61h-2.015
	v-4.234H212.06v4.435h-1.412v-15.323h-2.733v-2.419h-9.163v3.024h-2.218v30.646h-4.233v-12.097h-1.613v-8.468l-1.008-1.008v-15.323
	h-2.419v-7.258h-8.066v6.25h-2.017v2.823h-1.814v16.532h-2.62v-7.46h-19.76v9.678h-5.04v-1.815h-3.428v2.823h-6.653V237h-5.444
	v-3.428h-9.595v2.621h-5.527v31.049h-5.848v3.226h-3.023v2.924h-7.864v6.956h-1.814v-27.421H82.217v5.041h-9.678v17.541h-6.25
	v-2.117h-4.436v-3.125H49.756v3.125h-6.25v2.52h-2.421V250.71H19.714v27.421h-5.242v-10.887H5.6v13.307H0v15.525v205.203h750
	V296.075v-11.493H741.936z M248.149,269.168c-0.001-0.077,0.313-0.153,0.784-0.23L248.149,269.168z M253.999,267.453
	c0-0.003,0-0.006,0-0.009h0.031L253.999,267.453z M357.06,270.503l1.682-21.568l1.564,21.613L357.06,270.503z M397.815,277.324
	l1.441-18.479l1.268,18.479H397.815z M464.167,270.267h-3.088v3.125h-6.25v2.52h-2.421V250.71h-21.371v27.421h-5.242v-10.887h-8.872
	v13.307h-5.6v5.444h-3.039v-3.83h-3.628v-4.839h-2.577l-0.66-31.142c0.177-0.065,0.305-0.235,0.305-0.434
	c0-0.206-0.137-0.38-0.324-0.44l-0.144-6.562h0.003c0.255,0,0.465-0.209,0.465-0.464c0-0.255-0.209-0.464-0.465-0.464h-0.023
	l-0.028-1.262h12.924v4.049h2.62v-1.286h3.716v-2.763h43.7V270.267z M464.167,230.434h-42.461v-0.262h1.096v-1.715l-3.715-1.429
	h-1.667l-0.953,1.429v1.715h1.143v0.262h-17.243v1.262h-1.905V226.6h4.096l3.858-0.476v-0.476h-6.745l-0.257-0.715h-3.001
	l-0.257,0.715h-1.315v0.953h2.81v5.097h-0.619v4.859h0.191l-0.042,1.262h-0.136c-0.255,0-0.464,0.209-0.464,0.464
	c0,0.255,0.209,0.464,0.464,0.464h0.105l-0.219,6.553c-0.201,0.051-0.351,0.233-0.351,0.449c0,0.205,0.136,0.378,0.321,0.44
	l-1.04,31.136h-4.713v3.025h-2.419v2.621h-2.42v-12.904h-5.645v2.017h-8.872v2.823h-2.823v-4.234l-6.267-0.088l-0.87-39.736
	c0.253-0.094,0.435-0.336,0.435-0.62c0-0.294-0.196-0.543-0.463-0.629l-0.205-9.374h0.004c0.365,0,0.664-0.299,0.664-0.663
	c0-0.365-0.299-0.664-0.664-0.664h-0.033l-0.04-1.803h18.463v5.784h3.743v-1.837h5.308v-3.947h75.124V230.434z M473.054,270.267
	h-6.029v-33.713h6.029V270.267z M508.883,215.096h1.123v6.68h-1.604C508.568,219.569,508.728,217.34,508.883,215.096z
	 M508.365,222.249h1.64v6.207h-1.063c0.358-0.332,0.26-1.088,0.251-2.709c-0.005-0.89-0.392-1.686-0.927-2.226
	C508.3,223.097,508.333,222.675,508.365,222.249z M508.005,252.928h-2.208V250.5c0.048-0.445,0.095-0.896,0.143-1.343h2.066V252.928
	z M508.005,248.684h-2.016c0.228-2.157,0.45-4.351,0.666-6.579h1.349V248.684z M509.779,252.928h-1.302v-3.771h1.302V252.928z
	 M509.779,248.684h-1.302v-6.579h1.302V248.684z M511.79,273.393h-1.065v-4.323h1.066L511.79,273.393z M511.791,268.597h-1.066
	v-6.312h1.067L511.791,268.597z M511.792,261.812h-1.067v-6.581h1.068L511.792,261.812z M511.793,254.758h-1.068v-5.601h1.069
	L511.793,254.758z M511.794,248.684h-1.069v-6.579h1.07L511.794,248.684z M511.795,241.632h-5.094
	c0.399-4.128,0.779-8.367,1.136-12.702h3.96L511.795,241.632z M511.797,228.457h-1.318v-6.207h1.319L511.797,228.457z
	 M511.798,221.777h-1.319v-6.68h1.321L511.798,221.777z M511.799,214.623h-2.883c0.212-3.084,0.412-6.201,0.602-9.34h2.283
	L511.799,214.623z M511.801,204.81h-2.255c0.122-2.041,0.241-4.089,0.354-6.148h1.902L511.801,204.81z M511.802,198.189h-1.877
	c0.052-0.964,0.104-1.93,0.154-2.897h1.724L511.802,198.189z M511.802,194.819h-1.699c0.053-1.023,0.103-2.048,0.153-3.074h1.547
	L511.802,194.819z M511.803,191.272h-1.523c0.042-0.864,0.082-1.73,0.122-2.596h1.402L511.803,191.272z M511.803,188.203h-1.38
	c0.202-4.416,0.382-8.851,0.535-13.286h0.848L511.803,188.203z M511.806,173.498h-0.802c0.014-0.433,0.029-0.867,0.043-1.3h0.759
	V173.498z M511.806,171.173h-0.726c0.123-3.937,0.226-7.87,0.307-11.784h0.42L511.806,171.173z M519.222,254.747
	c0,0.004,0.001,0.007,0.001,0.011h-0.001V254.747z M519.222,255.231h0.056c0.258,2.244,0.522,4.439,0.792,6.581h-0.847V255.231z
	 M519.222,262.284h0.906c0.274,2.16,0.553,4.267,0.838,6.312h-1.744V262.284z M518.557,248.684h-2.016v-6.579h1.349
	C518.107,244.333,518.329,246.527,518.557,248.684z M516.345,224.39c-0.008,1.232-0.08,1.836,0.167,2.115
	c0.052,0.652,0.105,1.303,0.158,1.952h-2.15v-6.207h1.66C516.234,222.966,516.29,223.678,516.345,224.39z M515.784,216.829
	c-0.164,0.261-0.271,0.576-0.273,0.919c-0.007,1.198-0.103,1.53,0.454,1.592c0.059,0.813,0.118,1.628,0.179,2.436h-1.624v-6.68
	h1.143C515.702,215.675,515.743,216.252,515.784,216.829z M512.754,159.389h0.404c0.082,3.914,0.184,7.846,0.307,11.784h-0.713
	L512.754,159.389z M512.752,172.198h0.747c0.014,0.433,0.028,0.867,0.043,1.3h-0.789L512.752,172.198z M512.751,174.917h0.836
	c0.153,4.435,0.333,8.87,0.535,13.286h-1.373L512.751,174.917z M512.749,188.676h1.395c0.04,0.866,0.08,1.732,0.122,2.596h-1.517
	L512.749,188.676z M512.749,191.745h1.541c0.05,1.026,0.1,2.051,0.153,3.074h-1.694L512.749,191.745z M512.748,195.292h1.719
	c0.05,0.967,0.101,1.933,0.153,2.897h-1.873L512.748,195.292z M512.748,198.662h1.898c0.113,2.059,0.231,4.107,0.354,6.148h-2.253
	L512.748,198.662z M512.747,205.283h2.281c0.19,3.139,0.39,6.256,0.602,9.34h-2.884L512.747,205.283z M512.745,215.096h1.302v6.68
	h-1.303L512.745,215.096z M512.744,222.249h1.303v6.207h-1.304L512.744,222.249z M512.743,228.93h3.965
	c0.358,4.336,0.737,8.574,1.136,12.702h-5.104L512.743,228.93z M513.821,273.393h-1.085l0.001-4.323h1.084V273.393z
	 M513.821,268.597h-1.084l0.001-6.312h1.083V268.597z M513.821,261.812h-1.083l0.001-6.581h1.082V261.812z M513.821,254.758h-1.082
	l0.001-5.601h1.081V254.758z M513.821,248.684h-1.081l0.001-6.579h1.08V248.684z M516.068,273.393h-1.301v-4.323h1.301V273.393z
	 M516.068,268.597h-1.301v-6.312h1.301V268.597z M516.068,261.812h-1.301v-6.581h1.301V261.812z M516.068,254.758h-1.301v-5.601
	h1.301V254.758z M516.068,248.684h-1.301v-6.579h1.301V248.684z M518.749,273.393h-2.208v-4.323h2.208V273.393z M518.749,268.597
	h-2.208v-6.312h2.208V268.597z M518.749,261.812h-2.208v-6.581h2.208V261.812z M518.749,254.758h-2.208v-5.601h2.065
	c0.047,0.448,0.095,0.899,0.143,1.344V254.758z M519.751,270.469v2.924h-0.529v-4.323h1.809c0.067,0.473,0.134,0.932,0.201,1.399
	H519.751z"/>
<rect y="391.463" class="st9" width="750" height="109.815"/>
  </pattern>
 </defs>
 <animate 
           xlink:href="#pattern"
           attributeName="x" 
           from="750"
           to="0" 
           dur="25s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze" />
<animateTransform
           xlink:href="#anima_wheel_1"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 234 306.649"
           to="360 234 306.649"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#anima_wheel_front"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 517.471 307.166"
           to="360 517.471 307.166"
           dur="7s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateTransform
           xlink:href="#pedal_a"
           attributeName="transform"
           attributeType="XML"
           type="rotate"
           from="0 368.5 325"
           to="360 368.5 325"
           dur="20s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"/>
    <animateMotion 
           xlink:href="#pedal"
           dur="20s"
           begin="-1.4s"
           fill="freeze"
            repeatCount="indefinite"
             >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>
</div>

Run code

Cut to clipboard

reply | quote | #²

广西南宁市 2017-12-27, 11:11:35

Canvas飞机树林上空飞行特效

<style>
* {
	margin: 0;
	padding: 0;
}

#world {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#e4e0ba, #f7d9aa);
}
</style>



<script src="https://out.img.pan.lizhenqiu.com/ae680261c17f84d0fdae004b6189a4d7"></script>

<div id="world"></div>

<script>
var Colors = {
	red:0xf25346,
	yellow:0xedeb27,
	white:0xd8d0d1,
	brown:0x59332e,
	pink:0xF5986E,
	brownDark:0x23190f,
	blue:0x68c3c0,
	green:0x458248,
	purple:0x551A8B,
	lightgreen:0x629265,
};



var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container;


function createScene() {
	// Get the width and height of the screen
	// and use them to setup the aspect ratio
	// of the camera and the size of the renderer.
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;

	// Create the scene.
	scene = new THREE.Scene();

	// Add FOV Fog effect to the scene. Same colour as the BG int he stylesheet.
	scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

	// Create the camera
	aspectRatio = WIDTH / HEIGHT;
	fieldOfView = 60;
	nearPlane = 1;
	farPlane = 10000;
	camera = new THREE.PerspectiveCamera(
		fieldOfView,
		aspectRatio,
		nearPlane,
		farPlane
	);
	// Position the camera
	camera.position.x = 0;
	camera.position.y = 150;
	camera.position.z = 100;	

	// Create the renderer

	renderer = new THREE.WebGLRenderer ({
	// Alpha makes the background transparent, antialias is performant heavy
		alpha: true,
		antialias:true
	});

	//set the size of the renderer to fullscreen
	renderer.setSize (WIDTH, HEIGHT);
	//enable shadow rendering
	renderer.shadowMap.enabled = true;

	// Add the Renderer to the DOM, in the world div.
	container = document.getElementById('world');
	container.appendChild (renderer.domElement);

	//RESPONSIVE LISTENER
	window.addEventListener('resize', handleWindowResize, false);
}

//RESPONSIVE FUNCTION
function handleWindowResize() {
	HEIGHT = window.innerHeight;
	WIDTH = window.innerWidth;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
}


var hemispshereLight, shadowLight;

function createLights(){
	// Gradient coloured light - Sky, Ground, Intensity
	hemisphereLight = new THREE.HemisphereLight(0xaaaaaa,0x000000, .9)
	// Parallel rays
	shadowLight = new THREE.DirectionalLight(0xffffff, .9);



	shadowLight.position.set(0,350,350);
	shadowLight.castShadow = true;

	// define the visible area of the projected shadow
	shadowLight.shadow.camera.left = -650;
	shadowLight.shadow.camera.right = 650;
	shadowLight.shadow.camera.top = 650;
	shadowLight.shadow.camera.bottom = -650;
	shadowLight.shadow.camera.near = 1;
	shadowLight.shadow.camera.far = 1000;

	// Shadow map size
	shadowLight.shadow.mapSize.width = 2048;
	shadowLight.shadow.mapSize.height = 2048;

	// Add the lights to the scene
	scene.add(hemisphereLight);  

	scene.add(shadowLight);
}	


Land = function(){
	var geom = new THREE.CylinderGeometry(600,600,1700,40,10);
	//rotate on the x axis
	geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	//create a material
	var mat = new THREE.MeshPhongMaterial({
		color: Colors.lightgreen,
		shading:THREE.FlatShading,
	});

	//create a mesh of the object
	this.mesh = new THREE.Mesh(geom, mat);
	//receive shadows
	this.mesh.receiveShadow = true;
}

Orbit = function(){

	var geom =new THREE.Object3D();

	this.mesh = geom;
	//this.mesh.add(sun);
}

Sun = function(){

	this.mesh = new THREE.Object3D();

	var sunGeom = new THREE.SphereGeometry( 400, 20, 10 );
	var sunMat = new THREE.MeshPhongMaterial({
		color: Colors.yellow,
		shading:THREE.FlatShading,
	});
	var sun = new THREE.Mesh(sunGeom, sunMat);
	//sun.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
	sun.castShadow = false;
	sun.receiveShadow = false;
	this.mesh.add(sun);
}

Cloud = function(){
	// Create an empty container for the cloud
	this.mesh = new THREE.Object3D();
	// Cube geometry and material
	var geom = new THREE.DodecahedronGeometry(20,0);
	var mat = new THREE.MeshPhongMaterial({
		color:Colors.white,  
	});

	var nBlocs = 3+Math.floor(Math.random()*3);

	for (var i=0; i<nBlocs; i++ ){
		//Clone mesh geometry
		var m = new THREE.Mesh(geom, mat);
			//Randomly position each cube
			m.position.x = i*15;
			m.position.y = Math.random()*10;
			m.position.z = Math.random()*10;
			m.rotation.z = Math.random()*Math.PI*2;
			m.rotation.y = Math.random()*Math.PI*2;

			//Randomly scale the cubes
			var s = .1 + Math.random()*.9;
			m.scale.set(s,s,s);
			this.mesh.add(m);
	}
}

Sky = function(){

	this.mesh = new THREE.Object3D();

	// Number of cloud groups
	this.nClouds = 25;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nClouds;

	// Create the Clouds

	for(var i=0; i<this.nClouds; i++){
	
		var c = new Cloud();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the cloud itself
		var h = 800 + Math.random()*200;
		c.mesh.position.y = Math.sin(a)*h;
		c.mesh.position.x = Math.cos(a)*h;		

		// rotate the cloud according to its position
		c.mesh.rotation.z = a + Math.PI/2;

		// random depth for the clouds on the z-axis
		c.mesh.position.z = -400-Math.random()*400;

		// random scale for each cloud
		var s = 1+Math.random()*2;
		c.mesh.scale.set(s,s,s);

		this.mesh.add(c.mesh);
	}
}

Tree = function () {

	this.mesh = new THREE.Object3D();

	var matTreeLeaves = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});

	var geonTreeBase = new THREE.BoxGeometry( 10,20,10 );
	var matTreeBase = new THREE.MeshBasicMaterial( { color:Colors.brown});
	var treeBase = new THREE.Mesh(geonTreeBase,matTreeBase);
	treeBase.castShadow = true;
	treeBase.receiveShadow = true;
	this.mesh.add(treeBase);

	var geomTreeLeaves1 = new THREE.CylinderGeometry(1, 12*3, 12*3, 4 );
	var treeLeaves1 = new THREE.Mesh(geomTreeLeaves1,matTreeLeaves);
	treeLeaves1.castShadow = true;
	treeLeaves1.receiveShadow = true;
	treeLeaves1.position.y = 20
	this.mesh.add(treeLeaves1);

	var geomTreeLeaves2 = new THREE.CylinderGeometry( 1, 9*3, 9*3, 4 );
	var treeLeaves2 = new THREE.Mesh(geomTreeLeaves2,matTreeLeaves);
	treeLeaves2.castShadow = true;
	treeLeaves2.position.y = 40;
	treeLeaves2.receiveShadow = true;
	this.mesh.add(treeLeaves2);

	var geomTreeLeaves3 = new THREE.CylinderGeometry( 1, 6*3, 6*3, 4);
	var treeLeaves3 = new THREE.Mesh(geomTreeLeaves3,matTreeLeaves);
	treeLeaves3.castShadow = true;
	treeLeaves3.position.y = 55;
	treeLeaves3.receiveShadow = true;
	this.mesh.add(treeLeaves3);

}

Flower = function () {

	this.mesh = new THREE.Object3D();

	var geomStem = new THREE.BoxGeometry( 5,50,5,1,1,1 );
	var matStem = new THREE.MeshPhongMaterial( { color:Colors.green, shading:THREE.FlatShading});
	var stem = new THREE.Mesh(geomStem,matStem);
	stem.castShadow = false;
	stem.receiveShadow = true;
	this.mesh.add(stem);


	var geomPetalCore = new THREE.BoxGeometry(10,10,10,1,1,1);
	var matPetalCore = new THREE.MeshPhongMaterial({color:Colors.yellow, shading:THREE.FlatShading});
	petalCore = new THREE.Mesh(geomPetalCore, matPetalCore);
	petalCore.castShadow = false;
	petalCore.receiveShadow = true;

	var petalColor = petalColors [Math.floor(Math.random()*3)];

	var geomPetal = new THREE.BoxGeometry( 15,20,5,1,1,1 );
	var matPetal = new THREE.MeshBasicMaterial( { color:petalColor});
	geomPetal.vertices[5].y-=4;
	geomPetal.vertices[4].y-=4;
	geomPetal.vertices[7].y+=4;
	geomPetal.vertices[6].y+=4;
	geomPetal.translate(12.5,0,3);

		var petals = [];
		for(var i=0; i<4; i++){	

			petals[i]=new THREE.Mesh(geomPetal,matPetal);
			petals[i].rotation.z = i*Math.PI/2;
			petals[i].castShadow = true;
			petals[i].receiveShadow = true;
		}

	petalCore.add(petals[0],petals[1],petals[2],petals[3]);
	petalCore.position.y = 25;
	petalCore.position.z = 3;
	this.mesh.add(petalCore);

}

var petalColors = [Colors.red, Colors.yellow, Colors.blue];



Forest = function(){

	this.mesh = new THREE.Object3D();

	// Number of Trees
	this.nTrees = 300;

	// Space the consistenly
	var stepAngle = Math.PI*2 / this.nTrees;

	// Create the Trees

	for(var i=0; i<this.nTrees; i++){
	
		var t = new Tree();

		//set rotation and position using trigonometry
		var a = stepAngle*i;
		// this is the distance between the center of the axis and the tree itself
		var h = 605;
		t.mesh.position.y = Math.sin(a)*h;
		t.mesh.position.x = Math.cos(a)*h;		

		// rotate the tree according to its position
		t.mesh.rotation.z = a + (Math.PI/2)*3;

		//Andreas Trigo funtime
		//t.mesh.rotation.z = Math.atan2(t.mesh.position.y, t.mesh.position.x)-Math.PI/2;

		// random depth for the tree on the z-axis
		t.mesh.position.z = 0-Math.random()*600;

		// random scale for each tree
		var s = .3+Math.random()*.75;
		t.mesh.scale.set(s,s,s);

		this.mesh.add(t.mesh);
	}

	// Number of Trees
	this.nFlowers = 350;

	var stepAngle = Math.PI*2 / this.nFlowers;


	for(var i=0; i<this.nFlowers; i++){	

		var f = new Flower();
		var a = stepAngle*i;

		var h = 605;
		f.mesh.position.y = Math.sin(a)*h;
		f.mesh.position.x = Math.cos(a)*h;		

		f.mesh.rotation.z = a + (Math.PI/2)*3;

		f.mesh.position.z = 0-Math.random()*600;

		var s = .1+Math.random()*.3;
		f.mesh.scale.set(s,s,s);

		this.mesh.add(f.mesh);
	}

}

var AirPlane = function() {
	
	this.mesh = new THREE.Object3D();

	// Create the cabin
	var geomCockpit = new THREE.BoxGeometry(80,50,50,1,1,1);
	var matCockpit = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	geomCockpit.vertices[4].y-=10;
	geomCockpit.vertices[4].z+=20;
	geomCockpit.vertices[5].y-=10;
	geomCockpit.vertices[5].z-=20;
	geomCockpit.vertices[6].y+=30;
	geomCockpit.vertices[6].z+=20;
	geomCockpit.vertices[7].y+=30;
	geomCockpit.vertices[7].z-=20;
	var cockpit = new THREE.Mesh(geomCockpit, matCockpit);
	cockpit.castShadow = true;
	cockpit.receiveShadow = true;
	this.mesh.add(cockpit);
	
	// Create the engine
	var geomEngine = new THREE.BoxGeometry(20,50,50,1,1,1);
	var matEngine = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var engine = new THREE.Mesh(geomEngine, matEngine);
	engine.position.x = 40;
	engine.castShadow = true;
	engine.receiveShadow = true;
	this.mesh.add(engine);
	
	// Create the tail
	var geomTailPlane = new THREE.BoxGeometry(15,20,5,1,1,1);
	var matTailPlane = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane);
	tailPlane.position.set(-35,25,0);
	tailPlane.castShadow = true;
	tailPlane.receiveShadow = true;
	this.mesh.add(tailPlane);
	
	// Create the wing
	var geomSideWing = new THREE.BoxGeometry(40,4,150,1,1,1);
	var matSideWing = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	var sideWingTop = new THREE.Mesh(geomSideWing, matSideWing);
	var sideWingBottom = new THREE.Mesh(geomSideWing, matSideWing);
	sideWingTop.castShadow = true;
	sideWingTop.receiveShadow = true;
	sideWingBottom.castShadow = true;
	sideWingBottom.receiveShadow = true;

	sideWingTop.position.set(20,12,0);
	sideWingBottom.position.set(20,-3,0);
	this.mesh.add(sideWingTop);
	this.mesh.add(sideWingBottom);

	var geomWindshield = new THREE.BoxGeometry(3,15,20,1,1,1);
	var matWindshield = new THREE.MeshPhongMaterial({color:Colors.white,transparent:true, opacity:.3, shading:THREE.FlatShading});;
	var windshield = new THREE.Mesh(geomWindshield, matWindshield);
	windshield.position.set(5,27,0);

	windshield.castShadow = true;
	windshield.receiveShadow = true;

	this.mesh.add(windshield);

	var geomPropeller = new THREE.BoxGeometry(20,10,10,1,1,1);
	geomPropeller.vertices[4].y-=5;
	geomPropeller.vertices[4].z+=5;
	geomPropeller.vertices[5].y-=5;
	geomPropeller.vertices[5].z-=5;
	geomPropeller.vertices[6].y+=5;
	geomPropeller.vertices[6].z+=5;
	geomPropeller.vertices[7].y+=5;
	geomPropeller.vertices[7].z-=5;
	var matPropeller = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	this.propeller = new THREE.Mesh(geomPropeller, matPropeller);
	this.propeller.castShadow = true;
	this.propeller.receiveShadow = true;


	var geomBlade1 = new THREE.BoxGeometry(1,100,10,1,1,1);
	var geomBlade2 = new THREE.BoxGeometry(1,10,100,1,1,1);
	var matBlade = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	
	var blade1 = new THREE.Mesh(geomBlade1, matBlade);
	blade1.position.set(8,0,0);
	blade1.castShadow = true;
	blade1.receiveShadow = true;

	var blade2 = new THREE.Mesh(geomBlade2, matBlade);
	blade2.position.set(8,0,0);
	blade2.castShadow = true;
	blade2.receiveShadow = true;
	this.propeller.add(blade1, blade2);
	this.propeller.position.set(50,0,0);
	this.mesh.add(this.propeller);

	var wheelProtecGeom = new THREE.BoxGeometry(30,15,10,1,1,1);
	var wheelProtecMat = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var wheelProtecR = new THREE.Mesh(wheelProtecGeom,wheelProtecMat);
	wheelProtecR.position.set(25,-20,25);
	this.mesh.add(wheelProtecR);

	var wheelTireGeom = new THREE.BoxGeometry(24,24,4);
	var wheelTireMat = new THREE.MeshPhongMaterial({color:Colors.brownDark, shading:THREE.FlatShading});
	var wheelTireR = new THREE.Mesh(wheelTireGeom,wheelTireMat);
	wheelTireR.position.set(25,-28,25);

	var wheelAxisGeom = new THREE.BoxGeometry(10,10,6);
	var wheelAxisMat = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var wheelAxis = new THREE.Mesh(wheelAxisGeom,wheelAxisMat);
	wheelTireR.add(wheelAxis);

	this.mesh.add(wheelTireR);

	var wheelProtecL = wheelProtecR.clone();
	wheelProtecL.position.z = -wheelProtecR.position.z ;
	this.mesh.add(wheelProtecL);

	var wheelTireL = wheelTireR.clone();
	wheelTireL.position.z = -wheelTireR.position.z;
	this.mesh.add(wheelTireL);

	var wheelTireB = wheelTireR.clone();
	wheelTireB.scale.set(.5,.5,.5);
	wheelTireB.position.set(-35,-5,0);
	this.mesh.add(wheelTireB);

	var suspensionGeom = new THREE.BoxGeometry(4,20,4);
	suspensionGeom.applyMatrix(new THREE.Matrix4().makeTranslation(0,10,0))
	var suspensionMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});
	var suspension = new THREE.Mesh(suspensionGeom,suspensionMat);
	suspension.position.set(-35,-5,0);
	suspension.rotation.z = -.3;
	this.mesh.add(suspension);
};

var Fox = function() {
	
	this.mesh = new THREE.Object3D();
	
	var redFurMat = new THREE.MeshPhongMaterial({color:Colors.red, shading:THREE.FlatShading});

	// Create the Body
	var geomBody = new THREE.BoxGeometry(100,50,50,1,1,1);
	var body = new THREE.Mesh(geomBody, redFurMat);
	body.castShadow = true;
	body.receiveShadow = true;
	this.mesh.add(body);
	
	// Create the Chest
	var geomChest = new THREE.BoxGeometry(50,60,70,1,1,1);
	var chest = new THREE.Mesh(geomChest, redFurMat);
	chest.position.x = 60;
	chest.castShadow = true;
	chest.receiveShadow = true;
	this.mesh.add(chest);

	// Create the Head
	var geomHead = new THREE.BoxGeometry(40,55,50,1,1,1);
	this.head = new THREE.Mesh(geomHead, redFurMat);
	this.head.position.set(80, 35, 0);
	this.head.castShadow = true;
	this.head.receiveShadow = true;

	// Create the Snout
	var geomSnout = new THREE.BoxGeometry(40,30,30,1,1,1);
	var snout = new THREE.Mesh(geomSnout, redFurMat);
	geomSnout.vertices[0].y-=5;
	geomSnout.vertices[0].z+=5;
	geomSnout.vertices[1].y-=5;
	geomSnout.vertices[1].z-=5;
	geomSnout.vertices[2].y+=5;
	geomSnout.vertices[2].z+=5;
	geomSnout.vertices[3].y+=5;
	geomSnout.vertices[3].z-=5;
	snout.castShadow = true;
	snout.receiveShadow = true;
	snout.position.set(30,0,0);
	this.head.add(snout);

	// Create the Nose
	var geomNose = new THREE.BoxGeometry(10,15,20,1,1,1);
	var matNose = new THREE.MeshPhongMaterial({color:Colors.brown, shading:THREE.FlatShading});
	var nose = new THREE.Mesh(geomNose, matNose);
	nose.position.set(55,0,0);
	this.head.add(nose);

	// Create the Ears
	var geomEar = new THREE.BoxGeometry(10,40,30,1,1,1);
	var earL = new THREE.Mesh(geomEar, redFurMat);
	earL.position.set(-10,40,-18);
	this.head.add(earL);
	earL.rotation.x=-Math.PI/10;
	geomEar.vertices[1].z+=5;
	geomEar.vertices[4].z+=5;
	geomEar.vertices[0].z-=5;
	geomEar.vertices[5].z-=5;

	// Create the Ear Tips
	var geomEarTipL = new THREE.BoxGeometry(10,10,20,1,1,1);
	var matEarTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var earTipL = new THREE.Mesh(geomEarTipL, matEarTip);
	earTipL.position.set(0,25,0);
	earL.add(earTipL);

	var earR = earL.clone();
	earR.position.z = -earL.position.z;
	earR.rotation.x = -	earL.rotation.x;
	this.head.add(earR);

	this.mesh.add(this.head);

	
	// Create the tail
	var geomTail = new THREE.BoxGeometry(80,40,40,2,1,1);
	geomTail.vertices[4].y-=10;
	geomTail.vertices[4].z+=10;
	geomTail.vertices[5].y-=10;
	geomTail.vertices[5].z-=10;
	geomTail.vertices[6].y+=10;
	geomTail.vertices[6].z+=10;
	geomTail.vertices[7].y+=10;
	geomTail.vertices[7].z-=10;
	this.tail = new THREE.Mesh(geomTail, redFurMat);
	this.tail.castShadow = true;
	this.tail.receiveShadow = true;

	// Create the tail Tip
	var geomTailTip = new THREE.BoxGeometry(20,40,40,1,1,1);
	var matTailTip = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var tailTip = new THREE.Mesh(geomTailTip, matTailTip);
	tailTip.position.set(80,0,0);
	tailTip.castShadow = true;
	tailTip.receiveShadow = true;
	this.tail.add(tailTip);
	this.tail.position.set(-40,10,0);
	geomTail.translate(40,0,0);
	geomTailTip.translate(10,0,0);
	this.tail.rotation.z = Math.PI/1.5;
	this.mesh.add(this.tail);


	// Create the Legs
	var geomLeg = new THREE.BoxGeometry(20,60,20,1,1,1);
	this.legFR = new THREE.Mesh(geomLeg, redFurMat);
	this.legFR.castShadow = true;
	this.legFR.receiveShadow = true;

	// Create the feet
	var geomFeet = new THREE.BoxGeometry(20,20,20,1,1,1);
	var matFeet = new THREE.MeshPhongMaterial({color:Colors.white, shading:THREE.FlatShading});
	var feet = new THREE.Mesh(geomFeet, matFeet);
	feet.position.set(0,0,0);
	feet.castShadow = true;
	feet.receiveShadow = true;
	this.legFR.add(feet);
	this.legFR.position.set(70,-12,25);
	geomLeg.translate(0,40,0);
	geomFeet.translate(0,80,0);
	this.legFR.rotation.z = 16;
	this.mesh.add(this.legFR);

	this.legFL = this.legFR.clone();
	this.legFL.position.z = -this.legFR.position.z;
	this.legFL.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legFL);

	this.legBR = this.legFR.clone();
	this.legBR.position.x = -(this.legFR.position.x)+50;
	this.legBR.rotation.z = -this.legFR.rotation.z;
	this.mesh.add(this.legBR);

	this.legBL = this.legFL.clone();
	this.legBL.position.x = -(this.legFL.position.x)+50;
	this.legBL.rotation.z = -this.legFL.rotation.z;
	this.mesh.add(this.legBL);

};


var sky;
var forest;
var land;
var orbit;
var airplane;
var sun;
var fox;

var mousePos={x:0, y:0};
var offSet = -600;


function createSky(){
  sky = new Sky();
  sky.mesh.position.y = offSet;
  scene.add(sky.mesh);
}

function createLand(){
  land = new Land();
  land.mesh.position.y = offSet;
  scene.add(land.mesh);
}

function createOrbit(){
  orbit = new Orbit();
  orbit.mesh.position.y = offSet;
  orbit.mesh.rotation.z = -Math.PI/6; 
  scene.add(orbit.mesh);
}

function createForest(){
  forest = new Forest();
  forest.mesh.position.y = offSet;
  scene.add(forest.mesh);
}

function createSun(){ 
	sun = new Sun();
	sun.mesh.scale.set(1,1,.3);
	sun.mesh.position.set(0,-30,-850);
	scene.add(sun.mesh);
}


function createPlane(){ 
	airplane = new AirPlane();
	airplane.mesh.scale.set(.35,.35,.35);
	airplane.mesh.position.set(-40,110,-250);
	// airplane.mesh.rotation.z = Math.PI/15;
	scene.add(airplane.mesh);
}

function createFox(){ 
	fox = new Fox();
	fox.mesh.scale.set(.35,.35,.35);
	fox.mesh.position.set(-40,110,-250);
	scene.add(fox.mesh);
}


function updatePlane() {

	var targetY = normalize(mousePos.y,-.75,.75, 50, 190);
	var targetX = normalize(mousePos.x,-.75,.75,-100, -20);
	
	// Move the plane at each frame by adding a fraction of the remaining distance
	airplane.mesh.position.y += (targetY-airplane.mesh.position.y)*0.1;

	airplane.mesh.position.x += (targetX-airplane.mesh.position.x)*0.1;

	// Rotate the plane proportionally to the remaining distance
	airplane.mesh.rotation.z = (targetY-airplane.mesh.position.y)*0.0128;
	airplane.mesh.rotation.x = (airplane.mesh.position.y-targetY)*0.0064;
	airplane.mesh.rotation.y = (airplane.mesh.position.x-targetX)*0.0064;

	airplane.propeller.rotation.x += 0.3;
}

function normalize(v,vmin,vmax,tmin, tmax){

	var nv = Math.max(Math.min(v,vmax), vmin);
	var dv = vmax-vmin;
	var pc = (nv-vmin)/dv;
	var dt = tmax-tmin;
	var tv = tmin + (pc*dt);
	return tv;

}


function loop(){
  land.mesh.rotation.z += .005;
  orbit.mesh.rotation.z += .001;
  sky.mesh.rotation.z += .003;
  forest.mesh.rotation.z += .005;
  updatePlane();

  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}

function handleMouseMove (event) {
	var tx = -1 + (event.clientX / WIDTH)*2;
	var ty = 1 - (event.clientY / HEIGHT)*2;
	mousePos = {x:tx, y:ty};	
}


function init(event) {
	createScene();
	createLights();
	createPlane();
	createOrbit();
	createSun();
	createLand();
	createForest();
	createSky();
	//createFox();

	document.addEventListener('mousemove', handleMouseMove, false);

	loop();
}

window.addEventListener('load', init, false);
</script>

Run code

Cut to clipboard

reply | quote | #³

Records:3 1/1 «‹1 ›»

lizhenqiu blog

JS酷炫红色LED数字时钟

相关日志

有过 3 条评论 »

留下評論