Итак, с помощью CSS и SVG можно создать суперкрутой эффект рисования картинки по контуру.

Прежде всего, под рукой нужно иметь пригодную для создания эффекта рисования картинку, созданную в векторном формате и содержащую всего одну кривую. Нарисовать такую картинку можно самостоятельно или, при отсутствии соответствующих навыков, взять готовую, к примеру, из набора “One line illustrations set”

Следующим шагом полученную картинку необходимо преобразовать в SVG и добавить в HTML-код:

<svg width="366" height="299" viewBox="0 0 366 299" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.93805 1C16.4428 13.286 21.1459 24.4732 24.1478 32.8636C26.9496 40.8545 31.9527 54.0394 32.4531 71.819C32.7532 83.7055 31.3524 90.9971 29.8514 95.1923C27.3498 102.084 24.548 106.979 20.5454 114.171C20.5454 114.171 8.43771 136.645 3.53458 161.317C2.03362 168.608 -1.06831 183.491 2.33386 201.671C4.4352 212.758 7.73731 228.14 20.8457 241.625C24.6481 245.62 37.8565 259.105 56.5684 258.905C67.5754 258.805 77.3817 254.011 83.5857 250.515C93.2919 245.221 98.195 239.028 101.297 235.832C109.902 226.842 114.205 218.252 118.608 209.562C121.01 204.867 125.112 196.676 128.314 185.389C130.716 177.099 131.816 164.913 133.718 141.04C134.118 136.245 134.919 125.258 133.317 111.474C132.717 105.98 131.716 100.486 127.914 95.2922C123.711 89.3989 117.507 85.9029 116.707 86.6021C115.906 87.4012 121.71 92.3955 127.514 103.183C132.017 111.474 134.318 119.365 135.719 124.159C138.221 132.55 139.822 137.544 141.923 142.338C143.824 146.534 147.226 151.328 152.53 156.522C159.034 162.915 163.337 164.513 175.544 170.007C186.351 174.901 199.059 180.195 211.267 189.884C225.576 201.371 235.383 214.556 235.383 214.556C240.586 220.249 246.189 225.843 251.193 231.437C252.493 232.935 255.495 236.83 260.298 237.53C262.9 237.729 265.502 237.629 266.202 236.131C267.303 233.834 264.501 229.838 262 227.741C261.099 227.042 256.996 223.546 252.494 224.844C248.291 226.043 246.39 230.338 245.189 233.434C243.788 237.23 243.588 241.026 243.788 242.724C244.288 246.22 244.889 254.21 248.891 258.506C252.994 263 259.398 265.398 263.3 265.697C268.704 266.197 274.708 266.097 279.311 267.196C286.715 268.894 292.019 272.49 295.321 274.387C299.023 276.585 303.226 281.479 307.529 284.676C311.231 287.373 315.033 290.369 320.637 293.066C326.14 295.663 331.844 298.36 339.649 297.96C346.654 297.661 351.557 294.964 355.259 293.066C358.161 291.568 365.566 287.472 364.965 283.976C364.665 282.578 363.464 281.579 362.264 281.08C358.261 279.282 355.96 279.881 352.657 279.482C348.855 279.082 345.853 276.984 339.049 271.99C333.945 268.194 328.442 263.8 320.637 255.709C310.23 244.821 304.827 233.534 303.126 230.238C299.423 222.946 298.923 220.05 294.52 213.757C291.018 208.663 287.716 204.967 283.313 200.672C277.009 194.479 273.007 191.582 268.103 186.388C264.701 182.892 263.3 181.094 253.494 169.108C239.485 152.027 239.985 152.926 237.684 149.93C229.179 138.743 225.576 129.753 218.472 113.072C212.368 98.8881 203.062 76.9132 194.857 59.7328C184.55 38.0576 169.14 9.09076 166.739 10.1895C164.737 11.0885 171.742 31.2654 173.743 37.1587C194.356 96.6906 231.58 154.824 236.583 152.227C242.187 149.43 203.562 74.1164 184.65 27.8693C184.05 26.2711 181.148 20.9772 177.045 16.1827C166.038 3.39727 145.926 -0.797956 129.415 4.79565C117.607 8.89096 110.403 17.1815 98.9955 35.4606C86.1873 55.9372 82.2849 67.1244 69.3766 90.8972C63.9732 100.786 55.3677 115.569 42.7596 132.649" stroke="#151515" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Теперь можно перейти к анимации. Так как в примере рассматривается только один svg элемент, все стили будет применены именно к нему:

svg {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    pointer-events: none;
}

Параметр stroke-dasharray задает длину единственной линии, stroke-dashoffset определяет смещение равное длине линии. Благодаря этим условиям на старте картинка будет скрыта. pointer-events: none; указывает на то, что события мыши не буду влиять на прорисовку картинки.

Теперь нужно создать анимацию, убирающую смещение:

svg {
  animation: animateDash 2s linear forwards infinite;
}

@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}

Вот и все, базовый эффект рисования работает.

Спасибо за внимание.