animated-shape.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="2560" height="250" preserveAspectRatio="none" viewBox="0 0 2560 250"><g mask="url(&quot;#SvgjsMask1026&quot;)" fill="none"><path d="M2327.626,148.218C2352.219,147.517,2366.775,123.344,2378.34,101.628C2388.991,81.628,2396.36,58.8,2385.97,38.664C2374.797,17.011,2351.984,2.705,2327.626,3.345C2304.206,3.961,2285.692,21.09,2274.363,41.597C2263.456,61.339,2261.57,84.49,2271.649,104.667C2282.973,127.335,2302.297,148.939,2327.626,148.218" fill="rgba(255, 17, 17, 0.2)" class="triangle-float1"></path><path d="M568.4330551454118 293.5987476543345L600.1805357257567 231.29080874402877 506.1251162351061 261.8512670739896z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float2"></path><path d="M791.1237707860626 135.99919576921437L738.3882060413712 118.8643720916985 773.9889471085467 188.7347605139057z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float1"></path><path d="M908.27 169.72 a58.92 58.92 0 1 0 117.84 0 a58.92 58.92 0 1 0 -117.84 0z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float2"></path><path d="M751.443,-2.488C757.859,-2.569,763.957,-5.613,767.166,-11.17C770.375,-16.727,769.836,-23.463,766.826,-29.13C763.593,-35.218,758.336,-40.725,751.443,-40.776C744.483,-40.828,738.999,-35.468,735.657,-29.363C732.465,-23.531,731.65,-16.497,735.017,-10.765C738.345,-5.099,744.873,-2.405,751.443,-2.488" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path><path d="M599.5201034371345 154.7163567003635L585.0446926151545 86.61490310020659 531.4186498369776 169.19176752234338z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path><path d="M65.18 199.79 a41.75 41.75 0 1 0 83.5 0 a41.75 41.75 0 1 0 -83.5 0z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path><path d="M2144.725241946778 11.400906319512876L2141.9112572504223 65.09493294785729 2195.6052838787664 67.90891764421329 2198.4192685751227 14.214891015868886z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path><path d="M864.67 9.27 a58.83 58.83 0 1 0 117.66 0 a58.83 58.83 0 1 0 -117.66 0z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float1"></path><path d="M2392.564,149.187C2399.794,149.328,2406.474,145.775,2410.466,139.746C2414.965,132.95,2417.482,124.423,2413.759,117.173C2409.761,109.388,2401.306,104.471,2392.564,104.889C2384.405,105.279,2378.202,111.709,2374.611,119.045C2371.46,125.482,2372.165,132.913,2375.833,139.07C2379.407,145.071,2385.58,149.051,2392.564,149.187" fill="rgba(255, 17, 17, 0.2)" class="triangle-float1"></path><path d="M643.52 181.27 a48.94 48.94 0 1 0 97.88 0 a48.94 48.94 0 1 0 -97.88 0z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float1"></path><path d="M2480.204,125.209C2503.36,124.674,2521.666,106.893,2531.937,86.133C2541.058,67.697,2538.434,46.395,2527.949,28.699C2517.692,11.388,2500.304,-0.243,2480.204,-1.179C2458.272,-2.2,2435.707,5.237,2424.083,23.863C2411.834,43.49,2412.952,68.382,2424.16,88.622C2435.744,109.54,2456.299,125.761,2480.204,125.209" fill="rgba(255, 17, 17, 0.2)" class="triangle-float2"></path><path d="M1787.44 230.92 a64.4 64.4 0 1 0 128.8 0 a64.4 64.4 0 1 0 -128.8 0z" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path><path d="M1215.099,56.346C1228.341,55.352,1237.905,45.541,1245.068,34.36C1253.081,21.852,1261.831,7.208,1255.04,-6.003C1247.888,-19.914,1230.719,-24.76,1215.099,-23.936C1200.915,-23.187,1189.274,-14.248,1181.848,-2.14C1173.992,10.669,1168.745,26.47,1176.171,39.533C1183.659,52.703,1199.992,57.48,1215.099,56.346" fill="rgba(255, 17, 17, 0.2)" class="triangle-float2"></path><path d="M449.499,251.493C472.43,253.205,497.907,248.72,509.825,229.054C522.048,208.884,514.991,183.643,502.883,163.403C491.156,143.799,472.33,128.964,449.499,128.206C425.344,127.404,400.423,138.032,389.601,159.642C379.542,179.728,390.718,202.26,402.989,221.077C413.834,237.707,429.7,250.015,449.499,251.493" fill="rgba(255, 17, 17, 0.2)" class="triangle-float3"></path></g><defs><mask id="SvgjsMask1026"><rect width="2560" height="250" fill="#ffffff"></rect></mask><style>
            @keyframes float1 {
                0%{transform: translate(0, 0)}
                50%{transform: translate(-10px, 0)}
                100%{transform: translate(0, 0)}
            }

            .triangle-float1 {
                animation: float1 5s infinite;
            }

            @keyframes float2 {
                0%{transform: translate(0, 0)}
                50%{transform: translate(-5px, -5px)}
                100%{transform: translate(0, 0)}
            }

            .triangle-float2 {
                animation: float2 4s infinite;
            }

            @keyframes float3 {
                0%{transform: translate(0, 0)}
                50%{transform: translate(0, -10px)}
                100%{transform: translate(0, 0)}
            }

            .triangle-float3 {
                animation: float3 6s infinite;
            }
        </style></defs></svg>