Codrops Playground

Selectable SVG text with clip-path and animated stroke pattern by yoksel

HTML

99
 
1
<svg viewBox="0 0 600 300">
2
​
3
  <!-- Symbol with text -->
4
  <symbol id="s-text">
5
    <text text-anchor="middle"
6
          x="50%"
7
          y="50%"
8
          dy=".35em"
9
          class="text--line"
10
          >
11
      Text
12
    </text>  
13
  </symbol>
14
​
15
  <!-- Clippath  with text -->
16
  <clippath id="cp-text">
17
    <text text-anchor="middle"
18
          x="50%"
19
          y="50%"
20
          dy=".35em"
21
          class="text--line"
22
          >
23
      Text
24
    </text>
25
  </clippath>
26
​
27
  <!-- Pattern -->
28
  <pattern
29
           id="p-circles"
30
           width="40"
31
           height="40"
32
           viewBox="0 0 40 40"
33
           patternUnits="userSpaceOnUse"
34
           >
35
​
36
    <circle
37
            r="12" cx="20" cy="20"
38
            class="c-ring"
39
            ></circle>
40
    <circle
41
            r="5" cx="20" cy="20"
42
            class="c-ring c-ring--fill"
43
            ></circle>
44
​
45
    <circle
46
            r="12" cx="0" cy="0"
47
            class="c-ring"
48
            ></circle>
49
    <circle
50
            r="12" cx="40" cy="0"
51
            class="c-ring"
52
            ></circle>
53
    <circle
54
            r="12" cx="40" cy="40"
55
            class="c-ring"
56
            ></circle>
57
    <circle
58
            r="12" cx="0" cy="40"
59
            class="c-ring"
60
            ></circle>
61
​
62
    <circle
63
            r="5" cx="0" cy="0"
64
            class="c-ring"
65
            ></circle>
66
    <circle
67
            r="5" cx="40" cy="0"
68
            class="c-ring"
69
            ></circle>
70
    <circle
71
            r="5" cx="40" cy="40"
72
            class="c-ring"
73
            ></circle>
74
    <circle
75
            r="5" cx="0" cy="40"
76
            class="c-ring"
77
            ></circle>
78
​
79
  </pattern>
80
​
81
  <!-- Copy of text for shadow -->
82
  <use xlink:href="#s-text"
83
       class="text-copy--shadow"></use>
84
​
85
  <!-- Group with clippath and with patterned content -->
86
  <g clip-path="url(#cp-text)">
87
​
88
    <circle r="70%"
89
            cx="300"
90
            cy="150"
91
            class="r-fill"
92
            ></circle>
93
  </g>
94
​
95
  <!-- Copy of text for stroke -->
96
  <use xlink:href="#s-text"
97
       class="text-copy--stroke"></use>
98
​
99
</svg>

CSS

83
 
1
/* Main styles */
2
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
3
​
4
.text-copy--stroke {
5
  fill: transparent;
6
  stroke: white;
7
  stroke-width: 4;
8
}
9
​
10
.text-copy--shadow {
11
  fill: rgba(0, 0, 0, 0.25);
12
  -webkit-transform: translate(0.06em, 0.06em);
13
  -ms-transform: translate(0.06em, 0.06em);
14
  transform: translate(0.06em, 0.06em);
15
}
16
​
17
.r-fill {
18
  fill: url(#p-circles);
19
  -webkit-transform-origin: 300px 150px;
20
  -ms-transform-origin: 300px 150px;
21
  transform-origin: 300px 150px;
22
  -webkit-animation: rotate 30s infinite linear;
23
  animation: rotate 30s infinite linear;
24
}
25
​
26
.c-ring {
27
  fill: none;
28
  stroke-width: 2;
29
  stroke: white;
30
}
31
​
32
.c-ring--fill {
33
  fill: white;
34
  stroke-width: 0;
35
  stroke: white;
36
  -webkit-animation: stroke 5s infinite;
37
  animation: stroke 5s infinite;
38
}
39
​
40
@-webkit-keyframes stroke {
41
  50% {
42
    stroke-width: 15;
43
  }
44
}
45
​
46
@keyframes stroke {
47
  50% {
48
    stroke-width: 15;
49
  }
50
}
51
​
52
@-webkit-keyframes rotate {
53
  100% {
54
    -webkit-transform: rotate(360deg);
55
    transform: rotate(360deg);
56
  }
57
}
58
​
59
@keyframes rotate {
60
  100% {
61
    -webkit-transform: rotate(360deg);
62
    transform: rotate(360deg);
63
  }
64
}
65
​
66
/* Other styles */
67
HTML, BODY {
68
  height: 100%;
69
}
70
​
71
body {
72
  background: hotpink -webkit-radial-gradient(#ff69b4, #9c004e);
73
  background: hotpink radial-gradient(#ff69b4, #9c004e);
74
  font: 14.5em/1 Open Sans, Impact;
75
  text-transform: uppercase;
76
  margin: 0;
77
}
78
​
79
svg {
80
  position: absolute;
81
  width: 100%;
82
  height: 100%;
83
}

Selectable SVG text with clip-path and animated stroke pattern

by yoksel on

Demo 16 of "How to Create (Animated) Text Fills"

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)