Karkulka

In this example below you will see how to do a Karkulka with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by scorch, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright scorch ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Karkulka</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io -->
<div id="h">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 595.276 841.89" width="100%" height="841.89">
  <g id="tree_1"><path d=" M 523.068 296.375 C 538.089 301.297 554.732 304.303 572.3 304.934 C 572.041 307.163 571.912 309.417 571.912 311.691 C 571.912 349.927 608.239 382.47 658.812 394.379 C 658.431 397.027 658.234 399.723 658.234 402.458 C 658.234 438.799 692.878 468.303 735.549 468.303 C 778.22 468.303 812.864 438.799 812.864 402.458 C 812.864 389.621 808.541 377.637 801.063 367.509 C 819.65 352.355 830.826 332.899 830.826 311.691 C 830.826 282.608 809.808 256.818 777.494 240.893 C 782.848 229.702 785.834 217.226 785.834 204.077 C 785.834 166.762 761.791 134.869 727.968 122.288 C 713.648 102.01 690.775 87.896 664.432 84.878 C 649.079 58 619.596 39.804 585.781 39.804 C 559.95 39.804 536.648 50.421 520.238 67.416 C 506.136 72.238 493.637 80.387 483.746 90.899 C 478.523 89.984 473.145 89.504 467.652 89.504 C 419.398 89.504 379.967 126.557 377.793 172.997 C 351.976 188.379 334.744 216.084 334.744 247.674 C 334.744 263.7 339.179 278.726 346.92 291.651 C 337.119 307.036 331.257 326.559 331.257 347.793 C 331.257 397.414 363.27 437.7 402.702 437.7 C 442.134 437.7 474.148 397.414 474.148 347.793 C 474.148 347.07 474.141 346.35 474.125 345.632 C 495.798 339.542 513.77 321.044 523.068 296.375 Z " fill="rgb(117,33,100)"/><path d=" M 569.039 544.312 Q 569.039 589.354 575.703 763.657 L 526.907 763.657 Q 528.409 562.454 525.281 512.407 Q 522.153 462.359 413.676 399.234 L 413.676 389.791 C 453.775 410.065 492.539 433.426 529.952 459.857 Q 533.705 414.189 532.83 385.829 Q 531.954 357.469 474.65 314.762 L 474.65 310.341 C 492.562 315.945 513.935 327.795 538.752 345.875 L 538.752 289.071 L 563.859 289.071 L 563.859 383.41 C 589.101 366.269 616.313 354.431 645.477 347.877 L 645.477 353.882 Q 569.03 386.872 566.903 425.45 Q 564.776 464.028 566.903 482.378 C 600.945 454.886 640.794 431.537 686.432 412.312 L 686.432 419.194 Q 569.039 499.269 569.039 544.312 Z " fill="rgb(76,11,89)"/><path d=" M 621.414 75.54 C 621.377 75.52 621.339 75.501 621.301 75.481 C 621.67 72.811 621.859 70.085 621.859 67.317 C 621.859 33.512 593.622 6.067 558.841 6.067 C 524.061 6.067 495.823 33.512 495.823 67.317 C 495.823 71.302 496.216 75.199 496.974 78.97 C 489.402 75.817 481.063 74.079 472.31 74.079 C 437.529 74.079 409.292 101.524 409.292 135.329 C 409.292 140.312 409.905 145.157 411.069 149.794 C 402.947 146.96 394.193 145.418 385.072 145.418 C 342.491 145.418 307.92 179.019 307.92 220.405 C 307.92 252.8 329.101 280.425 358.732 290.886 C 357.337 295.307 356.591 300.002 356.591 304.865 C 356.591 310.751 357.684 316.39 359.691 321.598 C 344.663 329.824 334.507 345.48 334.507 363.423 C 334.507 389.902 356.625 411.4 383.868 411.4 C 408.425 411.4 428.818 393.933 432.592 371.092 C 458.777 369.938 479.667 348.909 479.667 323.176 C 479.667 313.409 476.657 304.32 471.486 296.741 C 479.908 299.815 489.03 301.496 498.552 301.496 C 504.199 301.496 509.705 300.905 515.005 299.773 C 520.638 301.946 526.777 303.141 533.202 303.141 C 560.445 303.141 582.563 281.644 582.563 255.165 C 582.563 252.736 582.377 250.35 582.008 248.021 C 583.413 249.012 584.854 249.958 586.332 250.852 C 585.819 254.231 585.56 257.689 585.56 261.206 C 585.56 296.993 612.381 326.739 647.538 332.467 C 647.4 334.333 647.327 336.217 647.327 338.117 C 647.327 379.504 681.898 413.104 724.479 413.104 C 766.295 413.104 800.385 380.7 801.598 340.34 C 820.788 333.766 834.554 315.977 834.554 295.088 C 834.554 277.26 824.527 261.69 809.662 253.418 C 815.134 244.347 818.27 233.788 818.27 222.523 C 818.27 192.737 796.348 167.889 767.34 162.41 C 768.525 158.294 769.158 153.955 769.158 149.474 C 769.158 122.995 747.04 101.497 719.797 101.497 C 716.046 101.497 712.392 101.905 708.881 102.681 C 707.191 77.689 685.771 57.9 659.633 57.9 C 644.229 57.9 630.463 64.774 621.414 75.54 Z " fill="rgb(166,44,99)"/></g>
  <g id="tree_2"><path d=" M 93.264 259.507 C 76.884 262.358 59.049 263.089 40.546 261.339 C 40.533 263.585 40.379 265.838 40.088 268.093 C 35.198 306.014 -7.056 333.378 -61.609 338.351 C -61.548 341.029 -61.687 343.73 -62.037 346.442 C -66.685 382.484 -106.785 407.061 -151.53 401.291 C -196.274 395.521 -228.828 361.575 -224.18 325.533 C -222.538 312.801 -216.473 301.5 -207.336 292.466 C -224.888 274.923 -234.118 254.116 -231.406 233.083 C -227.686 204.238 -202.349 181.502 -166.428 170.078 C -170.611 158.255 -172.146 145.477 -170.464 132.436 C -165.692 95.427 -136.402 67.047 -99.326 59.143 C -81.718 40.968 -55.927 30.063 -27.919 30.631 C -8.382 6.05 24.86 -8.01 60.319 -3.437 C 87.405 0.056 110.482 13.737 125.515 32.811 C 139.686 39.501 151.749 49.273 160.777 61.036 C 166.371 60.835 172.072 61.086 177.831 61.829 C 228.43 68.354 265.038 110.434 261.379 156.787 C 286.482 175.533 301.008 205.341 296.968 236.672 C 294.918 252.566 288.346 266.869 278.576 278.641 C 286.886 295.224 290.536 315.381 287.82 336.44 C 281.474 385.653 242.752 421.279 201.404 415.947 C 160.057 410.615 131.64 366.331 137.986 317.118 C 138.079 316.401 138.178 315.688 138.286 314.978 C 116.338 306.007 99.86 285.231 93.264 259.507 Z " fill="rgb(117,33,100)"/><path d=" M 62.046 472.319 Q 62.046 517.361 68.711 763.657 L 19.915 763.657 Q 21.416 490.461 18.288 440.414 Q 15.16 390.367 -93.317 327.242 L -93.317 317.799 C -53.218 338.073 -14.453 361.434 22.959 387.865 Q 26.713 342.197 25.837 313.837 Q 24.961 285.477 -32.343 242.77 L -32.343 238.349 C -14.431 243.953 6.942 255.803 31.759 273.882 L 31.759 217.079 L 56.866 217.079 L 56.866 311.418 C 82.108 294.277 109.32 282.438 138.485 275.884 L 138.485 281.89 Q 62.038 314.879 59.911 353.457 Q 57.784 392.035 59.911 410.386 C 93.952 382.894 133.801 359.544 179.44 340.32 L 179.44 347.201 Q 62.046 427.277 62.046 472.319 Z " fill="rgb(76,11,89)"/><path d=" M -2.756 25.524 C -2.718 25.506 -2.681 25.489 -2.643 25.473 C -2.811 22.784 -2.802 20.052 -2.608 17.291 C -0.238 -16.431 28.913 -41.894 62.449 -39.537 C 95.984 -37.18 121.286 -7.888 118.916 25.834 C 118.636 29.809 117.985 33.67 116.989 37.38 C 124.511 34.748 132.673 33.579 141.114 34.172 C 174.649 36.529 199.951 65.821 197.581 99.543 C 197.231 104.514 196.3 109.305 194.852 113.852 C 202.883 111.576 211.431 110.631 220.226 111.249 C 261.282 114.135 292.259 149.996 289.357 191.281 C 287.085 223.596 264.726 249.717 235.422 258.144 C 236.457 262.648 236.847 267.383 236.506 272.234 C 236.094 278.105 234.645 283.657 232.344 288.716 C 246.257 297.94 254.952 314.246 253.694 332.145 C 251.837 358.558 229.003 378.504 202.735 376.657 C 179.057 374.993 160.62 356.186 158.582 333.146 C 133.415 330.22 114.748 307.828 116.552 282.158 C 117.237 272.414 120.776 263.551 126.294 256.342 C 117.958 258.838 109.045 259.896 99.864 259.251 C 94.419 258.868 89.151 257.905 84.12 256.417 C 78.537 258.202 72.533 258.979 66.339 258.543 C 40.071 256.697 20.252 233.753 22.109 207.339 C 22.279 204.917 22.626 202.549 23.145 200.251 C 21.72 201.144 20.265 201.99 18.778 202.782 C 19.035 206.187 19.042 209.655 18.796 213.163 C 16.286 248.862 -11.661 276.717 -45.961 280.048 C -45.959 281.919 -46.02 283.803 -46.154 285.698 C -49.056 326.983 -84.745 358.157 -125.801 355.271 C -166.121 352.437 -196.719 317.802 -195.058 277.459 C -213.1 269.601 -225.125 250.922 -223.661 230.085 C -222.41 212.3 -211.651 197.448 -196.738 190.204 C -201.378 180.785 -203.661 170.039 -202.871 158.802 C -200.782 129.089 -177.903 105.788 -149.549 102.289 C -150.403 98.103 -150.709 93.732 -150.395 89.261 C -148.538 62.848 -125.705 42.902 -99.437 44.749 C -95.82 45.003 -92.325 45.657 -88.995 46.67 C -85.613 21.854 -63.572 3.565 -38.369 5.337 C -23.516 6.381 -10.725 14.171 -2.756 25.524 Z " fill="rgb(166,44,99)"/></g>
  <g id="Karkulka">
    <g id="r_leg"><path d=" M 291.084 750.117 C 290.836 742.376 293.707 728.928 291.15 720.235 C 288.593 711.541 302.129 709.911 304.849 722.38 C 307.57 734.849 304.902 745.264 300.702 751.061 C 297.618 751.593 294.802 751.727 291.084 750.117 Z " fill="rgb(255,211,190)"/><path d=" M 301.522 750.087 C 298.984 754.566 295.816 756.895 293.407 755.991 C 291.557 755.297 291.041 752.583 291.079 748.801 C 294.85 749.68 298.333 750.112 301.522 750.087 Z " fill="rgb(209,38,47)"/></g>
    <g id="l_leg"><path d=" M 256.935 724.883 C 255.221 736.359 257.318 745.501 260.376 750.962 C 265.839 751.325 267.716 751.593 271.388 749.772 C 271.388 743.719 268.651 734.329 270.523 723.095 C 273.383 705.932 260.005 704.337 256.935 724.883 Z " fill="rgb(255,211,190)"/><path d=" M 259.737 750.909 C 262.238 756.078 265.609 758.572 268.02 757.539 C 270.869 756.318 271.515 753.723 271.358 750.027 C 267.323 750.647 263.488 751.002 259.737 750.909 Z " fill="rgb(209,38,47)"/></g>
    <g id="dress">
      <path d=" M 240.487 717.849 C 253.372 727.091 281.507 728.289 324.873 721.425 L 301.989 675.656 L 253.36 675.656 C 250.106 690.649 245.827 704.725 240.487 717.849 Z " fill="#56C878"/>
      <path d=" M 274.389 695.418 C 271.959 695.03 269.705 697.001 269.767 699.462 C 269.852 702.791 274.448 704.515 276.701 702.062 C 278.746 699.835 277.375 695.895 274.389 695.418 Z " fill="#2B6C3F"/>
      <path d=" M 271.511 710.636 C 269.444 711.974 269.089 714.947 270.782 716.734 C 273.072 719.152 277.641 717.357 277.674 714.028 C 277.704 711.004 274.049 708.993 271.511 710.636 Z " fill="#2B6C3F"/></g>
    <g id="basket"><path d=" M 216.123 714.184 L 244.282 728.129 C 241.078 735.472 236.181 742.823 231.89 741.348 C 225.616 739.191 221.219 738.32 214.38 732.554 Q 209.2 728.186 216.123 714.184 Z " fill="rgb(89,11,15)"/><path d=" M 216.123 715.885 C 213.978 715.977 218.537 710.563 223.364 709.893 C 228.191 709.223 244.014 716.195 244.762 720.084 C 245.511 723.972 244.21 728.665 242.673 728.129 C 241.135 727.593 244.282 724.564 243.209 721.212 C 242.136 717.86 231.89 712.497 225.346 711.96 C 218.803 711.424 218.269 715.793 216.123 715.885 Z " fill="rgb(89,11,15)"/></g>
    <g id="l_arm"><path d=" M 244.17 703.868 C 246.465 697.598 252.349 687.911 251.929 685.23 C 250.721 677.517 242.561 692.739 237.466 702.393 C 232.37 712.047 228.616 710.841 228.079 713.522 C 227.543 716.204 229.155 714.532 230.761 716.472 C 232.367 718.413 231.163 718.618 232.638 719.556 C 234.113 720.495 234.516 717.411 236.196 717.849 C 237.877 718.287 236.795 719.959 239.075 719.959 C 241.354 719.959 239.343 714.595 244.17 703.868 Z " fill="rgb(255,211,190)"/></g>
    <g id="r_arm"><path d=" M 321.093 700.21 C 316.982 694.949 311.867 684.835 309.368 683.775 C 302.181 680.726 310.794 695.696 316.299 705.123 C 321.804 714.55 318.796 717.1 320.789 718.972 C 322.783 720.845 322.215 718.592 324.711 718.254 C 327.207 717.915 326.745 719.046 328.321 718.289 C 329.897 717.533 327.491 715.562 328.751 714.367 C 330.011 713.171 330.859 714.973 332.063 713.037 C 333.267 711.102 327.651 709.976 321.093 700.21 Z " fill="rgb(255,211,190)"/></g>
    <g id="r_pigtail"><path d=" M 333.455 634.535 C 346.818 630.124 354.194 648.48 364.921 651.699 C 355.448 658.752 343.177 658.162 328.091 649.911 L 333.455 634.535 Z " fill="rgb(89,11,15)"/></g>
    <g id="l_pigtail"><path d=" M 217.603 637.038 L 226.899 651.699 C 214.53 660.282 202.855 661.599 191.858 655.632 C 200.797 645.978 203.657 635.608 217.603 637.038 Z " fill="rgb(89,11,15)"/></g>
    <g id="hood_2"><path d=" M 277.674 673.51 C 269.093 683.761 255.272 687.581 236.196 680.662 C 240.964 679.351 246.214 676.377 251.929 671.722 C 263.679 673.939 270.128 674.699 277.674 673.51 Z " fill="rgb(217,72,50)"/></g>
    <g id="hood_3"><path d=" M 317.007 682.807 C 302.466 687.575 287.509 683.051 275.823 673.51 C 288.84 671.885 299.755 671.652 304.849 668.504 C 305.434 674.78 310.571 678.516 317.007 682.807 Z " fill="rgb(217,72,50)"/></g>
    <g id="face"><path d=" M 322.37 610.221 C 306.36 575.325 248.223 575.095 231.905 609.863 C 218.193 639.081 226.184 674.225 274.814 675.656 C 323.443 677.086 336.396 640.789 322.37 610.221 Z " fill="rgb(255,211,190)"/><path d=" M 311.438 636.411 C 305.274 635.426 299.56 640.426 299.718 646.666 C 299.932 655.107 311.587 659.477 317.298 653.258 C 322.484 647.611 319.009 637.621 311.438 636.411 Z " fill="rgb(255,197,190)"/><path d=" M 242.885 636.411 C 236.721 635.426 231.007 640.426 231.165 646.666 C 231.379 655.107 243.034 659.477 248.745 653.258 C 253.931 647.611 250.457 637.621 242.885 636.411 Z " fill="rgb(255,197,190)"/></g>
    <g id="hood_4"><path d=" M 259.081 557.658 C 304.849 539.064 333.455 583.045 353.836 568.385 C 355.993 586.034 347.775 597.959 334.885 615.584 C 324.873 589.839 299.922 569.481 259.081 557.658 Z " fill="rgb(217,72,50)"/></g>
    <g id="hair"><path d=" M 328.091 617.372 C 310.446 613.173 291.541 611.215 271.358 611.48 C 270.063 602.574 270.71 591.402 276.863 577.682 C 306.681 582.422 324.304 595.658 328.091 617.372 Z " fill="rgb(89,11,15)"/><path d=" M 224.754 615.584 C 234.926 612.775 251.928 610.994 265.517 611.48 C 265.3 600.836 269.359 593.504 277.674 577.682 C 249.452 583.474 231.817 596.114 224.754 615.584 Z " fill="rgb(89,11,15)"/></g>
    <g id="hood_1"><path d=" M 238.342 564.452 C 212.582 583.454 200.638 617.81 217.603 645.978 C 226.565 660.858 239.057 669.219 256.935 673.51 C 226.184 659.923 225.325 643.369 229.045 621.305 C 236.028 579.882 298.194 570.042 319.152 605.93 C 331.428 626.95 326.304 657.062 307.71 668.504 C 324.873 663.498 344.897 647.408 343.467 608.433 C 342.037 569.458 277.079 535.876 238.342 564.452 Z " fill="rgb(233,81,57)"/></g>
    <g id="eyes"><path d=" M 307.299 629.979 C 304.868 629.591 302.615 631.562 302.677 634.023 C 302.762 637.352 307.358 639.076 309.61 636.623 C 311.656 634.396 310.285 630.456 307.299 629.979 Z " fill="rgb(32,47,91)"/><path d=" M 245.11 629.979 C 242.679 629.591 240.426 631.562 240.488 634.023 C 240.573 637.352 245.169 639.076 247.421 636.623 C 249.467 634.396 248.096 630.456 245.11 629.979 Z " fill="rgb(32,47,91)"/></g>
    <g id="mouth"><path d=" M 256.935 643.603 Q 253.09 663.884 271.388 665.099 Q 294.086 666.605 293.407 643.603" fill="none" vector-effect="non-scaling-stroke" stroke-width="1.777" stroke="rgb(0,0,0)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/></g></g>
</svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/scorch/karkulka-jGZgbO */
body {
  margin: 0;
}

#h {
  min-width: 700px;
}

svg {
  width: 595.276;
  margin: 0 auto;
  display: block;
}
svg #tree_1 {
  transform: translate(-60px, -130px) scale(0.9);
  transform-origin: 90% 90%;
}
svg #tree_2 {
  transform: translate(60px, -130px) scale(0.9);
  transform-origin: 90% 90%;
}

#Karkulka {
  transform: translate(0px, -170px) scale(1);
}
#Karkulka * {
  transition: 0.1s;
}
#Karkulka #mouth {
  transform: translate(-1px, 2px);
  transform-origin: 50% 90%;
  stroke-dasharray: 20px 1000px;
  stroke-dashoffset: -24px;
}

#Karkulka:hover #r_pigtail {
  transform: rotate(-4deg);
  transform-origin: 0% 50%;
}
#Karkulka:hover #l_pigtail {
  transform: rotate(4deg);
  transform-origin: 100% 50%;
}
#Karkulka:hover #eyes {
  transform: translate(-1px, 4px);
}
#Karkulka:hover #mouth {
  transform: translate(-1px, 4px) scaleY(0.94);
  transform-origin: 50% 90%;
  stroke-dashoffset: -25px;
}
#Karkulka:hover #face {
  transform: translate(-1px, 4px);
}
#Karkulka:hover #hair {
  transform: translate(-1px, 6px);
}
#Karkulka:hover #hood_1 {
  transform: translate(-1px, 4px);
}
#Karkulka:hover #hood_2 {
  transform: translate(-1px, 3px);
}
#Karkulka:hover #hood_3 {
  transform: translate(-1px, 3px);
}
#Karkulka:hover #hood_4 {
  transform: translate(-6px, 4px) rotate(-4deg);
  transform-origin: 50% 50%;
}
#Karkulka:hover #basket {
  transform: rotate(-7deg) translate(6px, 2px);
  transform-origin: 50% 0%;
}
#Karkulka:hover #l_arm {
  transform: rotate(-7deg);
  transform-origin: 80% 0%;
}
#Karkulka:hover #r_arm {
  transform: rotate(7deg);
  transform-origin: 80% 0%;
}
#Karkulka:hover #dress {
  transform: rotate(-2deg) scaleY(1.01);
  transform-origin: 80% 0%;
}

