11

Необходимо сделать анимацию пары черных силуэтов.

Код svg:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 3072 4890"  enable-background="new 0 0 1023.923 1629.953" xml:space="preserve">
<g>
	<path d="M524.364,457.289c0.042,6.464,0.542,7.285,1.84,7.343c2.241,0.099,1.255-3.52,2.454-5.42
		c1.283-2.034,1.918-4.723,4.966-5.012c26.856-22.65,113.915,28.649,109.232,76.212c-0.925,9.396-9.358,42-15.992,48.618
		c-1.714,1.71-0.025,3.227,2.122,5.153c3.162,2.837,7.217,13.534,7.524,14.538c5.72,18.711,1.412,16.322,6.573,21.637
		c14.337,14.763-1.304,27.523-0.709,33.334c1.246,12.151-5.996,24.299-6.035,25.315c-0.661,16.822,1.605,8.844,2.347,18.957
		c1.589,21.671-12.762,18.06-9.376,28.579c1.2,3.727-2.718,7.651,11.623,17.418c3.632,2.474,8.861,10.757,6.731,14.485
		c-2.564,4.487-0.191,6.798-2.841,7.086c-4.479,0.486-2.25-4.493-2.474-9.502c-0.32-7.168-10.973-14.951-13.767-7.368
		c-2.79,7.574-7.558,5.205,1.971,21.953c2.842,4.996,10.211,5.633,13.026,10.845c1.486,2.753,2.002,11.903-2.699,16.657
		c-0.99,1.001-4.288,5.819-1.298,8.426c7.324,6.384-0.781,5.065-2.775,1.584c-5.497-9.593,0.857-5.405-0.124-20.748
		c-0.311-4.871-2.813-4.614-8.813-8.659c-5.814-3.92-3.671,3.516-0.287,6.92c2.999,3.017,5.195,12.317-1.943,20.321
		c-4.999,5.605-6.744,7.773-5.109,13.615c0.818,2.923-1.227,3.903-3.048,1.784c-3.093-3.6-2.703-10.756,0.925-13.774
		c4.064-3.381,4.692-8.79,2.881-13.561c-3.453-9.095-2.681-10.233-4.58-10.307c-2.644-0.103-2.711,7.563-2.483,9.049
		c1.894,12.374-5.124,10.58-4.059,25.753c0.322,4.583,2.239,2.176,2.297,5.766c0.095,5.849-9.901-6.726-10.14-16.232
		c-0.091-3.609-5.682,0.102-3.713-3.679c6.908-13.263-6.95-25.812-8.167-18.709c-0.171,1.001-5.175,12.766-1.193,16.4
		c17.992,16.421,7.725,14.576,8.87,33.247c0.099,1.616,1.098,2.664,1.812,3.924c3.619,6.388-8.38,1.041-7.954-5.95
		c1.452-23.843,4.088-11.641-8.774-29.216c-5.996-8.193,2.233-8.753-3.807-18.159c-3.57-5.56-0.047-10.846-1.373-18.221
		c-1.147-6.379,2.208-4.712-1.633-12.803c-1.18-2.486-4.897,1.858-5.943,4.512c-5.67,14.382,4.026,11.448,0.712,29.296
		c-1.603,8.636,12.72,18.374,7.768,25.249c-3.686,5.118-8.744,6.258-14.547,5.856c-3.489-0.242-7.817-11.19-4.319-9.881
		c3.522,1.32-0.112,2.093,5.983,4.557c4.197,1.696,8.58-1.972,4.829-6.134c-7.495-8.317-11.815-9.619-11.027-18.207
		c0.837-9.118,1.613-11.23-1.232-13.566c-2.105-1.729-2.469-3.645-1.29-6.281c1.149-2.57,1.846-5.204,4.285-7.065
		c1.4-1.068,1.071-3.04,0.205-4.385c-2.403-3.729-3.191-8.357-5.93-11.739c-5.923-7.314,7.36-18.596,8.49-24.517
		c0.337-1.767,3.79-9.292,0.51-13.634c-1.391-1.841,0.291-4.837-1.907-5.388c-3.067-0.768-0.719,1.219-8.899,10.232
		c-0.909,1.001-15.242,17.978-18.112,23.909c-0.425,0.879-1.005,1.431-1.811,1.905c-3.583,2.107-6.081,5.288-8.418,8.622
		c-2.374,3.387,3.887,9.059-2.86,16.117c-2.619,2.74,1.966,24.97-5.904,25.509c-1.001,0.069-5.533,1.291-5.11,4.291
		c0.622,4.409-2.021,5.821-6.332,7.954c-2.285,1.13-2.277,4.345-0.094,5.638c1.726,1.023,2.057,2.229,0.685,3.675
		c-6.947,7.321-2.453,14.308-2.418,20.681c0.143,26.974,37.005,75.63,46.59,101.225c2.95,7.878,2.719,16.194,4.363,24.211
		c3.388,16.526-0.331,40.085,2.628,60.419c0.146,1.001,3.675,47.264,6.312,50.924c0.148,0.206,2.472,15.825,2.31,20.485
		c-0.478,13.72,4.289,25.488,5.502,36.737c3.069,28.468,13.302,24.157-19.933,22.808c-9.423-0.382-13.023-1.634-19.25-1.517
		c-12.661,0.238-14.103-1.883-14.158,3.244c-0.098,9.079-6.811,1.59,43.314,4.786c1.087,0.069,36.86,7.619,48.794,7.497
		c14.464-0.149,20.84,7.095,31.949-5.437c0.895-1.009,7.497-28.474,37.909-26.868c9.634,0.508,14.144,6.721,22.312,10.654
		c0.998,0.48,1.91,1.226,2.717,2c16.59,15.896,44.757,27.663,58.172,43.82c2.882,3.471,4.904,7.53,7.61,11.117
		c9.482,12.566-0.339,32.085-11.914,25.507c-8.504-4.834-3.969-9.144-29.197-16.391c-6.009-1.727-6.89-1.87-7.891-1.273
		c0,0-125.019,2.044-199.965,11.491c-11.988,1.512-12.276,3.68-15.088,4.17c-4.1,0.713,9.2,61.075,10.706,68.467
		c8.478,41.599-4.185,77.822-5.19,97.875c-1.818,36.276-8.902,47.656-0.166,67.626c6.725,15.372,25.021,47.678,6.833,61.969
		c-9.637,7.572-16.222,4.231-24.745,44.192c-1.569,7.357-3.97,10.253-4.172,15.576c-0.57,15.052-27.412,28.074-42.602,14.258
		c-4.933-4.487-2.369-19.645,2.057-26.315c55.332-83.364-2.907-182.724-1.507-284.255c0.028-2.012-10.431-28.611-10.191-30.828
		c0.318-2.937-0.865-5.548-1.778-8.205c-1.137-3.305-3.565-1.29-6.062-1.175c-3.571,0.165-6.904-1.827-9.804-3.774
		c-12.578-8.444-14.065-20.876-16.606-34.343c-2.362-12.52-6.801-28.406-2.754-40.974c0.403-1.251,0.173-2.201-1.132-2.773
		c-9.264-4.059-7.977-0.847-8.269,14.464c-0.06,3.147-4.212,18.499-4.528,19.8c-1.105,4.55-0.988,9.253-1.576,13.873
		c-10.528,82.736,1.564,48.825-14.988,112.107c-1.3,4.97,0.937,6.377,1.042,17.842c0.027,2.991,0.875,33.393-0.285,36.232
		c-8.775,21.465,5.854,55.65-1.062,75.086c-3.125,8.782,2.644,13.77,7.738,25.661c2.634,6.148,6.224,8.996,8.327,14.542
		c8.467,22.336,5.458,13.955,17.573,20.221c18.222,9.425,54.243,4.841,44.541,39.349c-3.726,13.252-16.276,14.364-20.68,16.581
		c-28.194,14.196-51.401-5.339-69.768-4.866c-3.267,0.083-2.281,2.646-1.169,2.612c3.574-0.112,5.198,2.68,7.465,4.643
		c3.791,3.282,10.197,6.587,9.061,12.604c-0.633,3.354,2.298,7.337-4.962,18.367c-3.031,4.606-10.769,11.865-15.289,12.679
		c-27.147,4.884-31.589,6.483-70.463-0.88c-1.845-0.349-28.758-4.333-28.758-7.115c-20.674-9.922-16.702-26.193-16.576-53.426
		c0.024-5.187,10.38-43.21,4.058-84.754c-3.659-24.045-4.635-42.368-9.712-59.256c-0.301-1.001,4.875-108.557,11.041-129.774
		c4.923-16.938,6.572-74.699,7.258-95.353c0.993-29.911-10.044-33.687-10.106-47.22c-0.391-84.857-6.56-108.629-6.322-147.839
		c0.056-9.236,2.137-8.92,1.894-15.779c-0.249-7.041-0.087-14.182,0.658-21.188c0.511-4.805,18.244-69.865,14.493-91.486
		c-2.323-13.388,1.544-13.533-5.611-13.898c-7.144-0.365-9.761-8.576-9.572-15.779c0.069-2.634-1.353-4.736-2.121-7.068
		c-0.359-1.091-1.402-1.201-2.257-0.731c-3.092,1.701-4.355-2.008-7.972-4.221c-5.295-3.239,0.583-12.594,1.174-13.737
		c3.297-6.38-1.605-22.34-2.463-24.373c-0.664-1.572-0.372-3.58,0.187-5.345c2.092-6.612-2.76-18.16-2.629-27.025
		c0.338-22.73-3.933-30.969-1.164-41.897c1.568-6.186,0.717-14.333,1.906-18.158c2.534-8.147,0.879-16.887,0.273-25.612
		c-0.342-4.928,0.566-3.947,0.972-14.199c0.319-8.052,5.593-14.226,6.247-18.666c0.265-1.801,1.327-3.377,2.105-4.915
		c4.962-9.808,5.224-33.26,20.264-57.019c2.189-3.457,5.735-16.749,10.072-21.519c4.231-4.653,4.774-9.631,2.961-13.623
		c-3.7-8.146,0.009-13.577,0.109-15.311c0.244-4.234,4.799-20.229,7.602-24.561c1.151-1.778,0.857-3.329-1.081-4.108
		c-4.818-1.937-5.486-8.939-1.324-13.239c2.08-2.149,5.301,0.098,9.222-2.678c3.249-2.301,0.791-2.425,2.738-4.381
		c5.596-5.621,1.941-9.344,8.036-9.715c2.549-0.155,4.311-1.076,5.894-3.251c2.232-3.066,6.39-3.801,9.374-2
		c5.143,3.106,7.16-5.357,13.396,0.239c3.856,3.46,8.871,7.865,9.989,2.702c1.738-8.018,10.824-17.917,10.86-24.523
		c0.003-0.542,0.127-1.19,0.439-1.606c1.791-2.385,1.681-5.106,1.392-7.813c-0.862-8.075,5.242-7.122,7.972-18.067
		c3.189-12.782,11.618-13.037,16.685-22.315c1.86-3.406,5.59-4.391,8.866-5.79c2.541-1.085,4.272-3.204,6.552-4.594
		c1.067-0.65,0.103-2.566-1.565-2.215c-4.107,0.864-72.899-0.687-112.277,10.382c-3.94,1.107-3.999,3.382-5.892,6.653
		c-2.324,4.015-6.383,0.595-6.474-2.05c-0.235-6.802,11.988-4.98-23.22-23.898c-11.489-6.055-71.235-23.233-128.412-23.253
		c-12.161-0.004-24.002,1.87-35.965,2.604c-4.905,0.301-13.657-0.607-18.014,2.448c-1.966,1.378-2.75,4.003-4.43,5.721
		c-4.129,4.222-8.559-0.383-5.889-4.773c6.522-10.723,38.973-44.872,46.282-49.834c0,0,17.865-22.01,19.201-23.499
		c21.169-23.602,51.457-47.583,59.757-57.131c11.201-12.885,54.678-40.129,62.715-47.971c11.692-11.409,58.15-34.885,64.637-38.386
		c19.184-10.353,31.38-9.706,42.364-14.779c26.556-12.266,92.847-23.213,131.544-27.85c8-0.959,43.452,0.624,57.955-7.641
		c5.997-3.418,0.855-1.107,3.633-45.958c0.224-3.618-1.527-11.279,3.658-11.279c6.683-0.33,5.808-5.156,5.246,45.245
		c-0.031,2.746,0.526,12.81,3.3,12.788c3.11-0.021,7.976,3.598,10.993,4.627c27.252,9.293,37.067,6.773,50.28,8.728
		c32.087,4.727,100.059,22.793,100.059,22.793c9.633,0.071,8.841,3.243,40.615,14.374c16.035,5.617,42.62,27.102,44.937,28.505
		c23.039,13.951,25.798,15.456,31.205,21.251c3.223,3.454,18.889,16.163,26.181,24.909c6.796,8.151,15.768,11.419,22.84,20.415
		c5.835,7.421,15.353,22.039,32.19,36.62c1.001,0.867,98.725,118.572,90.062,121.903c-1.001,0.385-6.598,8.208-9.432,0.103
		c-5.783-16.538-62.236-13.968-79.817-12.281c-1.001,0.096-84.779,2.087-98.342,5.634c-9.247-1.474-25.38,7.042-40.065,7.612
		c0,0-23.946,9.253-33.671,10.167c-2.906,0.273-3.825,1.308-2.558,3.847c3.241,6.498-6.079,13.557-8.565,2.754
		c-1.215-5.271-2.801-6.489-58.034-13.51c-65.729-8.355-91.067-10.369-112.006-9.516c-9.533,0.388-10.234-2.09-16.153-0.732
		c-4.708,1.08-2.903,22.131-3.864,39.033C524.414,410.512,524.364,457.288,524.364,457.289z
		M397.482,506.091
		c0.319,5.749,12.17,25.882,12.724,27.073c2.214,4.759,4.377,9.567,6.866,14.218c3.816,7.131,2.14,10.855,7.562,15.565
		c12.284,10.672,46.168,18.21,52.28,22.215c3.973,2.604,14.74,4.427,16.339,5.101c4.662,1.965,4.426-9.776-0.608-14.459
		c-11.256-10.47-19.964-13.33-32.761-24.708c-3.258-2.897-2.522-12.275,1.407-14.136c5.789-2.74,0.343-7.2,4.898-10.104
		c3.734-2.38-1.668-4.486,3.334-9.534c2.369-2.391,4.964-2.226,2.915-5.528c-1.453-2.342-4.12-3.938-1.08-8.442
		c1.222-1.81,2.403-3.231,1.16-4.491c-0.87-0.883-1.882-0.448-2.844-0.078c-1.574,0.606-1.903,2.192-2.553,3.448
		c-3.761,7.273-8.495,3.081-12.065,8.912c-3.502,5.719-8.637-0.639-9.493,6.842c-0.921,8.047-11.47,9.515-18.6,4.593
		c-14.021-9.68-17.136-10.901-23.79-18.934C402.206,502.475,397.243,501.772,397.482,506.091z M514.39,439.065
		c0.035,0,0.07,0,0.104,0c0-57.91,4.615-68.152-1.897-68.626c-29.101-2.119-27.761-1.825-29.246-2.711
		c-1.201-0.717-11.722-3.892-9.106,0.323c2.591,4.175,9.537,4.196,13.697,9.959c0.722,1,8.176,3.3,15.406,16.561
		c1.085,1.989,2.423,4.192,2.399,6.61c-0.046,4.625,2.019,8.758,2.928,13.153c3.969,19.177-4.483,30.821-4.851,35.063
		c-0.815,9.376-6.279,15.842-12.331,22.296c-3.115,3.322-0.864,6.758-2.099,9.3c-2.121,4.367-1.566,9.07-2.155,13.619
		c-0.232,1.79,0.764,2.665,2.591,2.739c7,0.283,4.658-4.304,10.508-10.068C518.105,469.774,514.39,482.752,514.39,439.065z
		 M430.133,619.302c3.749-0.927,7.963,0.456,8.636-0.953c0.6-1.257-1.176-2.668-2.538-2.958
		c-1.698-0.361-26.296-13.364-29.67-15.652c-5.297-3.591-1.642,8.079,0.025,14.255C408.221,620.052,410.719,615.806,430.133,619.302
		z"/>
