<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
				<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="105mm" height="66.509mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
				viewBox="0 0 10500 6651"
				 xmlns:xlink="http://www.w3.org/1999/xlink">
				 <defs>
				  <style type="text/css">
				   <![CDATA[
					.fil3 {fill:#000'}
					.fil2 {fill:#000}
					.fil1 {fill:#000}
					.fil0 {fill:#000;fill-rule:nonzero}
				   ]]>
				  </style>
				 </defs>
				 
				 <g id="Слой_x0020_1">
				  <metadata id="CorelCorpID_0Corel-Layer"/>
				  <g id="_84009376224">
				   <path class="fil0" d="M8392 0l-1639 0c-2512,0 -2900,1549 -2902,2694 1045,-957 2179,-1762 3330,-2094 -1153,560 -2266,1463 -3221,2281l1471 0c2212,0 3014,-1906 2961,-2881z"/>
				   <path class="fil0" d="M8393 0l-1639 0c-2512,0 -2900,1549 -2901,2694 1044,-957 2179,-1762 3330,-2094 -1153,560 -2266,1463 -3222,2281l1472 0c2211,0 3013,-1906 2960,-2881z"/>
				   <path class="fil0" d="M4816 5706l0 0 0 -1852 -548 0 0 953c0,248 -7,432 -22,551 -13,118 -49,210 -107,270 -57,63 -151,93 -279,93 -37,0 -115,-5 -233,-15l0 -351 81 0c80,0 132,-14 157,-39 25,-25 37,-89 37,-192l0 -1645 1282 0 0 2227 -368 0 0 0zm750 0l0 0 0 -2227 1356 0 0 376 -988 0 0 493 918 0 0 376 -918 0 0 606 1021 0 0 376 -1389 0 0 0zm1708 0l0 0 0 -2209 1286 0 0 376 -918 0 0 1832 -368 1 0 0zm1455 -1100l0 0c0,-266 38,-484 117,-655 79,-172 181,-300 307,-384 128,-84 280,-126 461,-126 262,0 474,99 639,298 164,201 247,485 247,854 0,371 -87,663 -261,873 -153,185 -361,277 -623,277 -264,0 -474,-92 -626,-274 -175,-209 -261,-498 -261,-863l0 0zm379 -14l0 0c0,255 48,447 146,575 98,128 217,192 362,192 144,0 264,-64 360,-190 95,-128 142,-322 142,-586 0,-258 -46,-449 -139,-574 -92,-122 -214,-184 -363,-184 -150,0 -272,62 -366,186 -95,126 -142,318 -142,581z"/>
				   <g id="ffds">
					<path class="fil1" d="M1772 767l196 580 -570 0 198 -580 0 0c9,-39 45,-70 87,-70 44,0 79,29 89,70l0 0 0 0z"/>
					<path class="fil2" d="M1693 5916c-339,-134 -311,-320 -190,-679 0,0 -298,247 -282,496 0,287 270,718 472,918 204,-200 475,-631 475,-918 14,-249 -284,-496 -284,-496 123,359 151,545 -191,679l0 0z"/>
					<path class="fil3" d="M3396 5704l-544 0 -316 -987 -486 0 151 432 -996 0 151 -432 -531 0 -312 987 -513 0 1399 -4359 569 0 1428 4359zm-1041 -1563l-675 -2127 -673 2127 1348 0z"/>
				   </g>
				  </g>
				 </g>
				</svg>
				<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
				<script src="https://d3js.org/d3.v5.min.js"></script>
				<script>
				  function init() { 		
	d3.select("#ffds").transition().ease(d3.easeLinear).duration(1500).attr('transform', 'translate(1600,2861) scale(0.5,0.5)').transition();
	d3.select(".fil1").transition().ease(d3.easeLinear).duration(1500).attr('visibility', 'hidden').transition();
	d3.select(".fil2").transition().ease(d3.easeLinear).duration(1500).attr('visibility', 'hidden').transition();
	
	d3.select("#ffds").transition().ease(d3.easeLinear).delay(4500).duration(1500).attr('transform', 'translate(0,0) scale(1,1)').transition();
		
	d3.select(".fil1").transition().ease(d3.easeLinear).delay(4500).duration(100).attr('visibility', 'visible').transition();
	d3.select(".fil2").transition().ease(d3.easeLinear).delay(4500).duration(100).attr('visibility', 'visible').transition().on("end", fil1);
}
function fil1() { 
	repeatfil1();
	var i=0;
	function repeatfil1(){
		i++;
		console.log(i);
		if(i==3) {i=0;init();return false;}
		
		d3.select(".fil2").transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(177).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(77).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)').transition().ease(d3.easeLinear).duration(77).attrTween("transform", function(d, i, a) {return d3.interpolateString(a, 'scale(1)');}).transition().ease(d3.easeLinear).duration(177).attr('transform', 'scale(1.03)');
		
		d3.select("#ffds").transition().ease(d3.easeLinear).duration(1277).attr("transform", "translate(" + (10 + 5) + ",350)").delay(55).transition().ease(d3.easeLinear).duration(1277).attr("transform", "translate(" + (10 - 15) + ",-300)").on("end", repeatfil1);
		
	};
};

function isScrolledIntoView(elem){
	var docViewTop = $(window).scrollTop();
	var docViewBottom = docViewTop + $(window).height();

	var elemTop = $(elem).offset().top;
	var elemBottom = elemTop + $(elem).height();

	return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

d3.select("#ffds").transition().ease(d3.easeLinear).duration(1).attr('transform', 'translate(1600,2861) scale(0.5,0.5)').transition();
d3.select(".fil1").transition().ease(d3.easeLinear).duration(1).attr('visibility', 'hidden').transition();
d3.select(".fil2").transition().ease(d3.easeLinear).duration(1).attr('visibility', 'hidden').transition();
	
	$('body').attr('scroll','bottom');
			d3.select("#ffds").transition().ease(d3.easeLinear).delay(1500).duration(1500).attr('transform', 'translate(0,0) scale(1,1)').transition();
			d3.select(".fil1").transition().ease(d3.easeLinear).delay(1500).duration(1500).attr('visibility', 'visible').transition();
			d3.select(".fil2").transition().ease(d3.easeLinear).delay(1500).duration(1500).attr('visibility', 'visible').transition().on("end", fil1);
				</script>
  </body>

</html>
// Code goes here

/* Styles go here */