SVG atau Scalable Vector Graphics adalah format gambar vektor berbasis Extensible Markup Language untuk grafik 2 dimensi dengan support untuk interactivity dan animation.
Dengan menggunakan SVG Animation tampilan website kita akan jauh lebih menarik. Karena didalam SVG terdapat id dari tiap object yang dapat ditambahkan animation melalui css.
Cara membuat SVG animation di website sangatlah mudah. Kalian bisa ikuti langkah-langkah berikut ini.
Download SVG
Untuk tutorial kali ini, kita akan menggunakan SVG di unDraw. Tapi, jika kalian ingin menggunakan SVG ditempat lain atau membuat sendiri tidak masalah. Disini saya mengambil gambar outer space di unDraw.
BACA JUGA: INTRO.JS: MEMBUAT POP UP STEP BY STEP DI WEBSITE
Edit SVG dengan Figma
Setelah itu, buka SVG tersebut ke dalam figma. Kalian bisa langsung menggunakan figma melalui browser. Pastikan kalian sudah membuat akun terlebih dulu.
Gabungkan tiap object kedalam satu grup yang nantinya akan ditambahkan animation. Dengan cara ctrl+g untuk membuat grup di figma.
Jangan lupa ganti nama grup sesuai isi dari grup tersebut. Nama grup tersebut nantinya digunakan sebagai id untuk ditambahkan effect css.
Jika sudah, pilih export SVG. Kemudian centang bagian “Include ‘id’ Attribute”. Terakhir tinggal kita klik export dibawahnya.
Memasukan SVG di Website
Pertama, kita buat folder terlebih dahulu dengan nama svg animation. Di dalam folder tersebut buat file baru dengan nama index.html
Selanjutnya, buka index.html tersebut dengan text editor. Di dalam index.html kita buat struktur html sederhana seperti berikut
<!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>SVG Animation</title> </head> <body> </body> </html>
Kita taruh file svg ke dalam satu folder yang sama dengan index.html. Kemudian buka file svg dengan text editor. Taruh semua code di svg ke dalam tag body.
<body>
<div class="svg-animation">
<svg width="506" height="463" viewBox="0 0 506 463" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_Outer_space_re_u9vd">
<path id="Path 3" d="M89.9816 136.55C99.4569 110.616 114.244 86.9471 133.395 67.0581C149.643 50.1911 174.931 50.8921 174.931 50.8921L175.075 50.7131C181.16 43.2072 189.327 37.6656 198.55 34.7836C207.773 31.9015 217.642 31.8074 226.919 34.5131C229.33 35.2051 231.185 35.5131 232.067 35.2031C248.148 29.5751 247.392 16.8721 261.267 6.63907C285.559 -11.2789 366.135 9.24607 377.497 42.2171C386.705 68.9391 427.811 81.8911 443.168 102.332C445.568 105.528 447.924 108.761 450.236 112.032C451.319 113.551 452.39 115.082 453.45 116.624C464.33 132.382 474.09 148.884 482.659 166.008C488.278 177.196 493.162 188.738 497.28 200.561C513.296 247.38 507.819 282.261 463.659 273.645C458.431 272.622 453.329 271.707 448.353 270.9C441.147 269.724 434.192 268.757 427.489 268C418.462 266.973 409.874 266.301 401.725 265.982C398.985 265.872 396.295 265.798 393.656 265.76C354.63 265.219 325.681 272.56 303.628 283.966C299.889 285.894 296.346 287.934 293 290.085C287.887 293.353 283.006 296.969 278.391 300.908C272.004 306.389 266.114 312.424 260.791 318.943L260.499 319.301C234.705 350.853 226.216 385.782 208.273 391.932C131.573 418.226 83.0626 322.91 78.0876 229.669C77.8363 224.97 77.6976 220.285 77.6716 215.614C77.6563 213.526 77.6666 211.443 77.7026 209.366C77.7816 203.947 78.0206 198.566 78.4206 193.245C78.5699 191.212 78.7433 189.189 78.9406 187.177C79.1576 185.007 79.3946 182.851 79.6676 180.707C81.4257 165.646 84.8858 150.832 89.9816 136.55V136.55Z" fill="url(#paint0_linear)"/>
<g id="smoke">
<path id="Path 1" d="M323.86 369.604L328.718 380.496C324.77 379.867 321.098 383.24 321.018 387.57C320.938 391.9 324.457 396.406 328.406 397.022C327.651 400.384 324.395 401.867 321.568 403.222C318.741 404.577 315.695 406.835 315.905 410.422C316.074 413.299 318.453 415.838 320.979 416.859C323.505 417.88 326.156 417.723 328.714 417.552C324.837 421.607 324.459 429.23 327.864 434.699C331.269 440.168 338.064 442.86 343.164 440.755C339.564 445.23 340.348 453.425 344.813 458.043C349.313 462.698 355.836 463.149 361.538 462.659C376.058 461.431 389.893 455.948 401.313 446.896C405.672 443.432 409.744 439.359 412.23 434.045C413.568 431.239 414.336 428.196 414.491 425.091C414.645 421.986 414.182 418.882 413.13 415.957C413.755 423.532 421.336 429.514 428.157 429.849C434.978 430.184 440.932 426.342 445.993 421.961C452.723 416.135 458.954 407.969 458.03 397.893C457.573 392.905 455.394 388.107 453.257 383.46L449.114 374.451C447.442 370.814 445.731 367.116 443.214 364.063C440.697 361.01 437.203 358.648 433.706 358.671C434.506 355.019 435.306 351.23 434.639 347.35C433.972 343.47 431.404 339.45 427.915 338.543C423.475 337.386 419.715 341.484 415.247 341.098C410.947 340.726 407.399 336.414 403.227 334.705C401.508 333.963 399.611 333.737 397.766 334.057C395.922 334.377 394.211 335.228 392.843 336.505C390.198 339.087 389.095 343.45 390.043 347.578C390.874 351.194 393.087 354.383 394.43 357.871C395.773 361.359 395.982 365.843 393.402 367.747C390.289 370.047 385.552 366.918 383.12 363.134C380.688 359.35 379.292 354.769 376.22 351.587C372.591 347.831 366.909 346.951 363.172 349.566C359.435 352.181 358.006 358.035 359.89 363.012C361.43 367.081 364.959 371.198 363.735 375.03C362.442 379.08 356.782 378.567 353.368 375.705C349.954 372.843 347.687 368.532 344.315 365.605C342.736 364.17 340.85 363.113 338.801 362.517C336.752 361.92 334.594 361.799 332.492 362.162C330.5 362.624 328.657 363.581 327.132 364.943C325.608 366.305 324.451 368.03 323.769 369.957" fill="#E6E6E6"/>
</g>
<g id="rocket">
<path id="Path 2" d="M402.504 338.996L392.425 343.679C390.91 344.427 389.192 344.659 387.533 344.339C386.89 344.239 386.292 343.953 385.81 343.517C385.328 343.08 384.984 342.513 384.821 341.884L382.476 330.931C382.033 328.865 383.745 326.42 386.545 325.119L392.111 322.533C394.911 321.233 397.883 321.501 399.177 323.172L406.036 332.028C406.411 332.559 406.623 333.187 406.646 333.837C406.668 334.486 406.501 335.129 406.164 335.684C405.338 337.158 404.052 338.321 402.504 338.996V338.996Z" fill="#3F3D56"/>
<path id="Path 4" d="M327.716 187.85C321.591 190.702 321.49 203.476 323.41 207.615L326.891 215.107L349.079 204.798L345.598 197.306C343.673 193.172 333.846 185.008 327.716 187.85Z" fill="#3F3D56"/>
<path id="Path 5" d="M268.092 295.41C267.539 295.411 267.002 295.222 266.571 294.876C266.14 294.53 265.839 294.048 265.72 293.508C265.601 292.968 265.669 292.404 265.915 291.908C266.16 291.412 266.567 291.016 267.069 290.783L381.652 237.547C381.941 237.413 382.253 237.337 382.571 237.323C382.89 237.31 383.207 237.359 383.507 237.469C383.806 237.578 384.08 237.745 384.315 237.961C384.55 238.176 384.739 238.436 384.874 238.725C385.008 239.014 385.084 239.326 385.097 239.645C385.111 239.963 385.061 240.281 384.952 240.58C384.843 240.879 384.675 241.154 384.46 241.388C384.244 241.623 383.985 241.813 383.696 241.947L269.113 295.183C268.793 295.333 268.444 295.41 268.092 295.41V295.41Z" fill="#3F3D56"/>
<path id="Rectangle 1" d="M357.724 209.575L324.971 224.793L376.348 335.376L409.102 320.158L357.724 209.575Z" fill="#E6E6E6"/>
<path id="Path 6" d="M234.769 70.3711C228.644 73.2231 228.543 85.9971 230.463 90.1361L233.944 97.6281L256.131 87.3191L252.65 79.8271C250.726 75.6901 240.899 67.5291 234.769 70.3711Z" fill="#3F3D56"/>
<path id="Path 7" d="M372.016 351.709L361.937 356.392C360.422 357.14 358.704 357.372 357.045 357.052C356.402 356.952 355.804 356.666 355.322 356.23C354.84 355.793 354.496 355.226 354.333 354.597L351.988 343.644C351.545 341.578 353.257 339.133 356.057 337.832L361.623 335.246C364.423 333.946 367.395 334.214 368.689 335.885L375.548 344.741C375.923 345.272 376.135 345.9 376.158 346.55C376.18 347.199 376.013 347.841 375.676 348.397C374.85 349.871 373.564 351.034 372.016 351.709V351.709Z" fill="#3F3D56"/>
<path id="Path 8" d="M341.029 367.083L330.95 371.765C329.435 372.513 327.717 372.745 326.058 372.425C325.416 372.325 324.817 372.039 324.335 371.603C323.853 371.166 323.509 370.599 323.346 369.97L321.001 359.017C320.558 356.951 322.269 354.506 325.07 353.205L330.636 350.619C333.436 349.319 336.408 349.587 337.702 351.258L344.561 360.114C344.936 360.645 345.148 361.273 345.171 361.923C345.193 362.572 345.026 363.214 344.689 363.77C343.864 365.245 342.578 366.409 341.03 367.084L341.029 367.083Z" fill="#3F3D56"/>
<path id="Rectangle 2" d="M273.516 110.906L240.763 126.123L344.617 349.654L377.371 334.437L273.516 110.906Z" fill="#E6E6E6"/>
<path id="Path 9" d="M307.498 226.136L303.823 218.049L305.939 217.073L309.603 225.134L362.658 342.771L360.545 343.753" fill="#3F3D56"/>
<path id="Path 10" d="M348.95 219.414L345.275 211.327L347.391 210.351L351.055 218.412L404.11 336.049L401.997 337.031" fill="#3F3D56"/>
<path id="Path 11" d="M288.973 128.795L244.594 149.414C241.768 145.014 233.251 122.493 235.164 115.814L233.728 109.441L264.371 95.2041L268.471 100.249C274.561 102.113 286.414 123.27 288.973 128.795Z" fill="#E6E6E6"/>
<path id="Path 12" d="M265.652 95.4721L234.031 110.164C232.864 110.706 231.621 110.507 231.255 109.719C231.201 109.606 231.167 109.484 231.155 109.359L229.518 91.9001C229.547 91.4447 229.709 91.0079 229.984 90.6437C230.259 90.2796 230.635 90.004 231.065 89.8511L252.036 80.1081C252.43 79.8784 252.882 79.7691 253.338 79.7938C253.793 79.8185 254.232 79.9761 254.599 80.2471L266.887 92.7571C267.515 93.3971 267.174 94.4921 266.125 95.2031C265.974 95.3053 265.815 95.3953 265.65 95.4721H265.652Z" fill="#E6E6E6"/>
<path id="Path 13" d="M290.453 232.257C290.11 232.258 289.769 232.218 289.437 232.137C288.967 232.04 288.527 231.837 288.148 231.543C287.77 231.249 287.464 230.872 287.254 230.442L267.922 188.832C267.122 187.109 268.196 184.907 270.316 183.921L298.624 170.768C300.745 169.782 303.124 170.383 303.924 172.105L323.257 213.715C323.45 214.153 323.54 214.63 323.521 215.109C323.501 215.587 323.373 216.055 323.145 216.476C322.648 217.43 321.844 218.187 320.863 218.626L292.555 231.778C291.897 232.089 291.18 232.252 290.453 232.257V232.257Z" fill="#3F3D56"/>
<path id="Rectangle 3" d="M294.327 238.554L261.574 253.772L312.951 364.355L345.705 349.137L294.327 238.554Z" fill="#E6E6E6"/>
<path id="Path 14" d="M253.974 97.2961L244.374 101.759C242.52 102.62 240.02 101.185 238.801 98.5591C237.582 95.9331 238.101 93.0981 239.951 92.2371L249.551 87.7741C251.404 86.9131 253.905 88.3481 255.124 90.9741C256.343 93.6001 255.827 96.4351 253.974 97.2961Z" fill="#3F3D56"/>
<path id="Path 15" d="M264.959 216.533C258.834 219.385 258.733 232.159 260.653 236.298L264.134 243.79L286.322 233.481L282.841 225.989C280.916 221.851 271.088 213.691 264.959 216.533Z" fill="#3F3D56"/>
<path id="Path 24" d="M378.346 255.122C377.2 255.653 375.891 255.707 374.706 255.274C373.52 254.84 372.555 253.954 372.022 252.81L366.357 240.618C366.093 240.051 365.944 239.438 365.918 238.813C365.891 238.188 365.988 237.564 366.203 236.977C366.418 236.39 366.746 235.851 367.169 235.39C367.592 234.93 368.102 234.557 368.669 234.294C369.236 234.031 369.849 233.881 370.474 233.855C371.098 233.829 371.722 233.926 372.309 234.14C372.897 234.355 373.436 234.683 373.896 235.106C374.357 235.529 374.729 236.039 374.993 236.606L380.658 248.798C381.188 249.943 381.243 251.253 380.809 252.438C380.376 253.624 379.49 254.589 378.346 255.122Z" fill="#3F3D56"/>
<path id="Path 25" d="M281.999 299.935C280.853 300.466 279.544 300.52 278.359 300.087C277.173 299.653 276.208 298.767 275.675 297.623L270.01 285.431C269.477 284.286 269.422 282.976 269.856 281.79C270.289 280.604 271.176 279.639 272.321 279.107C273.466 278.574 274.776 278.519 275.962 278.952C277.148 279.386 278.113 280.273 278.646 281.418L284.311 293.61C284.841 294.756 284.896 296.065 284.463 297.251C284.029 298.436 283.143 299.402 281.999 299.935V299.935Z" fill="#3F3D56"/>
<path id="Path 26" d="M369.62 228.483L331.638 246.13C329.22 242.368 321.93 223.089 323.567 217.369L324.367 210.969L347.046 199.843L352.071 204.043C359.154 201.655 369.562 219.2 369.62 228.483Z" fill="#E6E6E6"/>
<path id="Path 27" d="M351.986 227.26L342.386 231.723C340.532 232.584 337.712 230.461 336.1 226.991C334.488 223.521 334.684 219.996 336.538 219.135L346.138 214.672C347.991 213.811 350.812 215.934 352.424 219.404C354.036 222.874 353.84 226.4 351.986 227.26Z" fill="#3F3D56"/>
<path id="Path 28" d="M270.528 250.223L266.853 242.136L268.969 241.16L272.633 249.221L325.688 366.858L323.575 367.84" fill="#3F3D56"/>
<path id="Path 29" d="M306.866 257.165L268.881 274.812C263.281 271.919 254.714 252.988 260.81 246.051L261.61 239.651L284.289 228.525L289.314 232.725C294.528 234.329 304.673 252.438 306.866 257.165Z" fill="#E6E6E6"/>
<path id="Path 30" d="M288.45 254.259L278.85 258.722C276.997 259.583 274.35 257.838 272.95 254.831C271.55 251.824 271.925 248.678 273.778 247.817L283.383 243.354C285.236 242.493 287.883 244.238 289.283 247.245C290.683 250.252 290.301 253.401 288.45 254.259Z" fill="#3F3D56"/>
<path id="Path 33" d="M384.954 268.191L410.82 274.891L426.684 306.052L399.864 307.104L384.954 268.191Z" fill="#E6E6E6"/>
<path id="Path 34" d="M325.252 223.27L339.488 237.514L375.645 315.687L368.988 321.438L325.252 223.27Z" fill="#CCCCCC"/>
<path id="Path 35" d="M294.298 236.181L295.415 256.288L329.542 335.368L338.267 334.244L294.298 236.181Z" fill="#CCCCCC"/>
<path id="Path 36" d="M293.367 317.412L279.436 340.212L289.705 373.636L309.705 355.736L293.367 317.412Z" fill="#E6E6E6"/>
</g>
<g id="moon">
<path id="Ellipse 1" d="M95.9476 172.446C127.812 172.446 153.644 146.615 153.644 114.75C153.644 82.8854 127.812 57.0541 95.9476 57.0541C64.083 57.0541 38.2516 82.8854 38.2516 114.75C38.2516 146.615 64.083 172.446 95.9476 172.446Z" fill="url(#paint1_linear)"/>
</g>
<g id="space">
<path id="Path 16" d="M163.207 191.035C161.044 192.476 158.829 189.046 161.034 187.668C163.197 186.226 165.411 189.658 163.207 191.035Z" fill="#E6E6E6"/>
<path id="Path 17" d="M388.391 141.741C386.228 143.182 384.014 139.752 386.218 138.374C388.381 136.932 390.595 140.364 388.391 141.741Z" fill="#E6E6E6"/>
<path id="Path 18" d="M234.908 180.952C232.745 182.393 230.53 178.963 232.735 177.585C234.898 176.143 237.112 179.575 234.908 180.952Z" fill="#E6E6E6"/>
<path id="Path 19" d="M163.207 315.39C161.044 316.831 158.829 313.401 161.034 312.023C163.197 310.581 165.411 314.013 163.207 315.39Z" fill="#E6E6E6"/>
<path id="Path 20" d="M273.559 34.7511C271.396 36.1921 269.182 32.7621 271.386 31.3841C273.549 29.9421 275.763 33.3741 273.559 34.7511Z" fill="#E6E6E6"/>
<path id="Path 21" d="M167.129 100.849C164.966 102.29 162.752 98.8601 164.956 97.4821C167.119 96.0401 169.333 99.4721 167.129 100.849Z" fill="#E6E6E6"/>
<path id="Path 22" d="M320.208 81.9001L318.832 81.6001L319.132 80.2231L318.214 80.0231L317.914 81.4001L316.538 81.1001L316.338 82.0181L317.714 82.3181L317.414 83.6941L318.332 83.8941L318.632 82.5171L320.008 82.8171L320.208 81.9001Z" fill="#E6E6E6"/>
<path id="Path 23" d="M96.0876 196.606L94.7116 196.306L95.0116 194.93L94.0936 194.73L93.7936 196.106L92.4166 195.806L92.2166 196.724L93.5936 197.024L93.2936 198.401L94.2116 198.601L94.5116 197.225L95.8876 197.525L96.0876 196.606Z" fill="#E6E6E6"/>
<path id="Path 31" opacity="0.3" d="M332.512 174.844L367.574 72.4441L329.074 173.62C328.883 173.86 328.752 174.142 328.693 174.443C328.633 174.744 328.646 175.054 328.73 175.349C328.815 175.644 328.968 175.914 329.178 176.138C329.387 176.361 329.647 176.532 329.936 176.635C330.225 176.738 330.534 176.77 330.838 176.73C331.142 176.689 331.432 176.577 331.684 176.402C331.935 176.227 332.142 175.995 332.286 175.724C332.43 175.454 332.507 175.153 332.512 174.846V174.844Z" fill="#F0F0F0"/>
<path id="Path 38" d="M444.928 157.152L443.552 156.852L443.852 155.475L442.934 155.275L442.634 156.652L441.258 156.352L441.058 157.27L442.434 157.57L442.134 158.946L443.052 159.146L443.352 157.769L444.728 158.069L444.928 157.152Z" fill="#E6E6E6"/>
</g>
<path id="Path 37" d="M416.42 331.421C409.187 331.421 401.26 331.148 392.638 330.601C348.038 327.769 290.276 317.923 229.981 302.877C169.686 287.831 114.07 269.384 73.3716 250.932C53.5456 241.943 38.3306 233.432 28.1466 225.642C17.3656 217.393 12.6466 210.202 14.1296 204.27C17.0136 192.715 42.5466 190.186 63.4596 190.101L63.4666 191.781C34.7486 191.899 17.8056 196.481 15.7606 204.681C13.1546 215.122 34.4066 231.423 74.0656 249.405C114.675 267.816 170.192 286.229 230.391 301.251C290.59 316.273 348.249 326.101 392.747 328.927C436.203 331.687 462.623 327.281 465.229 316.84C467.392 308.171 453.129 295.4 425.072 280.879L425.844 279.387C446.232 289.938 469.898 305.071 466.86 317.248C465.379 323.179 457.838 327.311 444.445 329.528C435.169 330.907 425.797 331.54 416.42 331.421V331.421Z" fill="#3F3D56"/>
<path id="Path 32" d="M421.887 113.806C415.02 116.087 407.411 118.328 399.06 120.528C355.847 131.905 297.923 140.78 235.96 145.518C173.997 150.256 115.399 150.29 70.9596 145.618C49.3106 143.341 32.1886 140.065 20.0676 135.882C7.23459 131.454 0.491588 126.117 0.0255879 120.022C-0.882412 108.147 22.5506 97.6951 42.3686 91.0221L42.9056 92.6141C15.6906 101.783 1.0576 111.472 1.7056 119.897C2.5256 130.627 27.8336 139.397 71.1406 143.95C115.484 148.614 173.976 148.579 235.841 143.85C297.706 139.121 355.522 130.262 398.641 118.91C440.75 107.824 464.432 95.3101 463.612 84.5801C462.931 75.6711 445.369 68.0491 414.162 63.1191L414.424 61.4591C437.099 65.0421 464.33 71.9391 465.287 84.4521C465.753 90.5521 459.9 96.8471 447.887 103.175C439.518 107.408 430.823 110.963 421.887 113.806V113.806Z" fill="#3F3D56"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="291.58" y1="0" x2="291.58" y2="396.367" gradientUnits="userSpaceOnUse">
<stop stop-color="#111028"/>
<stop offset="0.404" stop-color="#3F2CB7"/>
<stop offset="1" stop-color="#664EFF"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="95.9476" y1="57.0541" x2="95.9476" y2="172.446" gradientUnits="userSpaceOnUse">
<stop stop-color="#2F2F2F"/>
<stop offset="1" stop-color="#D6D6D6"/>
</linearGradient>
</defs>
</svg>
</div>
</body>Bisa dilihat ada beberapa id yang sesuai dengan nama grup kita buat di figma tadi.
Kita jalankan terlebih dahulu index.html dengan live server di vscode. Jika masih belum punya, kalian bisa menambahkan terlebih dahulu extension live server.
BACA JUGA: MEMBUAT OBJECT 3D DI WEBSITE MENGGUNAKAN THREE.JS
Maka bisa dilihat hasilnya akan sama seperti kita membuka di figma. Tetapi, kita akan menambahkan effect animation ke dalam svg tersebut.
Membuat Effect Animation di Svg
Selanjutnya, kita buat file style.css untuk membuat animation. Panggil style.css dengan menggunakan link di dalam tag head.
<link rel="stylesheet" href="style.css" />
Di dalam file style.css kita pilih id #moon untuk ditambahkan effect animation. Kita akan menambahkan effect di #moon menjadi dapat berputar.
#moon {
animation: moon 10s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
@keyframes moon {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}Selanjutnya, kita akan menambahkan effect animation di smoke dan rocket seperti ini.
#smoke {
animation: smoke 1s ease-in-out infinite;
}
#rocket {
animation: rocket 1s ease-in-out infinite alternate;
transform-origin: bottom;
}
@keyframes smoke {
from {
transform: translateY(0%);
}
to {
transform: translateY(40%);
}
}
@keyframes rocket {
from {
transform: translateY(0%);
}
to {
transform: translateY(5%);
}
}Terakhir, kita tambahkan beberapa style agar svg berada ditengah dan kita beri margin agar tidak terlalu berada diatas.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
.svg-animation {
margin-top: 60px;
}Penutup
Selamat sekarang kita sudah selesai membuat svg animation di website. Kalian bisa menambahkan svg lagi dan beri effect animation yang lebih keren lagi.
Cukup sekian tutorial membuat svg animation di website, jika masih ada kesulitan kalian bisa komentar dibawah sini.