</g>
</svg>

Анимация уменьшения, увеличения прозрачности не подходит.

2
  • 7
    Хоть бы пояснили за что минусуете, может я действительно в чём-то не прав :) 12 ноя 2018 в 18:17
  • это божественно ...кто посмел поставить минус O.o ???
    – Randall
    14 ноя 2018 в 10:45

2 ответа 2

16

Вариант анимации силуэтов с добавлением анимации градиентов фона

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 3072 4890" >
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
  <stop stop-color="rgb(0,0,12)" offset="0%" >
    <animate attributeName="stop-color" dur="24s" values="rgba(0,0,12,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(2,1,17,0);rgba(32,32,44,0.5);rgba(64,64,92,.8);rgb(74,73,105);rgb(117,122,191);rgb(130,173,219);rgb(148,197,248);rgb(183,234,255);rgb(144,223,254);rgb(87,193,235);rgb(45,145,194);rgb(36,115,171);rgb(30,82,142);rgb(30,82,142);rgb(21,66,119);rgba(22,60,82,0.8);rgba(7,27,38,.5);rgba(1,10,16,.3);rgba(9,4,1,0);rgba(0,0,12,0);rgba(0,0,12,0)"
    repeatCount="indefinite" />
    <animate attributeName="offset" dur="20s" values="0;.85;.6;.1;0;0;0;0;0;.01;0;0;0;0;0;0;0;0;0;0;.3,.5,.8,0"
    repeatCount="indefinite" />
  </stop>
  
  <stop stop-color="rgb(0,0,12)" offset="100%" >
    <animate attributeName="stop-color" dur="20s" values="rgba(0,0,12,0);rgba(25,22,33,.3);rgba(32,32,44,.8);rgb(58,58,82);rgb(81,81,117);rgb(138,118,171);rgb(205,130,160);rgb(234,176,209);rgb(235,178,177);rgb(177,181,234);rgb(148,223,255);rgb(103,209,251);rgb(56,163,209);rgb(36,111,168);rgb(30,82,142);rgb(91,121,131);rgb(157,166,113);rgb(233,206,93);rgb(178,99,57);rgb(47,17,7);rgb(36,14,3);rgb(47,17,7);rgba(75,29,6,.4);rgba(21,8,0,0);rgba(0,0,12,0)"
    repeatCount="indefinite" />
  </stop>
