futbol-animated-svg
Version:
An animated SVG depicting a futbol/soccer ball, in color, with animations during hover and outside of hover state.
42 lines (32 loc) • 7.56 kB
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">
<link rel="stylesheet" href="styles.css">
<title>Animated Soccer Ball SVG</title>
</head>
<body>
<div id="root">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100"
width="100"
enableBackground="new 0 0 511.999 511.999"
version="1.1"
viewBox="0 0 511.999 511.999"
xmlSpace="preserve"
id="futbol"
>
<circle cx="255.998" cy="255.988" r="247.815" fill="#F8E4C5"></circle>
<g fill="#272F37">
<path d="M186.301 197.483l-14.668 92.609a13.466 13.466 0 007.185 14.102l83.544 42.567a13.46 13.46 0 0015.631-2.476l66.301-66.301a13.463 13.463 0 002.476-15.632l-42.567-83.544a13.463 13.463 0 00-14.102-7.185l-92.609 14.668a13.463 13.463 0 00-11.191 11.192zM155.245 29.522c-27.016 12.01-52.33 29.078-74.485 51.235-22.155 22.154-39.222 47.467-51.234 74.481l98.869-15.659a13.462 13.462 0 0011.191-11.191l15.659-98.866zM9.537 281.853c5.69 54.546 29.42 107.568 71.223 149.369a252.121 252.121 0 009.442 8.963l15.651-98.817a13.466 13.466 0 00-7.185-14.102L9.537 281.853zM281.864 9.535l45.411 89.125a13.463 13.463 0 0014.102 7.185l98.808-15.65a251.156 251.156 0 00-8.959-9.439c-41.801-41.799-94.818-65.529-149.362-71.221zM204.416 498.394c59.116 12.52 121.914 3.256 175.57-27.788l-89.184-45.441a13.462 13.462 0 00-15.632 2.476l-70.754 70.753zM470.613 379.975c31.041-53.655 40.304-116.449 27.785-175.562l-70.749 70.749a13.462 13.462 0 00-2.476 15.631l45.44 89.182z"></path>
</g>
<path fill="#FFF" d="M371.277 36.585c-11.939 15.43-19.062 34.775-19.062 55.794 0 50.411 40.866 91.277 91.277 91.277a90.82 90.82 0 0045.525-12.176c-21.134-58.262-63.497-106.334-117.74-134.895z" opacity="0.15"></path>
<path d="M511.325 237.582c-4.023-56.995-26.691-110.312-65.057-152.841-.005-.005-.01-.013-.014-.019l-.043-.046a261.78 261.78 0 00-4.306-4.655c-.084-.088-.165-.18-.248-.268a268.162 268.162 0 00-4.653-4.777 259.767 259.767 0 00-4.185-4.085c-.78-.745-1.571-1.475-2.358-2.211-.567-.527-1.13-1.059-1.701-1.581a252.895 252.895 0 00-3.544-3.18l-.29-.257C378.191 22.501 318.825 0 255.992 0 199.605 0 146.01 18.124 101.831 51.588l-.619.472a259.642 259.642 0 00-3.841 2.981c-.424.336-.845.677-1.266 1.014a270.219 270.219 0 00-3.241 2.637c-.597.496-1.189 1-1.782 1.5-.915.774-1.831 1.545-2.736 2.332-.749.651-1.488 1.314-2.231 1.973-.757.673-1.519 1.342-2.27 2.026-.926.843-1.84 1.703-2.756 2.562-.568.532-1.141 1.055-1.704 1.592a258.392 258.392 0 00-8.702 8.702c-.538.564-1.061 1.139-1.594 1.706-.858.915-1.717 1.827-2.56 2.754-.682.75-1.349 1.509-2.022 2.265-.661.744-1.326 1.485-1.979 2.236-.787.904-1.557 1.819-2.33 2.733-.501.594-1.007 1.186-1.503 1.784a253.478 253.478 0 00-2.636 3.24c-.339.423-.68.843-1.016 1.267a259.19 259.19 0 00-2.978 3.838c-.158.208-.318.415-.475.624C18.126 146.006.002 199.6.002 255.987c0 62.832 22.5 122.198 63.661 168.93l.262.296a252.442 252.442 0 003.178 3.54c.521.57 1.052 1.132 1.578 1.697.736.789 1.467 1.581 2.213 2.361a264.197 264.197 0 004.085 4.187 264.507 264.507 0 004.775 4.651c.064.061.131.12.195.181a267.322 267.322 0 004.737 4.383l.042.039.026.022c42.127 38 94.838 60.596 151.225 64.928l.166.014c1.433.109 2.871.195 4.309.281 5.244.321 10.487.501 15.721.501a256.058 256.058 0 0031.697-1.976c1.948-.243 3.895-.501 5.836-.789.496-.073.989-.156 1.485-.232a253.94 253.94 0 006.611-1.101l.206-.038c50.859-9.182 97.675-33.543 134.993-70.862 37.311-37.311 61.671-84.116 70.855-134.964l.032-.169c.267-1.485.518-2.974.76-4.466.114-.698.228-1.397.337-2.098.154-.999.299-2 .44-3.002.177-1.239.344-2.479.503-3.72a251.198 251.198 0 00.782-6.892l.047-.467a256.3 256.3 0 00.566-43.64zM437.033 98.969c25.889 29.76 43.742 64.912 52.463 102.789l-67.627 67.626a21.786 21.786 0 00-3.215 4.092l-62.811-9.948a21.71 21.71 0 00-1.793-4.884L311.483 175.1a21.754 21.754 0 00-2.899-4.322l28.874-56.672c.588.049 1.181.081 1.777.081 1.131 0 2.273-.088 3.418-.27l94.38-14.948zm-98.518 173.237l-66.301 66.301a5.275 5.275 0 01-6.143.973l-83.545-42.568a5.274 5.274 0 01-2.823-5.541l14.668-92.609a5.278 5.278 0 014.398-4.398l92.609-14.668a5.274 5.274 0 015.541 2.822l42.567 83.544a5.278 5.278 0 01-.971 6.144zm79.927-192.379c.725.67 1.453 1.337 2.171 2.017.476.45.948.907 1.421 1.361.47.452.935.911 1.401 1.368l-83.337 13.199a5.272 5.272 0 01-5.541-2.822l-38.314-75.195c45.515 7.762 88.161 28.705 122.199 60.072zm-270.784 49.839l14.969-94.509c29.152-12.33 60.758-18.811 93.365-18.811 6.925 0 13.801.309 20.621.887l43.38 85.138a21.73 21.73 0 002.904 4.31l-28.877 56.677a21.72 21.72 0 00-5.2.196l-92.609 14.667a21.82 21.82 0 00-5.006 1.421l-44.97-44.97a21.687 21.687 0 001.423-5.006zm-82.56-18.59c.24-.314.477-.629.718-.943a243.124 243.124 0 013.45-4.371c.578-.716 1.154-1.433 1.74-2.143a243.873 243.873 0 013.16-3.752c.327-.379.661-.753.991-1.13.868-.996 1.743-1.989 2.629-2.972.405-.45.815-.897 1.224-1.344.873-.953 1.753-1.901 2.644-2.844.363-.385.724-.77 1.09-1.152a243.977 243.977 0 013.796-3.89 253.016 253.016 0 013.892-3.8c.38-.363.763-.722 1.145-1.083.946-.892 1.897-1.777 2.854-2.652.444-.405.886-.811 1.332-1.213.995-.897 1.998-1.782 3.006-2.661.366-.318.727-.643 1.094-.959a245.377 245.377 0 013.77-3.176c.695-.574 1.397-1.139 2.099-1.704a225.808 225.808 0 014.383-3.46c.336-.258.673-.512 1.009-.769a237.57 237.57 0 0133.605-21.38l-13.215 83.428a5.28 5.28 0 01-4.398 4.398l-83.43 13.213a237.51 237.51 0 0121.412-33.641zM16.349 255.989c0-32.608 6.483-64.216 18.813-93.369l94.512-14.97c1.75-.277 3.426-.76 5.005-1.421l44.97 44.97a21.77 21.77 0 00-1.421 5.006l-14.668 92.609a21.762 21.762 0 00-.195 5.199l-56.666 28.871a21.797 21.797 0 00-4.322-2.899l-85.143-43.382a244.82 244.82 0 01-.885-20.614zM97.78 340.09l-13.2 83.346c-.457-.467-.916-.933-1.37-1.404-.454-.473-.911-.944-1.361-1.42-.684-.722-1.356-1.454-2.03-2.184-31.364-34.041-52.304-76.683-60.064-122.197l75.201 38.316a5.279 5.279 0 012.824 5.543zm1.196 96.943l14.949-94.386c.277-1.75.337-3.494.195-5.2l56.666-28.871a21.797 21.797 0 004.322 2.899l83.544 42.567a21.832 21.832 0 004.885 1.793l9.947 62.813a21.737 21.737 0 00-4.092 3.215l-67.631 67.632c-37.876-8.723-73.026-26.574-102.785-52.462zm196.423 55.38c-.985.162-1.971.325-2.96.474a243.074 243.074 0 01-36.447 2.746c-5.73 0-11.426-.208-17.086-.605a254.46 254.46 0 01-3.126-.247 295.4 295.4 0 01-1.352-.115 241.994 241.994 0 01-13.169-1.556l59.689-59.691a5.272 5.272 0 016.143-.972l75.263 38.349a238.63 238.63 0 01-66.955 21.617zm130.047-66.971c-13.928 13.928-29.273 25.924-45.705 35.867l-85.228-43.427a21.832 21.832 0 00-4.885-1.793l-9.951-62.838a21.692 21.692 0 004.096-3.188l66.301-66.301a21.786 21.786 0 003.215-4.092l62.811 9.948a21.71 21.71 0 001.793 4.884l43.426 85.228c-9.947 16.435-21.943 31.782-35.873 45.712zm67.698-134.719a231.208 231.208 0 01-.735 4.706 238.64 238.64 0 01-21.608 66.916l-38.347-75.262a5.277 5.277 0 01.973-6.143l59.685-59.684a241.334 241.334 0 011.918 17.629 242.939 242.939 0 01-1.886 51.838z"></path>
<path d="M281.451 478.346c-136.865 0-247.816-110.951-247.816-247.816 0-61.953 22.735-118.596 60.316-162.042C41.416 113.929 8.176 181.077 8.176 255.989c0 136.865 110.951 247.816 247.816 247.816 74.912 0 142.06-33.241 187.5-85.774-43.446 37.58-100.088 60.315-162.041 60.315z" opacity="0.15"></path>
</svg>
</div>
</body>
</html>