! Сегодня

Главная » Web и Технологии » День мертвых анимация в виде черепа к Хеллоуину

День мертвых анимация в виде черепа к Хеллоуину

Если Вы стали для кого-то плохим, значит много хорошего было сделано для этого человека.

19-октября-2023, 22:44   4   0

День мертвых анимация в виде черепа к Хеллоуину

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

HTML

<div id="container">
  <button>DRAW AGAIN</button>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 792">
    <g id="Layer_4">
      <path class="st0" d="M301.2 352l-.4 80.2"/>
      <path class="st0" d="M83.7 207.5c-1.5 10.4-2.3 21-2.3 31.9v-13.9c0-6.2.8-12.2 2.3-18z"/>
      <path class="st0" d="M210.8 421.9v-1.1c0-10.2 8.2-18.4 18.4-18.4s18.4 8.2 18.4 18.4c0 9.8-7.7 17.9-17.4 18.4h-80.9"/>
      <path class="st0" d="M181.9 422.6c0-7.9 6.4-14.4 14.4-14.4 7.9 0 14.4 6.4 14.4 14.4M276.1 365.9c0 21.2-17.1 38.3-38.3 38.3"/>
      <path class="st0" d="M301.2 664.5h-63.7c-56.1 0-102-45.9-102-102V450c-37.6-2.4-67.7-33.9-67.7-72.1V239.4C67.8 110.5 172.3 6 301.2 6M301.6 664.5h63.7c56.1 0 102-45.9 102-102V450c37.6-2.4 67.7-33.9 67.7-72.1V239.4C534.9 110.5 430.5 6 301.6 6"/>
      <path class="st0" d="M302.9 650.9h-55.6c-55.4 0-98.1-41.4-98.1-96.8V438.7c-35.5-3.9-67.8-29-67.8-65.4V239.4c0-10.8.8-21.5 2.3-31.9C99.1 103 192.8 17.6 301.6 17.6"/>
      <path class="st0" d="M299.9 650.9h55.6c55.4 0 98.1-41.4 98.1-96.8V438.7c35.5-3.9 67.8-29 67.8-65.4V239.4c0-10.8-.8-21.5-2.3-31.9C503.7 103 408.7 17.6 299.9 17.6"/>
      <path class="st0" d="M519.1 207.5c1.5 10.4 2.3 21 2.3 31.9v-13.9c0-6.2-.8-12.2-2.3-18z"/>
      <path class="st0" d="M301.4 211.1v79.1M283 235.5h18.2M301.4 211.1v79.1M319.8 235.5h-18.2M284.5 37.7c0 8.8-7.2 16-16 16s-16-7.2-16-16"/>
      <path class="st0" d="M252.9 40.9c1.2 16.1-8.5 31.5-24.5 36.9-18.9 6.3-39.3-3.8-45.7-22.7M318.3 37.7c0 8.8 7.2 16 16 16s16-7.2 16-16"/>
      <path class="st0" d="M349.9 40.9c-1.2 16.1 8.5 31.5 24.5 36.9 18.9 6.3 39.3-3.8 45.7-22.7M282.5 650.9c0-10.3 8.4-18.7 18.7-18.7M291.8 615.2c0-5.2 4.2-9.4 9.4-9.4M256.1 650.3c.1-5.2 4.3-9.3 9.5-9.2M269.6 631.8c-3.6-3.7-3.5-9.6.2-13.2 3.7-3.6 9.6-3.5 13.2.2"/>
      <path class="st0" d="M301.2 588.9c-9.7 0-17.7 7.4-18.6 16.8-7.3-6-18.2-5.6-25.1 1.2-6.9 6.9-7.3 17.8-1.2 25.2-9.5.8-17 8.8-17 18.6M274.1 650.9c0-15 12.1-27.1 27.1-27.1M320.3 650.9c0-10.3-8.4-18.7-18.7-18.7M310.9 615.2c0-5.2-4.2-9.4-9.4-9.4M346.7 650.3c-.1-5.2-4.3-9.3-9.5-9.2M333.2 631.8c3.6-3.7 3.5-9.6-.2-13.2-3.7-3.6-9.6-3.5-13.2.2"/>
      <path class="st0" d="M363.6 650.8c0-9.8-7.5-17.8-17-18.6 6.1-7.4 5.7-18.3-1.2-25.2-6.9-6.8-17.7-7.2-25.1-1.2-1-9.5-8.9-16.8-18.6-16.8M328.7 650.9c0-15-12.1-27.1-27.1-27.1M139.8 92.3c8.5 3.9 13.1 13.5 10.5 22.8-2.9 10.3-13.6 16.3-23.9 13.4-4-1.1-7.3-3.4-9.8-6.4M159.2 83.4c4.7-2.6 10.6-.9 13.2 3.7 2.6 4.7.9 10.6-3.7 13.2M169.8 110.7c5.1 1.5 8.1 6.8 6.6 12-1.5 5.1-6.8 8.1-12 6.6M157.9 137.6c2.6 4.7.9 10.6-3.8 13.2s-10.6.9-13.2-3.8M130.5 148.1c-1.5 5.1-6.9 8.1-12 6.6s-8.1-6.9-6.6-12"/>
      <path class="st0" d="M100 152.9c0 8.5 5.6 16.3 14.1 18.7 9.7 2.7 19.8-2.4 23.3-11.7 5.6 8.2 16.6 10.9 25.4 5.9 8.8-4.9 12.3-15.7 8.3-24.8 9.7 1.8 19.4-4.1 22.2-13.8 2.7-9.7-2.4-19.8-11.7-23.3 8.2-5.6 10.9-16.6 5.9-25.4-4.5-8-13.9-11.6-22.4-9.1"/>
      <path class="st0" d="M146 85.8c10.6 6.3 16.1 19.2 12.6 31.7-4.2 14.9-19.7 23.6-34.6 19.4-4.8-1.3-8.9-3.9-12.2-7.1M463.2 93.1c-8.5 3.9-13.1 13.5-10.5 22.8 2.9 10.3 13.6 16.3 23.9 13.4 4-1.1 7.3-3.4 9.8-6.4M443.8 84.2c-4.7-2.6-10.6-.9-13.2 3.7s-.9 10.6 3.7 13.2M433.2 111.5c-5.1 1.5-8.1 6.8-6.6 12 1.5 5.1 6.8 8.1 12 6.6M445.1 138.3c-2.6 4.7-.9 10.6 3.8 13.2 4.7 2.6 10.6.9 13.2-3.8M472.5 148.9c1.5 5.1 6.9 8.1 12 6.6s8.1-6.9 6.6-12"/>
      <path class="st0" d="M440.2 71.1c-9-4-19.8-.6-24.8 8.2-4.9 8.8-2.2 19.8 5.9 25.4-9.3 3.5-14.4 13.6-11.7 23.3 2.8 9.7 12.4 15.6 22.2 13.8-4 9-.6 19.8 8.3 24.8 8.8 4.9 19.8 2.2 25.4-5.9 3.5 9.2 13.6 14.4 23.3 11.7 8.6-2.4 14.1-10.2 14.1-18.7"/>
      <path class="st0" d="M457 86.6c-10.6 6.3-16.1 19.2-12.6 31.7 4.2 14.9 19.7 23.6 34.6 19.4 4.8-1.3 8.9-3.9 12.2-7.1M91.1 405.6c2.8-1.8 6-2.8 9.6-2.9 10.3-.3 18.9 7.9 19.2 18.2.1 3-.6 5.9-1.8 8.4M91 385.9c-.1-5.2 4-9.5 9.2-9.6 5.2-.1 9.5 4 9.6 9.2M119.2 389.2c3.6-3.7 9.5-3.8 13.2-.3 3.7 3.6 3.8 9.5.3 13.2M136.8 411.4c5.2-.1 9.4 4 9.5 9.2.1 5.2-4 9.4-9.2 9.5"/>
      <path class="st0" d="M150 438.2c7.8-2.4 13.4-9.8 13.2-18.4-.2-9.7-7.9-17.6-17.5-18.2 5.9-7.5 5.3-18.4-1.8-25.2-7.1-6.7-18-6.8-25.2-.5-1.1-9.5-9.3-16.8-19.1-16.5-9.8.3-17.6 7.9-18.2 17.5"/>
      <path class="st0" d="M87.9 397.8c3.7-2.1 8-3.4 12.6-3.5 15-.4 27.4 11.4 27.8 26.4.1 4-.7 7.9-2.2 11.4M511.7 405.6c-2.8-1.8-6-2.8-9.6-2.9-10.3-.3-18.9 7.9-19.2 18.2-.1 3 .6 5.9 1.8 8.4M511.8 385.9c.1-5.2-4-9.5-9.2-9.6-5.2-.1-9.5 4-9.6 9.2M483.6 389.2c-3.6-3.7-9.5-3.8-13.2-.3-3.7 3.6-3.8 9.5-.3 13.2M466 411.4c-5.2-.1-9.4 4-9.5 9.2-.1 5.2 4 9.4 9.2 9.5"/>
      <path class="st0" d="M521.4 377c-.6-9.6-8.4-17.2-18.2-17.5-9.8-.2-18 7-19.1 16.5-7.2-6.3-18.1-6.2-25.2.5-7.1 6.7-7.7 17.6-1.8 25.2-9.5.6-17.2 8.5-17.5 18.2-.2 8.6 5.4 15.9 13.2 18.4"/>
      <path class="st0" d="M514.9 397.8c-3.7-2.1-8-3.4-12.6-3.5-15-.4-27.4 11.4-27.8 26.4-.1 4 .7 7.9 2.2 11.4"/>
      <g>
        <path class="st0" d="M86.1 193.8c.7-1.3 1.5-2.6 2.4-3.9 11.2-15.7 33.1-19.3 49-8 9.8 7 15 18.1 14.9 29.2M151.8 202.6c0-16.7 13.5-30.2 30.2-30.2s30.2 13.5 30.2 30.2"/>
        <path class="st0" d="M119.4 231.9c10.5 0 19-8.5 19-19s-8.5-19-19-19-19 8.5-19 19v106.8s1 21.6-19 21.6M516.7 193.8c-.7-1.3-1.5-2.6-2.4-3.9-11.2-15.7-33.1-19.3-49-8-9.8 7-15 18.1-14.9 29.2M451 202.6c0-16.7-13.5-30.2-30.2-30.2s-30.2 13.5-30.2 30.2"/>
        <path class="st0" d="M483.4 231.9c-10.5 0-19-8.5-19-19s8.5-19 19-19 19 8.5 19 19v106.8s-1 21.6 19 21.6"/>
      </g>
      <path class="st0" d="M392 421.9v-1.1c0-10.2-8.2-18.4-18.4-18.4s-18.4 8.2-18.4 18.4c0 9.8 7.7 17.9 17.4 18.4h80.9"/>
      <path class="st0" d="M420.9 422.6c0-7.9-6.4-14.4-14.4-14.4s-14.4 6.4-14.4 14.4M326.7 365.9c0 21.2 17.1 38.3 38.3 38.3"/>
      <g>
        <path class="st0" d="M174.8 528.1v-19.2c0-15-11.1-27.6-25.4-29.9"/>
        <path class="st0" d="M149.4 458.1c23.6 0 42.8 19.2 42.8 42.8 0 .8 0 1.6-.1 2.4v82.6M211.6 566.4c10.8 0 19.5 8.7 19.5 19.5s-8.7 19.5-19.5 19.5-19.5-8.7-19.5-19.5M174.8 529.5v59.4"/>
        <path class="st0" d="M174.8 588.1c0 20.1 16.3 36.4 36.4 36.4s36.4-16.3 36.4-36.4v-19"/>
        <path class="st0" d="M287 574.4c-2.8 7.8-10.3 13.4-19.1 13.4-11.2 0-20.3-9.1-20.3-20.3M149.2 441.4c34.8 0 63.1 28.2 63.1 63.1V540"/>
      </g>
      <g>
        <path class="st0" d="M247.5 556.9c-2.2 3.1-7.1 5.3-13.2 5.3-12.2 0-22.1-9.9-22.1-22.1M210.8 489.9c0-12.2 9.9-22.1 22.1-22.1 6.1 0 7.8.7 12.4 3.8 0 0 14.6-14.3 28.9 0 0 0 11.2-15.8 27 0 0 0 11.5-15.9 27.4 0 0 0 12.8-16.1 28.9 0 0 0 6.3-3.8 12.4-3.8 12.2 0 22.1 9.9 22.1 22.1M248.4 556.3s11.5 14.3 25.8 0c0 0 11.2 15.8 27 0 0 0 11.5 15.9 27.4 0 0 0 10.5 16.8 26.7.6M355.3 556.9c2.2 3.1 7.1 5.3 13.2 5.3 12.2 0 22.1-9.9 22.1-22.1"/>
        <path class="st0" d="M237.3 551.6h-6.2c-5.6 0-10.2-4.6-10.2-10.2v-52.6c0-5.6 4.6-10.2 10.2-10.2h6.2c5.6 0 10.2 4.6 10.2 10.2v52.6c0 5.6-4.6 10.2-10.2 10.2zM264 551.6h-6.2c-5.6 0-10.2-4.6-10.2-10.2v-52.6c0-5.6 4.6-10.2 10.2-10.2h6.2c5.6 0 10.2 4.6 10.2 10.2v52.6c0 5.6-4.6 10.2-10.2 10.2zM290.6 551.6h-6.2c-5.6 0-10.2-4.6-10.2-10.2v-52.6c0-5.6 4.6-10.2 10.2-10.2h6.2c5.6 0 10.2 4.6 10.2 10.2v52.6c.1 5.6-4.5 10.2-10.2 10.2zM301.4 514h-80.6M365.5 551.6h6.2c5.6 0 10.2-4.6 10.2-10.2v-52.6c0-5.6-4.6-10.2-10.2-10.2h-6.2c-5.6 0-10.2 4.6-10.2 10.2v52.6c0 5.6 4.6 10.2 10.2 10.2zM338.8 551.6h6.2c5.6 0 10.2-4.6 10.2-10.2v-52.6c0-5.6-4.6-10.2-10.2-10.2h-6.2c-5.6 0-10.2 4.6-10.2 10.2v52.6c0 5.6 4.6 10.2 10.2 10.2zM312.1 551.6h6.2c5.6 0 10.2-4.6 10.2-10.2v-52.6c0-5.6-4.6-10.2-10.2-10.2h-6.2c-5.6 0-10.2 4.6-10.2 10.2v52.6c0 5.6 4.6 10.2 10.2 10.2zM301.4 514H382"/>
      </g>
      <g>
        <path class="st0" d="M301.2 158.3c-10.3 0-18.7-8.4-18.7-18.7 0-10.3 8.4-18.7 18.7-18.7M291.8 103.9c0-5.2 4.2-9.4 9.4-9.4M300.8 184.7c-5.2 0-9.3-4.3-9.3-9.4M282.2 171.3c-3.7 3.6-9.6 3.6-13.2-.1-3.6-3.7-3.6-9.6.1-13.2M265.4 148.5c-5.2-.1-9.3-4.3-9.2-9.5.1-5.2 4.3-9.3 9.5-9.2M339.6 148.5c5.2-.1 9.3-4.3 9.2-9.5-.1-5.2-4.3-9.3-9.5-9.2M269.6 120.5c-3.6-3.7-3.5-9.6.2-13.2 3.7-3.6 9.6-3.5 13.2.2"/>
        <path class="st0" d="M301.2 77.7c-9.7 0-17.7 7.4-18.6 16.8-7.3-6-18.2-5.6-25.1 1.2-6.9 6.9-7.3 17.8-1.2 25.2-9.5.8-17 8.8-17 18.6s7.4 17.8 17 18.7c-6.1 7.3-5.8 18.3 1.1 25.2 6.9 6.9 17.8 7.3 25.2 1.2.9 9.5 8.9 17 18.6 17"/>
        <path class="st0" d="M301.2 166.7c-15 0-27.1-12.1-27.1-27.1s12.1-27.1 27.1-27.1M301.2 55.7v12.8M289.2 221.4l1.9-12.6M271.6 216.8l4.5-11.9M255.4 208.5l7-10.6M241.4 196.9l9.1-8.9M230.2 182.5l10.9-6.6M222.5 166.1l12-4.2M218.5 148.3l12.6-1.4M218.4 130.1l12.7 1.4M222.3 112.3l12.1 4.1M230 95.8l10.9 6.6M241.1 81.4l9.2 8.8M255 69.7l7.1 10.6M271.2 61.3l4.6 11.9M288.8 56.6l1.9 12.6M301.6 158.3c10.3 0 18.7-8.4 18.7-18.7 0-10.3-8.4-18.7-18.7-18.7M310.9 103.9c0-5.2-4.2-9.4-9.4-9.4M302 184.7c5.2 0 9.3-4.3 9.3-9.4M320.6 171.3c3.7 3.6 9.6 3.6 13.2-.1 3.6-3.7 3.6-9.6-.1-13.2M333.2 120.5c3.6-3.7 3.5-9.6-.2-13.2-3.7-3.6-9.6-3.5-13.2.2"/>
        <path class="st0" d="M301.7 201.6c9.8 0 17.8-7.5 18.6-17 7.4 6.1 18.3 5.7 25.2-1.2 6.9-6.9 7.3-17.9 1.1-25.2 9.5-.9 17-8.9 17-18.7 0-9.8-7.5-17.8-17-18.6 6.1-7.4 5.7-18.3-1.2-25.2-6.9-6.8-17.7-7.2-25.1-1.2-1-9.5-8.9-16.8-18.6-16.8"/>
        <path class="st0" d="M301.6 166.7c15 0 27.1-12.1 27.1-27.1s-12.1-27.1-27.1-27.1M301.6 55.7v12.8M313.5 221.4l-1.8-12.6M331.2 216.8l-4.6-11.9M347.4 208.5l-7-10.6M361.4 196.9l-9.2-8.9M372.6 182.5l-10.9-6.6M380.3 166.1l-12-4.2M384.3 148.3l-12.6-1.4M384.4 130.1l-12.7 1.4M380.5 112.3l-12.1 4.1M372.8 95.8l-10.9 6.6M361.7 81.4l-9.2 8.8M347.8 69.7l-7.1 10.6M331.6 61.3L327 73.2M314 56.6l-1.9 12.6"/>
      </g>
      <g>
        <path class="st0" d="M453.6 441.4c-34.8 0-63.1 28.2-63.1 63.1V540"/>
        <path class="st0" d="M453.4 458.1c-23.6 0-42.8 19.2-42.8 42.8 0 .8 0 1.6.1 2.4v82.6M391.2 566.4c-10.8 0-19.5 8.7-19.5 19.5s8.7 19.5 19.5 19.5 19.5-8.7 19.5-19.5"/>
        <path class="st0" d="M428 528.1v-19.2c0-15 11.1-27.6 25.4-29.9M428 529.5v59.4M428 588.1c0 20.1-16.3 36.4-36.4 36.4s-36.4-16.3-36.4-36.4v-19"/>
      </g>
      <path class="st0" d="M315.7 574.2c2.8 7.9 10.3 13.6 19.2 13.6 11.2 0 20.3-9.1 20.3-20.3"/>
      <g>
        <path class="st0" d="M300.8 432.9c0 9.5-7.7 17.2-17.2 17.2s-17.2-7.7-17.2-17.2l35-81.3M301.6 352l.4 80.2"/>
        <path class="st0" d="M302 432.9c0 9.5 7.7 17.2 17.2 17.2s17.2-7.7 17.2-17.2l-35-81.3"/>
      </g>
      <g>
        <path class="st0" d="M194.2 286.6l15.8 15.8M209.6 286.6l-15.8 15.8"/>
        <circle class="st0" cx="201.9" cy="294.3" r="19.2"/>
        <circle class="st0" cx="201.9" cy="294.3" r="28.8"/>
        <path class="st0" d="M191 259.2c0-6 4.9-10.9 10.9-10.9s10.9 4.9 10.9 10.9M218.7 261.6c4.2-4.3 11.1-4.4 15.4-.2 4.3 4.2 4.4 11.1.2 15.4M236.8 282.7c6-.1 11 4.6 11.1 10.6s-4.6 11-10.6 11.1M235 310.5c4.4 4.1 4.6 11 .5 15.4s-11 4.6-15.4.5M214.3 329c.3 6-4.4 11.1-10.4 11.3s-11.1-4.4-11.3-10.4M186.5 327.8c-4 4.5-10.9 4.8-15.3.8-4.5-4-4.8-10.9-.8-15.3M167.5 307.5c-6 .4-11.2-4.1-11.6-10.1s4.1-11.2 10.1-11.6M168.1 279.7c-4.6-3.9-5.1-10.8-1.2-15.3 3.9-4.6 10.8-5.1 15.3-1.2"/>
        <circle class="st0" cx="201.9" cy="294.3" r="55.5"/>
        <path class="st0" d="M210.5 221.8c0 5.3-4.3 9.7-9.7 9.7-5.3 0-9.7-4.3-9.7-9.7 0-5.3 9.7-19.3 9.7-19.3s9.7 14 9.7 19.3zM239 231.5c-2.2 4.9-7.9 7.1-12.8 5-4.9-2.2-7.1-7.9-5-12.8s16.6-13.7 16.6-13.7 3.4 16.6 1.2 21.5zM261.3 251.8c-3.9 3.6-10.1 3.3-13.7-.6-3.6-3.9-3.3-10.1.6-13.7 3.9-3.6 20.8-5.8 20.8-5.8s-3.8 16.5-7.7 20.1zM273.4 279.4c-5.1 1.7-10.6-1-12.3-6.1s1-10.6 6.1-12.3c5.1-1.7 21.3 3 21.3 3s-10.1 13.7-15.1 15.4zM273.3 309.5c-5.3-.5-9.3-5.2-8.8-10.5s5.2-9.3 10.5-8.8 18.3 11.4 18.3 11.4-14.6 8.4-20 7.9zM261.2 337c-4.7-2.6-6.4-8.5-3.8-13.2 2.6-4.7 8.5-6.4 13.2-3.8s12.1 17.8 12.1 17.8-16.9 1.8-21.5-.8zM238.9 357.3c-3.2-4.3-2.4-10.3 1.9-13.6 4.3-3.2 10.3-2.4 13.6 1.9 3.2 4.3 3.9 21.2 3.9 21.2s-16.2-5.2-19.4-9.5zM210.3 366.9c-1.2-5.2 2-10.4 7.2-11.7 5.2-1.2 10.4 2 11.7 7.2 1.2 5.2-5 21-5 21s-12.6-11.3-13.9-16.5zM180.3 364.1c1-5.3 6-8.7 11.3-7.8s8.7 6 7.8 11.3c-1 5.3-13 17.2-13 17.2s-7-15.4-6.1-20.7zM154 349.5c3-4.4 9-5.6 13.5-2.6 4.4 3 5.6 9 2.6 13.5-3 4.4-18.8 10.5-18.8 10.5s-.3-17 2.7-21.4zM135.8 325.5c4.5-2.8 10.5-1.5 13.3 3.1 2.8 4.5 1.5 10.5-3.1 13.3-4.5 2.8-21.5 2-21.5 2s6.8-15.6 11.3-18.4zM128.9 296.2c5.3-.8 10.2 2.9 11 8.2.8 5.3-2.9 10.2-8.2 11-5.3.8-20.4-6.8-20.4-6.8s12.3-11.7 17.6-12.4zM134.4 266.5c5.2 1.4 8.2 6.8 6.7 11.9s-6.8 8.2-11.9 6.7c-5.2-1.4-15.9-14.5-15.9-14.5s15.9-5.5 21.1-4.1zM151.3 241.7c4.1 3.4 4.7 9.5 1.3 13.6-3.4 4.1-9.5 4.7-13.6 1.3-4.1-3.4-8.7-19.7-8.7-19.7s16.9 1.4 21 4.8zM176.9 225.7c2.4 4.8.5 10.6-4.3 13-4.8 2.4-10.6.5-13-4.3s0-21.6 0-21.6 14.9 8.2 17.3 12.9z"/>
        <g>
          <path class="st0" d="M408.6 286.6l-15.8 15.8M393.2 286.6l15.8 15.8"/>
          <circle class="st0" cx="400.9" cy="294.3" r="19.2"/>
          <circle class="st0" cx="400.9" cy="294.3" r="28.8"/>
          <path class="st0" d="M411.8 259.2c0-6-4.9-10.9-10.9-10.9s-10.9 4.9-10.9 10.9M384.1 261.6c-4.2-4.3-11.1-4.4-15.4-.2-4.3 4.2-4.4 11.1-.2 15.4M366 282.7c-6-.1-11 4.6-11.1 10.6-.1 6 4.6 11 10.6 11.1M367.8 310.5c-4.4 4.1-4.6 11-.5 15.4s11 4.6 15.4.5M388.5 329c-.3 6 4.4 11.1 10.4 11.3 6 .3 11.1-4.4 11.3-10.4M416.3 327.8c4 4.5 10.9 4.8 15.3.8 4.5-4 4.8-10.9.8-15.3M435.3 307.5c6 .4 11.2-4.1 11.6-10.1s-4.1-11.2-10.1-11.6M434.7 279.7c4.6-3.9 5.1-10.8 1.2-15.3s-10.8-5.1-15.3-1.2"/>
          <circle class="st0" cx="400.9" cy="294.3" r="55.5"/>
          <path class="st0" d="M392.3 221.8c0 5.3 4.3 9.7 9.7 9.7s9.7-4.3 9.7-9.7c0-5.3-9.7-19.3-9.7-19.3s-9.7 14-9.7 19.3zM363.7 231.5c2.2 4.9 7.9 7.1 12.8 5 4.9-2.2 7.1-7.9 5-12.8-2.2-4.9-16.6-13.7-16.6-13.7s-3.3 16.6-1.2 21.5zM341.5 251.8c3.9 3.6 10.1 3.3 13.7-.6 3.6-3.9 3.3-10.1-.6-13.7-3.9-3.6-20.8-5.8-20.8-5.8s3.8 16.5 7.7 20.1zM329.4 279.4c5.1 1.7 10.6-1 12.3-6.1s-1-10.6-6.1-12.3-21.3 3-21.3 3 10 13.7 15.1 15.4zM329.5 309.5c5.3-.5 9.3-5.2 8.8-10.5s-5.2-9.3-10.5-8.8-18.3 11.4-18.3 11.4 14.6 8.4 20 7.9zM341.6 337c4.7-2.6 6.4-8.5 3.8-13.2-2.6-4.7-8.5-6.4-13.2-3.8s-12.1 17.8-12.1 17.8 16.9 1.8 21.5-.8zM363.9 357.3c3.2-4.3 2.4-10.3-1.9-13.6-4.3-3.2-10.3-2.4-13.6 1.9-3.2 4.3-3.9 21.2-3.9 21.2s16.2-5.2 19.4-9.5zM392.5 366.9c1.2-5.2-2-10.4-7.2-11.7-5.2-1.2-10.4 2-11.7 7.2-1.2 5.2 5 21 5 21s12.6-11.3 13.9-16.5zM422.5 364.1c-1-5.3-6-8.7-11.3-7.8-5.3 1-8.7 6-7.8 11.3 1 5.3 13 17.2 13 17.2s7-15.4 6.1-20.7zM448.8 349.5c-3-4.4-9-5.6-13.5-2.6-4.4 3-5.6 9-2.6 13.5 3 4.4 18.8 10.5 18.8 10.5s.3-17-2.7-21.4zM466.9 325.5c-4.5-2.8-10.5-1.5-13.3 3.1-2.8 4.5-1.5 10.5 3.1 13.3 4.5 2.8 21.5 2 21.5 2s-6.7-15.6-11.3-18.4zM473.9 296.2c-5.3-.8-10.2 2.9-11 8.2-.8 5.3 2.9 10.2 8.2 11 5.3.8 20.4-6.8 20.4-6.8s-12.3-11.7-17.6-12.4zM468.4 266.5c-5.2 1.4-8.2 6.8-6.7 11.9 1.4 5.2 6.8 8.2 11.9 6.7 5.2-1.4 15.9-14.5 15.9-14.5s-15.9-5.5-21.1-4.1zM451.5 241.7c-4.1 3.4-4.7 9.5-1.3 13.6 3.4 4.1 9.5 4.7 13.6 1.3 4.1-3.4 8.7-19.7 8.7-19.7s-16.9 1.4-21 4.8zM425.9 225.7c-2.4 4.8-.5 10.6 4.3 13 4.8 2.4 10.6.5 13-4.3 2.4-4.8 0-21.6 0-21.6s-14.9 8.2-17.3 12.9z"/>
        </g>
      </g>
      <path class="st1" d="M172.2 738.1v16.3s9.7 3.6 9.7-6.8c0-10.5-2.1-9.4-9.7-9.5zM197.3 738.1h-7.1s-1.8-.7-1.8 4v11.8s-1.5 1 8.9 1M188.4 746.5h8.9M204.2 738.1v12.7s-.5 4.2 4.9 4.2 5-3.9 5-3.9v-13M219.3 738.1h11.4M225 738.1V755M243.8 738.1h-4.9s-3.4-.7-3.4 3.5 4.1 4.1 4.1 4.1 4.7 1.1 4.8 4.1c.1 3-1 4.6-2.7 4.6h-6.2M259.3 738.1h-5.8s-2.8.2-2.8 8.4c0 8.3 3 7.8 3 7.8h5.5M265.9 738v16.4M265.9 745.5h9.6M275.5 738.1v16.3M291.1 738v16.4M291.1 745.5h9.5M300.6 738.1v16.3M307.4 753.7l5.4-16.3 5.6 16.3M315.9 746.5h-6.1M325.1 737.4v16.3h7.7M339.7 737.4v16.3h7.7M358 736.5s-6-1.3-6 8.1 4.5 8.6 5.4 8.6 6 1.5 6-8.4-5.4-8.3-5.4-8.3zM368.3 737.4l4.5 15.9 5-15.9 4.9 16.3 4.2-17.3M401 736.4h-8.6s-.5 17.4 0 17.4h8.6M392.2 744.8h7M415.9 736.4h-8.6s-.5 17.4 0 17.4h8.6M407.1 744.8h7M422.6 753.3v-16.9l10.4 16.9v-16.9M258.4 774.5c.2-.1 3.7-2.4 3.7-2.4v16.6M274.5 772.1s-4.8-2-4.8 7.7 4.8 8.6 4.8 8.6 3.9 1 3.9-8.2-3.9-8.1-3.9-8.1zM285.7 786.7s-2.2 1.5 0 1.5 1.4-1.5 0-1.5zM292.4 772h4.8s3.2.1 3.2 3.2-1 4.8-2.4 4.8h-4.8s7.2-.9 7.2 3.7-3.5 4.8-3.5 4.8h-4.6M311.5 772s-4.5-.4-4.5 3.2v11s-.1 2.4 4.5 2.3c4.6-.1 4.3-2.6 4.3-2.6l.2-11.6s-.4-2.3-4.5-2.3zM322.6 786.9c-.8.1-.2 1.2.5 1.1.8-.2.7-1.2-.5-1.1zM327.1 774l3.9-2v16.2M345.7 771.6h-5.6l-1.4 1.1v6.6h4.5s3-.2 3 3.9-2.7 4.6-2.7 4.6h-6.3"/>
    </g>
  </svg>
