<main class="main">
<div class="chords">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="650.888"
      height="4043.217"
      viewBox="0 0 650.888 4043.217"
    >
      <g
        id="group_35"
        data-name="group 35"
        transform="translate(-1508.187 -1954.095)"
      >
        <path
          id="path_139"
          class="curvePath"
          data-name="path 139"
          d="M2147.079,5997.2s-86.648-230.943-449.6-893.87c-251.976-460.237,223.613-589.517,292.637-838,119.714-430.973-138.931-391.341-67.269-669.073,63.4-245.689,269.992-627.53,231.232-839.544-49.569-271.142-333.42-802.461-333.42-802.461"
          fill="none"
          stroke="#f8f397"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_140"
          class="curvePath"
          data-name="path 140"
          d="M2130.86,5995.139c2.028-9.987-90.771-246.9-438.75-895.476-241.261-450.972,220.232-597.161,289.085-841.032,120.315-424.451-131.474-403-63.084-677.077,62.012-248.515,258.411-619.441,220.9-826.384-47.971-265.718-319.794-780.681-319.794-800.923"
          fill="none"
          stroke="#f2ed94"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_141"
          class="curvePath"
          data-name="path 141"
          d="M2114.64,5993.08c4.057-19.974-94.893-262.85-427.9-897.082-230.546-441.707,216.851-604.806,285.533-844.06,120.916-417.929-124.089-414.7-58.9-685.082,60.6-251.364,246.83-611.352,210.571-813.223-46.371-260.3-306.167-758.9-306.167-799.386"
          fill="none"
          stroke="#ebe791"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_142"
          class="curvePath"
          data-name="path 142"
          d="M2098.421,5991.02c6.086-29.961-99.017-278.8-417.057-898.687-219.832-432.443,213.47-612.451,281.981-847.089,121.517-411.407-116.777-426.422-54.715-693.086,59.17-254.235,235.251-603.263,200.242-800.063-44.773-254.871-292.541-737.123-292.541-797.848"
          fill="none"
          stroke="#e5e08d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_143"
          class="curvePath"
          data-name="path 143"
          d="M2082.2,5988.96c8.115-39.947-104.68-293.987-406.211-900.292C1465.8,4666.023,1885.6,4468.431,1954.42,4238.55c121.279-405.136-109.534-438.17-50.53-701.09,57.7-257.126,223.67-595.174,189.911-786.9-43.173-249.447-278.914-715.343-278.914-796.31"
          fill="none"
          stroke="#dfda8a"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_144"
          class="curvePath"
          data-name="path 144"
          d="M2065.982,5986.9c10.143-49.935-109.18-309.779-395.365-901.9-199.742-413.267,206.129-627.916,274.878-853.145,121.692-398.678-102.36-449.945-46.345-709.095,56.207-260.038,212.089-587.085,179.581-773.743-41.575-244.023-265.287-693.564-265.287-794.772"
          fill="none"
          stroke="#d8d487"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_145"
          class="curvePath"
          data-name="path 145"
          d="M2049.762,5984.841c12.172-59.921-113.674-325.584-384.518-903.5-189.29-403.9,202.65-635.594,271.326-856.174,122.114-392.218-95.253-461.742-42.16-717.1,54.675-262.969,200.1-578.927,169.25-760.583C2023.152,2508.972,1812,2075.7,1812,1954.247"
          fill="none"
          stroke="#d2ce84"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_146"
          class="curvePath"
          data-name="path 146"
          d="M2033.543,5982.782c14.2-69.909-118.163-341.406-373.672-905.11-178.835-394.545,199.177-643.272,267.774-859.2,122.546-385.757-88.213-473.561-37.976-725.1,53.108-265.919,188.463-570.829,158.921-747.423-38.991-233.073-238.034-650.005-238.034-791.7"
          fill="none"
          stroke="#ccc880"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_147"
          class="curvePath"
          data-name="path 147"
          d="M2017.324,5980.722c16.228-79.9-122.645-357.242-362.827-906.715-168.375-385.2,195.713-650.949,264.223-862.232,122.989-379.3-81.236-485.4-33.791-733.108,51.5-268.885,176.825-562.731,148.59-734.262-37.471-227.638-224.407-628.225-224.407-790.158"
          fill="none"
          stroke="#c5c17d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_148"
          class="curvePath"
          data-name="path 148"
          d="M2001.1,5978.662c18.258-89.882-127.118-373.1-351.98-908.32-157.912-375.868,192.255-658.625,260.671-865.26,123.443-372.834-74.323-497.259-29.606-741.113,49.854-271.87,165.19-554.634,138.259-721.1-35.947-222.2-210.78-606.445-210.78-788.62"
          fill="none"
          stroke="#bfbb7a"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_149"
          class="curvePath"
          data-name="path 149"
          d="M1984.885,5976.6c20.286-99.869-131.582-388.971-341.134-909.927-147.442-366.548,188.8-666.3,257.119-868.288,123.91-366.37-67.471-509.134-25.422-749.117,48.163-274.871,153.56-546.539,127.93-707.942-34.422-216.771-197.154-584.666-197.154-787.082"
          fill="none"
          stroke="#b8b577"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_150"
          class="curvePath"
          data-name="path 150"
          d="M1968.665,5974.543c22.315-109.856-136.033-404.865-330.287-911.532-136.966-357.244,185.361-673.971,253.567-871.317,124.388-359.9-60.679-521.025-21.237-757.121,46.424-277.887,141.931-538.444,117.6-694.782-32.892-211.339-183.527-562.886-183.527-785.544"
          fill="none"
          stroke="#b2af74"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_151"
          class="curvePath"
          data-name="path 151"
          d="M1952.446,5972.484c24.343-119.843-140.471-420.781-319.442-913.138C1506.524,4711.391,1814.932,4377.7,1883.02,4185c124.88-353.436-53.946-532.93-17.052-765.125,44.635-280.918,130.307-530.35,107.269-681.622-31.36-205.908-169.9-541.107-169.9-784.006"
          fill="none"
          stroke="#aca970"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_152"
          class="curvePath"
          data-name="path 152"
          d="M1936.226,5970.424c26.372-129.83-144.89-436.72-308.595-914.743-115.985-338.682,178.5-689.312,246.464-877.374,125.387-346.966-47.27-544.849-12.867-773.13,42.794-283.963,118.686-522.258,96.938-668.461-29.822-200.48-156.274-519.328-156.274-782.469"
          fill="none"
          stroke="#a5a26d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_153"
          class="curvePath"
          data-name="path 153"
          d="M1920.007,5968.364c28.4-139.816-149.291-452.684-297.749-916.348-105.478-329.428,175.085-696.98,242.912-880.4,125.908-340.492-40.651-556.778-8.683-781.134,40.9-287.02,107.071-514.166,86.609-655.3-28.28-195.052-142.647-497.548-142.647-780.931"
          fill="none"
          stroke="#9f9c6a"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_154"
          class="curvePath"
          data-name="path 154"
          d="M1903.788,5966.305c30.429-149.8-153.667-468.676-286.9-917.955-94.955-320.191,171.678-704.644,239.36-883.431,126.446-334.013-34.086-568.717-4.5-789.138,38.939-290.088,95.46-506.076,76.278-642.141-26.732-189.625-129.02-475.769-129.02-779.393"
          fill="none"
          stroke="#999667"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_155"
          class="curvePath"
          data-name="path 155"
          d="M1887.568,5964.245c32.458-159.79-158.014-484.7-276.057-919.56-84.413-310.975,168.281-712.306,235.809-886.459,127-327.532-27.574-580.666-.313-797.143,36.918-293.167,83.854-497.987,65.947-628.981-25.179-184.2-115.393-453.989-115.393-777.855"
          fill="none"
          stroke="#929063"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_156"
          class="curvePath"
          data-name="path 156"
          d="M1871.349,5962.186c34.486-169.778-162.327-500.743-265.211-921.166-73.849-301.779,164.894-719.965,232.257-889.488,127.573-321.043-21.114-592.621,3.871-805.147,34.83-296.256,72.254-489.9,55.618-615.821-23.62-178.777-101.767-432.21-101.767-776.317"
          fill="none"
          stroke="#8c8a60"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_157"
          class="curvePath"
          data-name="path 157"
          d="M1855.129,5960.126c36.515-179.764-166.6-516.82-254.364-922.771-63.259-292.6,161.517-727.621,228.7-892.517,128.165-314.548-14.7-604.582,8.056-813.151,32.669-299.352,60.66-481.812,45.287-602.661-22.052-173.355-88.14-410.43-88.14-774.779"
          fill="none"
          stroke="#86845d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_158"
          class="curvePath"
          data-name="path 158"
          d="M1838.91,5958.066c38.543-189.751-170.826-532.926-243.518-924.377-52.637-283.451,158.151-735.271,225.153-895.545,128.778-308.046-8.346-616.547,12.241-821.155,30.431-302.456,49.073-473.727,34.957-589.5-20.477-167.936-74.514-388.65-74.514-773.241"
          fill="none"
          stroke="#7f7d5a"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_159"
          class="curvePath"
          data-name="path 159"
          d="M1822.691,5956.007c40.572-199.738-175-549.062-232.673-925.983-41.976-274.319,154.8-742.918,221.6-898.573,129.413-301.537-2.034-628.516,16.426-829.16,28.112-305.564,37.494-465.643,24.626-576.341-18.891-162.518-60.887-366.871-60.887-771.7"
          fill="none"
          stroke="#797756"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_160"
          class="curvePath"
          data-name="path 160"
          d="M1806.471,5953.947c42.6-209.725-179.1-565.223-221.826-927.588-31.27-265.205,151.457-750.56,218.05-901.6,130.071-295.016,4.23-640.485,20.61-837.165,25.707-308.675,25.924-457.559,14.3-563.18-17.3-157.1-47.261-345.091-47.261-770.165"
          fill="none"
          stroke="#737153"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_161"
          class="curvePath"
          data-name="path 161"
          d="M1790.252,5951.887c44.629-219.711-183.129-581.405-210.98-929.193-20.51-256.107,148.127-758.2,214.5-904.631,130.754-288.484,10.449-652.453,24.795-845.169,23.21-311.79,14.362-449.478,3.966-550.02-15.685-151.687-33.634-323.312-33.634-768.627"
          fill="none"
          stroke="#6c6b50"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_162"
          class="curvePath"
          data-name="path 162"
          d="M1774.032,5949.828c46.658-229.7-187.069-597.6-200.133-930.8-9.686-247.02,144.811-765.825,210.946-907.66,131.463-281.938,16.624-664.42,28.98-853.173,20.614-314.9,2.811-441.4-6.364-536.86-14.06-146.275-20.007-301.532-20.007-767.089"
          fill="none"
          stroke="#66654d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_163"
          class="curvePath"
          data-name="path 163"
          d="M1757.813,5947.768c48.686-239.685-190.911-613.806-189.288-932.405,1.213-237.936,141.51-773.446,207.4-910.687,132.2-275.379,22.755-676.385,33.164-861.178,17.914-318.017-8.727-433.32-16.694-523.7-12.418-140.865-6.38-279.752-6.38-765.551"
          fill="none"
          stroke="#5f5e4a"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_164"
          class="curvePath"
          data-name="path 164"
          d="M1741.593,5945.709c50.716-249.673-194.64-630-178.441-934.011,12.194-228.845,138.221-781.06,203.843-913.716,132.97-268.8,28.845-688.343,37.349-869.182,15.1-321.126-20.253-425.242-27.025-510.539-10.754-135.457,7.247-257.974,7.247-764.014"
          fill="none"
          stroke="#595846"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_165"
          class="curvePath"
          data-name="path 165"
          d="M1725.374,5943.649c52.744-259.659-198.249-646.163-167.595-935.616,23.27-219.733,134.947-788.665,200.291-916.745,133.77-262.2,34.893-700.294,41.534-877.186,12.171-324.228-31.763-417.166-37.355-497.379-9.066-130.05,20.873-236.194,20.873-762.476"
          fill="none"
          stroke="#535243"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_166"
          class="curvePath"
          data-name="path 166"
          d="M1709.155,5941.589c54.772-269.646-201.729-662.273-156.749-937.221,34.449-210.58,131.689-796.259,196.739-919.774,134.606-255.58,40.9-712.237,45.719-885.19,9.114-327.32-43.257-409.089-47.686-484.219-7.347-124.644,34.5-214.415,34.5-760.938"
          fill="none"
          stroke="#4c4c40"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_167"
          class="curvePath"
          data-name="path 167"
          d="M1692.935,5939.53c56.8-279.633-205.077-678.3-145.9-938.828,45.736-201.361,128.446-803.84,193.188-922.8,135.477-248.933,46.874-724.17,49.9-893.195,5.922-330.4-54.731-401.013-58.015-471.059-5.591-119.238,48.126-192.635,48.126-759.4"
          fill="none"
          stroke="#46463d"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_168"
          class="curvePath"
          data-name="path 168"
          d="M1676.716,5937.47c58.829-289.62-208.3-694.2-135.057-940.433,57.128-192.05,125.218-811.409,189.636-925.83,136.388-242.255,52.808-736.09,54.088-901.2,2.586-333.464-66.183-392.935-68.346-457.9-3.79-113.83,61.753-170.856,61.753-757.862"
          fill="none"
          stroke="#403f39"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_169"
          class="curvePath"
          data-name="path 169"
          d="M1660.5,5935.411c60.858-299.607-211.418-709.949-124.21-942.039,68.618-182.617,122.191-818.855,186.084-928.859,137.737-235.31,58.706-747.995,58.273-909.2-.9-336.508-77.61-384.855-78.676-444.739-1.932-108.419,75.379-149.076,75.379-756.324"
          fill="none"
          stroke="#393936"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
        <path
          id="path_170"
          class="curvePath"
          data-name="path 170"
          d="M1644.277,5933.351
          c62.887-309.594-214.457-725.5-113.364-943.644, 
          80.184-173.03,
          118.81-826.5,
          182.532-931.887,
          138.338-228.789,
          64.57-759.883,
          62.457-917.208-4.559-339.528-89.006-376.769-89.006-431.579,
          0-103,
          89.006-127.3,
          89.006-754.786"
          fill="none"
          stroke="#333"
          stroke-miterlimit="10"
          stroke-width="0.646"
        />
      </g>
    </svg>
  </div>
</main>
.main{
  background-color: #f5ef7e;
  width: calc(100% + 16px);
  height: 4000px;
  margin: -8px;
}
.chords {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}

.curvePath {
  $curveCount: 32;
  @for $i from 1 through $curveCount {
    &:nth-child(#{$i}) {
      animation: curveRotate 24s linear $i * -0.1s infinite;
      transform-origin: 1830px - $i * 1.5;
    }
  }
}
@keyframes curveRotate {
  0% {
    transform: none;
  }
  50% {
    transform: rotateY(360deg) scaleX(1.5);
  }
  100% {
    transform: none;
  }
}
View Compiled
// nothing!!!
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.