In this blog, we’ll explore some of the ways CSS can be used to animate SVG, things to consider when implementing SVG animations on your website, and what tools you’ll need to get started.
Let’s start with some examples of how animation can be incorporated on your website. Take a look at the following ways that CSS and SVG can come together to improve the user experience.
HTML Code for Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<svg width="752" height="670" viewBox="0 0 752 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="web" clip-path="url(#clip0_2_3)">
<g id="board">
<path id="Vector"
d="M476.595 656.657L476.587 656.588C475.734 637.649 472.259 618.92 466.261 600.936L466.256 600.907C465.906 599.06 466.008 597.155 466.552 595.356C467.363 592.861 469.042 590.739 471.284 589.376C473.526 588.014 476.182 587.501 478.771 587.93C484.296 588.968 490.011 587.993 494.879 585.18C496.404 584.295 498.113 583.774 499.872 583.658C501.631 583.541 503.394 583.832 505.022 584.509C506.557 585.134 507.925 586.11 509.015 587.359C510.105 588.608 510.888 590.094 511.301 591.7C511.366 591.956 511.423 592.214 511.472 592.477C511.648 611.505 515.143 630.356 521.8 648.182L521.804 648.205C522.148 650.02 522.056 651.89 521.537 653.663C521.017 655.435 520.085 657.059 518.816 658.401C517.693 659.541 516.332 660.418 514.83 660.97C513.327 661.522 511.722 661.735 510.128 661.593C504.333 661.199 498.374 662.374 491.909 665.188C489.651 666.193 487.112 666.371 484.736 665.692C482.675 665.088 480.823 663.923 479.385 662.328C477.948 660.733 476.982 658.769 476.595 656.657Z"
fill="#6C63FF" />
<path id="Vector_2"
d="M291.372 396.5V645.2H465.603V396.5C465.606 394.711 465.035 392.968 463.975 391.528C462.914 390.088 461.42 389.025 459.711 388.497C458.905 388.231 458.061 388.1 457.213 388.109H299.787C298.683 388.107 297.59 388.323 296.57 388.743C295.549 389.164 294.622 389.781 293.841 390.561C293.059 391.34 292.439 392.265 292.015 393.284C291.592 394.303 291.373 395.396 291.372 396.5V396.5ZM359.367 481.954C359.412 477.051 361.392 472.364 364.875 468.913C368.358 465.462 373.063 463.525 377.966 463.525C382.87 463.525 387.575 465.462 391.058 468.913C394.541 472.364 396.52 477.051 396.566 481.954V510.811C396.542 515.728 394.572 520.436 391.087 523.905C387.601 527.374 382.884 529.322 377.966 529.322C373.049 529.322 368.331 527.374 364.846 523.905C361.36 520.436 359.391 515.728 359.367 510.811V481.954Z"
fill="#F2F2F2" />
<path id="Vector_3"
d="M290.839 637.246V661.229C290.843 662.471 291.336 663.662 292.213 664.542C293.089 665.423 294.277 665.923 295.519 665.933H461.457C462.7 665.927 463.891 665.429 464.768 664.547C465.645 663.665 466.137 662.472 466.137 661.229V637.246H290.839Z"
fill="#E6E6E6" />
<path id="Vector_4"
d="M17.2829 21.8002V475.892C17.2875 481.678 19.5883 487.227 23.6802 491.319C27.7721 495.411 33.3205 497.711 39.1073 497.716H712.024C717.811 497.711 723.359 495.411 727.451 491.319C731.543 487.227 733.844 481.678 733.848 475.892V21.8002C733.835 16.0185 731.53 10.4778 727.44 6.39178C723.349 2.30573 717.806 0.00733915 712.024 0H39.1073C33.3255 0.0073655 27.7824 2.30576 23.6918 6.39181C19.6012 10.4779 17.2967 16.0185 17.2829 21.8002V21.8002Z"
fill="#E6E6E6" />
<path id="Vector_5"
d="M706.41 15.762H44.7209C41.6254 15.7688 38.6589 17.0031 36.4722 19.1943C34.2856 21.3855 33.0574 24.3546 33.0571 27.4502V470.29C33.0624 473.382 34.293 476.346 36.4792 478.532C38.6655 480.718 41.6291 481.949 44.7209 481.954H706.41C709.502 481.949 712.466 480.718 714.652 478.532C716.838 476.346 718.069 473.382 718.074 470.29V27.4502C718.074 24.3546 716.846 21.3855 714.659 19.1943C712.472 17.0031 709.506 15.7688 706.41 15.762V15.762ZM539.497 330.38C538.527 332.296 537.044 333.905 535.213 335.027C533.383 336.15 531.276 336.741 529.129 336.736L529.059 336.731C522.716 335.847 516.349 335.265 509.959 334.983C510.951 335.693 511.824 336.557 512.546 337.541C513.462 338.854 514.076 340.352 514.345 341.93C514.613 343.508 514.529 345.125 514.099 346.667C512.654 352.292 512.722 358.365 514.31 365.235C514.886 367.638 514.598 370.168 513.497 372.38C512.527 374.296 511.044 375.905 509.213 377.027C507.383 378.15 505.276 378.741 503.129 378.736L503.059 378.731C487.911 376.621 472.574 376.213 457.334 377.513C457.274 377.897 457.198 378.282 457.099 378.667C455.654 384.292 455.722 390.365 457.31 397.235C457.886 399.638 457.598 402.168 456.497 404.38C455.527 406.296 454.044 407.905 452.213 409.027C450.383 410.15 448.276 410.741 446.129 410.736L446.059 410.731C430.502 408.565 414.746 408.194 399.104 409.625C398.985 413.532 399.391 417.436 400.31 421.235C400.886 423.638 400.598 426.168 399.497 428.38C398.527 430.296 397.044 431.905 395.213 433.027C393.383 434.15 391.276 434.741 389.129 434.736L389.059 434.731C370.283 432.115 351.234 432.115 332.458 434.731H332.427C330.548 434.738 328.694 434.291 327.024 433.427C324.719 432.175 322.939 430.138 322.008 427.684C321.077 425.231 321.057 422.526 321.952 420.059C322.519 418.455 322.941 416.802 323.212 415.122C306.004 413.138 288.614 413.343 271.458 415.731H271.427C269.548 415.738 267.694 415.291 266.024 414.427C263.719 413.175 261.939 411.138 261.008 408.684C260.077 406.231 260.057 403.526 260.952 401.059C262.981 395.816 263.064 390.019 261.186 384.72C260.301 382.235 260.301 379.521 261.186 377.036C248.252 376.377 235.285 376.944 222.458 378.731H222.427C220.548 378.738 218.694 378.291 217.024 377.427C214.719 376.175 212.939 374.138 212.008 371.684C211.077 369.231 211.057 366.526 211.952 364.059C213.981 358.816 214.064 353.019 212.186 347.72C211.595 346.059 211.394 344.284 211.601 342.533C211.807 340.781 212.415 339.102 213.377 337.624C214.272 336.229 215.481 335.062 216.908 334.218C218.334 333.374 219.939 332.876 221.593 332.763C221.856 332.745 222.121 332.736 222.388 332.736C228.96 333.885 235.595 334.634 242.258 334.981C240.193 333.623 238.645 331.611 237.864 329.267C237.083 326.923 237.114 324.384 237.952 322.059C239.981 316.816 240.064 311.019 238.186 305.72C237.595 304.059 237.394 302.284 237.601 300.533C237.807 298.781 238.415 297.102 239.377 295.624C239.461 295.495 239.559 295.38 239.648 295.256C234.907 295.583 230.177 296.074 225.458 296.731H225.427C223.548 296.738 221.694 296.291 220.024 295.427C217.719 294.175 215.939 292.138 215.008 289.684C214.077 287.231 214.057 284.526 214.952 282.059C216.981 276.816 217.064 271.019 215.186 265.72C214.595 264.059 214.394 262.284 214.601 260.533C214.807 258.781 215.415 257.102 216.377 255.624C217.272 254.229 218.481 253.062 219.908 252.218C221.334 251.374 222.939 250.876 224.593 250.763C224.856 250.745 225.121 250.736 225.388 250.736C233.29 252.119 241.283 252.924 249.302 253.143C248.294 251.69 247.645 250.018 247.411 248.264C247.176 246.511 247.361 244.727 247.952 243.059C249.981 237.816 250.064 232.019 248.186 226.72C247.595 225.059 247.394 223.284 247.601 221.533C247.807 219.781 248.415 218.102 249.377 216.624C250.272 215.229 251.481 214.062 252.908 213.218C254.334 212.374 255.939 211.876 257.593 211.763C257.856 211.745 258.121 211.736 258.388 211.736C265.075 212.906 271.828 213.662 278.608 214C277.888 212.635 277.458 211.137 277.345 209.598C277.232 208.06 277.438 206.514 277.952 205.059C279.981 199.816 280.064 194.019 278.186 188.72C277.595 187.059 277.394 185.284 277.601 183.533C277.807 181.781 278.415 180.102 279.377 178.624C280.272 177.229 281.481 176.062 282.908 175.218C284.334 174.374 285.939 173.876 287.593 173.763C287.856 173.745 288.121 173.736 288.388 173.736C296.257 175.113 304.215 175.917 312.2 176.14C311.113 173.572 311.025 170.69 311.952 168.059C313.981 162.816 314.064 157.019 312.186 151.72C311.595 150.059 311.394 148.284 311.601 146.533C311.807 144.781 312.415 143.102 313.377 141.624C314.272 140.229 315.481 139.062 316.908 138.218C318.334 137.374 319.939 136.876 321.593 136.763C321.856 136.745 322.121 136.736 322.388 136.736C341.129 140.035 360.301 140.037 379.043 136.743H379.066C380.513 137.041 382.005 137.041 383.451 136.743H383.474C402.216 140.037 421.388 140.035 440.129 136.736C440.396 136.736 440.661 136.745 440.925 136.763C442.578 136.876 444.183 137.374 445.609 138.218C447.036 139.062 448.245 140.229 449.14 141.624C450.102 143.102 450.71 144.781 450.916 146.533C451.123 148.284 450.923 150.059 450.331 151.72C448.453 157.019 448.536 162.816 450.565 168.059C451.493 170.69 451.404 173.572 450.317 176.14C458.302 175.917 466.26 175.113 474.129 173.736C474.396 173.736 474.661 173.745 474.925 173.763C476.578 173.876 478.183 174.374 479.609 175.218C481.036 176.062 482.245 177.229 483.14 178.624C484.102 180.102 484.71 181.781 484.916 183.533C485.123 185.284 484.923 187.059 484.331 188.72C482.453 194.019 482.536 199.816 484.565 205.059C485.079 206.514 485.285 208.06 485.172 209.598C485.06 211.137 484.629 212.635 483.909 214C490.689 213.662 497.442 212.906 504.129 211.736C504.396 211.736 504.661 211.745 504.925 211.763C506.578 211.876 508.183 212.374 509.609 213.218C511.036 214.062 512.245 215.229 513.14 216.624C514.102 218.102 514.71 219.781 514.917 221.533C515.123 223.284 514.923 225.059 514.331 226.72C512.453 232.019 512.536 237.816 514.565 243.059C515.157 244.731 515.343 246.52 515.105 248.277C514.868 250.035 514.215 251.71 513.201 253.165C514.094 253.839 514.884 254.639 515.546 255.541C516.462 256.854 517.076 258.352 517.345 259.93C517.613 261.508 517.53 263.125 517.099 264.667C515.654 270.292 515.722 276.365 517.31 283.235C517.886 285.638 517.598 288.168 516.497 290.38C516.094 291.168 515.603 291.907 515.034 292.585C519.715 292.173 524.385 291.559 529.043 290.743H529.066C530.913 290.737 532.735 291.168 534.383 292.002C536.031 292.836 537.457 294.049 538.546 295.541C539.462 296.854 540.076 298.352 540.345 299.93C540.613 301.508 540.53 303.125 540.099 304.667C538.654 310.292 538.722 316.365 540.31 323.235C540.886 325.638 540.598 328.168 539.497 330.38V330.38Z"
fill="white" />
<path id="Vector_6"
d="M684.949 76.7652H65.8085C65.1649 76.751 64.5524 76.4854 64.1023 76.0252C63.6522 75.565 63.4001 74.9468 63.4001 74.3031C63.4001 73.6593 63.6522 73.0412 64.1023 72.581C64.5524 72.1208 65.1649 71.8552 65.8085 71.8409H684.949C685.592 71.8552 686.205 72.1208 686.655 72.581C687.105 73.0412 687.357 73.6593 687.357 74.3031C687.357 74.9468 687.105 75.565 686.655 76.0252C686.205 76.4854 685.592 76.751 684.949 76.7652V76.7652Z"
fill="#E6E6E6" />
<path id="Vector_7"
d="M107.954 59.2697C115.923 59.2697 122.383 52.6655 122.383 44.5188C122.383 36.3721 115.923 29.7679 107.954 29.7679C99.9851 29.7679 93.5248 36.3721 93.5248 44.5188C93.5248 52.6655 99.9851 59.2697 107.954 59.2697Z"
fill="#3F3D56" />
<path id="Vector_8"
d="M157.801 59.2697C165.77 59.2697 172.23 52.6655 172.23 44.5188C172.23 36.3721 165.77 29.7679 157.801 29.7679C149.832 29.7679 143.372 36.3721 143.372 44.5188C143.372 52.6655 149.832 59.2697 157.801 59.2697Z"
fill="#3F3D56" />
<path id="Vector_9"
d="M207.648 59.2697C215.617 59.2697 222.077 52.6655 222.077 44.5188C222.077 36.3721 215.617 29.7679 207.648 29.7679C199.679 29.7679 193.218 36.3721 193.218 44.5188C193.218 52.6655 199.679 59.2697 207.648 59.2697Z"
fill="#3F3D56" />
<path id="Vector_10"
d="M654.933 33.4155H619.529C618.829 33.4315 618.163 33.7209 617.673 34.2216C617.184 34.7224 616.91 35.3949 616.91 36.0951C616.91 36.7954 617.184 37.4678 617.673 37.9686C618.163 38.4693 618.829 38.7587 619.529 38.7747H654.933C655.637 38.7651 656.309 38.4785 656.804 37.977C657.298 37.4756 657.576 36.7995 657.576 36.0951C657.576 35.3907 657.298 34.7146 656.804 34.2132C656.309 33.7117 655.637 33.4251 654.933 33.4155H654.933Z"
fill="#3F3D56" />
<path id="Vector_11"
d="M654.933 43.479H619.529C618.829 43.4949 618.162 43.7842 617.673 44.285C617.183 44.7857 616.909 45.4582 616.909 46.1585C616.909 46.8588 617.183 47.5313 617.673 48.0321C618.162 48.5329 618.829 48.8221 619.529 48.838H654.933C655.637 48.8286 656.309 48.5421 656.804 48.0407C657.299 47.5392 657.576 46.863 657.576 46.1585C657.576 45.454 657.299 44.7779 656.804 44.2764C656.309 43.7749 655.637 43.4885 654.933 43.479H654.933Z"
fill="#3F3D56" />
<path id="Vector_12"
d="M654.933 53.5424H619.529C618.829 53.5584 618.163 53.8477 617.673 54.3485C617.184 54.8493 616.91 55.5217 616.91 56.222C616.91 56.9222 617.184 57.5946 617.673 58.0954C618.163 58.5962 618.829 58.8855 619.529 58.9015H654.933C655.637 58.8919 656.309 58.6054 656.804 58.1039C657.298 57.6024 657.576 56.9263 657.576 56.222C657.576 55.5176 657.298 54.8415 656.804 54.34C656.309 53.8386 655.637 53.552 654.933 53.5424H654.933Z"
fill="#3F3D56" />
<path id="Vector_13"
d="M220.244 665.759L220.175 665.754C201.399 663.138 182.35 663.138 163.573 665.754H163.543C161.663 665.761 159.81 665.314 158.14 664.45C155.834 663.198 154.054 661.16 153.124 658.707C152.193 656.254 152.173 653.549 153.068 651.082C155.096 645.839 155.18 640.042 153.302 634.743C152.71 633.082 152.51 631.307 152.716 629.555C152.923 627.804 153.531 626.124 154.492 624.647C155.388 623.251 156.597 622.085 158.024 621.241C159.45 620.397 161.054 619.899 162.708 619.786C162.972 619.768 163.237 619.759 163.504 619.759C182.245 623.057 201.417 623.06 220.158 619.766H220.182C222.029 619.76 223.851 620.191 225.499 621.025C227.146 621.859 228.573 623.072 229.661 624.564C230.577 625.876 231.192 627.375 231.46 628.953C231.729 630.53 231.645 632.148 231.215 633.69C229.77 639.315 229.838 645.388 231.426 652.258C232.002 654.661 231.714 657.191 230.613 659.403C229.643 661.319 228.16 662.928 226.329 664.05C224.498 665.172 222.392 665.764 220.244 665.759V665.759Z"
fill="#6C63FF" />
<path id="Vector_14"
d="M236.244 623.759L236.175 623.754C217.399 621.138 198.35 621.138 179.573 623.754H179.543C177.663 623.761 175.81 623.314 174.14 622.45C171.834 621.198 170.054 619.16 169.124 616.707C168.193 614.254 168.173 611.549 169.068 609.082C171.096 603.839 171.18 598.042 169.302 592.743C168.71 591.082 168.51 589.307 168.716 587.555C168.923 585.804 169.531 584.124 170.492 582.647C171.388 581.251 172.597 580.085 174.024 579.241C175.45 578.397 177.054 577.899 178.708 577.786C178.972 577.768 179.237 577.759 179.504 577.759C198.245 581.057 217.417 581.06 236.158 577.766H236.182C238.029 577.76 239.851 578.191 241.499 579.025C243.146 579.859 244.573 581.072 245.661 582.564C246.577 583.876 247.192 585.375 247.46 586.953C247.729 588.53 247.645 590.148 247.215 591.69C245.77 597.315 245.838 603.388 247.426 610.258C248.002 612.661 247.714 615.191 246.613 617.403C245.643 619.319 244.16 620.928 242.329 622.05C240.498 623.172 238.392 623.764 236.244 623.759Z"
fill="#6C63FF" />
<path id="Vector_15"
d="M96.2315 635.208L96.2744 635.154C108.962 621.068 119.636 605.29 127.989 588.272L128.006 588.247C129.054 586.686 130.463 585.401 132.114 584.502C134.443 583.294 137.128 582.961 139.681 583.565C142.235 584.169 144.487 585.668 146.029 587.791C149.235 592.41 153.989 595.726 159.431 597.141C161.138 597.581 162.721 598.41 164.055 599.562C165.39 600.714 166.441 602.159 167.126 603.784C167.78 605.307 168.068 606.962 167.968 608.617C167.868 610.271 167.382 611.879 166.549 613.312C166.416 613.541 166.275 613.765 166.125 613.987C152.892 627.661 142.147 643.539 134.374 660.908L134.361 660.927C133.332 662.461 131.953 663.728 130.339 664.626C128.725 665.523 126.921 666.025 125.076 666.091C123.475 666.114 121.89 665.783 120.433 665.121C118.975 664.46 117.682 663.484 116.647 662.264C112.797 657.915 107.728 654.569 101.149 652.035C98.8354 651.165 96.9017 649.509 95.6865 647.357C94.6429 645.481 94.1413 643.351 94.2375 641.206C94.3337 639.06 95.0241 636.984 96.2315 635.208V635.208Z"
fill="#6C63FF" />
<path id="Vector_16"
d="M749.941 667.284L1.19069 667.591C0.875498 667.59 0.573534 667.465 0.350983 667.241C0.128431 667.018 0.00344849 666.716 0.00344849 666.401C0.00344849 666.085 0.128431 665.783 0.350983 665.56C0.573534 665.337 0.875498 665.211 1.19069 665.21L749.941 664.903C750.256 664.904 750.558 665.029 750.78 665.253C751.003 665.476 751.128 665.778 751.128 666.093C751.128 666.409 751.003 666.711 750.78 666.934C750.558 667.157 750.256 667.283 749.941 667.284V667.284Z"
fill="#CACACA" />
</g>
<path id="bottombox"
d="M382.859 422.94L382.789 422.935C364.013 420.319 344.964 420.319 326.188 422.935H326.157C324.278 422.942 322.424 422.495 320.754 421.631C318.448 420.379 316.669 418.341 315.738 415.888C314.807 413.435 314.787 410.73 315.682 408.263C317.711 403.02 317.794 397.223 315.916 391.924C315.325 390.263 315.124 388.488 315.331 386.737C315.537 384.985 316.145 383.305 317.107 381.828C318.002 380.433 319.211 379.266 320.638 378.422C322.064 377.578 323.669 377.08 325.322 376.967C325.586 376.949 325.851 376.94 326.118 376.94C344.859 380.239 364.031 380.241 382.773 376.947H382.796C384.643 376.941 386.465 377.372 388.113 378.206C389.761 379.04 391.187 380.253 392.276 381.745C393.192 383.057 393.806 384.556 394.074 386.134C394.343 387.712 394.259 389.329 393.829 390.871C392.384 396.496 392.452 402.569 394.04 409.439C394.616 411.842 394.328 414.372 393.227 416.584C392.257 418.5 390.774 420.109 388.943 421.231C387.113 422.353 385.006 422.945 382.859 422.94Z"
fill="#6C63FF" />
<g id="righthand">
<path id="right hand"
d="M440.601 324.893L425.496 312.393C414.168 318.33 396.932 342.034 396.932 342.034L357.168 370.633C355.649 370.705 354.176 371.177 352.897 371.999C351.618 372.822 350.578 373.967 349.882 375.319C349.186 376.671 348.859 378.183 348.933 379.702C349.007 381.221 349.48 382.693 350.305 383.971C351.129 385.249 352.275 386.287 353.628 386.982C354.981 387.676 356.493 388.001 358.012 387.925C359.531 387.849 361.003 387.375 362.28 386.549C363.557 385.723 364.594 384.576 365.286 383.222L419.314 354.672L440.601 324.893Z"
fill="#FFB8B8" />
<path id="Vector_17"
d="M466.086 277.317C468.406 279.282 470.265 281.733 471.529 284.498C472.794 287.262 473.433 290.271 473.403 293.311C473.372 296.351 472.672 299.347 471.352 302.085C470.032 304.824 468.125 307.237 465.766 309.155L456.16 316.964C456.16 316.964 432.2 351.457 419.728 355.459L387.709 372.187L373.271 357.711L402.29 334.062C402.29 334.062 415.637 321.438 416.973 312.196C417.792 306.537 427.37 291.12 436.971 279.685C438.726 277.616 440.871 275.912 443.285 274.673C445.699 273.433 448.333 272.682 451.037 272.462C453.742 272.242 456.463 272.558 459.045 273.391C461.628 274.224 464.02 275.558 466.086 277.317V277.317Z"
fill="#3F3D56" />
</g>
<g id="rightleg">
<path id="Vector_18"
d="M539.027 579.842L532.564 591.861L483.126 572.653L492.665 554.913L539.027 579.842Z"
fill="#FFB6B6" />
<path id="Vector_19"
d="M551.794 586.16L531.92 623.122L531.452 622.871C527.637 620.819 524.793 617.336 523.545 613.188C522.298 609.039 522.749 604.565 524.8 600.749L524.801 600.748L523.309 591.242L535.204 581.399L536.939 578.173L551.794 586.16Z"
fill="#2F2E41" />
<path id="Vector_20"
d="M409.241 410.61L397.196 506.97L403.219 539.276L511.623 586.768L517.646 567.195C489.936 550.239 460.315 524.578 441.651 522.691C441.651 522.691 440.103 505.591 453.474 495.038C456.171 492.909 455.581 490.028 456.672 487.417C457.423 485.621 460.407 483.751 461.171 481.909C462.162 479.521 460.936 477.149 461.932 474.723C462.492 473.359 464.615 473.274 465.171 471.909C466.121 469.58 465.499 465.975 466.424 463.674C468.401 458.758 470.301 453.951 472.036 449.444C477.437 435.416 481.238 424.303 480.758 421.903C479.253 414.374 409.241 410.61 409.241 410.61Z"
fill="#2F2E41" />
</g>
<path id="body"
d="M420.709 292.878L430.426 275.946L440.859 267.577L460.432 264.565L465.87 268.747C485.44 298.657 492.738 334.956 486.248 370.105L484.721 378.379L483.751 383.631L484.171 389.908L480.905 399.048L481.354 405.74L481.594 409.314L481.835 412.901L482.171 417.908C482.773 420.766 479.743 420.389 480.171 422.908C480.924 427.332 484.3 433.887 479.171 433.908L426.171 422.908C412.707 422.964 400.171 406.908 413.171 393.908L420.709 292.878Z"
fill="#3F3D56" />
<path id="topbox"
d="M393.859 243.94L393.789 243.935C375.013 241.319 355.964 241.319 337.188 243.935H337.157C335.278 243.942 333.424 243.495 331.754 242.631C329.448 241.379 327.669 239.341 326.738 236.888C325.807 234.435 325.787 231.73 326.682 229.263C328.711 224.02 328.794 218.223 326.916 212.924C326.325 211.263 326.124 209.488 326.331 207.737C326.537 205.985 327.145 204.305 328.107 202.828C329.002 201.433 330.211 200.266 331.638 199.422C333.064 198.578 334.669 198.08 336.322 197.967C336.586 197.949 336.851 197.94 337.118 197.94C355.859 201.239 375.031 201.241 393.773 197.947H393.796C395.643 197.941 397.465 198.372 399.113 199.206C400.761 200.04 402.187 201.253 403.276 202.745C404.192 204.057 404.806 205.556 405.074 207.134C405.343 208.712 405.259 210.329 404.829 211.871C403.384 217.496 403.452 223.569 405.04 230.439C405.616 232.842 405.328 235.372 404.227 237.584C403.257 239.5 401.774 241.109 399.943 242.231C398.113 243.353 396.006 243.945 393.859 243.94V243.94Z"
fill="#6C63FF" />
<g id="legleg">
<path id="Vector_21"
d="M435.043 651.672L421.396 651.671L414.904 599.031L435.046 599.032L435.043 651.672Z"
fill="#FFB6B6" />
<path id="Vector_22"
d="M435.524 665.908L393.557 665.907V665.376C393.557 661.044 395.278 656.889 398.342 653.826C401.405 650.763 405.559 649.042 409.891 649.042H409.893L417.558 643.226L431.861 649.043L435.524 649.043L435.524 665.908Z"
fill="#2F2E41" />
<path id="Vector_23"
d="M407.167 506.691L400.865 547.385L416.769 630.431H437.848C445.421 602.527 445.811 565.852 438.601 534.824L407.167 506.691Z"
fill="#2F2E41" />
</g>
<g id="lefthand">
<path id="left hand"
d="M417.926 304.556L428.575 288.093C421.355 277.537 395.799 263.188 395.799 263.188L362.749 227.039C362.5 225.539 361.86 224.131 360.893 222.957C359.927 221.783 358.668 220.884 357.244 220.351C355.82 219.818 354.28 219.67 352.78 219.921C351.28 220.172 349.873 220.814 348.7 221.782C347.527 222.749 346.63 224.009 346.099 225.434C345.568 226.859 345.421 228.399 345.674 229.898C345.927 231.398 346.57 232.804 347.54 233.976C348.509 235.148 349.77 236.043 351.195 236.573L385.863 286.894L417.926 304.556Z"
fill="#FFB8B8" />
<path id="Vector_24"
d="M468.154 324.307C466.474 326.84 464.256 328.972 461.659 330.551C459.061 332.13 456.147 333.117 453.125 333.442C450.102 333.767 447.045 333.422 444.171 332.431C441.297 331.44 438.677 329.828 436.497 327.709L427.619 319.082C427.619 319.082 390.404 299.649 384.972 287.731L360.588 253.144L376.938 238.394L405.356 264.228C405.356 264.228 418.44 279.359 427.774 279.606C433.491 279.757 449.921 287.469 462.399 295.667C464.66 297.168 466.602 299.1 468.115 301.352C469.629 303.605 470.682 306.133 471.217 308.793C471.752 311.454 471.756 314.193 471.231 316.855C470.705 319.517 469.66 322.049 468.154 324.307Z"
fill="#3F3D56" />
</g>
<g id="head">
<path id="Vector_25"
d="M445.517 259.848C459.731 259.848 471.254 248.326 471.254 234.112C471.254 219.898 459.731 208.375 445.517 208.375C431.303 208.375 419.781 219.898 419.781 234.112C419.781 248.326 431.303 259.848 445.517 259.848Z"
fill="#FFB8B8" />
<path id="Vector_26"
d="M445.953 259.117C449.719 259.176 453.483 258.913 457.204 258.331C460.892 257.581 469.143 251.535 471.443 247.896C473.152 245.193 474.245 240.972 474.861 237.907C475.69 233.85 475.659 229.665 474.768 225.622C473.877 221.579 472.147 217.768 469.69 214.436C468.746 213.043 467.442 211.93 465.917 211.216C465.782 211.163 465.643 211.117 465.503 211.077C463.281 210.492 461.284 209.257 459.77 207.529C459.476 207.18 459.158 206.852 458.817 206.548C457.105 205.104 455.075 204.085 452.894 203.575C449.374 202.632 444.278 203.568 437.751 206.357C434.471 207.759 430.884 207.252 428.125 206.653C427.97 206.623 427.81 206.634 427.661 206.685C427.512 206.736 427.379 206.826 427.275 206.944C426.101 208.046 424.554 208.663 422.944 208.671C421.957 208.714 420.923 210.08 419.672 211.86C419.388 212.265 419.057 212.736 418.818 213.023L418.786 212.472L418.228 213.087C417.351 214.054 416.733 215.226 416.432 216.496C416.13 217.766 416.155 219.091 416.503 220.349C416.852 221.607 417.513 222.756 418.425 223.689C419.337 224.622 420.471 225.31 421.72 225.687C422.712 225.951 423.728 226.113 424.753 226.171C425.374 226.226 426.016 226.284 426.632 226.391C428.607 226.795 430.444 227.705 431.962 229.031C433.481 230.358 434.63 232.055 435.297 233.958C435.454 234.397 435.711 234.795 436.047 235.12C436.382 235.445 436.788 235.688 437.233 235.831C437.678 235.974 438.15 236.013 438.612 235.945C439.074 235.877 439.515 235.703 439.899 235.438C440.54 234.939 441.293 234.602 442.092 234.456C442.891 234.311 443.714 234.361 444.49 234.602C445.161 234.975 445.682 235.567 445.968 236.279C446.316 237.072 446.891 237.744 447.622 238.208C450.122 239.497 450.294 245.206 449.396 249.965C448.531 254.552 446.82 257.87 445.237 258.034C444.018 258.16 443.878 258.247 443.79 258.462L443.711 258.655L443.848 258.836C444.521 259.08 445.239 259.176 445.953 259.117Z"
fill="#2F2E41" />
</g>
</g>
<defs>
<clipPath id="clip0_2_3">
<rect width="751.131" height="669.03" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</body>
</html>
CSS Code for Example:
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#head {
transform-origin: bottom;
animation: head 2s infinite alternate;
}
@keyframes head {
100% {
transform: translate(-10px);
}
}
#lefthand {
transform-origin: top;
animation: leftHand 2s ease-in-out infinite alternate-reverse;
}
@keyframes leftHand {
100% {
transform: rotateX(20deg);
}
}
#topbox {
transform-origin: top;
animation: topbox 2s ease-in-out infinite alternate-reverse;
}
@keyframes topbox {
100% {
transform: rotateX(20deg);
}
}
#bottombox {
transform-origin: center;
animation: bottombox 2s ease-in-out infinite alternate-reverse;
}
@keyframes bottombox {
100% {
transform: rotate(20deg);
}
}
Output:
But the simple combination of SVG and CSS is appealing for a few reasons. Comprising code instead of thousands of raster image frames, they’re performant and have a faster load time than bulky GIFs and videos. Plus, there are a lot of simple animations that can be created without the need to add yet another JavaScript plugin to your website’s page load.
Common use cases for animating SVG with CSS
First, let’s look at some practical use cases for why you’d need animated SVGs in your web app or landing page.
Icons
Animated SVGs are great for icons that indicate micro-interactions and state changes. They also are helpful when guiding a user to the next action, such as in an onboarding tour. Common use cases include loading, uploading, menu toggling, and playing/pausing a video.
Illustrations
Illustrations are another common use case. They can be included in a product as a blank state, demonstrating what to do in order to generate data on a dashboard. Animated emojis and stickers are other popular use cases. There are also animated spot illustrations which brighten up landing pages, bringing dimensionality and fun while building a brand.
What’s the purpose?
Don’t add animation to your website just because it’s the latest trend. Think about the strategy behind it and what your goal is for the end-user. What value is the animation providing? Is there a more effective solution, such as an animated GIF or a video
Conclusion
I hope you’re inspired to create your own animations for the web! It’s fun to bring static SVGs to life with just a few lines of CSS.