1.pencil {
2  display: block;
3  width: 10em;
4  height: 10em;
5}
6
7.pencil__body1,
8.pencil__body2,
9.pencil__body3,
10.pencil__eraser,
11.pencil__eraser-skew,
12.pencil__point,
13.pencil__rotate,
14.pencil__stroke {
15  animation-duration: 3s;
16  animation-timing-function: linear;
17  animation-iteration-count: infinite;
18}
19
20.pencil__body1,
21.pencil__body2,
22.pencil__body3 {
23  transform: rotate(-90deg);
24}
25
26.pencil__body1 {
27  animation-name: pencilBody1;
28}
29
30.pencil__body2 {
31  animation-name: pencilBody2;
32}
33
34.pencil__body3 {
35  animation-name: pencilBody3;
36}
37
38.pencil__eraser {
39  animation-name: pencilEraser;
40  transform: rotate(-90deg) translate(49px,0);
41}
42
43.pencil__eraser-skew {
44  animation-name: pencilEraserSkew;
45  animation-timing-function: ease-in-out;
46}
47
48.pencil__point {
49  animation-name: pencilPoint;
50  transform: rotate(-90deg) translate(49px,-30px);
51}
52
53.pencil__rotate {
54  animation-name: pencilRotate;
55}
56
57.pencil__stroke {
58  animation-name: pencilStroke;
59  transform: translate(100px,100px) rotate(-113deg);
60}
61
62/* Animations */
63@keyframes pencilBody1 {
64  from,
65	to {
66    stroke-dashoffset: 351.86;
67    transform: rotate(-90deg);
68  }
69
70  50% {
71    stroke-dashoffset: 150.8;
72 /* 3/8 of diameter */
73    transform: rotate(-225deg);
74  }
75}
76
77@keyframes pencilBody2 {
78  from,
79	to {
80    stroke-dashoffset: 406.84;
81    transform: rotate(-90deg);
82  }
83
84  50% {
85    stroke-dashoffset: 174.36;
86    transform: rotate(-225deg);
87  }
88}
89
90@keyframes pencilBody3 {
91  from,
92	to {
93    stroke-dashoffset: 296.88;
94    transform: rotate(-90deg);
95  }
96
97  50% {
98    stroke-dashoffset: 127.23;
99    transform: rotate(-225deg);
100  }
101}
102
103@keyframes pencilEraser {
104  from,
105	to {
106    transform: rotate(-45deg) translate(49px,0);
107  }
108
109  50% {
110    transform: rotate(0deg) translate(49px,0);
111  }
112}
113
114@keyframes pencilEraserSkew {
115  from,
116	32.5%,
117	67.5%,
118	to {
119    transform: skewX(0);
120  }
121
122  35%,
123	65% {
124    transform: skewX(-4deg);
125  }
126
127  37.5%, 
128	62.5% {
129    transform: skewX(8deg);
130  }
131
132  40%,
133	45%,
134	50%,
135	55%,
136	60% {
137    transform: skewX(-15deg);
138  }
139
140  42.5%,
141	47.5%,
142	52.5%,
143	57.5% {
144    transform: skewX(15deg);
145  }
146}
147
148@keyframes pencilPoint {
149  from,
150	to {
151    transform: rotate(-90deg) translate(49px,-30px);
152  }
153
154  50% {
155    transform: rotate(-225deg) translate(49px,-30px);
156  }
157}
158
159@keyframes pencilRotate {
160  from {
161    transform: translate(100px,100px) rotate(0);
162  }
163
164  to {
165    transform: translate(100px,100px) rotate(720deg);
166  }
167}
168
169@keyframes pencilStroke {
170  from {
171    stroke-dashoffset: 439.82;
172    transform: translate(100px,100px) rotate(-113deg);
173  }
174
175  50% {
176    stroke-dashoffset: 164.93;
177    transform: translate(100px,100px) rotate(-113deg);
178  }
179
180  75%,
181	to {
182    stroke-dashoffset: 439.82;
183    transform: translate(100px,100px) rotate(112deg);
184  }
185}