#Karkulka:active #r_pigtail {
  transform: rotate(-14deg);
  transform-origin: 0% 50%;
}
#Karkulka:active #l_pigtail {
  transform: rotate(14deg);
  transform-origin: 100% 50%;
}
#Karkulka:active #eyes {
  transform: translate(-1px, 3px) scaleY(0.5);
  transform-origin: 50% 90%;
}
#Karkulka:active #mouth {
  transform: translate(-1px, 2px) scaleY(0.9);
  transform-origin: 50% 20%;
  stroke-dashoffset: -27px;
}
#Karkulka:active #face {
  transform: translate(-1px, 2px);
}
#Karkulka:active #hair {
  transform: translate(-1px, 4px);
}
#Karkulka:active #hood_1 {
  transform: translate(-1px, 2px);
}
#Karkulka:active #hood_2 {
  transform: translate(-1px, 2px);
}
#Karkulka:active #hood_3 {
  transform: translate(-1px, 2px);
}
#Karkulka:active #hood_4 {
  transform: translate(-6px, 2px) rotate(-1deg);
  transform-origin: 50% 50%;
}
#Karkulka:active #basket {
  transform: rotate(-7deg) translate(6px, 2px);
  transform-origin: 50% 0%;
}
#Karkulka:active #l_arm {
  transform: rotate(-7deg);
  transform-origin: 80% 0%;
}
#Karkulka:active #r_arm {
  transform: rotate(7deg);
  transform-origin: 80% 0%;
}
#Karkulka:active #dress {
  transform: rotate(-2deg) scaleY(1.01);
  transform-origin: 80% 0%;
}

Comments