</div>


SCSS

$orange:  #FF5719;

body {
  background: #2f2f2f;
  overflow-x: hidden;

  #container {
    width: 100vw;
    height: 100vh;

    button {
      display: block;
      color: rgba(#fff, 0.7);
      font-size: 16px;
      padding: 10px 25px;
      margin: 20px auto;
      border-radius: 4px;
      border: none;
      outline: none;
      cursor: pointer;
      background: rgba($orange, 0.3);

      &:hover {
        background: rgba($orange, 0.5);
      }
    }

    svg {
      height: 85vh;
      margin: auto;
      display: block;

      path {
        fill: none;
        stroke: $orange;
        stroke-width: 5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;

        &.st1 {
          stroke-width: 2;
        }
      } 
    }
  }
}


JS

//Illustration By Rick Granados

$('button').on('click', function(e) {
  drawSVGPaths('svg', 250, 500, 25);
});

jQuery.extend( jQuery.easing,
              {
  easeInOutQuad: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
  }
});

function SVG(tag) {
  return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function replaceRectsWithPaths(parentElement) {

  var rects = $(parentElement).find('rect');

  $.each(rects, function() {

    var rectX = $(this).attr('x');
    var rectY = $(this).attr('y');

    var rectX2 = parseFloat(rectX) + parseFloat($(this).attr('width'));
    var rectY2 = parseFloat(rectY) + parseFloat($(this).attr('height'));

    var convertedPath = 'M' + rectX + ',' + rectY + ' ' + rectX2 + ',' + rectY + ' ' + rectX2 + ',' + rectY2 + ' ' + rectX + ',' + rectY2 + ' ' + rectX + ',' + rectY;

    $(SVG('path'))
      .attr('d', convertedPath)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(rects).remove();
}
function replaceLinesWithPaths(parentElement) {

  var lines = $(parentElement).find('line');

  $.each(lines, function() {

    var lineX1 = $(this).attr('x1');
    var lineY1 = $(this).attr('y1');

    var lineX2 = $(this).attr('x2');
    var lineY2 = $(this).attr('y2');

    var convertedPath = 'M' + lineX1 + ',' + lineY1 + ' ' + lineX2 + ',' + lineY2;


    $(SVG('path'))
      .attr('d', convertedPath)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(lines).remove();
}

function replaceCirclesWithPaths(parentElement) {

  var circles = $(parentElement).find('circle');

  $.each(circles, function() {

    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var r = $(this).attr('r');
    var r2 = parseFloat(r * 2);

    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';

    $(SVG('path'))
      .attr('d', convertedPath)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(circles).remove();
}


function replaceEllipsesWithPaths(parentElement) {

  var ellipses = $(parentElement).find('ellipse');

  $.each(ellipses, function() {

    var cX = $(this).attr('cx');
    var cY = $(this).attr('cy');
    var rX = $(this).attr('rx');
    var rY = $(this).attr('ry');

    var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-rX) + ', 0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + rX*2 + ',0 ' + 'a ' + rX + ', ' + rY + ' 0 1,0 ' + (-rX*2) + ',0 ';

    $(SVG('path'))
      .attr('d', convertedPath)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(ellipses).remove();
}


function replacePolygonsWithPaths(parentElement) {

  var polygons = $(parentElement).find('polygon');

  $.each(polygons, function() {

    var points = $(this).attr('points');
    var polyPoints = points.split(/[ ,]+/);
    var endPoint = polyPoints[0] + ', ' + polyPoints[1];

    $(SVG('path'))
      .attr('d', 'M' + points + ' ' + endPoint)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(polygons).remove();
}

function replacePolylinesWithPaths(parentElement) {

  var polylines = $(parentElement).find('polyline');

  $.each(polylines, function() {

    var points = $(this).attr('points');

    $(SVG('path'))
      .attr('d', 'M' + points)
      .attr('fill', $(this).attr('fill'))
      .attr('stroke', $(this).attr('stroke'))
      .attr('stroke-width', $(this).attr('stroke-width'))
      .attr('stroke-linecap', $(this).attr('stroke-linecap'))
      .insertAfter(this);

  });

  $(polylines).remove();
}

function hideSVGPaths(parentElement) {

  var paths = $(parentElement).find('path');

  $.each( paths, function() {

    var totalLength = this.getTotalLength();
    
    $(this).css({
      'stroke-dashoffset': totalLength,
      'stroke-dasharray': totalLength + ' ' + totalLength
    });
  });
}

function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {

  var paths = $(_parentElement).find('path');

  $.each( paths, function(i) {

    var totalLength = this.getTotalLength();

    $(this).css({
      'stroke-dashoffset': totalLength,
      'stroke-dasharray': totalLength + ' ' + totalLength
    });

    $(this).delay(_timeDelay*i).animate({
      'stroke-dashoffset': 0
    }, {
      duration: Math.floor(Math.random() * _timeMax) + _timeMin,
      easing: 'easeInOutQuad'
    });
  });
}

function replaceWithPaths(parentElement) {
  replaceRectsWithPaths(parentElement);
  replaceLinesWithPaths(parentElement);
  replaceEllipsesWithPaths(parentElement);
  replaceCirclesWithPaths(parentElement);
  replacePolygonsWithPaths(parentElement);
  replacePolylinesWithPaths(parentElement);    
}

function startSVGAnimation(parentElement) {
  drawSVGPaths(parentElement, 250, 500, 25);
}

replaceWithPaths($('svg'));
startSVGAnimation($('svg'));

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
2+2*2= ?

Редакторы выбирают

Web и Технологии