</linearGradient> 
<rect id="sky" x="0" y="0" width="100%" height="50%"  style="fill:url(#grad1)" />  
 <path stroke-dasharray="8263" stroke-dashoffset="8263" stroke="black" stroke-width="2.5" fill="none" d="M524.4 457.3c0 6.5 0.5 7.3 1.8 7.3 2.2 0.1 1.3-3.5 2.5-5.4 1.3-2 1.9-4.7 5-5 26.9-22.6 113.9 28.6 109.2 76.2 -0.9 9.4-9.4 42-16 48.6 -1.7 1.7 0 3.2 2.1 5.2 3.2 2.8 7.2 13.5 7.5 14.5 5.7 18.7 1.4 16.3 6.6 21.6 14.3 14.8-1.3 27.5-0.7 33.3 1.2 12.2-6 24.3-6 25.3 -0.7 16.8 1.6 8.8 2.3 19 1.6 21.7-12.8 18.1-9.4 28.6 1.2 3.7-2.7 7.7 11.6 17.4 3.6 2.5 8.9 10.8 6.7 14.5 -2.6 4.5-0.2 6.8-2.8 7.1 -4.5 0.5-2.2-4.5-2.5-9.5 -0.3-7.2-11-15-13.8-7.4 -2.8 7.6-7.6 5.2 2 22 2.8 5 10.2 5.6 13 10.8 1.5 2.8 2 11.9-2.7 16.7 -1 1-4.3 5.8-1.3 8.4 7.3 6.4-0.8 5.1-2.8 1.6 -5.5-9.6 0.9-5.4-0.1-20.7 -0.3-4.9-2.8-4.6-8.8-8.7 -5.8-3.9-3.7 3.5-0.3 6.9 3 3 5.2 12.3-1.9 20.3 -5 5.6-6.7 7.8-5.1 13.6 0.8 2.9-1.2 3.9-3 1.8 -3.1-3.6-2.7-10.8 0.9-13.8 4.1-3.4 4.7-8.8 2.9-13.6 -3.5-9.1-2.7-10.2-4.6-10.3 -2.6-0.1-2.7 7.6-2.5 9 1.9 12.4-5.1 10.6-4.1 25.8 0.3 4.6 2.2 2.2 2.3 5.8 0.1 5.8-9.9-6.7-10.1-16.2 -0.1-3.6-5.7 0.1-3.7-3.7 6.9-13.3-6.9-25.8-8.2-18.7 -0.2 1-5.2 12.8-1.2 16.4 18 16.4 7.7 14.6 8.9 33.2 0.1 1.6 1.1 2.7 1.8 3.9 3.6 6.4-8.4 1-8-5.9 1.5-23.8 4.1-11.6-8.8-29.2 -6-8.2 2.2-8.8-3.8-18.2 -3.6-5.6 0-10.8-1.4-18.2 -1.1-6.4 2.2-4.7-1.6-12.8 -1.2-2.5-4.9 1.9-5.9 4.5 -5.7 14.4 4 11.4 0.7 29.3 -1.6 8.6 12.7 18.4 7.8 25.2 -3.7 5.1-8.7 6.3-14.5 5.9 -3.5-0.2-7.8-11.2-4.3-9.9 3.5 1.3-0.1 2.1 6 4.6 4.2 1.7 8.6-2 4.8-6.1 -7.5-8.3-11.8-9.6-11-18.2 0.8-9.1 1.6-11.2-1.2-13.6 -2.1-1.7-2.5-3.6-1.3-6.3 1.1-2.6 1.8-5.2 4.3-7.1 1.4-1.1 1.1-3 0.2-4.4 -2.4-3.7-3.2-8.4-5.9-11.7 -5.9-7.3 7.4-18.6 8.5-24.5 0.3-1.8 3.8-9.3 0.5-13.6 -1.4-1.8 0.3-4.8-1.9-5.4 -3.1-0.8-0.7 1.2-8.9 10.2 -0.9 1-15.2 18-18.1 23.9 -0.4 0.9-1 1.4-1.8 1.9 -3.6 2.1-6.1 5.3-8.4 8.6 -2.4 3.4 3.9 9.1-2.9 16.1 -2.6 2.7 2 25-5.9 25.5 -1 0.1-5.5 1.3-5.1 4.3 0.6 4.4-2 5.8-6.3 8 -2.3 1.1-2.3 4.3-0.1 5.6 1.7 1 2.1 2.2 0.7 3.7 -6.9 7.3-2.5 14.3-2.4 20.7 0.1 27 37 75.6 46.6 101.2 3 7.9 2.7 16.2 4.4 24.2 3.4 16.5-0.3 40.1 2.6 60.4 0.1 1 3.7 47.3 6.3 50.9 0.1 0.2 2.5 15.8 2.3 20.5 -0.5 13.7 4.3 25.5 5.5 36.7 3.1 28.5 13.3 24.2-19.9 22.8 -9.4-0.4-13-1.6-19.2-1.5 -12.7 0.2-14.1-1.9-14.2 3.2 -0.1 9.1-6.8 1.6 43.3 4.8 1.1 0.1 36.9 7.6 48.8 7.5 14.5-0.1 20.8 7.1 31.9-5.4 0.9-1 7.5-28.5 37.9-26.9 9.6 0.5 14.1 6.7 22.3 10.7 1 0.5 1.9 1.2 2.7 2 16.6 15.9 44.8 27.7 58.2 43.8 2.9 3.5 4.9 7.5 7.6 11.1 9.5 12.6-0.3 32.1-11.9 25.5 -8.5-4.8-4-9.1-29.2-16.4 -6-1.7-6.9-1.9-7.9-1.3 0 0-125 2-200 11.5 -12 1.5-12.3 3.7-15.1 4.2 -4.1 0.7 9.2 61.1 10.7 68.5 8.5 41.6-4.2 77.8-5.2 97.9 -1.8 36.3-8.9 47.7-0.2 67.6 6.7 15.4 25 47.7 6.8 62 -9.6 7.6-16.2 4.2-24.7 44.2 -1.6 7.4-4 10.3-4.2 15.6 -0.6 15.1-27.4 28.1-42.6 14.3 -4.9-4.5-2.4-19.6 2.1-26.3 55.3-83.4-2.9-182.7-1.5-284.3 0-2-10.4-28.6-10.2-30.8 0.3-2.9-0.9-5.5-1.8-8.2 -1.1-3.3-3.6-1.3-6.1-1.2 -3.6 0.2-6.9-1.8-9.8-3.8 -12.6-8.4-14.1-20.9-16.6-34.3 -2.4-12.5-6.8-28.4-2.8-41 0.4-1.3 0.2-2.2-1.1-2.8 -9.3-4.1-8-0.8-8.3 14.5 -0.1 3.1-4.2 18.5-4.5 19.8 -1.1 4.6-1 9.3-1.6 13.9 -10.5 82.7 1.6 48.8-15 112.1 -1.3 5 0.9 6.4 1 17.8 0 3 0.9 33.4-0.3 36.2 -8.8 21.5 5.9 55.7-1.1 75.1 -3.1 8.8 2.6 13.8 7.7 25.7 2.6 6.1 6.2 9 8.3 14.5 8.5 22.3 5.5 14 17.6 20.2 18.2 9.4 54.2 4.8 44.5 39.3 -3.7 13.3-16.3 14.4-20.7 16.6 -28.2 14.2-51.4-5.3-69.8-4.9 -3.3 0.1-2.3 2.6-1.2 2.6 3.6-0.1 5.2 2.7 7.5 4.6 3.8 3.3 10.2 6.6 9.1 12.6 -0.6 3.4 2.3 7.3-5 18.4 -3 4.6-10.8 11.9-15.3 12.7 -27.1 4.9-31.6 6.5-70.5-0.9 -1.8-0.3-28.8-4.3-28.8-7.1 -20.7-9.9-16.7-26.2-16.6-53.4 0-5.2 10.4-43.2 4.1-84.8 -3.7-24-4.6-42.4-9.7-59.3 -0.3-1 4.9-108.6 11-129.8 4.9-16.9 6.6-74.7 7.3-95.4 1-29.9-10-33.7-10.1-47.2 -0.4-84.9-6.6-108.6-6.3-147.8 0.1-9.2 2.1-8.9 1.9-15.8 -0.2-7-0.1-14.2 0.7-21.2 0.5-4.8 18.2-69.9 14.5-91.5 -2.3-13.4 1.5-13.5-5.6-13.9 -7.1-0.4-9.8-8.6-9.6-15.8 0.1-2.6-1.4-4.7-2.1-7.1 -0.4-1.1-1.4-1.2-2.3-0.7 -3.1 1.7-4.4-2-8-4.2 -5.3-3.2 0.6-12.6 1.2-13.7 3.3-6.4-1.6-22.3-2.5-24.4 -0.7-1.6-0.4-3.6 0.2-5.3 2.1-6.6-2.8-18.2-2.6-27 0.3-22.7-3.9-31-1.2-41.9 1.6-6.2 0.7-14.3 1.9-18.2 2.5-8.1 0.9-16.9 0.3-25.6 -0.3-4.9 0.6-3.9 1-14.2 0.3-8.1 5.6-14.2 6.2-18.7 0.3-1.8 1.3-3.4 2.1-4.9 5-9.8 5.2-33.3 20.3-57 2.2-3.5 5.7-16.7 10.1-21.5 4.2-4.7 4.8-9.6 3-13.6 -3.7-8.1 0-13.6 0.1-15.3 0.2-4.2 4.8-20.2 7.6-24.6 1.2-1.8 0.9-3.3-1.1-4.1 -4.8-1.9-5.5-8.9-1.3-13.2 2.1-2.1 5.3 0.1 9.2-2.7 3.2-2.3 0.8-2.4 2.7-4.4 5.6-5.6 1.9-9.3 8-9.7 2.5-0.2 4.3-1.1 5.9-3.3 2.2-3.1 6.4-3.8 9.4-2 5.1 3.1 7.2-5.4 13.4 0.2 3.9 3.5 8.9 7.9 10 2.7 1.7-8 10.8-17.9 10.9-24.5 0-0.5 0.1-1.2 0.4-1.6 1.8-2.4 1.7-5.1 1.4-7.8 -0.9-8.1 5.2-7.1 8-18.1 3.2-12.8 11.6-13 16.7-22.3 1.9-3.4 5.6-4.4 8.9-5.8 2.5-1.1 4.3-3.2 6.6-4.6 1.1-0.6 0.1-2.6-1.6-2.2 -4.1 0.9-72.9-0.7-112.3 10.4 -3.9 1.1-4 3.4-5.9 6.7 -2.3 4-6.4 0.6-6.5-2 -0.2-6.8 12-5-23.2-23.9 -11.5-6.1-71.2-23.2-128.4-23.3 -12.2 0-24 1.9-36 2.6 -4.9 0.3-13.7-0.6-18 2.4 -2 1.4-2.7 4-4.4 5.7 -4.1 4.2-8.6-0.4-5.9-4.8 6.5-10.7 39-44.9 46.3-49.8 0 0 17.9-22 19.2-23.5 21.2-23.6 51.5-47.6 59.8-57.1 11.2-12.9 54.7-40.1 62.7-48 11.7-11.4 58.2-34.9 64.6-38.4 19.2-10.4 31.4-9.7 42.4-14.8 26.6-12.3 92.8-23.2 131.5-27.8 8-1 43.5 0.6 58-7.6 6-3.4 0.9-1.1 3.6-46 0.2-3.6-1.5-11.3 3.7-11.3 6.7-0.3 5.8-5.2 5.2 45.2 0 2.7 0.5 12.8 3.3 12.8 3.1 0 8 3.6 11 4.6 27.3 9.3 37.1 6.8 50.3 8.7 32.1 4.7 100.1 22.8 100.1 22.8 9.6 0.1 8.8 3.2 40.6 14.4 16 5.6 42.6 27.1 44.9 28.5 23 14 25.8 15.5 31.2 21.3 3.2 3.5 18.9 16.2 26.2 24.9 6.8 8.2 15.8 11.4 22.8 20.4 5.8 7.4 15.4 22 32.2 36.6 1 0.9 98.7 118.6 90.1 121.9 -1 0.4-6.6 8.2-9.4 0.1 -5.8-16.5-62.2-14-79.8-12.3 -1 0.1-84.8 2.1-98.3 5.6 -9.2-1.5-25.4 7-40.1 7.6 0 0-23.9 9.3-33.7 10.2 -2.9 0.3-3.8 1.3-2.6 3.8 3.2 6.5-6.1 13.6-8.6 2.8 -1.2-5.3-2.8-6.5-58-13.5 -65.7-8.4-91.1-10.4-112-9.5 -9.5 0.4-10.2-2.1-16.2-0.7 -4.7 1.1-2.9 22.1-3.9 39C524.4 410.5 524.4 457.3 524.4 457.3zM397.5 506.1c0.3 5.7 12.2 25.9 12.7 27.1 2.2 4.8 4.4 9.6 6.9 14.2 3.8 7.1 2.1 10.9 7.6 15.6 12.3 10.7 46.2 18.2 52.3 22.2 4 2.6 14.7 4.4 16.3 5.1 4.7 2 4.4-9.8-0.6-14.5 -11.3-10.5-20-13.3-32.8-24.7 -3.3-2.9-2.5-12.3 1.4-14.1 5.8-2.7 0.3-7.2 4.9-10.1 3.7-2.4-1.7-4.5 3.3-9.5 2.4-2.4 5-2.2 2.9-5.5 -1.5-2.3-4.1-3.9-1.1-8.4 1.2-1.8 2.4-3.2 1.2-4.5 -0.9-0.9-1.9-0.4-2.8-0.1 -1.6 0.6-1.9 2.2-2.6 3.4 -3.8 7.3-8.5 3.1-12.1 8.9 -3.5 5.7-8.6-0.6-9.5 6.8 -0.9 8-11.5 9.5-18.6 4.6 -14-9.7-17.1-10.9-23.8-18.9C402.2 502.5 397.2 501.8 397.5 506.1zM514.4 439.1c0 0 0.1 0 0.1 0 0-57.9 4.6-68.2-1.9-68.6 -29.1-2.1-27.8-1.8-29.2-2.7 -1.2-0.7-11.7-3.9-9.1 0.3 2.6 4.2 9.5 4.2 13.7 10 0.7 1 8.2 3.3 15.4 16.6 1.1 2 2.4 4.2 2.4 6.6 0 4.6 2 8.8 2.9 13.2 4 19.2-4.5 30.8-4.9 35.1 -0.8 9.4-6.3 15.8-12.3 22.3 -3.1 3.3-0.9 6.8-2.1 9.3 -2.1 4.4-1.6 9.1-2.2 13.6 -0.2 1.8 0.8 2.7 2.6 2.7 7 0.3 4.7-4.3 10.5-10.1C518.1 469.8 514.4 482.8 514.4 439.1zM430.1 619.3c3.7-0.9 8 0.5 8.6-1 0.6-1.3-1.2-2.7-2.5-3 -1.7-0.4-26.3-13.4-29.7-15.7 -5.3-3.6-1.6 8.1 0 14.3C408.2 620.1 410.7 615.8 430.1 619.3z">
  <animate id="an1" attributeName="stroke-dashoffset" values="8263;0" begin="btn.click+1s;an2.end" dur="20s" fill="freeze" restart="whenNotActive" />
  <animate id="an_fill" attributeName="fill" values="white;black;white" dur="15s" begin="an1.begin+20s" fill="freeze" />
  <animate id="an2" attributeName="stroke-dashoffset" values="0;8263" begin="an_fill.end" dur="20s" fill="freeze" restart="whenNotActive" /> 
  
  </path> 
     <g id="btn" onclick='play()' >
   <rect  x="5" y="5" rx="15"  id="rec1" width="150px" height="60px" fill="#4975B2" />
    <text x="35" y="50" font-size="48"  fill="white" pointer-events="none"> Start </text>
 </g>	 	
