На моем веб-сайте Gatsby я собираюсь использовать несколько анимированных фонов, поэтому я получил изображения SVG, преобразовал их в компонент React и анимировал определенные группы SVG с помощью Framer Motion. Результаты блестящие: у меня есть анимация, которая отлично отображается при добавлении на страницу в качестве отдельных компонентов, но как их можно использовать в качестве фона для элемента div или раздела?
Вот один из компонентов:
import React from 'react'
import { motion } from 'framer-motion'
const Animation1 = props => (
<svg
viewBox="0 0 2000 1000"
fillRule="evenodd"
clipRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
{...props}
>
<g id="pic">
<motion.g
animate={{ scaleY: [1, -1, 1] }}
transition={{ duration: 5, loop: Infinity, repeatDelay: 4 }}
>
<path
d="M581.31 974.891l-41.223-115.423s45.345 22.673 47.406 51.528c0 0-10.306-144.278-30.917-175.195 0 0 32.978 4.122 70.078 164.89 0 0 6.184-185.501-49.467-239.09 0 0 76.262 61.833 82.445 195.806v117.484H581.31zM1354.39 974.891l-9.91-27.752s10.9 5.451 11.39 12.389c0 0-2.47-34.69-7.43-42.124 0 0 7.93 16.85 39.65 0 0 1.487-44.61-11.894-57.49 0 0 18.337 14.87 19.823 47.08 0v28.248l-23.29 29.239z"
fill="#f2f2f2"
/>
</motion.g>
<path
d="M1244.68 975.543c-.29-.469-7.05-11.76-9.39-35.207-2.15-21.511-.77-57.77 18.03-108.348 35.63-95.817-8.21-173.127-8.65-173.897l2.16-1.254c.11 11.424 19.91 18.106 51.29 0a223.688 223.688 0 01-9.27 124.729c-35.56 95.653-9.12 140.935-8.85 141.381l-35.32 52.596z"
fill="#3f3d56"
/>
<path
d="M989.557 554.987c0-100.078 81.133-181.208 181.213-181.208 100.07 0 181.2 81.13 181.2 181.208 0 100.079-81.13 181.209-181.2 181.209-100.08 0-181.213-81.13-181.213-181.209zM146 37.606h427.402v237.446H146V37.606zM725.867 37.606h427.403v237.446H725.867V37.606zM1305.73 37.606h427.41v237.446h-427.41V37.606z"
fill="#e0dcdc"
/>
<motion.g
animate={{ scaleY: [1, -1, 1] }}
transition={{ duration: 5, loop: Infinity, repeatDelay: 4 }}
>
<path
d="M1214.51 636.219c0-8.973 7.27-16.247 16.24-16.247 8.97 0 16.25 7.274 16.25 16.247 0 8.972-7.28 16.246-16.25 16.246-8.97 0-16.24-7.274-16.24-16.246zM1230.75 736.196c0-8.973 7.28-16.246 16.25-16.246 8.97 0 16.24 7.273 16.24 16.246 0 8.972-7.27 16.246-16.24 16.246-8.97 0-16.25-7.274-16.25-16.246zM1273.24 769.938c0-8.972 7.28-16.246 16.25-16.246 8.97 0 16.24 7.274 16.24 16.246 0 8.973-7.27 16.246-16.24 16.246-8.97 0-16.25-7.273-16.25-16.246z"
fill="#35b775"
/>
</motion.g>
<path
d="M1218.25 822.426c0-8.973 7.28-16.246 16.25-16.246 8.97 0 16.25 7.273 16.25 16.246 0 8.973-7.28 16.246-16.25 16.246-8.97 0-16.25-7.273-16.25-16.246zM1254.5 976.141s-16.25-39.991 32.49-69.984l-32.49 69.984zM1234.52 975.415s-7.4-42.527-64.63-42.162l64.63 42.162zM146.625 23.86h426.152v21.244H146.625V23.86zM726.492 23.86h427.398v21.244H726.492V23.86zM1306.36 23.86h426.15v21.244h-426.15V23.86z"
fill="#3f3d56"
/>
<path
d="M178.493 78.222h77.482v54.987h-77.482V78.222zM327.208 78.222h213.701v6.248H327.208v-6.248zM327.208 103.216h213.701v6.249H327.208v-6.249zM327.208 128.21h213.701v6.249H327.208v-6.249zM758.36 78.222h77.482v54.987H758.36V78.222zM907.075 78.222h213.705v6.248H907.075v-6.248zM907.075 103.216h213.705v6.249H907.075v-6.249zM907.075 128.21h213.705v6.249H907.075v-6.249zM1338.23 78.222h77.48v54.987h-77.48V78.222zM1486.94 78.222h213.7v6.248h-213.7v-6.248zM1486.94 103.216h213.7v6.249h-213.7v-6.249zM1486.94 128.21h213.7v6.249h-213.7v-6.249z"
fill="#fff"
/>
<path
d="M192.239 106.34c0-13.804 11.191-24.994 24.995-24.994s24.994 11.19 24.994 24.994-11.19 24.995-24.994 24.995-24.995-11.191-24.995-24.995zM1351.97 106.34c0-13.804 11.19-24.994 25-24.994 13.8 0 24.99 11.19 24.99 24.994s-11.19 24.995-24.99 24.995c-13.81 0-25-11.191-25-24.995z"
fill="#35b775"
/>
<motion.g
animate={{ scaleY: [1, -1, 1] }}
transition={{ duration: 5, loop: Infinity, repeatDelay: 4 }}
>
<path
d="M343.169 275.052h2.5v7.498h-2.5v-7.498zM345.669 582.481h-2.5v-14.996h2.5v14.996zm0-29.993h-2.5v-14.997h2.5v14.997zm0-29.993h-2.5v-14.997h2.5v14.997zm0-29.993h-2.5v-14.997h2.5v14.997zm0-29.993h-2.5v-14.997h2.5v14.997zm0-29.994h-2.5v-14.996h2.5v14.996zm0-29.993h-2.5v-14.996h2.5v14.996zm0-29.993h-2.5v-14.996h2.5v14.996zm0-29.993h-2.5V327.54h2.5v14.996zm0-29.993h-2.5v-14.997h2.5v14.997zM351.917 606.226h-8.748v-8.748h2.499v6.248h6.249v2.5zM1496.87 606.226h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.06v-2.5h15.06v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.13 0h-15.07v-2.5h15.07v2.5zm-30.135 0H969.59v-2.5h15.065v2.5zm-30.13 0H939.46v-2.5h15.065v2.5zm-30.13 0H909.33v-2.5h15.065v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.066v-2.5h15.066v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.065v-2.5H532.7v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.065v-2.5h15.065v2.5zm-30.131 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.065v-2.5h15.065v2.5zm-30.13 0h-15.065v-2.5h15.065v2.5zM1520.69 606.226h-8.75v-2.5h6.24v-6.248h2.51v8.748zM1520.68 582.481h-2.49v-14.996h2.49v14.996zm0-29.993h-2.49v-14.997h2.49v14.997zm0-29.993h-2.49v-14.997h2.49v14.997zm0-29.993h-2.49v-14.997h2.49v14.997zm0-29.993h-2.49v-14.997h2.49v14.997zm0-29.994h-2.49v-14.996h2.49v14.996zm0-29.993h-2.49v-14.996h2.49v14.996zm0-29.993h-2.49v-14.996h2.49v14.996zm0-29.993h-2.49V327.54h2.49v14.996zm0-29.993h-2.49v-14.997h2.49v14.997zM1518.19 275.052h2.49v7.498h-2.49v-7.498z"
fill="#3f3d56"
/>
</motion.g>
<path
d="M725.867 529.993h427.403v444.898H725.867V529.993z"
fill="#3f3d56"
/>
<path
d="M758.36 588.105h77.482v54.987H758.36v-54.987zM907.075 588.105h213.705v6.248H907.075v-6.248zM907.075 613.099h213.705v6.249H907.075v-6.249zM907.075 638.093h213.705v6.249H907.075v-6.249zM758.36 786.184h77.482v54.988H758.36v-54.988zM907.075 786.184h213.705v6.249H907.075v-6.249zM907.075 811.179h213.705v6.248H907.075v-6.248zM907.075 836.173h213.705v6.248H907.075v-6.248z"
fill="#fff"
/>
<path
d="M797.429 629.506l-26.522-35.362 6.283-4.712 21.605 28.808 55.072-44.603 4.973 6.078-61.411 49.791zM797.429 825.711l-26.522-35.362 6.283-4.711 21.605 28.806 55.072-44.603 4.973 6.08-61.411 49.79z"
fill="#35b775"
/>
<motion.g
animate={{ scaleY: [1, -1, 1] }}
transition={{ duration: 5, loop: Infinity, repeatDelay: 4 }}
>
<path
d="M157.247 973.641H1700.64v2.5H157.247v-2.5zM993.365 288.798s41.245-17.97 60.615 0c19.37 17.971-51.87 13.747-60.615 0z"
fill="#3f3d56"
/>
</motion.g>
<path
d="M1064.58 203.574c-13.86-23.418-41.28-24.509-41.28-24.509s-26.72-3.417-43.859 32.248c-15.976 33.243-38.024 65.34-3.55 73.122l6.227-19.381 3.856 20.824c4.914.269 9.838.269 14.746 0 36.92-1.192 72.08 70.947-12.895 0 82.345-30.259 90.085-59.772 76.755-82.304zM977.744 460.634l-7.498 16.246s-109.975 36.242-99.977 78.732c9.997 42.491 58.736 108.725 66.234 106.226 7.499-2.5 47.49-9.998 48.739-31.243 1.25-21.245-28.743-58.736-28.743-58.736l41.24-37.492 60.011-1.25 51.21 38.742s-53.73 47.489-29.99 66.234c23.75 18.746 58.74 31.243 63.74 23.745 5-7.498 61.23-118.723 52.48-128.721-8.74-9.997-97.47-47.489-97.47-47.489l-23.75-33.742-92.477-4.999-3.749 13.747z"
fill="#2f2e41"
/>
<path
d="M1000.24 254.431s6.25 41.241-6.25 46.24c-12.497 4.999 24.99 26.244 24.99 26.244h21.25l13.75-28.744s-12.5-22.495-5-43.74-48.74 0-48.74 0z"
fill="#ffb8b8"
/>
<path
d="M1000.24 254.431s6.25 41.241-6.25 46.24c-12.497 4.999 24.99 26.244 24.99 26.244h21.25l13.75-28.744s-12.5-22.495-5-43.74-48.74 0-48.74 0z"
opacity={0.1}
/>
<path
d="M991.491 289.423s13.749 14.997 16.249 17.496c2.5 2.5 13.74 16.247 37.49-3.749 23.74-19.995 26.24 3.749 26.24 3.749v149.966s-19.99-8.748-36.24 0c-16.25 8.748-49.988-2.499-49.988-2.499l-6.248-154.965 12.497-9.998z"
fill="#fff"
/>
<motion.g
animate={{ scaleY: [1, -1, 1] }}
transition={{ duration: 5, loop: Infinity, repeatDelay: 4 }}
>
<path
d="M1000.67 289.423s-11.678-4.999-21.676 0c-9.998 4.999-44.99 29.993-42.49 41.241 2.499 11.247 34.992 89.979 12.497 127.471-22.495 37.491-26.244 47.489-26.244 47.489l54.987-28.744s42.486-26.244 38.746-42.49c-3.75-16.246-15.82-144.967-15.82-144.967zM1050.24 289.423s26.23 2.5 27.48 4.999c1.25 2.5 39.37 13.122 36.87 24.37-2.5 11.247-36.87 111.849-21.87 130.595 14.99 18.745 39.99 44.989 31.24 47.489-8.75 2.499-23.74-3.749-38.74 0-15 3.749-49.99-27.494-46.24-61.236s.03-137.469 11.26-146.217z"
fill="#35b775"
/>
</motion.g>
<path
d="M987.742 528.119v12.497s-6.249 28.743 13.748 27.493c19.99-1.249 7.5-34.992 7.5-34.992l-1.25-11.247-19.998 6.249zM1043.98 529.368s-13.75 28.744 0 31.243c13.75 2.5 23.74-16.246 23.74-21.245 0-4.999-23.74-9.998-23.74-9.998zM1059.6 237.56c0-2.761 1.12-4.999 2.5-4.999s2.5 2.238 2.5 4.999c0 2.761-1.12 4.999-2.5 4.999s-2.5-2.238-2.5-4.999zM985.867 237.56c0-2.761 1.119-4.999 2.5-4.999 1.38 0 2.499 2.238 2.499 4.999 0 2.761-1.119 4.999-2.499 4.999-1.381 0-2.5-2.238-2.5-4.999z"
fill="#ffb8b8"
/>
<path
d="M1083.97 305.67s31.24 0 29.99 12.497-42.49 227.448-42.49 227.448-17.49-16.247-32.49-12.498l44.99-227.447zM962.748 309.419s-31.243 6.248-31.243 24.994 44.989 198.704 51.238 198.704c6.249 0 29.997-3.749 29.997-9.997 0-6.249-49.992-213.701-49.992-213.701z"
fill="#35b775"
/>
<path
d="M969.621 346.285l28.119 109.964s-13.122-96.217-28.119-109.964zM1078.99 330.834l-28.44 143.772s9.09-135.479 28.44-143.772z"
opacity={0.2}
/>
<path
d="M988.992 238.185c0-20.016 16.228-36.242 36.238-36.242 20.02 0 36.24 16.226 36.24 36.242s-16.22 36.242-36.24 36.242c-20.01 0-36.238-16.226-36.238-36.242z"
fill="#ffb8b8"
/>
<path
d="M1058.45 201.317l-27.09-14.19-37.408 5.804-7.739 34.184 19.267-.74 5.38-12.559v12.352l8.89-.343 5.16-19.994 3.23 21.284 31.6-.644-1.29-25.154z"
fill="#2f2e41"
/>
<path
d="M945.701 660.032c0 13.608-31.809 53.241-17.691 58.514 14.118 5.273 74.16-37.422 74.16-37.422l-18.49-44.905M1082.46 642.341l-25.17 48.989M1083.87 638.004l-25.2 40.064s55.35 50.767 64.13 36.671c6.95-11.147-.48-55.734-.48-55.734"
fill="#313037"
/>
</g>
</svg>
)
export default Animation1
Заранее спасибо!