2.3K views
CSSAdd prefixes
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}
HTML
1<svg xmlns="http://www.w3.org/2000/svg" height="200px" width="200px" viewBox="0 0 200 200" class="pencil"> 2 <defs> 3 <clipPath id="pencil-eraser"> 4 <rect height="30" width="30" ry="5" rx="5"></rect> 5 </clipPath> 6 </defs> 7 <circle transform="rotate(-113,100,100)" stroke-linecap="round" stroke-dashoffset="439.82" stroke-dasharray="439.82 439.82" stroke-width="2" stroke="currentColor" fill="none" r="70" class="pencil__stroke"></circle> 8 <g transform="translate(100,100)" class="pencil__rotate"> 9 <g fill="none"> 10 <circle transform="rotate(-90)" stroke-dashoffset="402" stroke-dasharray="402.12 402.12" stroke-width="30" stroke="hsl(223,90%,50%)" r="64" class="pencil__body1"></circle> 11 <circle transform="rotate(-90)" stroke-dashoffset="465" stroke-dasharray="464.96 464.96" stroke-width="10" stroke="hsl(223,90%,60%)" r="74" class="pencil__body2"></circle> 12 <circle transform="rotate(-90)" stroke-dashoffset="339" stroke-dasharray="339.29 339.29" stroke-width="10" stroke="hsl(223,90%,40%)" r="54" class="pencil__body3"></circle> 13 </g> 14 <g transform="rotate(-90) translate(49,0)" class="pencil__eraser"> 15 <g class="pencil__eraser-skew"> 16 <rect height="30" width="30" ry="5" rx="5" fill="hsl(223,90%,70%)"></rect> 17 <rect clip-path="url(#pencil-eraser)" height="30" width="5" fill="hsl(223,90%,60%)"></rect> 18 <rect height="20" width="30" fill="hsl(223,10%,90%)"></rect> 19 <rect height="20" width="15" fill="hsl(223,10%,70%)"></rect> 20 <rect height="20" width="5" fill="hsl(223,10%,80%)"></rect> 21 <rect height="2" width="30" y="6" fill="hsla(223,10%,10%,0.2)"></rect> 22 <rect height="2" width="30" y="13" fill="hsla(223,10%,10%,0.2)"></rect> 23 </g> 24 </g> 25 <g transform="rotate(-90) translate(49,-30)" class="pencil__point"> 26 <polygon points="15 0,30 30,0 30" fill="hsl(33,90%,70%)"></polygon> 27 <polygon points="15 0,6 30,0 30" fill="hsl(33,90%,50%)"></polygon> 28 <polygon points="15 0,20 10,10 10" fill="hsl(223,10%,10%)"></polygon> 29 </g> 30 </g> 31</svg>