</svg>
<script>
var zodiac = new Audio();
zodiac.src = 'https://svg-art.ru/files/Mireille_Mathieu.mp3';

function play() {
  zodiac.play();
}
</script>

Live Demo

2
  • 4
    вот это и в правду красиво , от меня голос 12 ноя 2018 в 23:31
  • 1
    Восхитительно. Это самый прекрасный ответ на SO, который я видела =)
    – Ksenia
    20 дек 2018 в 21:01
7

Основная идея - сделать прорисовку контуров с помощью изменения атрибута патча stroke-dashoffset с последующим изменением цвета заполнения фигур.

Силуэты черные, потому что не указан параметр fill у патча, который по умолчанию имеет чёрный цвет. Чтобы убрать дефолтную заливку назначаем fill="none"

  • Файл svg имеет большой размер. Оптимизируем его с помощью SVGOMG от Jake Archibald

  • Для анимации контуров фигур необходимо узнать их длину

     <script>
         function TotalLength(){
             var path = document.querySelector('#check');
             var len = Math.round(path.getTotalLength() );
             alert("Path length - " + len);
         };
     </script>`   
    

Полученное значение длины линии - 8263px

  • Формула анимации прорисовки линий силуэтов:

     <animate id="an1" attributeName="stroke-dashoffset" values="8263;0" begin="1s;an2.end" dur="20s" fill="freeze" />
    
  • Код анимации заливки цветом

     <animate id="an_fill" attributeName="fill" values="white;black;white" dur="15s" begin="an1.begin+20s" fill="freeze" />
    

Она начнется через 20 секунд, после начала анимации прорисовки линий

  • Добавлено музыкальное сопровождение

Ниже полный код: Смотреть лучше в полноэкранном режиме

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 3072 4890" >
  <path stroke-dasharray="8263" stroke-dashoffset="8263" stroke="black" stroke-width="2.5" fill="none" d="M524.4 457.3c0 6.5 0.5 7.3 1.8 7.3 2.2 0.1 1.3-3.5 2.5-5.4 1.3-2 1.9-4.7 5-5 26.9-22.6 113.9 28.6 109.2 76.2 -0.9 9.4-9.4 42-16 48.6 -1.7 1.7 0 3.2 2.1 5.2 3.2 2.8 7.2 13.5 7.5 14.5 5.7 18.7 1.4 16.3 6.6 21.6 14.3 14.8-1.3 27.5-0.7 33.3 1.2 12.2-6 24.3-6 25.3 -0.7 16.8 1.6 8.8 2.3 19 1.6 21.7-12.8 18.1-9.4 28.6 1.2 3.7-2.7 7.7 11.6 17.4 3.6 2.5 8.9 10.8 6.7 14.5 -2.6 4.5-0.2 6.8-2.8 7.1 -4.5 0.5-2.2-4.5-2.5-9.5 -0.3-7.2-11-15-13.8-7.4 -2.8 7.6-7.6 5.2 2 22 2.8 5 10.2 5.6 13 10.8 1.5 2.8 2 11.9-2.7 16.7 -1 1-4.3 5.8-1.3 8.4 7.3 6.4-0.8 5.1-2.8 1.6 -5.5-9.6 0.9-5.4-0.1-20.7 -0.3-4.9-2.8-4.6-8.8-8.7 -5.8-3.9-3.7 3.5-0.3 6.9 3 3 5.2 12.3-1.9 20.3 -5 5.6-6.7 7.8-5.1 13.6 0.8 2.9-1.2 3.9-3 1.8 -3.1-3.6-2.7-10.8 0.9-13.8 4.1-3.4 4.7-8.8 2.9-13.6 -3.5-9.1-2.7-10.2-4.6-10.3 -2.6-0.1-2.7 7.6-2.5 9 1.9 12.4-5.1 10.6-4.1 25.8 0.3 4.6 2.2 2.2 2.3 5.8 0.1 5.8-9.9-6.7-10.1-16.2 -0.1-3.6-5.7 0.1-3.7-3.7 6.9-13.3-6.9-25.8-8.2-18.7 -0.2 1-5.2 12.8-1.2 16.4 18 16.4 7.7 14.6 8.9 33.2 0.1 1.6 1.1 2.7 1.8 3.9 3.6 6.4-8.4 1-8-5.9 1.5-23.8 4.1-11.6-8.8-29.2 -6-8.2 2.2-8.8-3.8-18.2 -3.6-5.6 0-10.8-1.4-18.2 -1.1-6.4 2.2-4.7-1.6-12.8 -1.2-2.5-4.9 1.9-5.9 4.5 -5.7 14.4 4 11.4 0.7 29.3 -1.6 8.6 12.7 18.4 7.8 25.2 -3.7 5.1-8.7 6.3-14.5 5.9 -3.5-0.2-7.8-11.2-4.3-9.9 3.5 1.3-0.1 2.1 6 4.6 4.2 1.7 8.6-2 4.8-6.1 -7.5-8.3-11.8-9.6-11-18.2 0.8-9.1 1.6-11.2-1.2-13.6 -2.1-1.7-2.5-3.6-1.3-6.3 1.1-2.6 1.8-5.2 4.3-7.1 1.4-1.1 1.1-3 0.2-4.4 -2.4-3.7-3.2-8.4-5.9-11.7 -5.9-7.3 7.4-18.6 8.5-24.5 0.3-1.8 3.8-9.3 0.5-13.6 -1.4-1.8 0.3-4.8-1.9-5.4 -3.1-0.8-0.7 1.2-8.9 10.2 -0.9 1-15.2 18-18.1 23.9 -0.4 0.9-1 1.4-1.8 1.9 -3.6 2.1-6.1 5.3-8.4 8.6 -2.4 3.4 3.9 9.1-2.9 16.1 -2.6 2.7 2 25-5.9 25.5 -1 0.1-5.5 1.3-5.1 4.3 0.6 4.4-2 5.8-6.3 8 -2.3 1.1-2.3 4.3-0.1 5.6 1.7 1 2.1 2.2 0.7 3.7 -6.9 7.3-2.5 14.3-2.4 20.7 0.1 27 37 75.6 46.6 101.2 3 7.9 2.7 16.2 4.4 24.2 3.4 16.5-0.3 40.1 2.6 60.4 0.1 1 3.7 47.3 6.3 50.9 0.1 0.2 2.5 15.8 2.3 20.5 -0.5 13.7 4.3 25.5 5.5 36.7 3.1 28.5 13.3 24.2-19.9 22.8 -9.4-0.4-13-1.6-19.2-1.5 -12.7 0.2-14.1-1.9-14.2 3.2 -0.1 9.1-6.8 1.6 43.3 4.8 1.1 0.1 36.9 7.6 48.8 7.5 14.5-0.1 20.8 7.1 31.9-5.4 0.9-1 7.5-28.5 37.9-26.9 9.6 0.5 14.1 6.7 22.3 10.7 1 0.5 1.9 1.2 2.7 2 16.6 15.9 44.8 27.7 58.2 43.8 2.9 3.5 4.9 7.5 7.6 11.1 9.5 12.6-0.3 32.1-11.9 25.5 -8.5-4.8-4-9.1-29.2-16.4 -6-1.7-6.9-1.9-7.9-1.3 0 0-125 2-200 11.5 -12 1.5-12.3 3.7-15.1 4.2 -4.1 0.7 9.2 61.1 10.7 68.5 8.5 41.6-4.2 77.8-5.2 97.9 -1.8 36.3-8.9 47.7-0.2 67.6 6.7 15.4 25 47.7 6.8 62 -9.6 7.6-16.2 4.2-24.7 44.2 -1.6 7.4-4 10.3-4.2 15.6 -0.6 15.1-27.4 28.1-42.6 14.3 -4.9-4.5-2.4-19.6 2.1-26.3 55.3-83.4-2.9-182.7-1.5-284.3 0-2-10.4-28.6-10.2-30.8 0.3-2.9-0.9-5.5-1.8-8.2 -1.1-3.3-3.6-1.3-6.1-1.2 -3.6 0.2-6.9-1.8-9.8-3.8 -12.6-8.4-14.1-20.9-16.6-34.3 -2.4-12.5-6.8-28.4-2.8-41 0.4-1.3 0.2-2.2-1.1-2.8 -9.3-4.1-8-0.8-8.3 14.5 -0.1 3.1-4.2 18.5-4.5 19.8 -1.1 4.6-1 9.3-1.6 13.9 -10.5 82.7 1.6 48.8-15 112.1 -1.3 5 0.9 6.4 1 17.8 0 3 0.9 33.4-0.3 36.2 -8.8 21.5 5.9 55.7-1.1 75.1 -3.1 8.8 2.6 13.8 7.7 25.7 2.6 6.1 6.2 9 8.3 14.5 8.5 22.3 5.5 14 17.6 20.2 18.2 9.4 54.2 4.8 44.5 39.3 -3.7 13.3-16.3 14.4-20.7 16.6 -28.2 14.2-51.4-5.3-69.8-4.9 -3.3 0.1-2.3 2.6-1.2 2.6 3.6-0.1 5.2 2.7 7.5 4.6 3.8 3.3 10.2 6.6 9.1 12.6 -0.6 3.4 2.3 7.3-5 18.4 -3 4.6-10.8 11.9-15.3 12.7 -27.1 4.9-31.6 6.5-70.5-0.9 -1.8-0.3-28.8-4.3-28.8-7.1 -20.7-9.9-16.7-26.2-16.6-53.4 0-5.2 10.4-43.2 4.1-84.8 -3.7-24-4.6-42.4-9.7-59.3 -0.3-1 4.9-108.6 11-129.8 4.9-16.9 6.6-74.7 7.3-95.4 1-29.9-10-33.7-10.1-47.2 -0.4-84.9-6.6-108.6-6.3-147.8 0.1-9.2 2.1-8.9 1.9-15.8 -0.2-7-0.1-14.2 0.7-21.2 0.5-4.8 18.2-69.9 14.5-91.5 -2.3-13.4 1.5-13.5-5.6-13.9 -7.1-0.4-9.8-8.6-9.6-15.8 0.1-2.6-1.4-4.7-2.1-7.1 -0.4-1.1-1.4-1.2-2.3-0.7 -3.1 1.7-4.4-2-8-4.2 -5.3-3.2 0.6-12.6 1.2-13.7 3.3-6.4-1.6-22.3-2.5-24.4 -0.7-1.6-0.4-3.6 0.2-5.3 2.1-6.6-2.8-18.2-2.6-27 0.3-22.7-3.9-31-1.2-41.9 1.6-6.2 0.7-14.3 1.9-18.2 2.5-8.1 0.9-16.9 0.3-25.6 -0.3-4.9 0.6-3.9 1-14.2 0.3-8.1 5.6-14.2 6.2-18.7 0.3-1.8 1.3-3.4 2.1-4.9 5-9.8 5.2-33.3 20.3-57 2.2-3.5 5.7-16.7 10.1-21.5 4.2-4.7 4.8-9.6 3-13.6 -3.7-8.1 0-13.6 0.1-15.3 0.2-4.2 4.8-20.2 7.6-24.6 1.2-1.8 0.9-3.3-1.1-4.1 -4.8-1.9-5.5-8.9-1.3-13.2 2.1-2.1 5.3 0.1 9.2-2.7 3.2-2.3 0.8-2.4 2.7-4.4 5.6-5.6 1.9-9.3 8-9.7 2.5-0.2 4.3-1.1 5.9-3.3 2.2-3.1 6.4-3.8 9.4-2 5.1 3.1 7.2-5.4 13.4 0.2 3.9 3.5 8.9 7.9 10 2.7 1.7-8 10.8-17.9 10.9-24.5 0-0.5 0.1-1.2 0.4-1.6 1.8-2.4 1.7-5.1 1.4-7.8 -0.9-8.1 5.2-7.1 8-18.1 3.2-12.8 11.6-13 16.7-22.3 1.9-3.4 5.6-4.4 8.9-5.8 2.5-1.1 4.3-3.2 6.6-4.6 1.1-0.6 0.1-2.6-1.6-2.2 -4.1 0.9-72.9-0.7-112.3 10.4 -3.9 1.1-4 3.4-5.9 6.7 -2.3 4-6.4 0.6-6.5-2 -0.2-6.8 12-5-23.2-23.9 -11.5-6.1-71.2-23.2-128.4-23.3 -12.2 0-24 1.9-36 2.6 -4.9 0.3-13.7-0.6-18 2.4 -2 1.4-2.7 4-4.4 5.7 -4.1 4.2-8.6-0.4-5.9-4.8 6.5-10.7 39-44.9 46.3-49.8 0 0 17.9-22 19.2-23.5 21.2-23.6 51.5-47.6 59.8-57.1 11.2-12.9 54.7-40.1 62.7-48 11.7-11.4 58.2-34.9 64.6-38.4 19.2-10.4 31.4-9.7 42.4-14.8 26.6-12.3 92.8-23.2 131.5-27.8 8-1 43.5 0.6 58-7.6 6-3.4 0.9-1.1 3.6-46 0.2-3.6-1.5-11.3 3.7-11.3 6.7-0.3 5.8-5.2 5.2 45.2 0 2.7 0.5 12.8 3.3 12.8 3.1 0 8 3.6 11 4.6 27.3 9.3 37.1 6.8 50.3 8.7 32.1 4.7 100.1 22.8 100.1 22.8 9.6 0.1 8.8 3.2 40.6 14.4 16 5.6 42.6 27.1 44.9 28.5 23 14 25.8 15.5 31.2 21.3 3.2 3.5 18.9 16.2 26.2 24.9 6.8 8.2 15.8 11.4 22.8 20.4 5.8 7.4 15.4 22 32.2 36.6 1 0.9 98.7 118.6 90.1 121.9 -1 0.4-6.6 8.2-9.4 0.1 -5.8-16.5-62.2-14-79.8-12.3 -1 0.1-84.8 2.1-98.3 5.6 -9.2-1.5-25.4 7-40.1 7.6 0 0-23.9 9.3-33.7 10.2 -2.9 0.3-3.8 1.3-2.6 3.8 3.2 6.5-6.1 13.6-8.6 2.8 -1.2-5.3-2.8-6.5-58-13.5 -65.7-8.4-91.1-10.4-112-9.5 -9.5 0.4-10.2-2.1-16.2-0.7 -4.7 1.1-2.9 22.1-3.9 39C524.4 410.5 524.4 457.3 524.4 457.3zM397.5 506.1c0.3 5.7 12.2 25.9 12.7 27.1 2.2 4.8 4.4 9.6 6.9 14.2 3.8 7.1 2.1 10.9 7.6 15.6 12.3 10.7 46.2 18.2 52.3 22.2 4 2.6 14.7 4.4 16.3 5.1 4.7 2 4.4-9.8-0.6-14.5 -11.3-10.5-20-13.3-32.8-24.7 -3.3-2.9-2.5-12.3 1.4-14.1 5.8-2.7 0.3-7.2 4.9-10.1 3.7-2.4-1.7-4.5 3.3-9.5 2.4-2.4 5-2.2 2.9-5.5 -1.5-2.3-4.1-3.9-1.1-8.4 1.2-1.8 2.4-3.2 1.2-4.5 -0.9-0.9-1.9-0.4-2.8-0.1 -1.6 0.6-1.9 2.2-2.6 3.4 -3.8 7.3-8.5 3.1-12.1 8.9 -3.5 5.7-8.6-0.6-9.5 6.8 -0.9 8-11.5 9.5-18.6 4.6 -14-9.7-17.1-10.9-23.8-18.9C402.2 502.5 397.2 501.8 397.5 506.1zM514.4 439.1c0 0 0.1 0 0.1 0 0-57.9 4.6-68.2-1.9-68.6 -29.1-2.1-27.8-1.8-29.2-2.7 -1.2-0.7-11.7-3.9-9.1 0.3 2.6 4.2 9.5 4.2 13.7 10 0.7 1 8.2 3.3 15.4 16.6 1.1 2 2.4 4.2 2.4 6.6 0 4.6 2 8.8 2.9 13.2 4 19.2-4.5 30.8-4.9 35.1 -0.8 9.4-6.3 15.8-12.3 22.3 -3.1 3.3-0.9 6.8-2.1 9.3 -2.1 4.4-1.6 9.1-2.2 13.6 -0.2 1.8 0.8 2.7 2.6 2.7 7 0.3 4.7-4.3 10.5-10.1C518.1 469.8 514.4 482.8 514.4 439.1zM430.1 619.3c3.7-0.9 8 0.5 8.6-1 0.6-1.3-1.2-2.7-2.5-3 -1.7-0.4-26.3-13.4-29.7-15.7 -5.3-3.6-1.6 8.1 0 14.3C408.2 620.1 410.7 615.8 430.1 619.3z">
  <animate id="an1" attributeName="stroke-dashoffset" values="8263;0" begin="1s;an2.end" dur="20s" fill="freeze" />
  <animate id="an_fill" attributeName="fill" values="white;black;white" dur="15s" begin="an1.begin+20s" fill="freeze" />
  <animate id="an2" attributeName="stroke-dashoffset" values="0;8263" begin="an_fill.end" dur="20s" fill="freeze" /> 
  
  </path> 
  
</svg>
<audio src="https://svg-art.ru/files/Mireille_Mathieu.mp3" autoplay="autoplay"></audio>

5
  • Спасибо за саундтрек))
    – UModeL
    12 ноя 2018 в 18:04
  • @ UModeL да не за что :) Спасибо Мирей Матье 12 ноя 2018 в 18:08
  • добавил сайт в закладочки ;-)
    – UModeL
    12 ноя 2018 в 18:10
  • 1
    @UModeL этот саундтрек лучше подходит к другой работе svg-art.ru/files/animation/Shopping-Paris/…, а здесь я поменяю его на более подходящий 12 ноя 2018 в 18:14
  • 4
    "И пусть весь мир подождёт"))
    – UModeL
    12 ноя 2018 в 18:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.