Membuat Animasi SVG HTML CSS WordPress

21 Februari 2023
Membuat Animasi SVG HTML CSS Wordpress

Sharing Teknologi – Membuat Animasi SVG HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi SVG HTML CSS Di WordPress. 

Membuat Animasi SVG HTML CSS WordPress

CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam.

CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.

CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dan efek pengetikan atau typing effect .

HTML (Hypertext markup language) adalah sebuah bahasa markah (markup language) yang paling mendominasi saat ini dalam hal pembuatan sebuah website.

Dengan adanya HTML, maka sebuah website bisa dikreasikan sedemikian rupa menjadi lebih interaktif dan menarik. Karena HTML memadukan berbagai elemen seperti teks, multimedia, dan link, dan juga elemen pendukung lainnya menjadi sebuah kesatuan.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat svg animation pure css Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi SVG

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

HTML
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" id="spinupwp-stack" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 950 590" transform="translate3d(0, 0, 0)">
    <defs>
        <path id="spinupwp-stack-path-6" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <path id="spinupwp-stack-path-11" d="M0 .1h33.1v19.4H0z" />
        <path id="spinupwp-stack-path-13" d="M0 0h24.3v34.5H0z" />
        <path id="spinupwp-stack-path-16" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <path id="spinupwp-stack-path-21" d="M10.7.4L19 5a.7.7 0 010 1.2L10.6 11c-.4.3-1 .3-1.4 0L1.1 6.3A.7.7 0 011 5L9.3.4c.5-.3 1-.3 1.4 0z" />
        <path id="spinupwp-stack-path-25" d="M55.6 12.7l8.1 4.7a.7.7 0 010 1.2l-8.2 4.8c-.4.3-1 .3-1.4 0l-8.2-4.7a.7.7 0 010-1.3l8.3-4.7c.4-.3 1-.3 1.4 0z" />
        <path id="spinupwp-stack-path-27" d="M0 0h19.5v10.9H0z" />
        <path id="spinupwp-stack-path-30" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <path id="spinupwp-stack-path-36" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <path id="spinupwp-stack-path-42" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <path id="spinupwp-stack-path-2" d="M597 344v1175.5M371 213.7v1175.5M823.9 475v1175.6M165.5 95v1175.5m452.8-914.1v1175.5m-227-1306.5v1175.5m452.8-914.2v1175.5M187 107.4v1175.5M638.5 368v1175.5M412.7 237.7v1175.5m451.6-914.8v1175.5M207.1 119v1175.6M1 0v1175.5m657.7-796v1175.6M433 249.4v1175.5m452.8-914.2v1175.5M227.3 130.7v1175.5M21.3 11.8v1175.5M680 392v1175.6M453.1 261v1175.5m452.8-914.1v1175.5M247.5 142.4v1175.5M41.5 23.4V1199m658.8-795.2v1175.5M474.5 273.4v1175.5M926.1 534v1175.5M269 154.7v1175.5M62.9 35.8v1175.5m657.6-796V1591M494.7 285v1175.6m451.6-915v1175.6M289.1 166.4v1175.5M83 47.4V1223m658.8-795.2v1175.5M515 296.7v1175.5M967.7 558v1175.6M309.3 178v1175.5M103.3 59.1v1175.5M762 439.4v1175.5M536.3 309v1175.6m451.6-914.9v1175.5M330.7 190.4v1175.5M124.7 71.4V1247m657.6-796v1175.5M556.5 320.7v1175.5m451.6-914.8v1175.5M351 202v1175.6M144.9 83v1175.5m657.6-796v1175.6M576.7 332.4v1175.5m452.8-914.2v1175.5M1070 617v1175.5m21.4-1163.1v1175.5M1111.5 641v1175.6m20.2-1163.9v1175.5M1152 664.4v1175.5m21.4-1163.2v1175.5M1049.7 605.4v1175.5m126.1-584.5L.3 517m1175.5 421.5L.3 259.1m1175.5 1195.2L.3 775M1175.8 704L.3 24.7m1175.5 1195.2L.3 540.4M1175.8 962L.3 282.5m1175.5 1195.3L.3 798.3m1175.5-70.8L.3 48.1m1175.5 1195.2L.3 564m1175.5 421.5L.3 306m1175.5 1195.2L.3 821.8M1175.8 751L.3 71.5m1175.5 1195.3L.3 587.3M1175.8 1009L.3 329.4m1175.5 1195.3L.3 845.2m1175.5-70.8L.3 95m1175.5 1195.2L.3 610.8m1175.5 421.5L.3 353M1175.8 1548L.3 868.7m1175.5-70.8L.3 118.4m1175.5 1195.3L.3 634.2m1175.5 421.6L.3 376.3m1175.5 1195.3L.3 892m1175.5-70.8L.3 142M1175.8 1337L.3 657.7m1175.5 421.5L.3 399.8M1175.8 1595L.3 915.5m1175.5-70.7L.3 165.3m1175.5 1195.3L.3 681m1175.5 421.6L.3 423.2m1175.5 1195.2L.3 939m1175.5-70.8L.3 188.8M1175.8 1384L.3 704.5m1175.5 421.6L.3 446.7m1175.5 1195.2L.3 962.4m1175.5-70.7L.3 212.2m1175.5 1195.2L.3 728m1175.5 421.6L.3 470m1175.5 1195.2L.3 986M1175.8 915L.3 235.7m1175.5 1195.2L.3 751.4M1175.8 1173L.3 493.5m1175.5 1195.3L.3 1009.3m1175.5 726.4L.3 1056.2m1175.5 703L.3 1079.6m1175.5 702.9L.3 1103M1175.8 1806L.3 1126.5m1175.5 703L.3 1150m1175.5 702.9L.3 1173.4m1175.5 538.8L.3 1032.8m1175.5-352.1L.3 1.2" />
        <path id="spinupwp-stack-path-12" d="M0 0h19.5v10.9H0z" />
        <path id="spinupwp-stack-cube-bottom-a" d="M128 2.4L237 58v13c0 4-3.1 5.6-4.5 6.4L127 137.6a18 18 0 01-17.9 0L4.6 78C.2 75.4 0 71 0 71V59L110.3 2.3a18 18 0 0117.8 0z" />
        <radialGradient id="spinupwp-stack-use9-fill" cx="0" cy="0" r=".8" gradientTransform="matrix(.5804 0 0 1 .5 .5)" gradientUnits="objectBoundingBox" spreadMethod="pad">
            <stop id="spinupwp-stack-use9-fill-0" offset="0%" stop-color="#E7ECF7" />
            <stop id="spinupwp-stack-use9-fill-1" offset="100%" stop-color="#E2E8F6" />
        </radialGradient>
        <rect id="spinupwp-stack-path-1" width="1440" height="780" rx="0" ry="0" />
    </defs>
    <g id="spinupwp-stack-line" fill="none" fill-rule="evenodd" stroke-linecap="round" transform="translate(183 328.4)">
        <path id="spinupwp-stack-base-2" stroke="#FFF" stroke-dasharray="686" stroke-opacity=".3" stroke-width="10" d="M1.5 129.5l597.1-337.7" />
        <path id="spinupwp-stack-base" stroke="#FFF" stroke-dasharray="686" stroke-opacity=".3" stroke-width="3" d="M7.5 129.5l597.1-337.7" />
        <g opacity="0" style="animation:spinupwp-stack-glow-4_c_o 7060ms linear infinite normal forwards">
            <path id="spinupwp-stack-glow-4b" stroke="#9CD3FF" stroke-dasharray="686" stroke-width="12" d="M1.5 129.5l597.1-337.7" />
            <path id="spinupwp-stack-glow-4a" stroke="#FFF" stroke-dasharray="677.8" stroke-width="2" d="M.5 129.5l590.4-332.9" />
        </g>
        <g opacity="0" style="animation:spinupwp-stack-glow-3_c_o 7060ms linear infinite normal forwards" stroke-dashoffset="200">
            <path id="spinupwp-stack-glow-3b" stroke="#9CD3FF" stroke-dasharray="686" stroke-width="12" d="M1.5 129.5l597.1-337.7" />
            <path id="spinupwp-stack-glow-3a" stroke="#FFF" stroke-dasharray="677.8" stroke-width="2" d="M.5 129.5l590.4-332.9" />
        </g>
        <g opacity="0" style="animation:spinupwp-stack-glow-2_c_o 7060ms linear infinite normal forwards" stroke-dashoffset="400">
            <path id="spinupwp-stack-glow-2b" stroke="#9CD3FF" stroke-dasharray="686" stroke-width="12" d="M1.5 129.5l597.1-337.7" />
            <path id="spinupwp-stack-glow-2a" stroke="#FFF" stroke-dasharray="677.8" stroke-width="2" d="M.5 129.5l590.4-332.9" />
        </g>
        <g opacity="0" style="animation:spinupwp-stack-glow-1_c_o 7060ms linear infinite normal forwards">
            <path id="spinupwp-stack-glow-1b" stroke="#9CD3FF" stroke-dasharray="686" stroke-dashoffset="500" stroke-width="12" d="M1.5 129.5l597.1-337.7" />
            <path id="spinupwp-stack-glow-1a" stroke="#FFF" stroke-dasharray="677.8" stroke-dashoffset="600" stroke-width="2" d="M.5 129.5l590.4-332.9" />
        </g>
    </g>
    <g id="spinupwp-stack-mysql" transform="translate(678 -4.6)">
        <g id="spinupwp-stack-g1" fill-rule="evenodd" stroke="none" stroke-width="1">
            <use id="spinupwp-stack-cube-bottom" width="237" height="140" fill="#BAC6E3" transform="translate(8.8 41.5)" xlink:href="#spinupwp-stack-cube-bottom-a" />
            <path id="spinupwp-stack-cube-shadow" fill="#D5DDF4" d="M117 59h120v12c0 2.7-1.4 4.3-2.7 5.2l-.4.3-.3.2-.2.2-.5.2-.4.3L127 137.6A18 18 0 01117 140V59z" transform="translate(8.8 41.4)" />
            <path id="spinupwp-stack-cube-outline" fill="#FFF" d="M137.2 31.2l104.4 60.5a9 9 0 010 15.6l-105.3 61.4a18 18 0 01-18.2 0L13.4 107.8a9 9 0 010-15.6l105.8-61a18 18 0 0118 0z" />
            <path id="spinupwp-stack-cube-top" fill="#E4E9F6" d="M137.3 35.9l101 56.3a9 9 0 010 15.7l-101.8 58a18 18 0 01-18 0l-101.1-58a9 9 0 010-15.6l102.3-56.4a18 18 0 0117.6 0z" />
        </g>
        <path fill="none" fill-rule="evenodd" stroke="#6EE2D0" stroke-linecap="round" stroke-width="2" d="M121.1 36.2c5-2.8 11.1-2.8 16 0h0L238 92.5a7.5 7.5 0 010 13h0l-101.5 58c-5 3-11.3 3-16.4 0h0L19.1 105.7a7.5 7.5 0 01.1-13h0z" opacity="0" style="animation:spinupwp-stack-mysql-border_c_o 7060ms linear infinite normal forwards" />
        <g id="spinupwp-stack-mysql-logo-active" opacity=".6" transform="translate(87 71)">
            <g id="spinupwp-stack-group-3">
                <g id="spinupwp-stack-g2" mask="url(#spinupwp-stack-mask-12)">
                    <path id="spinupwp-stack-fill-1" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M13.6 11.6l1-.3L19 10l4-1.2 2.7-.7L29.3 7h.7L33 8.7l.2.3a168 168 0 01-15.6 10.5l-2.9-1.7c4.2-2.7 8.3-5.2 12.2-8l-1.9.5-4.5 1.4-2.3.7-2.4.7-3.2 1a101.5 101.5 0 00-3.1.7l-1.8-1s0-.2-.2-.3l8.8-9.9C13.7 4.7 11.6 6 9.4 7.2l-6.7 3.6c-1-.3-1.7-1-2.7-1.5L.4 9 5 6.5l3.1-1.7 3.2-1.5 3-1.5L18.1 0l3.6 2.1-8.1 9.4" />
                    <mask id="spinupwp-stack-mask-12">
                        <use id="spinupwp-stack-use1" width="33.1" height="19.4" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-11" />
                    </mask>
                </g>
            </g>
            <path id="spinupwp-stack-fill-4" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M55.5 38.3c.3 0 .8 0 1.3-.2a17.9 17.9 0 008.7-4.4c.4-.3.8-.7 1-1.1.5-.7.4-1.6-.2-2.1a6.3 6.3 0 00-4.6-1.5c-1.2 0-2.3.2-3.4.7-1.3.5-2.7 1.1-4 2-1 .7-2.3 1.3-3.1 2.5-.8 1-.8 1.8 0 2.6.2 0 .3.2.4.3 1.1.8 2.3 1.1 3.9 1.2m-1.7 5.1l-1.6-3.7-1.6-.6a9 9 0 01-3.2-2.3 2.8 2.8 0 01-.7-2.6c.3-.8.7-1.5 1.3-2 1-1 2-1.8 3.3-2.4l2.8-1.4c1.2-.6 2.5-1 3.9-1.2 2.4-.4 4.8-.5 7.2.3 1.5.5 3 1.2 4.1 2.2.7.6 1.3 1.3 1.4 2.3 0 .6 0 1-.3 1.6-.5.9-1.2 1.6-2 2.2-1.2.9-2.4 1.6-3.7 2.3a18.7 18.7 0 01-9.1 2.2c.3 1 1 1.7 1.4 2.6-1 .3-2 .3-3.2.5" />
            <g id="spinupwp-stack-group-8" transform="translate(73.7 8.4)">
                <g id="spinupwp-stack-g3" mask="url(#spinupwp-stack-mask-14)">
                    <path id="spinupwp-stack-fill-6" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M8.7 9.2l.6-1.7 1.4-1.8.8-1c.5-.3.6-.8.8-1.3l.3-1.5c0-.4.3-.8.6-1.1.6-.5 1.2-.8 2-.8.4 0 .9 0 1.4.2 1 .2 1.7 1 2.3 1.9.5.6.7 1.3.9 2l1.4 1c1.1.9 2 2 2.4 3.3.5 1.6.8 3.2.6 5a9.5 9.5 0 01-1.8 4.5L21 20l-1.5 2.4-.3.6 1 1.5c.7 1 1 2.2 1.2 3.3.2.8.3 1.6 0 2.4l-.2.2-2.5-.8-2.6-1c-.2-.1-.4-.1-.5.1 0 .5.2 1 .4 1.5.4.9.6 1.8.4 2.7V34l-.4.5-.3-.3-.2-.7c-.1-1-.5-1.8-1-2.6-.6-.7-.8-1.5-.9-2.3 0-.6.2-1.2.7-1.7l1 .1c1.4.4 2.8.8 4 1.5l1 .6-.1-.7c-.2-.5-.4-1-.5-1.7-.3-1-1-1.9-1.7-2.7-.6-.6-.6-.7-.8-1.3.2-.8.7-1.5 1.2-2.3l2-3c.7-.9 1.1-1.7 1.4-2.7.3-.5.3-1.2.4-1.8.2-1.5 0-3.1-.7-4.6-.5-1.1-1.2-2.3-2.4-2.9l-1-.7a1 1 0 01-.4-.6c-.2-1-.7-1.8-1.3-2.6-.7-.8-2-.7-2.3.6L14 3.3l-.4 1.3L12 6.4l-.9 1c-.4.6-.8 1.2-.7 2-.2.4-.5.6-.9.7l-2.7.8c-1 .4-2 .8-3 1.4-.7.7-1.6 1.3-2.1 2.3 0 .2-.2.4 0 .7l1.6-.6c1.1-.6 2.2-1 3.5-1h.9l.4.1-1 1.3-1 1.8c-.5 1-1 2-1 3.1l-.2 1.4c-.2 0-.4-.2-.4-.4l-.2-2.8.1-1c.1-.7.6-1.2 1-1.9l-.4.1-1.9.8c-.8.4-1.6.3-2.4 0-.8-.5-.8-1.4-.2-2.3 1.2-1.8 3-2.8 5-3.5l3-1 .2-.2" />
                    <mask id="spinupwp-stack-mask-14">
                        <use id="spinupwp-stack-use2" width="24.2" height="34.4" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-13" />
                    </mask>
                </g>
            </g>
            <path id="spinupwp-stack-fill-9" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M32.9 26.9c.7-.4 1.4-.3 2.1-.5l1 1.1a7 7 0 004 2.5c1 .2 2 .1 3-.3a3 3 0 001-.7c.4-.4.4-1 .3-1.4a3 3 0 00-.2-.7L42.7 24c-.6-1-.2-2.3.8-3a8.2 8.2 0 014-1.6c2.8-.4 5.3.4 7.7 2 .9.7 1.6 1.5 2 2.6-.2.4-.7.2-1 .3l-1 .3-.6-.6c-1-1.2-2.3-2-3.9-2.4a5 5 0 00-3 .3c-.4.1-.7.5-1 .8-.1.6 0 1.2.2 1.7l1.4 3c.3.5.5 1 .4 1.7-.1.7-.5 1.2-1 1.5a8 8 0 01-3 1.5 12.2 12.2 0 01-7.8-1c-1.8-.9-3.2-2-4-3.8V27v-.2" />
            <path id="spinupwp-stack-fill-11" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M31.3 13l2.8 1.5v.2l-1.7 2-1.4 1.6-1 1-1.3 1.5-1.6 1.4a89.5 89.5 0 0012.3-4.5c1 .5 2 1 3 1.7l-2.1.9-2.7 1-2.6.8-2.8.8-2.7.8a59.1 59.1 0 01-3.7.8c-1.5.2-3.1.4-4.7.4-1.4 0-2.8-.2-4.1-.7-.9-.3-1.7-.7-2.2-1.5v-.3l1.4-.8 1 .5c1.4 1 3 1.1 4.8.6.6-.2 1.2-.6 1.6-1l2.8-3.2 2.7-3 2.2-2.5" />
            <path id="spinupwp-stack-fill-13" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M76.6 34l2.8 1.7-1.5 1-1.4.8-1.5.8-1.5.9-1.5.9-1.5.8-1.5.9-1.5.8-1.5.8-1.5 1 5.4 3.1c-.8.4-1.5 1-2.3 1.3l-8-4.7-.2-.3L76.6 34" />
            <path id="spinupwp-stack-fill-19" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M91.2 15.4c-.3.8-.9 1-1.9.8l.5-1c0-.2 0-.5.2-.8.6.2 1.2.3 1.2 1" />
        </g>
        <g opacity="0" transform="translate(87 71)" style="animation:spinupwp-stack-mysql-logo_c_o 7060ms linear infinite normal forwards">
            <g id="spinupwp-stack-group-32">
                <g id="spinupwp-stack-g4" mask="url(#spinupwp-stack-mask-122)">
                    <path id="spinupwp-stack-fill-12" fill="#00728D" fill-rule="evenodd" stroke="none" stroke-width="1" d="M13.6 11.6l1-.3L19 10l4-1.2 2.7-.7L29.3 7h.7L33 8.7l.2.3a168 168 0 01-15.6 10.5l-2.9-1.7c4.2-2.7 8.3-5.2 12.2-8l-1.9.5-4.5 1.4-2.3.7-2.4.7-3.2 1a101.5 101.5 0 00-3.1.7l-1.8-1s0-.2-.2-.3l8.8-9.9C13.7 4.7 11.6 6 9.4 7.2l-6.7 3.6c-1-.3-1.7-1-2.7-1.5L.4 9 5 6.5l3.1-1.7 3.2-1.5 3-1.5L18.1 0l3.6 2.1-8.1 9.4" />
                    <mask id="spinupwp-stack-mask-122">
                        <use id="spinupwp-stack-use3" width="33.1" height="19.4" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-11" />
                    </mask>
                </g>
            </g>
            <path id="spinupwp-stack-fill-42" fill="#FF8408" fill-rule="evenodd" stroke="none" stroke-width="1" d="M55.5 38.3c.3 0 .8 0 1.3-.2a17.9 17.9 0 008.7-4.4c.4-.3.8-.7 1-1.1.5-.7.4-1.6-.2-2.1a6.3 6.3 0 00-4.6-1.5c-1.2 0-2.3.2-3.4.7-1.3.5-2.7 1.1-4 2-1 .7-2.3 1.3-3.1 2.5-.8 1-.8 1.8 0 2.6.2 0 .3.2.4.3 1.1.8 2.3 1.1 3.9 1.2m-1.7 5.1l-1.6-3.7-1.6-.6a9 9 0 01-3.2-2.3 2.8 2.8 0 01-.7-2.6c.3-.8.7-1.5 1.3-2 1-1 2-1.8 3.3-2.4l2.8-1.4c1.2-.6 2.5-1 3.9-1.2 2.4-.4 4.8-.5 7.2.3 1.5.5 3 1.2 4.1 2.2.7.6 1.3 1.3 1.4 2.3 0 .6 0 1-.3 1.6-.5.9-1.2 1.6-2 2.2-1.2.9-2.4 1.6-3.7 2.3a18.7 18.7 0 01-9.1 2.2c.3 1 1 1.7 1.4 2.6-1 .3-2 .3-3.2.5" />
            <g id="spinupwp-stack-group-82" transform="translate(73.7 8.4)">
                <g id="spinupwp-stack-g5" mask="url(#spinupwp-stack-mask-142)">
                    <path id="spinupwp-stack-fill-62" fill="#00728E" fill-rule="evenodd" stroke="none" stroke-width="1" d="M8.7 9.2l.6-1.7 1.4-1.8.8-1c.5-.3.6-.8.8-1.3l.3-1.5c0-.4.3-.8.6-1.1.6-.5 1.2-.8 2-.8.4 0 .9 0 1.4.2 1 .2 1.7 1 2.3 1.9.5.6.7 1.3.9 2l1.4 1c1.1.9 2 2 2.4 3.3.5 1.6.8 3.2.6 5a9.5 9.5 0 01-1.8 4.5L21 20l-1.5 2.4-.3.6 1 1.5c.7 1 1 2.2 1.2 3.3.2.8.3 1.6 0 2.4l-.2.2-2.5-.8-2.6-1c-.2-.1-.4-.1-.5.1 0 .5.2 1 .4 1.5.4.9.6 1.8.4 2.7V34l-.4.5-.3-.3-.2-.7c-.1-1-.5-1.8-1-2.6-.6-.7-.8-1.5-.9-2.3 0-.6.2-1.2.7-1.7l1 .1c1.4.4 2.8.8 4 1.5l1 .6-.1-.7c-.2-.5-.4-1-.5-1.7-.3-1-1-1.9-1.7-2.7-.6-.6-.6-.7-.8-1.3.2-.8.7-1.5 1.2-2.3l2-3c.7-.9 1.1-1.7 1.4-2.7.3-.5.3-1.2.4-1.8.2-1.5 0-3.1-.7-4.6-.5-1.1-1.2-2.3-2.4-2.9l-1-.7a1 1 0 01-.4-.6c-.2-1-.7-1.8-1.3-2.6-.7-.8-2-.7-2.3.6L14 3.3l-.4 1.3L12 6.4l-.9 1c-.4.6-.8 1.2-.7 2-.2.4-.5.6-.9.7l-2.7.8c-1 .4-2 .8-3 1.4-.7.7-1.6 1.3-2.1 2.3 0 .2-.2.4 0 .7l1.6-.6c1.1-.6 2.2-1 3.5-1h.9l.4.1-1 1.3-1 1.8c-.5 1-1 2-1 3.1l-.2 1.4c-.2 0-.4-.2-.4-.4l-.2-2.8.1-1c.1-.7.6-1.2 1-1.9l-.4.1-1.9.8c-.8.4-1.6.3-2.4 0-.8-.5-.8-1.4-.2-2.3 1.2-1.8 3-2.8 5-3.5l3-1 .2-.2" />
                    <mask id="spinupwp-stack-mask-142">
                        <use id="spinupwp-stack-use4" width="24.2" height="34.4" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-13" />
                    </mask>
                </g>
            </g>
            <path id="spinupwp-stack-fill-92" fill="#FF8408" fill-rule="evenodd" stroke="none" stroke-width="1" d="M32.9 26.9c.7-.4 1.4-.3 2.1-.5l1 1.1a7 7 0 004 2.5c1 .2 2 .1 3-.3a3 3 0 001-.7c.4-.4.4-1 .3-1.4a3 3 0 00-.2-.7L42.7 24c-.6-1-.2-2.3.8-3a8.2 8.2 0 014-1.6c2.8-.4 5.3.4 7.7 2 .9.7 1.6 1.5 2 2.6-.2.4-.7.2-1 .3l-1 .3-.6-.6c-1-1.2-2.3-2-3.9-2.4a5 5 0 00-3 .3c-.4.1-.7.5-1 .8-.1.6 0 1.2.2 1.7l1.4 3c.3.5.5 1 .4 1.7-.1.7-.5 1.2-1 1.5a8 8 0 01-3 1.5 12.2 12.2 0 01-7.8-1c-1.8-.9-3.2-2-4-3.8V27v-.2" />
            <path id="spinupwp-stack-fill-112" fill="#00728D" fill-rule="evenodd" stroke="none" stroke-width="1" d="M31.3 13l2.8 1.5v.2l-1.7 2-1.4 1.6-1 1-1.3 1.5-1.6 1.4a89.5 89.5 0 0012.3-4.5c1 .5 2 1 3 1.7l-2.1.9-2.7 1-2.6.8-2.8.8-2.7.8a59.1 59.1 0 01-3.7.8c-1.5.2-3.1.4-4.7.4-1.4 0-2.8-.2-4.1-.7-.9-.3-1.7-.7-2.2-1.5v-.3l1.4-.8 1 .5c1.4 1 3 1.1 4.8.6.6-.2 1.2-.6 1.6-1l2.8-3.2 2.7-3 2.2-2.5" />
            <path id="spinupwp-stack-fill-132" fill="#FF8408" fill-rule="evenodd" stroke="none" stroke-width="1" d="M76.6 34l2.8 1.7-1.5 1-1.4.8-1.5.8-1.5.9-1.5.9-1.5.8-1.5.9-1.5.8-1.5.8-1.5 1 5.4 3.1c-.8.4-1.5 1-2.3 1.3l-8-4.7-.2-.3L76.6 34" />
            <path id="spinupwp-stack-fill-192" fill="#00728E" fill-rule="evenodd" stroke="none" stroke-width="1" d="M91.2 15.4c-.3.8-.9 1-1.9.8l.5-1c0-.2 0-.5.2-.8.6.2 1.2.3 1.2 1" />
        </g>
    </g>
    <g id="spinupwp-stack-redis" transform="translate(513 91.4)">
        <g id="spinupwp-stack-g6" fill-rule="evenodd" stroke="none" stroke-width="1">
            <use id="spinupwp-stack-cube-bottom2" width="237" height="140" fill="#BAC6E3" transform="translate(8.8 41.5)" xlink:href="#spinupwp-stack-cube-bottom-a" />
            <path id="spinupwp-stack-cube-shadow2" fill="#D5DDF4" d="M117 59h120v12c0 2.7-1.4 4.3-2.7 5.2l-.4.3-.3.2-.2.2-.5.2-.4.3L127 137.6A18 18 0 01117 140V59z" transform="translate(8.8 41.4)" />
            <path id="spinupwp-stack-cube-outline2" fill="#FFF" d="M137.2 31.2l104.4 60.5a9 9 0 010 15.6l-105.3 61.4a18 18 0 01-18.2 0L13.4 107.8a9 9 0 010-15.6l105.8-61a18 18 0 0118 0z" />
            <path id="spinupwp-stack-cube-top2" fill="#E4E9F6" d="M137.3 35.9l101 56.3a9 9 0 010 15.7l-101.8 58a18 18 0 01-18 0l-101.1-58a9 9 0 010-15.6l102.3-56.4a18 18 0 0117.6 0z" transform="translate(0 -1)" />
        </g>
        <path fill="none" fill-rule="evenodd" stroke="#6EE2D0" stroke-linecap="round" stroke-width="2" d="M120.1 36.2c5-2.8 11.1-2.8 16 0h0L237 92.5a7.5 7.5 0 010 13h0l-101.5 58c-5 3-11.3 3-16.4 0h0L18.1 105.7a7.5 7.5 0 01.1-13h0z" opacity="0" style="animation:spinupwp-stack-redis-border_c_o 7060ms linear infinite normal forwards" />
        <g id="spinupwp-stack-redis-logo-active" opacity=".6" transform="translate(79 76)">
            <g id="spinupwp-stack-spinupwp" transform="translate(-993 -296)">
                <g id="spinupwp-stack-redis2" transform="translate(914 246)">
                    <g id="spinupwp-stack-group-38" transform="translate(79 50)">
                        <path id="spinupwp-stack-combined-shape" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M51.8 0l2.5.6 3.7.9a719.7 719.7 0 019.5 2.4l5.3 1.4 3.5 1a5 5 0 012 1.3c1.2 1.3 2.2 2.8 3.3 4.2l3 3.8 2.3 3.3.8 1c.4.6.3.9-.4 1.1h-.2l-2.7-.4-2.9-.7-4.5-1-5-1.1-4.6-1-4.7-1a5.4 5.4 0 01-3.6-2.6c-.4-.8-1-1.5-1.5-2.3l-2.2-3L54 5.8l-.8-1.2-1.4-2-.6-1-.5-1.2c.3-.3.7-.5 1.2-.4zm20.7 12.3h-.2l.1.3 1.8 2.4c.5.7 1 1.3 1.8 1.5h.1l4.8 1.2 1.7.4h.1c-.8-1.3-1.8-2.4-2.6-3.6a63.8 63.8 0 00-.1-.2c-.1-.3-.4-.2-.7-.3a250 250 0 00-3.6-1l-3.2-.7zM61 9.5l3.2 4.4.3.2 5.6-.6h.3v-.1l-9.4-4v.1zm11.5-3.1l-.1.1-.4.8c0 .2-.1.2-.2.3h-.1-.2L69 6.7h-.5l.1.1L71 8.6c.5.4.4.3.2.8 0 .4-.3.8-.4 1.2h.3l1.7-.4h.5l2.8 1.3h.3l-1.3-1.7 2-.5v-.1l-2.8-.8a.8.8 0 01-.4-.2l-1.2-1.7-.1-.1zM57.6 3.5l-.3.2c-.4.2-.5.5-.3 1L58.1 6a13.9 13.9 0 007 3h.7c.7-.2 1-.8.5-1.3a8 8 0 00-1.2-1.3 14.3 14.3 0 00-5.3-2.7c-.7-.2-1.4-.3-2.2-.2z" />
                        <path id="spinupwp-stack-fill-3" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M33.5 36.5h1.2a6 6 0 003.8-1.6c.5-.6.8-1.2.6-2-.2-1-1-1.5-1.9-1.9a8 8 0 00-3.4-.5c-1.5 0-3 .4-4.2 1.4-.9.7-1.2 1.5-.6 2.6.3.7.8 1 1.5 1.4 1 .4 2 .6 3 .6M32 39l-1.3-.2c-1.5-.2-3-.9-4.2-1.7-1-.7-1.7-1.6-2-2.7a3 3 0 01.3-2 6 6 0 013-3c1.6-.8 3.3-1.2 5.1-1.3 2.2-.2 4.3 0 6.4.8l2.4 1.2c.6.5 1.1 1.1 1.5 1.8.2.5.2.5.7.2l4.6-2.6c1-.7 2.2-.6 3.3.1.6.4.5 1.2-.2 1.6l-5.2 3-11 6.3c-1 .6-2.4.6-3.5-.2-.2-.2-.3-.7 0-1v-.3" />
                        <path id="spinupwp-stack-fill-5" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M75.2 28l-2.5 1.5c-1.1.8-2.3.7-3.5.4l-6.8-1.5-5.4-1.2-4.8-1.1-5.5-1.3a4.8 4.8 0 01-3-1.8l-1.3-2-3.6-5.1-3.2-4.7c-.3-.3-.5-.8-.7-1.2 0-.3 0-.5.3-.7l3.3-2c0 .5.2.9.4 1.2l2 3 3.7 5.2 1.7 2.6c.4.4.8.9 1 1.4.4.6.9 1 1.5 1.4 1.2.7 2.6.9 3.9 1.2l6.1 1.3 4 .9 4.5 1 4.1 1c1.3.3 2.5.5 3.8.5" />
                        <path id="spinupwp-stack-fill-7" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M50.6.4l.5 1.2.6 1 1.4 2 .8 1.2 1.5 2 2.2 3.1 1.5 2.3c.8 1.3 2 2.2 3.6 2.5l4.7 1 4.6 1 5 1.2 4.5 1 2.9.7 2.6.3.3.1-3.3 2h-1.7l-1.2-.2H81l-3.4-.8-6.6-1.5-5.6-1.3-6-1.3c-1.7-.4-3-1.1-3.9-2.6-.8-1.4-1.8-2.6-2.7-4l-2.4-3.2-1.3-2L47.5 4l-.5-1c0-.2 0-.4.2-.6l3.4-2" />
                        <path id="spinupwp-stack-fill-93" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M41.3 7.3c-.2-.3-.4-.6-.4-1V6l3.6-2 .2 1 .5.7L47 8.2l1.3 1.7 2 2.9 2.5 3.6c.3.4.6 1 1 1.3a5 5 0 002.8 1.6l5.3 1.2 8.2 1.8 4.3 1 2.6.6c1.2.3 2.5.6 3.8.6l.4.1-3.3 2h-.7l-1.9-.2-4-.8-5.8-1.4-7-1.5-5-1.1c-.8-.2-1.6-.5-2.3-.9-.7-.4-1.2-.9-1.6-1.6l-1.4-2-2-2.8-2-3c-.6-.6-1-1.3-1.5-2l-1.3-2" />
                        <path id="spinupwp-stack-fill-113" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M18 22.5v.1l7.2 4.2c.2.1.3 0 .4 0 .4-.5.5-1 .4-1.5-.2-1-1-2-2-2.4-1.5-.8-3.2-1-5-.7l-1 .3m1.4 8.7a16 16 0 01-4.1-.9c-1.1-.4-2.2-1-3-1.7a4.2 4.2 0 01-1.7-2.6c-.1-.7.1-1.4.4-2 .7-1.5 2-2.3 3.4-3a15.4 15.4 0 0110-.6c1.2.3 2.4.8 3.3 1.6 1 .7 1.7 1.5 2 2.7.1.8 0 1.6-.5 2.4-.5.8-1.2 1.4-2 2-.9.5-1.9.5-2.8 0l-8.5-5-.5.1c-.5.6-.7 1.2-.5 2l.7 1c.7.8 1.6 1.2 2.6 1.5l2.2.4c.4 0 .8.2 1 .5.6.3.5.9 0 1.2-.6.4-1.2.5-2 .4" />
                        <g id="spinupwp-stack-group-15" transform="translate(42.7 39)">
                            <g id="spinupwp-stack-g7" mask="url(#spinupwp-stack-mask-2)">
                                <path id="spinupwp-stack-fill-133" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M11.8 0c1 0 2 .3 3 .6a9 9 0 012.7 1.3c1 .7 1.6 1.7 2 2.8 0 .4-.2 1-.8 1.2-1 .5-1.9.4-2.8 0-.5-.3-.6-.8-.8-1.2-.5-1-1.2-1.6-2.3-2l-1.4-.2h-.2c-.2 0-.5.1-.6.3 0 .1 0 .5.2.6L12.3 5c.8.7 1.4 1.5 1.8 2.5.3 1-.3 1.8-1 2.3a7 7 0 01-3.9 1.1c-1.5 0-2.9-.2-4.3-.6-1.1-.4-2-1-3-1.6-.5-.4-1-1-1.3-1.8L0 6c-.2-.6 0-1 .5-1.3 1-.6 2.1-.6 3.2 0 .3.2.5.6.6 1 .3 1.2 1.2 2 2.3 2.4.7.3 1.5.5 2.3.5.3 0 .7 0 .8-.4.2-.3 0-.6-.3-.9l-2-2.1a3.5 3.5 0 01-1.2-2.4c0-.8.5-1.2 1-1.6 1.4-1 2.8-1 4.5-1" />
                                <mask id="spinupwp-stack-mask-2">
                                    <use id="spinupwp-stack-use5" width="19.4" height="10.9" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-12" />
                                </mask>
                            </g>
                        </g>
                        <path id="spinupwp-stack-fill-20" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M14.3 15.8c.6 0 1.2 0 1.7.2 1.3.2 2.6.6 3.8 1.3.3.2.5.5.5.8 0 .4-.3.7-.6.9-1 .4-2 .4-3-.1a6 6 0 00-2.3-.6c-1.5-.2-3 .1-4.4.4-1.3.2-2.4 1-3.5 1.6L3.6 22a3 3 0 01-3.4-.3c-.2-.2-.3-.7-.1-1l.5-.4L11 14c1-.6 2-.6 3 0 .9.4 1 1 .2 1.7" />
                        <path id="spinupwp-stack-fill-22" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M49.5 35.2c.8 0 1.3.2 1.8.5s.7 1.1 0 1.5l-3 1.8-7.8 4.5a3 3 0 01-3.5-.3c-.3-.3-.3-.9 0-1.2l.6-.3 10.6-6.2c.5-.3 1-.3 1.3-.3" />
                        <path id="spinupwp-stack-fill-24" fill="#7381A8" fill-rule="evenodd" stroke="none" stroke-width="1" d="M54.7 34.9c-.9 0-1.5-.2-2-.7-.4-.4-.4-.9 0-1.2 1-.9 2.3-1.3 3.6-.8.4.2.8.4 1 .8 0 .4 0 .7-.3.9-.7.5-1.5 1-2.3 1" />
                        <path id="spinupwp-stack-fill-36" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M80.1 14.5v-.1" />
                    </g>
                </g>
            </g>
        </g>
        <g opacity="0" transform="translate(79 76)" style="animation:spinupwp-stack-redis-logo_c_o 7060ms linear infinite normal forwards">
            <g id="spinupwp-stack-group" transform="translate(44.9 13.2)">
                <g id="spinupwp-stack-rectangle" fill-rule="evenodd" stroke="none" stroke-width="1">
                    <use id="spinupwp-stack-use6" width="18.5" height="10.9" fill="#000" xlink:href="#spinupwp-stack-path-21" />
                    <use id="spinupwp-stack-use7" width="18.5" height="10.9" fill="#BAC6E3" xlink:href="#spinupwp-stack-path-21" />
                </g>
                <g id="spinupwp-stack-g8" mask="url(#spinupwp-stack-mask-22)">
                    <rect id="spinupwp-stack-rectangle2" width="10" height="15.2" fill="#D5DDF4" fill-rule="evenodd" stroke="none" stroke-width="1" rx="0" ry="0" transform="translate(10 -2.1)" />
                    <mask id="spinupwp-stack-mask-22">
                        <use id="spinupwp-stack-use8" width="18.5" height="10.9" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-21" />
                    </mask>
                </g>
            </g>
            <rect id="spinupwp-stack-rectangle3" width="4.1" height="1" fill="#BAC6E3" fill-rule="evenodd" stroke="none" stroke-width="1" rx="0" ry="0" transform="translate(45.6 18)" />
            <rect id="spinupwp-stack-rectangle4" width="4.1" height="1" fill="#D5DDF4" fill-rule="evenodd" stroke="none" stroke-width="1" rx="0" ry="0" transform="translate(60 18)" />
            <g id="spinupwp-stack-rectangle5" fill-rule="evenodd" stroke="none" stroke-width="1">
                <use id="spinupwp-stack-use9" width="18.5" height="11.1" fill="url(#spinupwp-stack-use9-fill)" xlink:href="#spinupwp-stack-path-25" />
                <use id="spinupwp-stack-use10" width="18.5" height="11.1" fill="#000" xlink:href="#spinupwp-stack-path-25" />
            </g>
            <g id="spinupwp-stack-group-382">
                <path id="spinupwp-stack-fill-13" fill="#E53528" fill-rule="evenodd" stroke="none" stroke-width="1" d="M77 9.3v-.1l-2.7-.8a.8.8 0 01-.4-.2l-1.2-1.7c-.1-.2-.2-.2-.3 0l-.4.8c-.1.2-.2.3-.5.2L69 6.8h-.5l.1.1L71 8.6c.5.4.4.3.2.8 0 .4-.3.8-.4 1.2h.3l1.7-.4h.5l2.8 1.3h.3l-1.3-1.7 2-.5m-16 .1l-.1.1 3.2 4.4.4.2 5.5-.6h.3v-.1l-9.4-4m4.1-.4h.7c.7-.2 1-.8.5-1.3a8 8 0 00-1.2-1.3 14.3 14.3 0 00-5.3-2.7c-.7-.2-1.4-.3-2.2-.2-.6.1-.8.6-.6 1.2L58.1 6a13.9 13.9 0 007 3m15 5.4H80c-.1-.4-.4-.3-.7-.4a250 250 0 00-3.6-1l-3.2-.7h-.2l.1.3 1.8 2.4c.5.7 1 1.3 1.8 1.5h.1l4.8 1.2 1.7.4h.1c-.8-1.3-1.8-2.4-2.6-3.6v-.1M50.5.4c.3-.3.7-.5 1.2-.4l2.5.6 3.7.9a719.7 719.7 0 019.5 2.4l5.3 1.4 3.5 1a5 5 0 012 1.3c1.2 1.3 2.2 2.8 3.3 4.2l3 3.8 2.3 3.3.8 1c.4.6.3.9-.4 1.1H87l-2.6-.4-2.9-.7-4.5-1-5-1.1-4.6-1-4.7-1a5.4 5.4 0 01-3.6-2.6c-.4-.8-1-1.5-1.5-2.3l-2.2-3L54 5.8l-.8-1.2-1.4-2-.6-1-.5-1.2" />
                <path id="spinupwp-stack-fill-32" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M33.5 36.5h1.2a6 6 0 003.8-1.6c.5-.6.8-1.2.6-2-.2-1-1-1.5-1.9-1.9a8 8 0 00-3.4-.5c-1.5 0-3 .4-4.2 1.4-.9.7-1.2 1.5-.6 2.6.3.7.8 1 1.5 1.4 1 .4 2 .6 3 .6M32 39l-1.3-.2c-1.5-.2-3-.9-4.2-1.7-1-.7-1.7-1.6-2-2.7a3 3 0 01.3-2 6 6 0 013-3c1.6-.8 3.3-1.2 5.1-1.3 2.2-.2 4.3 0 6.4.8l2.4 1.2c.6.5 1.1 1.1 1.5 1.8.2.5.2.5.7.2l4.6-2.6c1-.7 2.2-.6 3.3.1.6.4.5 1.2-.2 1.6l-5.2 3-11 6.3c-1 .6-2.4.6-3.5-.2-.2-.2-.3-.7 0-1v-.3" />
                <path id="spinupwp-stack-fill-52" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M75.2 28l-2.5 1.5c-1.1.8-2.3.7-3.5.4l-6.8-1.5-5.4-1.2-4.8-1.1-5.5-1.3a4.8 4.8 0 01-3-1.8l-1.3-2-3.6-5.1-3.2-4.7c-.3-.3-.5-.8-.7-1.2 0-.3 0-.5.3-.7l3.3-2c0 .5.2.9.4 1.2l2 3 3.7 5.2 1.7 2.6c.4.4.8.9 1 1.4.4.6.9 1 1.5 1.4 1.2.7 2.6.9 3.9 1.2l6.1 1.3 4 .9 4.5 1 4.1 1c1.3.3 2.5.5 3.8.5" />
                <path id="spinupwp-stack-fill-72" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M50.6.4l.5 1.2.6 1 1.4 2 .8 1.2 1.5 2 2.2 3.1 1.5 2.3c.8 1.3 2 2.2 3.6 2.5l4.7 1 4.6 1 5 1.2 4.5 1 2.9.7 2.6.3.3.1-3.3 2h-1.7l-1.2-.2H81l-3.4-.8-6.6-1.5-5.6-1.3-6-1.3c-1.7-.4-3-1.1-3.9-2.6-.8-1.4-1.8-2.6-2.7-4l-2.4-3.2-1.3-2L47.5 4l-.5-1c0-.2 0-.4.2-.6l3.4-2" />
                <path id="spinupwp-stack-fill-94" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M41.3 7.3c-.2-.3-.4-.6-.4-1V6l3.6-2 .2 1 .5.7L47 8.2l1.3 1.7 2 2.9 2.5 3.6c.3.4.6 1 1 1.3a5 5 0 002.8 1.6l5.3 1.2 8.2 1.8 4.3 1 2.6.6c1.2.3 2.5.6 3.8.6l.4.1-3.3 2h-.7l-1.9-.2-4-.8-5.8-1.4-7-1.5-5-1.1c-.8-.2-1.6-.5-2.3-.9-.7-.4-1.2-.9-1.6-1.6l-1.4-2-2-2.8-2-3c-.6-.6-1-1.3-1.5-2l-1.3-2" />
                <path id="spinupwp-stack-fill-114" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M18 22.5v.1l7.2 4.2c.2.1.3 0 .4 0 .4-.5.5-1 .4-1.5-.2-1-1-2-2-2.4-1.5-.8-3.2-1-5-.7l-1 .3m1.4 8.7a16 16 0 01-4.1-.9c-1.1-.4-2.2-1-3-1.7a4.2 4.2 0 01-1.7-2.6c-.1-.7.1-1.4.4-2 .7-1.5 2-2.3 3.4-3a15.4 15.4 0 0110-.6c1.2.3 2.4.8 3.3 1.6 1 .7 1.7 1.5 2 2.7.1.8 0 1.6-.5 2.4-.5.8-1.2 1.4-2 2-.9.5-1.9.5-2.8 0l-8.5-5-.5.1c-.5.6-.7 1.2-.5 2l.7 1c.7.8 1.6 1.2 2.6 1.5l2.2.4c.4 0 .8.2 1 .5.6.3.5.9 0 1.2-.6.4-1.2.5-2 .4" />
                <g id="spinupwp-stack-group-152" transform="translate(42.7 39)">
                    <g id="spinupwp-stack-g9" mask="url(#spinupwp-stack-mask-28)">
                        <path id="spinupwp-stack-fill-134" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M11.8 0c1 0 2 .3 3 .6a9 9 0 012.7 1.3c1 .7 1.6 1.7 2 2.8 0 .4-.2 1-.8 1.2-1 .5-1.9.4-2.8 0-.5-.3-.6-.8-.8-1.2-.5-1-1.2-1.6-2.3-2l-1.4-.2h-.2c-.2 0-.5.1-.6.3 0 .1 0 .5.2.6L12.3 5c.8.7 1.4 1.5 1.8 2.5.3 1-.3 1.8-1 2.3a7 7 0 01-3.9 1.1c-1.5 0-2.9-.2-4.3-.6-1.1-.4-2-1-3-1.6-.5-.4-1-1-1.3-1.8L0 6c-.2-.6 0-1 .5-1.3 1-.6 2.1-.6 3.2 0 .3.2.5.6.6 1 .3 1.2 1.2 2 2.3 2.4.7.3 1.5.5 2.3.5.3 0 .7 0 .8-.4.2-.3 0-.6-.3-.9l-2-2.1a3.5 3.5 0 01-1.2-2.4c0-.8.5-1.2 1-1.6 1.4-1 2.8-1 4.5-1" />
                        <mask id="spinupwp-stack-mask-28">
                            <use id="spinupwp-stack-use11" width="19.4" height="10.9" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1" xlink:href="#spinupwp-stack-path-27" />
                        </mask>
                    </g>
                </g>
                <path id="spinupwp-stack-fill-16" fill="#E53528" fill-rule="evenodd" stroke="none" stroke-width="1" d="M81 24.6h-.3c-1.3-.1-2.6-.4-3.8-.7l-2.6-.6-4.3-1-8.2-1.8-5.3-1.2a5 5 0 01-2.8-1.6l-1-1.3-2.5-3.6-2-2.9-1.3-1.7-1.7-2.5-.5-.8-.2-1c.4-.4 1-.3 1.5-.2l1.1.2h.4L49.1 6l1.3 2 2.4 3.3c.9 1.3 1.9 2.5 2.7 4a5.5 5.5 0 003.8 2.5l6.1 1.3 5.6 1.3 6.6 1.5 3.4.7.1.1v.3l.4.4c.3.6.2.9-.4 1.1" />
                <path id="spinupwp-stack-fill-18" fill="#E53528" fill-rule="evenodd" stroke="none" stroke-width="1" d="M41.3 7.3l1.3 2 1.4 2 2.1 3 2 2.8 1.4 2c.4.7 1 1.2 1.6 1.6.7.4 1.5.7 2.3.9l5 1 7 1.6 5.9 1.4 4 .8v.3c0 .2.2.4.3.5.2.4 0 .6-.4.8-1.3 0-2.5-.2-3.8-.5l-4.1-1-4.6-1-3.9-1-6.1-1.2c-1.3-.3-2.7-.5-3.9-1.2-.6-.4-1-.8-1.4-1.4l-1-1.4-1.8-2.6-3.8-5.2-2-3c-.1-.3-.3-.7-.2-1.1.5-.5 1-.3 1.6-.2h1" />
                <path id="spinupwp-stack-fill-202" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M14.3 15.8c.6 0 1.2 0 1.7.2 1.3.2 2.6.6 3.8 1.3.3.2.5.5.5.8 0 .4-.3.7-.6.9-1 .4-2 .4-3-.1a6 6 0 00-2.3-.6c-1.5-.2-3 .1-4.4.4-1.3.2-2.4 1-3.5 1.6L3.6 22a3 3 0 01-3.4-.3c-.2-.2-.3-.7-.1-1l.5-.4L11 14c1-.6 2-.6 3 0 .9.4 1 1 .2 1.7" />
                <path id="spinupwp-stack-fill-222" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M49.5 35.2c.8 0 1.3.2 1.8.5s.7 1.1 0 1.5l-3 1.8-7.8 4.5a3 3 0 01-3.5-.3c-.3-.3-.3-.9 0-1.2l.6-.3 10.6-6.2c.5-.3 1-.3 1.3-.3" />
                <path id="spinupwp-stack-fill-242" fill="#67686A" fill-rule="evenodd" stroke="none" stroke-width="1" d="M54.7 34.9c-.9 0-1.5-.2-2-.7-.4-.4-.4-.9 0-1.2 1-.9 2.3-1.3 3.6-.8.4.2.8.4 1 .8 0 .4 0 .7-.3.9-.7.5-1.5 1-2.3 1" />
                <path id="spinupwp-stack-fill-26" fill="#FDF7F7" fill-rule="evenodd" stroke="none" stroke-width="1" d="M65.1 9a13.9 13.9 0 01-7-3c-.4-.4-.8-.8-1-1.3-.3-.6-.1-1 .5-1.2.8-.1 1.5 0 2.2.2 2 .6 3.8 1.4 5.3 2.7.5.4.9.8 1.2 1.3.5.5.2 1.1-.5 1.3h-.7" />
                <path id="spinupwp-stack-fill-28" fill="#FDF7F7" fill-rule="evenodd" stroke="none" stroke-width="1" d="M61 9.4l9.4 4-.3.1-5.5.6c-.1 0-.4 0-.4-.2L61 9.5" />
                <path id="spinupwp-stack-fill-30" fill="#FDF7F7" fill-rule="evenodd" stroke="none" stroke-width="1" d="M77 9.3l-2 .5 1.4 1.7H76l-2.8-1.3a1 1 0 00-.5 0c-.6 0-1.1.2-1.7.3l-.3.1.4-1.2c.2-.5.3-.4-.2-.8L68.5 7h-.1v-.2l.5.1 2.6.7c.3.1.4 0 .5-.2 0-.3.2-.5.4-.8 0-.2.2-.2.3 0l1.2 1.7.4.2 2.8.8" />
                <path id="spinupwp-stack-fill-32" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M76 16.5c-.9-.2-1.3-.8-1.8-1.5l-1.8-2.4v-.3h.1l3.2.8 3.6 1c.3 0 .6-.1.7.2h-.4l-1.4.8-1.6 1c-.2 0-.5 0-.6.4" />
                <path id="spinupwp-stack-fill-34" fill="#8D1A13" fill-rule="evenodd" stroke="none" stroke-width="1" d="M76 16.5c0-.3.4-.4.6-.5l1.6-1 1.4-.7h.4v.2c.9 1.2 2 2.3 2.7 3.5v.1l-1.8-.4-4.8-1.1v-.1" />
                <path id="spinupwp-stack-fill-362" fill="#C01C19" fill-rule="evenodd" stroke="none" stroke-width="1" d="M80.1 14.5v-.1" />
            </g>
        </g>
    </g>
    <g id="spinupwp-stack-php" fill-rule="evenodd" transform="translate(347 183.4)">
        <g id="spinupwp-stack-g10" stroke="none" stroke-width="1">
            <use id="spinupwp-stack-cube-bottom3" width="237" height="140" fill="#BAC6E3" transform="translate(8.8 41.5)" xlink:href="#spinupwp-stack-cube-bottom-a" />
            <path id="spinupwp-stack-cube-shadow3" fill="#D5DDF4" d="M117 59h120v12c0 2.7-1.4 4.3-2.7 5.2l-.4.3-.3.2-.2.2-.5.2-.4.3L127 137.6A18 18 0 01117 140V59z" transform="translate(8.8 41.4)" />
            <path id="spinupwp-stack-cube-outline3" fill="#FFF" d="M137.2 31.2l104.4 60.5a9 9 0 010 15.6l-105.3 61.4a18 18 0 01-18.2 0L13.4 107.8a9 9 0 010-15.6l105.8-61a18 18 0 0118 0z" />
            <path id="spinupwp-stack-cube-top3" fill="#E4E9F6" d="M139.9 35.9L241 92.2a9 9 0 010 15.7l-102 58a18.2 18.2 0 01-18 0l-101.4-58a9 9 0 01.1-15.6l102.5-56.4c5.5-3 12.1-3 17.6 0z" transform="translate(-2.5 -1)" />
        </g>
        <path fill="none" stroke="#6EE2D0" stroke-linecap="round" stroke-width="2" d="M120.1 36.2c5-2.8 11.1-2.8 16 0h0L237 92.5a7.5 7.5 0 010 13h0l-101.5 58c-5 3-11.3 3-16.4 0h0L18.1 105.7a7.5 7.5 0 01.1-13h0z" opacity="0" style="animation:spinupwp-stack-php-border_c_o 7060ms linear infinite normal forwards" />
        <g id="spinupwp-stack-php-logo-active" fill="#7381A8" stroke="none" stroke-width="1" opacity=".6" transform="translate(92 79)">
            <path id="spinupwp-stack-fill-14" d="M36.6 27.5h.4l2.8-1.1 6.2-2.5 2.6-1.3c1-.6 1-1.5.4-2.4-.4-.5-.8-1-1.3-1.3l-4.2-2.6-.6-.4.7-.4 4.2-1.6.4-.3-.4-.3-3-1.7a1 1 0 00-1 0L40 13l-5 2-5.6 2.2-5.8 2.4-.3.2.3.3 3.2 1.8c.2.1.5.2.7 0 .7-.1 1.4-.4 2-.7l5.3-2.2a171.1 171.1 0 014.7-1.5l3.3 2c1 .7 1 1.1 0 1.7l-2.4.9-4 1.6L33 25l-.4.2.3.3 3.2 1.9.5.1m-12.8-9.9c2.2 0 4-.3 6-.9 1.2-.4 2.4-1 3.4-2 1.1-.8 1.4-2.1.5-3.3-.4-.6-1-1.2-1.6-1.5l-8-4.9c-.4-.2-.7-.2-1.2 0l-3.7 1.6-5 2-5.7 2.3-2.9 1-2.5 1-.4.3.3.3 3.2 1.9c.3.1.5.1.8 0l4.6-1.8a1 1 0 011 0l2.4 1.5c2.8 1.6 5.8 2.6 8.8 2.5M54 35.2h1.7c2-.2 3.7-.7 5.5-1.4 1-.5 2-1 2.8-2 .4-.6.6-1.2.4-2a4 4 0 00-2-2.4l-8.4-5a167.8 167.8 0 00-4.4 1.4L44.2 26l-5.5 2-5.9 2.4-.3.2.2.3 2.3 1.4 1 .5c.2.1.4.2.6.1l2-.7 3-1.3h.7l2 1.3c3 1.9 6.2 3 9.7 3M14.4.2a66.3 66.3 0 0127 6c4.7 2 9.3 4.3 13.7 7.1 2.6 1.7 5.2 3.5 7.6 5.6 2.4 2.2 4.8 4.6 6.7 7.4a15 15 0 012.4 5.5 6.9 6.9 0 01-3.1 7.4c-2 1.4-4.3 2.1-6.8 2.5a52.8 52.8 0 01-14.5-.7 86.3 86.3 0 01-39-18.4 32.5 32.5 0 01-7-8.7C.5 12.3 0 10.5 0 8.6 0 6.9.5 5.3 1.7 4c1-1 2.3-1.9 3.7-2.4A21 21 0 0111.9.3l2.5-.2" />
            <path id="spinupwp-stack-fill-43" d="M52.7 32.2c-1.6 0-2.9-.5-4.1-1.1-1-.4-1.8-1-2.7-1.5l-.2-.2.2-.2a1919.6 1919.6 0 018.5-3l3.6 2 .3.4c.8.7.9 1.3-.2 2l-2.6 1c-1 .4-2 .8-2.8.6" />
            <path id="spinupwp-stack-fill-63" d="M22.5 14.7a8 8 0 01-4-1l-2.4-1.4-.3-.3.3-.2 4-1.6L23.4 9c.5-.2 1-.3 1.4 0l3 2c1.3.8 1.2 1.5 0 2.2-1.6 1-3.4 1.5-5.3 1.6" />
        </g>
        <g fill="#5E4083" stroke="none" stroke-width="1" opacity="0" transform="translate(92 79)" style="animation:spinupwp-stack-php-logo_c_o 7060ms linear infinite normal forwards">
            <path id="spinupwp-stack-fill-15" d="M36.6 27.5h.4l2.8-1.1 6.2-2.5 2.6-1.3c1-.6 1-1.5.4-2.4-.4-.5-.8-1-1.3-1.3l-4.2-2.6-.6-.4.7-.4 4.2-1.6.4-.3-.4-.3-3-1.7a1 1 0 00-1 0L40 13l-5 2-5.6 2.2-5.8 2.4-.3.2.3.3 3.2 1.8c.2.1.5.2.7 0 .7-.1 1.4-.4 2-.7l5.3-2.2a171.1 171.1 0 014.7-1.5l3.3 2c1 .7 1 1.1 0 1.7l-2.4.9-4 1.6L33 25l-.4.2.3.3 3.2 1.9.5.1m-12.8-9.9c2.2 0 4-.3 6-.9 1.2-.4 2.4-1 3.4-2 1.1-.8 1.4-2.1.5-3.3-.4-.6-1-1.2-1.6-1.5l-8-4.9c-.4-.2-.7-.2-1.2 0l-3.7 1.6-5 2-5.7 2.3-2.9 1-2.5 1-.4.3.3.3 3.2 1.9c.3.1.5.1.8 0l4.6-1.8a1 1 0 011 0l2.4 1.5c2.8 1.6 5.8 2.6 8.8 2.5M54 35.2h1.7c2-.2 3.7-.7 5.5-1.4 1-.5 2-1 2.8-2 .4-.6.6-1.2.4-2a4 4 0 00-2-2.4l-8.4-5a167.8 167.8 0 00-4.4 1.4L44.2 26l-5.5 2-5.9 2.4-.3.2.2.3 2.3 1.4 1 .5c.2.1.4.2.6.1l2-.7 3-1.3h.7l2 1.3c3 1.9 6.2 3 9.7 3M14.4.2a66.3 66.3 0 0127 6c4.7 2 9.3 4.3 13.7 7.1 2.6 1.7 5.2 3.5 7.6 5.6 2.4 2.2 4.8 4.6 6.7 7.4a15 15 0 012.4 5.5 6.9 6.9 0 01-3.1 7.4c-2 1.4-4.3 2.1-6.8 2.5a52.8 52.8 0 01-14.5-.7 86.3 86.3 0 01-39-18.4 32.5 32.5 0 01-7-8.7C.5 12.3 0 10.5 0 8.6 0 6.9.5 5.3 1.7 4c1-1 2.3-1.9 3.7-2.4A21 21 0 0111.9.3l2.5-.2" />
            <path id="spinupwp-stack-fill-44" d="M52.7 32.2c-1.6 0-2.9-.5-4.1-1.1-1-.4-1.8-1-2.7-1.5l-.2-.2.2-.2a1919.6 1919.6 0 018.5-3l3.6 2 .3.4c.8.7.9 1.3-.2 2l-2.6 1c-1 .4-2 .8-2.8.6" />
            <path id="spinupwp-stack-fill-64" d="M22.5 14.7a8 8 0 01-4-1l-2.4-1.4-.3-.3.3-.2 4-1.6L23.4 9c.5-.2 1-.3 1.4 0l3 2c1.3.8 1.2 1.5 0 2.2-1.6 1-3.4 1.5-5.3 1.6" />
        </g>
    </g>
    <g id="spinupwp-stack-nginx" fill-rule="evenodd" transform="translate(182 279.4)">
        <g id="spinupwp-stack-g11" stroke="none" stroke-width="1">
            <use id="spinupwp-stack-cube-bottom4" width="237" height="140" fill="#BAC6E3" transform="translate(8.8 42.5)" xlink:href="#spinupwp-stack-cube-bottom-a" />
            <path id="spinupwp-stack-cube-shadow4" fill="#D5DDF4" d="M117 59h120v12c0 2.7-1.4 4.3-2.7 5.2l-.4.3-.3.2-.2.2-.5.2-.4.3L127 137.6A18 18 0 01117 140V59z" transform="translate(8.8 42.4)" />
            <path id="spinupwp-stack-cube-outline4" fill="#FFF" d="M137.2 32.2l104.4 60.5a9 9 0 010 15.6l-105.3 61.4a18 18 0 01-18.2 0L13.4 108.8a9 9 0 010-15.6l105.8-61a18 18 0 0118 0z" />
            <path id="spinupwp-stack-cube-top4" fill="#E4E9F6" d="M137 36.9l100.6 56.3a9 9 0 010 15.7l-101.4 58a18 18 0 01-18 0l-100.9-58a9 9 0 01.2-15.6l102-56.4c5.4-3 12-3 17.4 0z" transform="translate(-1.5)" />
        </g>
        <g id="spinupwp-stack-nginx-logo-active" fill="#7381A8" stroke="none" stroke-width="1" opacity=".6" transform="translate(74 71)">
            <path id="spinupwp-stack-combined-shape2" d="M68 .1l11 1.7L94.2 4l1 .2c.7.2 1.2.7 1.6 1.4l3.7 8 1.6 3.5 1.6 3.4c.5 1 .2 1.6-.7 2.2L97 25.9l-13.4 7.7c-.8.5-1.6 1-2.6 1l-2.8-.4-9.2-1.4L55 30.6l-2.3-.4c-1-.2-1.6-.8-2-1.7l-4.9-10.6-1.8-4c-.4-1-.2-1.5.6-2L54 6.4 63.3 1c1.5-1 3-1.2 4.7-.9zm3 7.3l-11.2 6.5-3.5 2c-.5.3-.8.7-.8 1.3 0 .6.4 1 1 1.3h.2a5 5 0 001.7.4h.3c.7 0 1.4-.2 2-.6l5-2.8 5.8-3.4v.5l-1 6.7-.8 4.9c-.1.5-.1 1 .2 1.5.7 1.2 2.3 2 3.9 2h.4c1-.2 1.8-.6 2.7-1L91 18.5c1-.6 1.1-1.7.1-2.3a2 2 0 00-.4-.3 6 6 0 00-1.8-.4h-.2c-.5 0-1 .1-1.4.3l-3.2 1.7-7.8 4.5-.6.2h-.2l.2-.9 1.8-11c.1-1-.2-1.7-1-2.4-.7-.7-1.8-1-2.8-1.1h-.2c-1 0-1.9.2-2.5.6z" />
            <path id="spinupwp-stack-fill-33" d="M42.1 41.9l-7 4c-.6.4-1.4.7-2 1.2-.4.2-.6.2-1 0l-2-1.2 4.6-2.6 9.7-5.6c.4-.2.6-.2 1 0 .6.5 1.2.8 2 1.2l-4.1 8.6.1.2.5-.3 8-4.5c1.1-.7 1.1-.7 2.3 0l1.2.7-.3.3-13.8 7.9c-.4.2-.7.2-1.2 0l-1.8-1.1 4-8.7a273981 273981 0 00-.2-.1" />
            <path id="spinupwp-stack-fill-53" d="M17 21.3L13 30l.6-.3 8.3-4.9c.6-.3 1-.3 1.4 0 .5.4 1.1.7 1.8 1l-2.4 1.4-8 4.7-3.9 2.2h-.6L8.1 33l4-8.7h-.2l-2.3 1.3L3 29.4c-.4.3-.7.3-1.1 0L0 28.3 2.2 27 14 20c.4-.2.7-.2 1 0l2 1.2" />
            <path id="spinupwp-stack-fill-73" d="M30.7 35.3l.9-.6c.9-.6 1-1.5.2-2.2a6.6 6.6 0 00-5.1-1.8c-.6 0-1.2.3-1.7.5l-5.3 3c0 .2-.2.2-.3.3-1.2.8-1.2 1.5-.2 2.4 1 1 2.4 1.6 4 1.7 1.2.1 2.3-.2 3.4-1l-3.3-2a53.3 53.3 0 002-1.1c.4-.1.6-.2.8 0l5.3 3 .1.3-1.7 1-1 .6a8.6 8.6 0 01-5.3 1.4c-3-.2-5.5-1.2-7.6-3.2-1.6-1.6-1.3-3.2.4-4.3 1.4-1 2.9-1.7 4.4-2.6l2-1.1a8.6 8.6 0 014.9-1c2.5.1 4.8 1 6.8 2.6.5.5 1 1 1.4 1.7.6 1 .2 2-.8 2.8-1.6 1.3-1.6 1.2-3.3.2l-1-.6" />
            <path id="spinupwp-stack-fill-95" d="M68.7 51.5l-4.4.6-5.5.7-1.4.2c-.4 0-.6.2-.8.6l-2.1 5-.5 1.1h-.3l-2.3-1.4c-.3-.2-.5-.3-.3-.7l1.8-4.2-1.3.2-6.3.8c-.3 0-.6 0-.9-.2L42 52.8l2.8-.5 5.2-.6 3-.4c.7-.1 1-.4 1.2-1l2.5-6 3 1.8-1.9 4.6c.7 0 1.3 0 1.9-.2l5.8-.7c.3 0 .7 0 1 .2l2.2 1.3v.2" />
            <path id="spinupwp-stack-fill-115" d="M43 36.4l-3 1.8c-3.8 2.1-7.5 4.2-11.1 6.4-.4.2-.7.2-1 0l-2.2-1.3.5-.3 13.6-7.8c.4-.3.7-.3 1.1 0l2.1 1.2" />
        </g>
        <path fill="none" stroke="#6EE2D0" stroke-linecap="round" stroke-width="2" d="M120.1 36.2c5-2.8 11.1-2.8 16 0h0L237 92.5a7.5 7.5 0 010 13h0l-101.5 58c-5 3-11.3 3-16.4 0h0L18.1 105.7a7.5 7.5 0 01.1-13h0z" opacity="0" style="animation:spinupwp-stack-nginx-border_c_o 7060ms linear infinite normal forwards" />
        <g stroke="none" stroke-width="1" opacity="0" transform="translate(74 71)" style="animation:spinupwp-stack-nginx-logo_c_o 7060ms linear infinite normal forwards;">
            <path id="spinupwp-stack-fill-16" fill="#0A973B" d="M75.6 22.2l.2-.9 1.8-11c.1-1-.2-1.7-1-2.4-1.5-1.4-4.1-1.3-5.5-.5l-11.3 6.5-3.5 2c-.5.3-.8.7-.8 1.3 0 .6.4 1 1 1.3h.2c1.4.6 2.8.5 4-.2l5-2.8 5.8-3.4v.5l-1 6.7-.8 4.9c-.1.5-.1 1 .2 1.5.8 1.3 2.6 2.2 4.3 2 1-.2 1.8-.6 2.7-1L91 18.5c1-.6 1.1-1.7.1-2.3a2 2 0 00-.4-.3c-1.1-.4-2.3-.6-3.4-.1l-3.2 1.7-7.8 4.5-.8.2M81 34.6l-2.8-.4-9.2-1.4L55 30.6l-2.3-.4c-1-.2-1.6-.8-2-1.7l-4.9-10.6-1.8-4c-.4-1-.2-1.5.6-2L54 6.4 63.3 1c1.5-1 3-1.2 4.7-.9l11 1.7L94.2 4l1 .2c.7.2 1.2.7 1.6 1.4l3.7 8 3.2 7c.5 1 .2 1.5-.7 2L97 26l-13.4 7.7c-.8.5-1.6 1-2.6 1" />
            <path id="spinupwp-stack-fill-34" fill="#4D4C4C" d="M42.1 41.9l-7 4c-.6.4-1.4.7-2 1.2-.4.2-.6.2-1 0l-2-1.2 4.6-2.6 9.7-5.6c.4-.2.6-.2 1 0 .6.5 1.2.8 2 1.2l-4.1 8.6.1.2.5-.3 8-4.5c1.1-.7 1.1-.7 2.3 0l1.2.7-.3.3-13.8 7.9c-.4.2-.7.2-1.2 0l-1.8-1.1 4-8.7a273981 273981 0 00-.2-.1" />
            <path id="spinupwp-stack-fill-54" fill="#4D4C4C" d="M17 21.3L13 30l.6-.3 8.3-4.9c.6-.3 1-.3 1.4 0 .5.4 1.1.7 1.8 1l-2.4 1.4-8 4.7-3.9 2.2h-.6L8.1 33l4-8.7h-.2l-2.3 1.3L3 29.4c-.4.3-.7.3-1.1 0L0 28.3 2.2 27 14 20c.4-.2.7-.2 1 0l2 1.2" />
            <path id="spinupwp-stack-fill-74" fill="#4D4C4C" d="M30.7 35.3l.9-.6c.9-.6 1-1.5.2-2.2a6.6 6.6 0 00-5.1-1.8c-.6 0-1.2.3-1.7.5l-5.3 3c0 .2-.2.2-.3.3-1.2.8-1.2 1.5-.2 2.4 1 1 2.4 1.6 4 1.7 1.2.1 2.3-.2 3.4-1l-3.3-2a53.3 53.3 0 002-1.1c.4-.1.6-.2.8 0l5.3 3 .1.3-1.7 1-1 .6a8.6 8.6 0 01-5.3 1.4c-3-.2-5.5-1.2-7.6-3.2-1.6-1.6-1.3-3.2.4-4.3 1.4-1 2.9-1.7 4.4-2.6l2-1.1a8.6 8.6 0 014.9-1c2.5.1 4.8 1 6.8 2.6.5.5 1 1 1.4 1.7.6 1 .2 2-.8 2.8-1.6 1.3-1.6 1.2-3.3.2l-1-.6" />
            <path id="spinupwp-stack-fill-96" fill="#4D4C4C" d="M68.7 51.5l-4.4.6-5.5.7-1.4.2c-.4 0-.6.2-.8.6l-2.1 5-.5 1.1h-.3l-2.3-1.4c-.3-.2-.5-.3-.3-.7l1.8-4.2-1.3.2-6.3.8c-.3 0-.6 0-.9-.2L42 52.8l2.8-.5 5.2-.6 3-.4c.7-.1 1-.4 1.2-1l2.5-6 3 1.8-1.9 4.6c.7 0 1.3 0 1.9-.2l5.8-.7c.3 0 .7 0 1 .2l2.2 1.3v.2" />
            <path id="spinupwp-stack-fill-116" fill="#4D4C4C" d="M43 36.4l-3 1.8c-3.8 2.1-7.5 4.2-11.1 6.4-.4.2-.7.2-1 0l-2.2-1.3.5-.3 13.6-7.8c.4-.3.7-.3 1.1 0l2.1 1.2" />
            <path id="spinupwp-stack-fill-135" fill="#FDFDFD" d="M75.6 22.2c.3 0 .6 0 .8-.2l7.8-4.5 3.2-1.7c1.1-.5 2.3-.3 3.4.1l.4.3c1 .6 1 1.7 0 2.3l-14.3 8.2c-.9.4-1.7.8-2.7 1-1.7.2-3.5-.7-4.3-2-.3-.5-.3-1-.2-1.5l.8-5 1-6.6V12l-5.9 3.4c-1.6 1-3.2 2-4.8 2.8a4.7 4.7 0 01-4.4.2c-.5-.3-1-.7-1-1.3 0-.6.4-1 .9-1.3l3.5-2L71 7.4c1.4-.8 4-1 5.6.5.7.7 1 1.4.9 2.4l-1.8 11-.2.9" />
        </g>
    </g>
    <g id="spinupwp-stack-user" fill-rule="evenodd" transform="translate(17 377.4)">
        <g id="spinupwp-stack-g12" stroke="none" stroke-width="1" transform="translate(0 -2)">
            <use id="spinupwp-stack-cube-bottom5" width="237" height="140" fill="#BAC6E3" transform="translate(8.8 42.5)" xlink:href="#spinupwp-stack-cube-bottom-a" />
            <path id="spinupwp-stack-cube-shadow5" fill="#D5DDF4" d="M117 59h120v12c0 2.7-1.4 4.3-2.7 5.2l-.4.3-.3.2-.2.2-.5.2-.4.3L127 137.6A18 18 0 01117 140V59z" transform="translate(8.8 42.4)" />
            <path id="spinupwp-stack-cube-outline5" fill="#FFF" d="M137.2 32.2l104.4 60.5a9 9 0 010 15.6l-105.3 61.4a18 18 0 01-18.2 0L13.4 108.8a9 9 0 010-15.6l105.8-61a18 18 0 0118 0z" />
            <path id="spinupwp-stack-cube-top5" fill="#E4E9F6" d="M137.3 36.9l101 56.3a9 9 0 010 15.7l-101.8 58a18 18 0 01-18 0l-101.1-58a9 9 0 010-15.6l102.3-56.4a18 18 0 0117.6 0z" transform="translate(-1.5)" />
        </g>
        <path id="spinupwp-stack-cube-active-2" fill="none" stroke="#6EE2D0" stroke-linecap="round" stroke-width="2" d="M120.6 35.2c5-2.8 11.1-2.8 16 0h0l100.8 56.3a7.5 7.5 0 010 13h0l-101.5 58c-5 3-11.3 3-16.4 0h0L18.6 104.7a7.5 7.5 0 01.1-13h0z" />
        <path id="spinupwp-stack-user-logo" fill="#7381A8" stroke="none" stroke-width="1" d="M101.3 99l.2 1.6c.4 2.2 1.5 4 3 5.6 1.1 1.2 2.5 2.3 4 3.2a27.3 27.3 0 008.8 3.6l2.2.5 1.3.2 1.7.2a39.6 39.6 0 004.7.3h3.2l.2-.3v-.5c-.2-1.1-.8-2-1.6-2.9-.8-.8-1.7-1.4-2.7-2l-1.4-.6-1.6-.4a69 69 0 01-3.5-1.2c-1.5-.6-3-1.4-4.2-2.3-1.2-.9-2.3-2-3.1-3.2l-.5-.5c-1-.6-2.1-1.3-3.3-1.7a29.7 29.7 0 00-4.6-1.1l-2.4-.2-.2.2-.2 1.6m31.2-11.3c-1 0-1.9 0-2.7.2a21.6 21.6 0 00-3.8.7l-2.6.8c-1.6.7-3 1.5-4.2 2.8l-.3.4-.8 1-.4.9c-.2.6-.3 1.1-.3 1.7 0 1 .2 1.8.6 2.6a8.8 8.8 0 003.3 3.2c1 .7 2 1.2 3 1.5l2.8.8 4 .5c1.5.1 3 0 4.4-.2h1l2-.6c.7-.2 1.4-.3 2-.6a43.3 43.3 0 004.3-2.5c.5-.5 1-1 1.3-1.5a6 6 0 001-2.5v-1.6c-.2-1-.7-1.8-1.3-2.6-1.2-1.6-3-2.6-4.8-3.4-1.6-.6-3.3-1-5-1.3l-3.5-.3m-3.3 30.2h-2.5-.2l-3-.2-2.5-.3-2-.2a82.4 82.4 0 01-6.3-1.5l-3.5-1.2a30.2 30.2 0 01-9.9-6.2 14.7 14.7 0 01-4.2-7.7l-.1-2.2.1-1.4a11.5 11.5 0 01.8-2.6l.8-1.6 1-1.6 2-2.1 1.6-1.3.4-.4L104 86c1.5-1 3.1-1.7 4.8-2.4l2.1-.8.8-.3 2.1-.6 2-.5a73.9 73.9 0 017.7-1.2l3-.2h3.3l2.4.1 2.5.3 2 .2 2.5.5c.8.2 1.7.3 2.5.6l4 1.2a33.8 33.8 0 0110.6 6.2c1.2 1.1 2.2 2.3 3 3.8a12.4 12.4 0 011.8 5.3c0 1 0 1.9-.2 2.8a21 21 0 01-1.2 3.2 17.7 17.7 0 01-1.2 2.2l-.8 1-1.5 1.5c-.7.8-1.6 1.4-2.5 2-1 .8-2.2 1.4-3.4 2a31 31 0 01-5 2.3l-3.1 1a65.9 65.9 0 01-10.7 1.7h-1.9l-.3.1" />
    </g>
