<figure>
<svg width="200" height="161" class="chara" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#acolyte" />
</svg>
<figcaption>Mouse over the acolyte</figcaption>
</figure>
<!-- SVG spritesheet. This could be an external asset as well, instead of being embedded here -->
<svg class="character" style="display:none" width="216pt" height="174pt" viewBox="0 0 216 174" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="acolyte" viewBox="0 0 216 174">
<path fill="#ffffff" d=" M 0.00 0.00 L 216.00 0.00 L 216.00 174.00 L 0.00 174.00 L 0.00 0.00 Z" />
<path fill="#010101" d=" M 82.45 24.48 C 85.37 24.01 87.91 22.02 90.94 22.24 C 95.83 22.35 100.74 22.00 105.61 22.54 C 110.91 24.32 115.82 27.32 120.08 30.94 C 126.83 37.10 128.64 46.39 131.78 54.57 C 133.09 58.93 133.38 63.68 131.97 68.06 C 131.11 71.89 127.94 74.51 126.26 77.94 C 127.06 80.56 128.58 83.11 128.32 85.95 C 127.65 89.60 124.05 92.14 124.20 96.02 C 123.87 104.04 124.56 112.05 124.99 120.06 C 125.33 126.55 127.73 133.21 125.47 139.61 C 124.53 142.75 121.06 143.84 118.70 145.69 C 109.64 152.53 97.65 151.10 87.00 151.28 C 80.01 151.66 73.21 149.88 66.30 149.21 C 57.27 145.71 47.53 146.37 38.07 145.72 C 34.34 145.74 30.39 142.45 31.59 138.48 C 34.24 132.97 41.88 131.44 43.17 124.99 C 46.45 113.18 44.46 100.59 47.54 88.70 C 47.93 85.58 49.96 82.72 49.64 79.54 C 47.75 77.19 44.47 78.97 41.96 78.61 C 37.09 78.52 34.85 72.04 37.35 68.29 C 40.76 63.07 44.40 57.99 47.72 52.70 C 52.50 44.50 56.61 35.04 65.10 29.98 C 70.71 27.64 76.49 25.70 82.45 24.48 Z" />
<path class="dark-clothes" fill="#424242" d=" M 74.03 29.93 C 83.11 27.88 92.54 27.19 101.80 28.24 C 106.18 28.80 110.84 29.68 114.20 32.77 C 118.25 36.40 122.02 40.47 124.54 45.33 C 118.40 42.84 112.92 38.54 106.14 37.88 C 99.07 37.07 91.53 36.08 84.72 38.71 C 77.91 41.45 73.50 47.75 69.80 53.79 C 66.50 59.00 67.94 65.82 71.36 70.59 C 76.01 76.58 82.55 81.22 89.99 82.98 C 101.30 86.28 113.62 85.37 124.58 81.19 C 123.74 86.19 121.29 90.87 121.41 96.03 C 121.55 104.65 120.26 113.38 122.10 121.90 C 122.88 126.62 124.07 131.46 123.29 136.25 C 122.00 140.61 117.67 143.26 113.54 144.51 C 98.34 148.82 81.85 150.06 66.57 145.44 C 56.41 142.25 45.04 145.07 35.41 139.85 C 36.19 133.09 45.99 134.57 47.10 128.20 C 48.01 124.70 48.69 121.14 49.45 117.60 C 51.32 108.85 50.15 99.88 50.35 91.02 C 50.35 84.95 55.24 80.38 55.93 74.44 C 51.49 73.79 46.66 75.46 42.47 73.57 C 41.53 70.90 42.36 68.03 43.60 65.61 C 47.60 57.91 52.86 50.97 57.96 43.97 C 60.24 40.90 61.94 37.39 64.59 34.60 C 67.08 31.99 70.59 30.72 74.03 29.93 Z" />
<path class="fire" d=" M 178.62 29.78 C 179.83 34.41 179.93 39.25 181.21 43.87 C 184.46 54.66 187.60 65.55 189.17 76.73 C 190.36 83.57 190.85 91.03 195.31 96.70 C 198.01 100.58 202.23 104.00 202.68 108.97 C 201.68 113.31 198.64 117.21 199.22 121.87 C 199.30 126.17 203.20 129.46 202.84 133.78 C 201.21 142.67 192.85 149.30 184.05 150.20 C 176.57 150.93 168.36 148.46 163.57 142.41 C 161.32 139.68 160.78 136.08 160.21 132.69 C 163.19 134.01 166.22 135.29 168.95 137.10 C 172.18 139.22 173.96 142.86 177.05 145.15 C 181.02 146.21 184.78 144.17 188.14 142.29 C 191.49 137.36 195.78 132.28 195.60 125.97 C 193.62 126.48 191.71 127.25 189.69 127.58 C 188.79 126.32 188.10 124.93 187.35 123.59 C 178.65 122.05 171.03 117.20 162.84 114.11 C 162.88 110.92 162.22 107.54 163.43 104.51 C 166.48 101.55 170.79 99.59 172.35 95.35 C 174.96 88.34 175.83 80.63 174.65 73.23 C 174.21 69.45 172.90 65.62 173.88 61.82 C 174.65 58.58 175.32 55.31 175.36 51.97 C 175.48 44.47 176.69 37.02 178.62 29.78 Z" />
<path fill="#ffffff" d=" M 91.37 40.47 C 97.29 38.90 103.37 40.87 109.20 41.98 C 116.14 43.27 122.56 46.74 127.85 51.32 C 129.59 56.91 130.69 63.36 127.96 68.82 C 126.21 72.27 125.16 76.55 121.46 78.49 C 115.11 81.44 107.99 82.79 101.00 82.30 C 94.28 81.90 86.99 80.80 81.89 75.98 C 77.98 72.29 72.55 68.89 72.34 62.90 C 71.06 56.98 74.88 51.77 78.76 47.76 C 82.39 44.51 86.71 41.94 91.37 40.47 Z" />
<path class="fire" d=" M 188.32 40.56 C 189.78 40.37 191.25 40.17 192.72 39.97 C 192.65 42.34 192.57 44.71 192.46 47.09 C 191.05 46.42 188.91 46.40 188.30 44.69 C 188.17 43.32 188.27 41.94 188.32 40.56 Z" />
<path fill="#010101" d=" M 117.18 56.05 C 120.71 55.88 121.96 60.20 122.40 63.02 C 120.58 63.54 118.48 64.76 116.74 63.33 C 114.16 61.67 114.82 57.57 117.18 56.05 Z" />
<path fill="#010101" d=" M 99.14 61.72 C 98.35 58.70 102.25 57.38 104.56 58.28 C 106.70 59.66 106.99 62.36 107.00 64.68 C 104.02 65.56 100.36 64.96 99.14 61.72 Z" />
<path class="fire" d=" M 153.51 70.95 C 155.81 69.77 158.19 68.76 160.64 67.91 C 161.21 72.85 161.89 77.96 160.31 82.79 C 157.18 79.40 155.08 75.26 153.51 70.95 Z" />
<path fill="#010101" d=" M 129.66 95.70 C 132.92 97.37 135.93 99.46 139.23 101.05 C 142.24 96.25 148.50 97.49 153.02 99.06 C 155.53 100.35 157.78 102.22 159.56 104.40 C 161.63 106.86 160.60 110.21 160.28 113.06 C 160.92 113.32 162.20 113.85 162.84 114.11 C 171.03 117.20 178.65 122.05 187.35 123.59 C 188.10 124.93 188.79 126.32 189.69 127.58 C 191.71 127.25 193.62 126.48 195.60 125.97 C 195.78 132.28 191.49 137.36 188.14 142.29 C 184.78 144.17 181.02 146.21 177.05 145.15 C 173.96 142.86 172.18 139.22 168.95 137.10 C 166.22 135.29 163.19 134.01 160.21 132.69 C 148.19 127.71 137.86 119.39 129.20 109.80 C 125.85 105.76 126.69 99.70 129.66 95.70 Z" />
<path fill="#d6d6d6" d=" M 131.09 99.47 C 133.69 101.47 136.45 103.27 139.42 104.68 C 139.67 106.24 139.94 107.81 140.23 109.37 C 136.35 107.89 132.46 106.27 129.50 103.25 C 130.04 101.99 130.57 100.73 131.09 99.47 Z" />
<path fill="#ffffff" d=" M 142.00 102.21 C 145.50 99.38 150.70 100.61 154.18 102.83 C 157.04 105.99 159.80 110.95 157.15 115.04 C 153.44 113.54 149.51 112.28 146.39 109.68 C 144.07 107.80 143.06 104.89 142.00 102.21 Z" />
<path fill="#d6d6d6" d=" M 141.72 101.47 L 142.00 102.21 C 143.06 104.89 144.07 107.80 146.39 109.68 C 149.51 112.28 153.44 113.54 157.15 115.04 C 153.63 115.95 149.48 115.92 146.56 113.49 C 144.64 111.63 142.55 109.62 141.86 106.94 C 141.71 105.12 141.80 103.29 141.72 101.47 Z" />
<path fill="#d6d6d6" d=" M 129.33 105.16 C 132.35 107.07 135.54 108.63 138.75 110.17 C 142.10 111.72 143.63 115.65 147.19 116.84 C 149.18 117.64 151.44 117.63 153.35 118.63 C 156.74 121.44 159.72 124.85 161.70 128.82 C 156.86 126.80 152.46 123.88 148.34 120.66 C 144.31 117.53 139.48 115.66 135.41 112.60 C 132.93 110.54 131.06 107.85 129.33 105.16 Z" />
<path fill="#d6d6d6" d=" M 157.45 115.34 C 160.19 115.73 162.79 116.69 165.30 117.82 C 164.54 119.00 163.78 120.17 163.02 121.35 C 161.06 119.45 159.08 117.54 157.45 115.34 Z" />
<path fill="#d6d6d6" d=" M 154.46 117.61 C 158.22 116.18 160.09 120.70 162.60 122.62 C 162.24 123.28 161.51 124.61 161.15 125.27 C 159.06 122.60 156.66 120.19 154.46 117.61 Z" />
<path class="fire" d=" M 165.30 117.82 C 168.48 119.30 171.67 120.76 174.83 122.27 C 173.81 123.69 172.80 125.12 171.80 126.55 C 168.44 125.63 165.46 123.82 163.02 121.35 C 163.78 120.17 164.54 119.00 165.30 117.82 Z" />
<path class="fire" d=" M 162.60 122.62 C 164.95 125.01 167.88 126.66 171.02 127.78 C 170.44 129.94 169.91 132.12 169.40 134.31 C 166.17 131.75 162.86 129.14 161.15 125.27 C 161.51 124.61 162.24 123.28 162.60 122.62 Z" />
<path class="dark-clothes" fill="#424242" d=" M 177.19 123.33 C 179.18 123.91 176.87 126.84 175.53 125.67 C 174.77 124.63 176.07 123.22 177.19 123.33 Z" />
<path class="dark-clothes" fill="#424242" d=" M 27.82 135.07 C 31.32 129.72 37.68 127.65 43.17 124.99 C 41.88 131.44 34.24 132.97 31.59 138.48 C 30.39 142.45 34.34 145.74 38.07 145.72 C 47.53 146.37 57.27 145.71 66.30 149.21 C 58.28 149.65 50.28 148.84 42.28 148.31 C 37.54 147.78 31.93 147.28 28.91 143.07 C 27.08 140.81 27.41 137.75 27.82 135.07 Z" />
<path class="fire" d=" M 179.73 126.01 C 182.45 126.02 185.00 126.93 186.92 128.92 C 185.20 131.51 183.13 133.82 180.94 136.01 C 181.73 132.96 182.97 129.91 182.55 126.70 C 181.26 127.42 180.00 128.18 178.74 128.95 C 178.99 128.21 179.48 126.74 179.73 126.01 Z" />
<path class="fire" d=" M 172.90 136.46 C 172.83 133.33 174.11 130.40 176.46 128.34 C 175.74 131.23 174.61 134.01 172.90 136.46 Z" />
<path class="fire" d=" M 189.58 131.37 C 192.03 130.00 191.74 134.51 189.73 134.68 C 188.12 134.49 188.62 132.06 189.58 131.37 Z" />
<path class="fire" d=" M 180.57 139.87 C 182.50 137.42 184.70 135.20 186.88 132.96 C 186.77 134.78 186.80 136.61 186.48 138.41 C 184.78 139.71 182.60 139.70 180.57 139.87 Z" />
<path fill="#d6d6d6" d=" M 16.57 139.57 C 19.28 136.20 23.81 135.63 27.82 135.07 C 27.41 137.75 27.08 140.81 28.91 143.07 C 31.93 147.28 37.54 147.78 42.28 148.31 C 50.28 148.84 58.28 149.65 66.30 149.21 C 73.21 149.88 80.01 151.66 87.00 151.28 C 97.65 151.10 109.64 152.53 118.70 145.69 C 119.31 150.68 118.71 157.32 112.97 158.99 C 101.22 162.09 88.98 159.07 77.02 159.65 C 62.36 160.53 47.63 160.34 33.00 159.06 C 27.95 158.57 22.67 157.57 18.54 154.43 C 14.14 151.09 12.64 143.84 16.57 139.57 Z" />
<path class="dark-clothes" fill="#424242" d=" M 177.26 136.15 C 178.76 136.09 178.64 138.56 177.23 138.55 C 175.71 138.59 175.83 136.16 177.26 136.15 Z" />
</svg>
</symbol>
</svg>
.chara {
transition: all 0.5s;
fill: #f7b976;
}
.chara:hover {
fill: #e52727;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.