SVG 그래픽 로고가 그려지는 애니메이션

exercise / SVG

그래픽 로고가 그려지는 애니메이션 만들기.

css bar animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 80">
    <defs>
        <style type="text/css">
            @keyframes logo-ani {
                from {stroke-dashoffset: 1237;}
                to {stroke-dashoffset: 0;}
            }
            
            #mask{fill:none;stroke:#ffffff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            
            .logo {
                stroke-dasharray: 1237;
                animation: logo-ani 10s linear;
            }
        </style>
        <mask id="mask">
            <g>
                <path class="logo" d="M23,27l-2,21l26-8l-8-23l-8,49l18-32l5-5c0,0,7,1,7,6s1,6,0,10s-4,8-6,9s-6,1-6-1s1-9,2-13s2-6,5-6s14-8,14-8
                l-2.5,22.5L94,40L84,21l-8,45l33-45v43l-5-29l5.5-6.5l12.8,29.3l0.9-46.5l12.4,29.2c0,0-1,6-5,11c0,0-1,4,1,5s3,0,4-2s4-6,4-9
                s1-7,0-8s4-3,4-3l-1,3v6l23-5l-11-19l-3,36l25-20l3-6l20-4l-15,6l-3,28l-4-17l27-6l3,4c0,0-4,7-4,8s-2,6-1,7s3,1,4,0s3-4,4-8
                s2-7,1-9s-2-3-2-3l6-2c0,0,3-1,3,4s-2,8-1,11s2,3,3,3s4-5,5-7s3-12,3-12s-2,17-1,20s3,5,3,5s3-7,4-9s10-13,10-13s-3,20-2,22
                s7-20,8-20s3,17,4,17s2-3,2-3l13-29c0,0,6-3,5,1s-4,18-4,20s1,16,1,16l-1-16c0,0-5,2-6,3s-4,6-4,7s9,2,10,2s13-2,13-2"/>
             </g>
        </mask>


    </defs>

    <g mask="url(#mask)">
        <path d="M38.5,26.9c-0.9,5.3-1.6,9.8-2.3,15.2c1.9-0.4,3.6-0.9,5.4-1.3c0.3-0.1,0.6-0.2,0.9-0.2c1.3-0.3,1.8-0.4,5.2-0.5
            c-1.2,1-1.3,1.2-1.7,1.4c-0.3,0.2-0.8,0.4-1.2,0.8l-9.2,2.7c-0.8,3.8-1.3,7.3-2,11c-0.5,2.7-1,5.7-1.6,8.3c-0.4,0.4-0.7,0.6-1,0.3
            c-0.1,0-0.2-0.1-0.2-0.1L30,63.1c0-2.1,0.2-3.8,0.5-5.5c0.2-0.9,0.3-1.9,0.4-2.9l0.8-4c0.1-0.6,0.2-1.3,0.3-2
            c0.2-1,0.3-1.7,0.4-2.7c-0.8,0.2-1.6,0.4-2.3,0.6l-2,0.7c-1.9,0.6-3.7,1.2-5.5,2.4c-1.4,0-2.5-0.1-2.9-1.6c0-0.8,0.3-1,0.6-1.3
            c0.2-0.1,0.2-0.2,0.4-0.5c0.7-4.6,1.1-10.4,1.3-15.3c0.8-0.4,1.6-0.4,2.1-0.3c0.1,0,0.3,0.1,0.4,0.1c0.7,1.4,0.6,2.5,0.5,3.7
            c-0.1,1.1-0.1,2.2-0.3,3.2v0.8c-0.1,1.8-0.3,3.5-0.5,5.3c-0.1,0.9-0.1,0.9-0.2,1.8c1.2-0.3,2.4-0.7,3.7-1.1c1.8-0.6,3.2-1.1,5-1.5
            c0.3-1.6,0.6-3.4,0.8-5.1c0.5-3.3,1-6.8,1.6-10.1v-0.3c0.1-0.6,0.2-1.4,0.9-2h0.5c0.9-0.1,1.8-0.1,1.9,1.3V26.9z"/>
        <path d="M62.2,40.3c0,2.4-0.3,4.8-0.8,6.8c-0.7,2.4-2.4,5.1-4.3,7c-1.1,0.8-2.7,1.6-4.3,1.6c-0.7,0-1.4-0.1-1.9-0.4
            c-0.9-0.4-1.5-0.7-2-1.6c-0.4-1.4-0.6-2.7-0.6-3.8c0-2.6,0.6-5,1.3-7.3c0.3-0.9,0.6-1.9,0.8-2.8c0.4-0.7,0.7-1.4,1-2.3
            c0.9-2.4,2-5,5.3-4.3c0.7,0.6,0.5,0.7,0.5,1.2V35c-2,0.8-2.6,2.4-3.2,3.9c-0.1,0.4-0.3,0.9-0.4,1.3c-0.2,0.8-0.4,1.6-0.7,2.4
            c-0.6,2-1.4,4.5-1.4,6.5c0,1.1,0.2,2.3,0.6,3.3c0.4,0.3,1.4,0.6,1.9,0.3c3.8-2.9,5.1-7.4,5.1-12.2c0-1.8-0.2-3.7-0.4-5.4
            c0-0.1-0.1-0.7-0.2-0.8c-0.3-1.1-0.5-2-1.7-2.3c-0.8-0.5-1.7-0.4-2.5-0.4c-0.6,0-1.4-0.1-2.4-0.3c1.7-2.4,3.4-2.3,5.2-2.2
            c1.2,0.5,2.3,0.9,3.1,1.9C61.6,33.7,62.2,37,62.2,40.3z"/>
        <path d="M84.4,26.9c-0.9,5.3-1.6,9.8-2.3,15.2c1.9-0.4,3.6-0.9,5.4-1.3c0.3-0.1,0.6-0.2,0.9-0.2c1.3-0.3,1.8-0.4,5.2-0.5
            c-1.2,1-1.3,1.2-1.7,1.4c-0.3,0.2-0.8,0.4-1.2,0.8l-9.2,2.7c-0.8,3.8-1.3,7.3-2,11c-0.5,2.7-1,5.7-1.6,8.3c-0.4,0.4-0.7,0.6-1,0.3
            c-0.1,0-0.2-0.1-0.2-0.1l-0.9-1.6c0-2.1,0.2-3.8,0.5-5.5c0.2-0.9,0.3-1.9,0.4-2.9l0.8-4c0.1-0.6,0.2-1.3,0.3-2
            c0.2-1,0.3-1.7,0.4-2.7c-0.8,0.2-1.6,0.4-2.3,0.6l-2,0.7c-1.9,0.6-3.7,1.2-5.5,2.4c-1.4,0-2.5-0.1-2.9-1.6c0-0.8,0.3-1,0.6-1.3
            c0.2-0.1,0.2-0.2,0.4-0.5c0.7-4.6,1.1-10.4,1.3-15.3c0.8-0.4,1.6-0.4,2.1-0.3c0.1,0,0.3,0.1,0.4,0.1c0.7,1.4,0.6,2.5,0.5,3.7
            c-0.1,1.1-0.1,2.2-0.3,3.2v0.8c-0.1,1.8-0.3,3.5-0.5,5.3c-0.1,0.9-0.1,0.9-0.2,1.8c1.2-0.3,2.4-0.7,3.7-1.1c1.8-0.6,3.2-1.1,5-1.5
            c0.3-1.6,0.6-3.4,0.8-5.1c0.5-3.3,1-6.8,1.6-10.1v-0.3c0.1-0.6,0.2-1.4,0.9-2h0.5c0.9-0.1,1.8-0.1,1.9,1.3V26.9z"/>
        <path d="M125.3,18.6c-1.1,2.2-1.2,4.5-1.4,6.9c-0.1,1.5-0.2,3.1-0.5,4.4c-0.1,1.4-0.1,2.7-0.2,4.2c0.1,1.6,0.1,3.8,0.2,5.4
            c0.2,4,0.3,8.6,0.3,12.4c0.1,1.9,0.2,3.5,0.7,5.7c-1.1,0.4-2,0.4-2.8,0.1c-1.2-1.5-2.2-3.1-3.2-4.7c-0.4-0.6-0.8-1.3-1.2-1.8
            c-2.1-3.7-4.5-9.5-6.2-14.2c-0.2,2.1-0.3,4.4-0.3,6.7c0,3.7,0.2,7.5,0.4,11c0.1,2.2,0.2,4.9,0.3,6.8c-1.6,0.4-2-0.2-2.6-0.6
            c-0.1-0.1-0.3-0.3-0.4-0.3c-0.1-1.2-0.2-2.7-0.3-3.9c-0.2-2.3-0.4-4.9-0.4-7.5c0-0.5,0.1-1.3,0.1-1.9c0.1-0.1,0.1-1.4,0.1-3.2
            c0-1.1-0.1-2.3-0.1-3.4c0-1.9,0.1-3.5,0.4-4.2v-1.9l0.1-6.4c0.1-0.1,0.8-0.3,0.9-0.4c0.6-0.2,1.2-0.4,2.1,0.6
            c0.5,0.8,0.7,1.6,0.8,2.2c0.1,0.3,0.2,0.7,0.3,1.1c1.9,5.6,5.3,13.9,8.3,19.4c0-0.4-0.1-0.8-0.1-1.1c0-1.7-0.1-3.6-0.1-5.4
            c-0.1-2.9-0.2-5.8-0.2-8.7c0-4,0.2-8,0.7-11.3c0.4-2.1,1.1-3.9,1.7-5.4c0.3-0.2,0.4-0.4,0.5-0.6l0.6-1.2L125.3,18.6z"/>
        <path d="M141.1,41.6c0,3.9-1.2,7.8-2.8,11.7c-0.9,1.7-2.2,3.9-5.2,4.7c-2.1-0.2-3.5-1.3-4.2-2.7c-0.6-4.6,1.8-8.6,4.3-12.4
            c0.2-0.3,0.4-0.7,0.6-1c0.9-0.9,1.3-2,2.4-2.7c1.7,0.2,1.8,0.8,1.7,1.9c-2.9,3.4-5.1,7.9-5.9,11.3c-0.2,1.3-0.2,2.3,0.7,2.8
            c2-0.5,2.9-2.7,3.6-4.3c0.8-1.9,1.6-4.4,1.9-6.9c0.2-1,0.3-1.9,0.3-2.8c0-1.1-0.1-2.2-0.2-3.4c-0.8-0.2-0.7-0.7-0.7-1.4
            c1.3-0.8,2.9,0,3.2,1.3C141,38.9,141.1,40.2,141.1,41.6z"/>
        <path d="M154.7,26c0.2,2.2-0.2,4.2-0.6,6.4c-0.3,1.7-0.6,3.3-0.6,5l-0.2,1.8c0.1,0,0.2-0.1,0.3-0.1c0.5-0.1,1.1-0.3,1.7-0.3
            c2.4-0.4,4.8-0.7,7.3-1.1c0.3,0.1,0.9,0.2,1.9,0.2l0.1,1.7c-3,0.9-5,1.4-7.4,1.7c-0.6,0.1-1.2,0.2-1.7,0.3
            c-1.2,0.2-2.2,0.4-2.4,0.4l0.1,0.7c0.1,0.5,0.1,1.3-0.1,1.8c0.1,0.9,0,2,0,3c0,1.7,0,3.2,0.2,4.8c-0.2,0.9-0.7,2.2-2.2,2.2
            c-0.4-0.6-0.7-1.8-0.5-2.5c-0.3-1.8-0.3-4-0.3-6.1c0-1.4-0.1-2.1,0-3.2c-1.8,0.5-3.5,1.1-5.3,2.1c-0.7,0-1.6-0.8-1.7-1.1l0.1-1.7
            c2.4-0.9,4.8-1.7,7.1-2.2c0.1-0.7,0.1-1.3,0.2-2.1l0.2-1.9c0.4-3.2,0.9-6.8,1.3-10.3c0.9-0.7,1.6-0.2,2,0.1l0.3,0.2L154.7,26z"/>
        <path d="M198,26.3c-1.5,0.8-2.7,1.1-3.9,1.3c-0.7,0.1-1.4,0.2-2.1,0.4c-1,0.3-1.9,0.5-2.7,0.7c-2.5,0.6-4.5,1.2-7.7,2.2
            c-0.2,0.3-0.9,0.7-1.2,0.7c-1.1,0.2-2.6,0.2-2.9-1.4c-0.2-0.7,0.2-1.1,0.5-1.4c0.1-0.1,0.2-0.2,0.3-0.4c2.9-0.5,5.2-1.2,7.5-1.9
            c2.3-0.6,4.3-1.2,7.3-1.7c0.7,0.2,1.3,0.2,1.8,0.2c0.9-0.1,1.8-0.1,2.7,0.4L198,26.3z M185.2,39c1.2-0.3,2.4-0.6,3.6-0.8
            c3-0.9,5.4-1.4,9.2-1.9c0.1,0.1,0.2-0.1,0.2-0.1c2-0.2,3.2,0.2,5.8,0.9l-2.2,0.9c-1.2,0.4-2.3,0.8-3.3,0.9
            c-3.7,0.9-6.5,1.5-9.8,2.5l-1.3,0.4h0.1c-0.9,0.3-2,0.6-2.8,1c-0.6,4.1-1.2,9.4-1.3,14l-1.7,0.6c-1.7-0.9-1.6-2.6-1.4-4
            c0.1-1.6,0.4-3.6,0.7-5.5c0.3-1.7,0.5-2.9,0.6-4.4c-0.2-0.1-0.3-0.1-0.3-0.2c-0.6-0.3-1.1-0.5-0.8-1.6c0.5-0.5,0.8-0.7,1.3-1.1
            c0.1-0.1,0.1-0.2,0.3-0.3c0.2-0.9,0.2-1.7,0.4-2.4c0.2-1.1,0.3-2.3,0.4-3.4c0.1-0.6,0.1-1.4,0.2-2c0.9-1.3,1.6-0.7,2-0.1
            c0.2,0.2,0.2,0.3,0.8,0.3c0.4,1.5,0.1,2.3-0.1,3.3c-0.1,0.7-0.3,1.4-0.3,1.8C185.1,38.5,185.2,38.6,185.2,39z"/>
        <path d="M213,41.6c0,3.9-1.2,7.8-2.8,11.7c-0.9,1.7-2.2,3.9-5.2,4.7c-2.1-0.2-3.5-1.3-4.2-2.7c-0.6-4.6,1.8-8.6,4.3-12.4
            c0.2-0.3,0.4-0.7,0.6-1c0.9-0.9,1.3-2,2.4-2.7c1.7,0.2,2.2,0.9,1.7,1.9c-2.9,3.4-5.1,7.9-5.9,11.3c-0.2,1.3-0.2,2.3,0.7,2.8
            c2-0.5,2.9-2.7,3.6-4.3c0.8-1.9,1.6-4.4,1.9-6.9c0.2-1,0.3-1.9,0.3-2.8c0-1.1-0.1-2.2-0.2-3.4c-0.8-0.2-0.7-0.7-0.7-1.4
            c1.3-0.8,2.9,0,3.2,1.3C212.9,38.9,213,40.2,213,41.6z"/>
        <path d="M229.5,34.8c-0.2,1.1-0.3,2.4-0.6,3.7c-0.4,2.7-1,5.8-1,8.6c0,3.2,0.7,6.3,2.8,9.2c-2.2,2-3.2,0-3.9-1.4l-0.1-0.3
            c-1.1-1.8-1.4-4.5-1.4-7.1c-0.5,1-1.1,1.8-1.4,2.4c-0.1,0.2-0.3,0.5-0.8,1c-0.9,0.8-1.9,1.7-3.3,1.6c-1.3-0.6-2.3-1.2-2.9-2.8
            c-0.4-1.2-0.5-2.9-0.5-4.5c0-1.8,0.2-3.5,0.4-5.3c0.1-1.1,0.3-2.2,0.3-3.9c0.9-0.3,1.6-0.5,2.6,0.8c0,1.6-0.1,3-0.2,4.4
            c-0.2,1.4-0.3,2.9-0.3,4.2c0,0.9,0.1,1.8,0.3,2.8c0.1,0.4,0.4,1.2,0.8,1.4c0.9-0.2,1.5-1.1,1.9-1.9c1.8-2.7,3.1-5.9,4-9.1
            c0.1-0.5,0.2-1,0.2-1.5c0.1-1.3,0.3-2.6,1.5-3.5l0.3,0.1c0.5,0.2,0.9,0.2,1.3,0.7L229.5,34.8z"/>
        <path d="M244.5,36.4c0.2,1.1,0.3,2.3,0.3,3.5c0,1.6-0.2,3.3-0.4,4.9c-0.1,1-0.3,2-0.3,3l-0.7,7.3c0.4-1.2,0.8-2.9,1.2-4
            c0.1-0.5,0.3-1,0.4-1.4c0.7-3.1,1.4-6.5,2.4-9.5c0.2-0.4,0.8-1.6,0.7-1.3c0.7-1.4,0.9-1.8,1.7-2.2c1.1,0,1.8,0.6,2.5,1.3
            c0.6,2.5,0.8,4.5,1.2,6.8c0.4,3.2,0.8,6.4,1.8,9.1c0.1,0.1,0.4-0.2,0.8-0.7h1.4c-0.2,1.3-0.7,2.7-1.9,3.2
            c-1.1,0.4-2.6-0.5-2.9-1.8c-0.7-2.5-1.2-5.9-1.7-8.9c-0.3-1.9-0.4-2.9-0.8-4.9c-0.9,2.1-1.4,4.7-1.9,7.3c-0.6,2.5-1.2,5.4-2.2,8
            c-0.6,1.6-1.4,3-2.4,3.9c-1.9-0.1-2.2-1.4-2.5-2.7c-0.1-0.2-0.2-0.6-0.2-0.8c-0.1-3.3,0.3-6.6,0.7-9.8c0.2-2.3,0.6-4.7,0.7-7.1
            c-3.8,3.6-6.9,8.1-7.5,13.4l-1.4,0.8c-0.8-0.4-0.8-0.6-0.9-0.9c0-0.2-0.2-0.4-0.5-0.7c0.1-1.6,0.6-2.5,1-3.5
            c0.4-0.9,0.6-1.6,0.8-2.2c1.8-3.4,4.2-6.9,7.3-9.4c0.2-0.1,0.4-0.3,0.6-0.5c0.8-0.9,1.9-1.9,2.9-0.5L244.5,36.4z"/>
        <path d="M275.4,26.1c-2.3,5.8-2.8,14.2-3,18.7c-0.1,1.3-0.1,2.7-0.1,4c0,1.9,0,3.3,0.2,5.1c3-0.3,5.6-0.5,8-1.1
            c0.5,0,0.9,0.3,1.4,0.6l1.2,0.8c-3.5,1.2-6.5,1.9-10.4,2.4c0,0.2,0.1,0.4,0.1,0.6c0.1,1,0.2,1.8-0.7,2.7c-1.7,0-2.3-1.4-2.4-3
            c-0.6,0-1.4-0.1-1.9-0.2c-2.4,0-5.3-0.6-7.3-2.6c-0.5-0.9-0.9-2-0.6-3.2c0.6-1.3,1.4-2.7,2.5-3.8c1.7-1.3,4.2-3,7-2.5
            c0.1-0.9,0.1-1.6,0.2-2.4c0.3-3.5,0.7-7.6,1.6-12.4c0.2-1,0.4-1.8,0.7-2.7c0.3-0.9,0.6-1.9,0.8-3.2c1.3,0.3,2.5,0.7,2.8,1.9
            L275.4,26.1z M269.1,47.3c-2.9-0.5-5.9,2.2-6.6,4.8c0.9,1.8,4.2,2,6.8,2c-0.1-1.2-0.1-2.7-0.1-4.3C269.2,49,269.2,48.2,269.1,47.3
            z"/>
    </g>
</svg>

REFERENCE
인프런 SVG 마스터
https://www.inflearn.com/course/mastering-svg

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer