본문 바로가기
svg

svg pattern:animation

by peach1227 2023. 12. 26.
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
    <defs>
        <pattern id="pattern-0" viewBox="0 0 100 100" patternUnits="userSpaceOnUse" preserveAspectRatio="none" width="100" height="100" bx:pinned="true">
            <title>snow_1</title>
            <g transform="matrix(0.3226, 0, 0, 0.3226, -118.853384, -132.61705)" style="transform-origin: 162.997px 182.5px;">
                <defs></defs>
                <circle cx="136.7" cy="240.3" r="75.162" fill="#FEFEFE"></circle>
                <path d="m132.61 199.98c4.07-2.58 10.43-0.68 11.99 4.01 1.35 3.1 0.32 6.77-1.65 9.36-2.24 2.66-6.21 2.57-9.31 1.84-5.84-2.58-6.23-11.72-1.03-15.21z" stroke="#8CC63E" stroke-width=".0938" fill="#8CC63E"></path>
                <path d="m133.31 243.63c4.33-2.44 10.44 0.31 11.63 5.08 1.45 4.73-1.92 11.02-7.29 10.86-4.04 0.59-8.21-2.43-8.5-6.58-0.81-3.67 0.79-7.59 4.16-9.36z" stroke="#8CC63E" stroke-width=".0938" fill="#8CC63E"></path>
                <path d="m104.43 49.568c22.26-0.01 44.53 0.04 66.8-0.03 0.07 12.39 0 24.79 0.03 37.18-22.28 0.07-44.55 0.03-66.83 0 0.03-12.38 0.01-24.77 0-37.15z" stroke="#000101" stroke-width=".0938" style="fill: rgb(221, 11, 39);"></path>
                <path d="m177.71 109.26c-26.65-0.01-53.3-0.09-79.95 0.04-0.7535-0.0104-1.5071-0.0049-2.2606-0.011-5.3538 8.0693-8.4792 17.745-8.4792 28.155 0 28.167 22.834 51 51 51s51-22.833 51-51c0-10.422-3.1324-20.109-8.4978-28.184-0.937 2e-3 -1.8755-0.0032-2.8124-1e-4z" fill="#FEFEFE"></path>
                <path d="m180.52 109.26c5.1233-0.0117 10.246-0.0169 15.378 0 0-2.71-0.01-5.42-0.06-8.14-7.3337 0.0095-14.668 0.0188-22.002 0.0276 2.4957 2.463 4.737 5.1809 6.6847 8.1124z" stroke="#000101" stroke-width=".0938" fill="#000101"></path>
                <path d="m102.2 101.15c-7.2705-0.0123-14.541-0.0245-21.811-0.0491 0.01 2.72 0.01 5.44 0 8.16 5.0364 0.0174 10.073-0.0121 15.109 0.0289 1.9518-2.9417 4.1986-5.6692 6.7017-8.1398z" stroke="#000101" stroke-width=".0938" fill="#000101"></path>
                <path d="m177.71 109.26c0.9369-0.0031 1.8754 0.0021 2.8123 0-1.9478-2.9315-4.189-5.6494-6.6847-8.1124-23.878 0.0289-47.758 0.042-71.636 0.0015-2.5031 2.4706-4.7499 5.1981-6.7017 8.1398 0.7535 0.0062 1.5071 7e-4 2.2606 0.011 26.65-0.1299 53.3-0.0499 79.95-0.0399z" stroke="#000101" stroke-width=".0938" fill="#000101"></path>
                <path d="m127.93 146.17c1.42-5.56 8.08-5.84 12.76-5.65 3.44-0.23 6.6 1.21 9.3 3.21 0.07 0.94 0.14 1.89 0.22 2.83-6.12 5.35-16.34 5.09-22.28-0.39z" stroke="#ED5C2B" stroke-width=".0938" fill="#ED5C2B"></path>
                <path d="m98.057 169.09c2.46-0.47 4.75 0.61 6.93 1.59 21.04 9.2 45.91 8.89 66.76-0.67 2.32-1.19 4.91-1.58 7.38-0.62 2.82 2.32 5.73 5.54 5.2 9.49 0.37 1.71-1.05 4.35 0.9 5.35 4.71 2.63 9.77 5.43 15.34 5.19-0.99 0.28-1.97 0.56-2.94 0.85 4.36 0.44 8.63 1.45 12.93 2.29 14.44 1.51 29.04-1.47 42.37-7 2.9-1.58 5.76-3.44 9.18-3.54 1.01 2.61 1.79 5.31 2.35 8.05-18.25 10.37-39.37 17.27-60.56 14.56-1.9-0.12-3.79-0.05-5.68-0.07 0.85-0.57 3.38-1.55 0.79-1.38l-1.04-0.01c-10.42-0.78-19.97-6.17-28.45-11.98-11.74 29.37-10.34 63.69 3.77 91.99-3.67 2.28-7.42 4.42-11.24 6.46-14.56-29.03-16.81-63.6-7.62-94.63-20.12 3.42-41.24 0.46-59.66-8.31-2.71-1.13-4.08-3.79-4.61-6.55 0.13-4.89 3.23-9.46 7.9-11.06z" stroke="#C1272D" stroke-width=".0938" fill="#C1272D"></path>
                <path d="m134.09 221.4c5.05-2.01 11.15 2.03 11.11 7.48 0.72 5.6-5.6 11.08-10.93 8.55-7.05-2.23-7.09-13.56-0.18-16.03z" stroke="#C1272D" stroke-width=".0938" fill="#C1272D"></path>
                <path d="m135.07 266.48c4.12-1.05 8.59 1.52 9.72 5.62 1.55 4.38-1 9.83-5.63 10.96-4.99 1.57-10.56-2.91-10.22-8.09-0.26-3.77 2.44-7.62 6.13-8.49z" stroke="#C1272D" stroke-width=".0938" fill="#C1272D"></path>
                <circle cx="167.52" cy="146.97" r="1.9167" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="112.64" cy="146.78" r="1.9167" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="164.1" cy="152.93" r="2.4693" stroke="#000101" stroke-width=".0991" fill="#000101"></circle>
                <circle cx="115.79" cy="152.87" r="2.4693" stroke="#000101" stroke-width=".0991" fill="#000101"></circle>
                <circle cx="157.58" cy="159.05" r="2.7917" stroke="#000101" stroke-width=".0997" fill="#000101"></circle>
                <circle cx="120.45" cy="159.05" r="2.7917" stroke="#000101" stroke-width=".0997" fill="#000101"></circle>
                <circle cx="149.27" cy="161.98" r="3.75" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="139.2" cy="163.36" r="3.75" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="128.89" cy="161.86" r="3.8125" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="124.7" cy="129.92" r="3.375" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <circle cx="154.64" cy="129.8" r="3.375" stroke="#000101" stroke-width=".0938" fill="#000101"></circle>
                <animateTransform type="skewY" additive="sum" attributeName="transform" values="-15; 15" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
            </g>
            <animateTransform type="translate" additive="sum" attributeName="patternTransform" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" values="250;250"></animateTransform>
            <animateTransform type="scale" additive="sum" attributeName="patternTransform" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" values="1;2"></animateTransform>
            <animateTransform type="translate" additive="sum" attributeName="patternTransform" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite" values="-250;-250"></animateTransform>
        </pattern>
    </defs>
    <rect x="68.501" y="139.344" width="333.138" height="228.923" style="fill: url(#pattern-0); stroke: rgb(0, 0, 0);"></rect>
</svg>




    
        
            snow_1
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
            
            
            
        
    
    



반응형