</svg>

 

Style CSS
@keyframes spinupwp-stack-glow-4_c_o {
  0%,
  12.747875%,
  6.090652%,
  to {
    opacity: 0;
  }
  11.473088%,
  7.365439% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-glow-3_c_o {
  0%,
  14.022663%,
  4.674221%,
  53.399433%,
  58.78187%,
  74.929178%,
  80.311615%,
  to {
    opacity: 0;
  }
  12.747875%,
  54.815864%,
  57.507082%,
  6.090652%,
  76.345609%,
  79.036827% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-glow-2_c_o {
  0%,
  15.29745%,
  3.399433%,
  52.124646%,
  60.056657%,
  73.654391%,
  81.586402%,
  to {
    opacity: 0;
  }
  14.022663%,
  4.674221%,
  53.399433%,
  58.78187%,
  74.929178%,
  80.311615% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-glow-1_c_o {
  0%,
  16.572238%,
  18.130312%,
  2.124646%,
  23.512748%,
  26.345609%,
  31.728045%,
  34.560907%,
  39.943343%,
  42.634561%,
  48.016997%,
  50.849858%,
  61.331445%,
  64.164306%,
  69.546742%,
  72.379603%,
  82.86119%,
  85.694051%,
  91.076487%,
  93.909348%,
  99.291785%,
  to {
    opacity: 0;
  }
  15.29745%,
  19.405099%,
  22.23796%,
  27.620397%,
  3.399433%,
  30.453258%,
  35.835694%,
  38.668555%,
  43.909348%,
  46.74221%,
  52.124646%,
  60.056657%,
  65.439093%,
  68.271955%,
  73.654391%,
  81.586402%,
  86.968839%,
  89.8017%,
  95.184136%,
  98.016997% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-mysql-border_c_o {
  0%,
  12.181303%,
  6.798867%,
  to {
    opacity: 0;
  }
  10.906516%,
  8.073654% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-mysql-logo_c_o {
  0%,
  12.181303%,
  6.798867%,
  to {
    opacity: 0;
  }
  10.906516%,
  8.073654% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-redis-border_c_o {
  0%,
  13.456091%,
  5.524079%,
  54.107649%,
  59.490085%,
  75.637394%,
  81.01983%,
  to {
    opacity: 0;
  }
  12.181303%,
  55.382436%,
  58.215297%,
  6.798867%,
  76.912181%,
  79.745042% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-redis-logo_c_o {
  0%,
  13.456091%,
  5.524079%,
  54.107649%,
  59.490085%,
  75.637394%,
  81.01983%,
  to {
    opacity: 0;
  }
  12.181303%,
  55.382436%,
  58.215297%,
  6.798867%,
  76.912181%,
  79.745042% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-php-border_c_o {
  0%,
  14.730878%,
  4.107649%,
  52.832861%,
  60.764873%,
  74.362606%,
  82.294618%,
  to {
    opacity: 0;
  }
  13.456091%,
  5.382436%,
  54.107649%,
  59.490085%,
  75.637394%,
  81.01983% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-php-logo_c_o {
  0%,
  14.730878%,
  4.107649%,
  52.832861%,
  60.764873%,
  74.362606%,
  82.294618%,
  to {
    opacity: 0;
  }
  13.456091%,
  5.382436%,
  54.107649%,
  59.490085%,
  75.637394%,
  81.01983% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-nginx-border_c_o {
  0%,
  16.005666%,
  18.838527%,
  2.832861%,
  24.220963%,
  27.053824%,
  32.436261%,
  35.269122%,
  40.509915%,
  43.342776%,
  48.725212%,
  51.558074%,
  62.03966%,
  64.872521%,
  70.254958%,
  73.087819%,
  83.569405%,
  86.402266%,
  91.784703%,
  94.617564%,
  to {
    opacity: 0;
  }
  14.730878%,
  20.113314%,
  22.946176%,
  28.328612%,
  31.161473%,
  36.543909%,
  39.235127%,
  4.107649%,
  44.617564%,
  47.450425%,
  52.832861%,
  60.764873%,
  66.147309%,
  68.98017%,
  74.362606%,
  82.294618%,
  87.677054%,
  90.509915%,
  95.892351%,
  98.725212% {
    opacity: 1;
  }
}
@keyframes spinupwp-stack-nginx-logo_c_o {
  0%,
  16.005666%,
  18.838527%,
  2.832861%,
  24.220963%,
  27.053824%,
  32.436261%,
  35.269122%,
  40.509915%,
  43.342776%,
  48.725212%,
  51.558074%,
  62.03966%,
  64.872521%,
  70.254958%,
  73.087819%,
  83.569405%,
  86.402266%,
  91.784703%,
  94.617564%,
  to {
    opacity: 0;
  }
  14.730878%,
  20.113314%,
  22.946176%,
  28.328612%,
  31.161473%,
  36.543909%,
  39.235127%,
  4.107649%,
  44.617564%,
  47.450425%,
  52.832861%,
  60.764873%,
  66.147309%,
  68.98017%,
  74.362606%,
  82.294618%,
  87.677054%,
  90.509915%,
  95.892351%,
  98.725212% {
    opacity: 1;
  }
}

 

Tampilannya kurang lebih bisa dilihat dibawah ini.

 

 

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.

Referensi :
codepen.io/shamim539/pen/ExLZrQG
bootstrap css
Image by DilokaStudio on Freepik

Postingan Terkait

Komentar

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

Scroll to Top