Как использовать анимированный SVG-шаблон в качестве слайдерного перехода? - PullRequest
1 голос
/ 13 марта 2020

Я действительно начал работу над анимированным SVG, и пока все выглядит великолепно, но я хочу, чтобы, по крайней мере, после первого перехода он загрузил другое изображение. Я добавил градиент и изображение в SVG, как вы думаете, можно ли отобразить другое изображение после первого перехода? или? ...

Я не смог найти примеров слайдеров, которые, по крайней мере, имеют самый близкий вид и функциональность, один из самых близких просто тяжелый, но все равно не дает мне ничего, что мне нужно.

Это пример, который я делаю до сих пор:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;background: rgb(193,39,45);background: -moz-linear-gradient(45deg,  rgba(193,39,45,.3) 0%, rgba(237,28,36,.8) 100%); background: -webkit-linear-gradient(45deg, rgba(193,39,45,.3) 0%,rgba(237,28,36,.8) 100%),url('http://geo.digitalgeo.co.uk/wp-content/uploads/2020/01/LAA-04.jpg'); background: linear-gradient(45deg, rgba(193,39,45,.3) 0%,rgba(237,28,36,.8) 100%),url('http://geo.digitalgeo.co.uk/wp-content/uploads/2020/01/LAA-04.jpg'); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1272d', endColorstr='#ed1c24',GradientType=1 );background-size: cover; background-position: center; background-repeat: no-repeat;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#efefef;stroke-width:0;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:0;stroke-dashoffset:0;animation: 1400ms ease-in-out 4ms forwards;}
	
	#Layer_1aa:hover {background:url('https://geo.digitalgeo.co.uk/wp-content/uploads/2020/02/Top-Right-960x630-1.jpg') !important;background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;}
	
</style>
<g>
	<path class="st0" d="M-1094.6,307.5l354.3-1288.6l1333-95.3	">
<animate accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.0300s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-1065.9,342.3L-711.5-946l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.0600s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-1037.1,377.6l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.0869s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-1008.6,412.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.1159s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-979.9,447.4L-625.5-841l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.1449s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-951.4,482.2L-597-806.2l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.1739s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-922.4,517.5l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.2028s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-893.6,552.6l354.2-1288.6l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.2318s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-864.9,587.4L-510.5-701l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.2608s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-836.3,622.5l354.4-1288.4L851-761.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.2898s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-807.7,657.4l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.3188s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-778.9,692.6l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.3478s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-750.2,727.5l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.3768s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-721.5,762.5l354.4-1288.3l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.4057s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-692.6,797.6l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.4347s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-664.1,832.6l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.4637s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-635.4,867.5l354.6-1288.3L1052-516.2	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.4927s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-606.7,902.3L-252.3-386l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.5217s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-578,937.5l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.5507s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-549.3,972.4l354.4-1288.3L1138-411.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.5797s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-520.6,1007.4l354.4-1288.1l1332.9-95.5	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.6086s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-492,1042.3l354.4-1288.4l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.6376s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-463.3,1077.5l354.5-1288.4l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.6667s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-434.4,1112.7L-80-175.6l1333-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.6956s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-405.8,1147.4L-51.5-141l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.7246s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-377,1182.5L-22.6-105.8l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.7536s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-348.5,1217.3L6-70.9l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.7826s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-319.6,1252.7L34.9-35.7l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.8115s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-291,1287.4L63.3-0.9l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.8405s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-262.2,1322.6L92.1,34.2L1425-61.2	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.8695s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-233.8,1357.3L120.7,69.1l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.8985s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-204.9,1392.6L149.6,104.2L1482.5,8.8	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.9275s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-176.1,1427.6L178.2,139.2l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.9565s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-147.5,1462.5L206.8,174.1l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-0.9855s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-118.6,1497.6L235.8,209.2l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.0144s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-90.1,1532.4L264.4,244.2l1333-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.0434s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-61.3,1567.5L293.3,279.2l1332.9-95.5	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.0724s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-32.5,1602.6L321.7,314.1l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.1014" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M-4,1637.5L350.5,349.1l1332.9-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.1304s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M24.7,1672.5L379.2,384.1l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.1594s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M53.3,1707.4L407.7,419.2l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.1884s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M82.2,1742.6L436.5,454.2l1333-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.2173s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M110.8,1777.5L465.2,489.2l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.2463s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M139.6,1812.6L494.1,524.3L1827,428.9	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.2753s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M168.4,1847.6L522.7,559.1l1333-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.3043s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M197.1,1882.6L551.5,594.3l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.3333s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M225.8,1917.7L580.1,629.5L1913,534.1	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.3623s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M254.3,1952.5L608.8,664.2l1332.9-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.39130s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M283,1987.5L637.4,699.1l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.4202s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M311.7,2022.6L666.1,734.2l1333-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.4492s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>

	<path class="st0 the-gap" d="M341.1,2053.2L695.4,764.6l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.4782s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M369.8,2088.1L724.2,799.8l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.5072s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M398.7,2123.4L753,835l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.5362s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M427.1,2158.1L781.6,869.7l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.5652s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M455.9,2193.2L810.2,904.8l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.5942s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M484.3,2228L838.8,939.6l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.6232s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M513.3,2263.4L867.8,975l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.6522s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M542.1,2298.4l354.2-1288.6l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.6812s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M570.8,2333.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.7012s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M599.4,2368.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.7302s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M628,2403.2l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.7592s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M656.8,2438.4L1011.2,1150l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.7882s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M685.6,2473.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.8172s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M714.3,2508.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.8462s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M743.1,2543.4L1097.5,1255l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.8752s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M771.6,2578.3L1126,1289.9l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.9042s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M800.3,2613.3L1154.8,1325l1332.8-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.9332s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M829,2648.1l354.4-1288.3l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-1.9622s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M857.7,2683.3l354.4-1288.4l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-2.0202s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M886.4,2718.2l354.5-1288.3l1332.9-95.4	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-2.0492s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M915.1,2753.2l354.4-1288.1l1332.9-95.5	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-2.0782s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M943.6,2788.1L1298,1499.7l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-2.1072s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
	<path class="st0" d="M972.5,2823.3l354.4-1288.4l1333-95.3	">
<animate  accumulate="none" additive="replace" attributeName="stroke-width" begin="-2.1362s" calcMode="spline" dur="3s" fill="remove" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" keyTimes="0;0.5;1" repeatCount="2"  restart="always" values="0;60;0">
			</animate>
	</path>
</g>
</svg>

Высоко ценю советы или указания!

...