Trophy Animation Using HTML & CSS

by
Trophy Animation Using HTML & CSS
Code Snippet:Trophy Animation
Author: Motionharvest
Published: March 23, 2024
Last Updated: March 23, 2024
Downloads: 972
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

This code snippet helps you to create a trophy animation using HTML and CSS. It generates confetti and star animations. The confetti moves randomly.

Moreover, you can use this code to create a trophy animation for your website or presentation. It adds visual appeal and engagement to your content. The animation is created using HTML and CSS, making it easy to integrate and customize.

How to Create Trophy Animation Using Html & Css

1. First of all, load the Normalize CSS and Prefixfree JS by adding the following CDN links into the head tag of your HTML document.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. In the HTML file, define the structure for your trophy animation using <div> elements. Include an outer container <div> with a class of trophy-container, and nested <div> elements for different parts of the trophy, like the base and the cup.

  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="500px" height="800px" viewBox="0 0 500 800">
  2. 	<defs>
  3. 		<radialGradient id="Gradient_1" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="211.4" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, 0,0) " spreadMethod="pad">
  4. 			<stop offset="0%" stop-color="#9293D6" />
  5.  
  6. 			<stop offset="100%" stop-color="#9293D6" stop-opacity="0" />
  7. 		</radialGradient>
  8.  
  9. 		<radialGradient id="Gradient_2" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="134.5" fx="0" fy="0" gradientTransform="matrix( 1.0000000000000002, 0, 0, 1.0000000000000002, 37.7,-44.75) " spreadMethod="pad">
  10. 			<stop offset="0%" stop-color="#C9EBFA" />
  11.  
  12. 			<stop offset="100%" stop-color="#57ABDE" />
  13. 		</radialGradient>
  14.  
  15. 		<radialGradient id="Gradient_3" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="66.10000000000002" fx="0" fy="0" gradientTransform="matrix( 0.9999999999999998, 0, 0, 0.9999999999999998, 23.6,-99.85) " spreadMethod="pad">
  16. 			<stop offset="0%" stop-color="#C9E5FA" />
  17.  
  18. 			<stop offset="100%" stop-color="#57A0DE" />
  19.  
  20. 			<stop offset="100%" stop-color="#5CBDE0" />
  21. 		</radialGradient>
  22.  
  23. 		<radialGradient id="Gradient_4" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="59.9" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, 17.85,-147.3) " spreadMethod="pad">
  24. 			<stop offset="0%" stop-color="#BBD5E8" />
  25.  
  26. 			<stop offset="100%" stop-color="#529FCE" />
  27. 		</radialGradient>
  28.  
  29. 		<radialGradient id="Gradient_5" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="107.75" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, -21.9,21.95) " spreadMethod="pad">
  30. 			<stop offset="0%" stop-color="#A8D4F1" />
  31.  
  32. 			<stop offset="100%" stop-color="#57A0DE" />
  33. 		</radialGradient>
  34.  
  35. 		<radialGradient id="Gradient_6" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="242.49999999999997" fx="0" fy="0" gradientTransform="matrix( 1.0000000000000002, 0, 0, 1.0000000000000002, 36.4,-58.55) " spreadMethod="pad">
  36. 			<stop offset="0%" stop-color="#C9E9FA" />
  37.  
  38. 			<stop offset="100%" stop-color="#57A0DE" />
  39. 		</radialGradient>
  40.  
  41. 		<linearGradient id="Gradient_7" gradientUnits="userSpaceOnUse" x1="-131.25" y1="-258.1" x2="131.25" y2="-258.1" spreadMethod="pad">
  42. 			<stop offset="0%" stop-color="#5599FF" />
  43.  
  44. 			<stop offset="100%" stop-color="#D5E6FF" />
  45. 		</linearGradient>
  46.  
  47. 		<radialGradient id="Gradient_8" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="137.70000000000005" fx="0" fy="0" gradientTransform="matrix( 0.9999999999999997, 0, 0, 0.9999999999999997, 76.45,-43.95) " spreadMethod="pad">
  48. 			<stop offset="0%" stop-color="#A8D4F1" />
  49.  
  50. 			<stop offset="100%" stop-color="#57A0DE" />
  51. 		</radialGradient>
  52.  
  53. 		<radialGradient id="Gradient_9" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="77.75" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, 26.6,-22.8) " spreadMethod="pad">
  54. 			<stop offset="0%" stop-color="#FFF774" />
  55.  
  56. 			<stop offset="100%" stop-color="#FFCC00" />
  57. 		</radialGradient>
  58.  
  59. 		<radialGradient id="Gradient_10" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="51.1" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, -19.85,10.05) " spreadMethod="pad">
  60. 			<stop offset="0%" stop-color="#FFF774" />
  61.  
  62. 			<stop offset="100%" stop-color="#FFCC00" />
  63. 		</radialGradient>
  64.  
  65. 		<radialGradient id="Gradient_11" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="10.5" fx="0" fy="0" gradientTransform="matrix( 1, 0, 0, 1, 0.15,-1.95) " spreadMethod="pad">
  66. 			<stop offset="0%" stop-color="#FFF774" />
  67.  
  68. 			<stop offset="100%" stop-color="#FFCC00" />
  69. 		</radialGradient>
  70.  
  71. 		<g id="Symbol_1_0_Layer0_0_FILL">
  72. 			<path fill="url(#Gradient_1)" stroke="none" d="
  73. M -0.05 -209.05
  74. Q -86.6 -209.05 -147.85 -147.8 -209.05 -86.55 -209.05 0 -209.05 86.6 -147.85 147.8 -86.6 209.05 -0.05 209.05 86.55 209.05 147.8 147.8 209.05 86.6 209.05 0 209.05 -86.55 147.8 -147.8 86.55 -209.05 -0.05 -209.05 Z" />
  75. 		</g>
  76.  
  77. 		<g id="confetti_0_Layer0_0_FILL">
  78. 			<path fill="#F0A8F9" stroke="none" d="
  79. M -0.45 -11.9
  80. Q -0.45 -12.35 -0.4 -12.8
  81. L -12.35 -12.8
  82. Q -12.4 -12.4 -12.4 -11.95 -12.4 -1.7 -5.15 5.55 2.15 12.85 12.4 12.85
  83. L 12.45 12.85 12.45 0.95
  84. Q 7.1 0.95 3.3 -2.8 -0.45 -6.6 -0.45 -11.9 Z" />
  85. 		</g>
  86.  
  87. 		<g id="star_0_Layer0_0_FILL">
  88. 			<path fill="#C30DDB" stroke="none" d="
  89. M -6.65 -13.25
  90. L -22.3 -14.5 -16.3 0.05 -22.3 14.55 -6.65 13.3 5.3 23.5 9 8.25 22.35 0.05 9 -8.2 5.3 -23.45 -6.65 -13.25 Z" />
  91. 		</g>
  92.  
  93. 		<g id="base_0_Layer0_0_FILL">
  94. 			<path fill="url(#Gradient_2)" stroke="none" d="
  95. M 94.8 -17.5
  96. Q 46.3 -42.45 40.4 -70.4
  97. L -40.9 -70.4
  98. Q -55.9 -29.8 -94 -17.45
  99. L 94.8 -17.5 Z" />
  100.  
  101. 			<path fill="url(#Gradient_3)" stroke="none" d="
  102. M 40.8 -87.9
  103. Q 34.6 -101.15 40.4 -114.4
  104. L -40.9 -114.4
  105. Q -35.65 -102.7 -40 -87.85
  106. L 40.8 -87.9 Z" />
  107.  
  108. 			<path fill="#5599FF" stroke="none" d="
  109. M 100.75 -2.6
  110. Q 103.35 -5.15 103.35 -8.75 103.35 -12.35 100.75 -14.95 98.45 -17.25 95.3 -17.45 95.05 -17.5 94.8 -17.5
  111. L -94 -17.45
  112. Q -94.3 -17.5 -94.6 -17.5 -98.2 -17.5 -100.8 -14.95 -103.35 -12.35 -103.35 -8.75 -103.35 -5.15 -100.8 -2.6 -98.4 -0.2 -95.2 0 -95.05 0 -94.9 0
  113. L 94.4 0
  114. Q 94.5 0 94.6 0 98.2 0 100.75 -2.6
  115. M 40.6 -70.4
  116. Q 44.2 -70.4 46.75 -73 49.35 -75.55 49.35 -79.15 49.35 -82.75 46.75 -85.35 44.45 -87.65 41.3 -87.85 41.05 -87.9 40.8 -87.9
  117. L -40 -87.85
  118. Q -40.3 -87.9 -40.6 -87.9 -44.2 -87.9 -46.8 -85.35 -49.35 -82.75 -49.35 -79.15 -49.35 -75.55 -46.8 -73 -44.4 -70.6 -41.2 -70.4 -41.05 -70.4 -40.9 -70.4
  119. L 40.4 -70.4
  120. Q 40.5 -70.4 40.6 -70.4
  121. M 40.6 -114.4
  122. Q 44.2 -114.4 46.75 -117 49.35 -119.55 49.35 -123.15 49.35 -126.75 46.75 -129.35 44.45 -131.65 41.3 -131.85 41.05 -131.9 29.55 -131.9
  123. L -30.35 -131.9
  124. Q -40.3 -131.9 -40.6 -131.9 -44.2 -131.9 -46.8 -129.35 -49.35 -126.75 -49.35 -123.15 -49.35 -119.55 -46.8 -117 -44.4 -114.6 -41.2 -114.4 -41.05 -114.4 -40.9 -114.4
  125. L 40.4 -114.4
  126. Q 40.5 -114.4 40.6 -114.4 Z" />
  127.  
  128. 			<path fill="url(#Gradient_4)" stroke="none" d="
  129. M 24.8 -171.4
  130. Q 12.95 -168.85 0 -168.85 -12.5 -168.85 -24 -171.2 -21.4 -150 -30.35 -131.9
  131. L 29.55 -131.9
  132. Q 23.3 -146.9 24.8 -171.4 Z" />
  133. 		</g>
  134.  
  135. 		<g id="handleL_0_Layer0_0_FILL">
  136. 			<path fill="url(#Gradient_5)" stroke="none" d="
  137. M -24.6 -65.55
  138. L -24.55 -65.55
  139. Q -17.3 -63.05 -9.65 -59.3 -7.8 -58.4 -5.85 -59.05 -3.9 -59.75 -3 -61.6 -2.05 -63.45 -2.75 -65.4 -3.4 -67.4 -5.25 -68.3 -13.5 -72.35 -21.25 -75 -62.5 -89.6 -74.1 -64.25 -81.45 -49.35 -75.2 -34.25
  140. L -75.2 -34.3
  141. Q -70.9 -23.7 -56.95 -8.9 -56.85 -8.85 -56.85 -8.8 -40.7 7.2 -32.8 16.05 -19.35 30.95 -13.65 44.25 -6.15 61.85 -16.5 67.8 -22.75 70.9 -30.6 70.25 -32.65 70.05 -34.25 71.4 -35.8 72.7 -36 74.8 -36.15 76.85 -34.85 78.45 -33.5 80 -31.45 80.2 -20.65 81.1 -12 76.75
  142. L -12.05 76.75
  143. Q 7.3 67.9 -4.45 40.35 -10.65 25.75 -25.35 9.35 -33.4 0.4 -49.8 -15.9
  144. L -49.7 -15.75
  145. Q -62 -28.8 -65.95 -38.1 -70.45 -49.05 -65.15 -59.8 -55.9 -76.65 -24.6 -65.55 Z" />
  146. 		</g>
  147.  
  148. 		<g id="ribbonBack_0_Layer0_0_FILL">
  149. 			<path fill="#5599FF" stroke="none" d="
  150. M -40.05 7.15
  151. L -40.05 7.2 -33.15 7.2 -48.1 -6.4 -40.05 7.15 Z" />
  152.  
  153. 			<path fill="#0066FF" stroke="none" d="
  154. M 24.95 7.15
  155. L 48.15 7.15 32.8 -7.15 24.95 7.15 Z" />
  156. 		</g>
  157.  
  158. 		<g id="cup_0_Layer0_0_FILL">
  159. 			<path fill="url(#Gradient_6)" stroke="none" d="
  160. M 40.8 -7.3
  161. Q 61.9 -15.5 79.2 -32.8 109.45 -63.05 111.8 -104.9
  162. L 111.8 -249.35 -111.95 -249.35 -111.95 -115.6
  163. Q -111.95 -115.4 -111.95 -115.2 -112 -113.6 -112 -112 -112 -65.6 -79.2 -32.8 -61.55 -15.15 -40 -7 -32.25 -4.1 -24 -2.35 -12.5 0 0 0 12.95 0 24.8 -2.55 33.05 -4.3 40.8 -7.3 Z" />
  164.  
  165. 			<path fill="url(#Gradient_7)" stroke="none" d="
  166. M 122.3 -249.35
  167. Q 122.4 -249.35 122.5 -249.35 126.1 -249.35 128.65 -251.95 131.25 -254.5 131.25 -258.1 131.25 -261.7 128.65 -264.3 126.35 -266.6 123.2 -266.8 122.95 -266.85 122.7 -266.85
  168. L -121.9 -266.8
  169. Q -122.2 -266.85 -122.5 -266.85 -126.1 -266.85 -128.7 -264.3 -131.25 -261.7 -131.25 -258.1 -131.25 -254.5 -128.7 -251.95 -126.3 -249.55 -123.1 -249.35 -122.95 -249.35 -122.8 -249.35
  170. L -111.95 -249.35 111.8 -249.35 122.3 -249.35 Z" />
  171. 		</g>
  172.  
  173. 		<g id="handleR_0_Layer0_0_FILL">
  174. 			<path fill="url(#Gradient_8)" stroke="none" d="
  175. M 24.55 -65.55
  176. L 24.6 -65.55
  177. Q 55.9 -76.65 65.15 -59.8 70.45 -49.05 65.95 -38.1 62 -28.8 49.7 -15.75
  178. L 49.8 -15.9
  179. Q 33.4 0.4 25.35 9.35 10.65 25.75 4.45 40.35 -7.3 67.9 12.05 76.75
  180. L 12 76.75
  181. Q 20.65 81.1 31.45 80.2 33.5 80 34.85 78.45 36.15 76.85 36 74.8 35.8 72.7 34.25 71.4 32.65 70.05 30.6 70.25 22.75 70.9 16.5 67.8 6.15 61.85 13.65 44.25 19.35 30.95 32.8 16.05 40.7 7.2 56.85 -8.8 56.85 -8.85 56.95 -8.9 70.9 -23.7 75.2 -34.3
  182. L 75.2 -34.25
  183. Q 81.45 -49.35 74.1 -64.25 62.5 -89.6 21.25 -75 13.5 -72.35 5.25 -68.3 3.4 -67.4 2.75 -65.4 2.05 -63.45 3 -61.6 3.9 -59.75 5.85 -59.05 7.8 -58.4 9.65 -59.3 17.3 -63.05 24.55 -65.55 Z" />
  184. 		</g>
  185.  
  186. 		<g id="coin_0_Layer1_0_FILL">
  187. 			<path fill="#FFCD03" stroke="none" d="
  188. M -25.85 -52.85
  189. L -33.25 -65.8
  190. Q -38.95 -65.55 -38.85 -59.7
  191. L -38.85 -17.25
  192. Q -35.75 -24.15 -30 -29.95 -29.65 -30.3 -29.3 -30.6 -28.6 -31.3 -27.9 -31.9 -26.9 -32.8 -25.85 -33.6
  193. L -25.85 -52.85
  194. M 18 -65.85
  195. L 24.95 -52.85 24.95 -34.3
  196. Q 27.55 -32.35 29.95 -29.95 34.95 -24.95 37.95 -19.1
  197. L 37.95 -61.5
  198. Q 37.7 -65.6 33.6 -65.85
  199. L 30.15 -65.85 18 -65.85 Z" />
  200.  
  201. 			<path fill="#0066FF" stroke="none" d="
  202. M 24.95 -52.85
  203. L 18 -65.85 -3.25 -105.55 -12.35 -122.5 -12.35 -122.55 -20.4 -136.1 -72.7 -136.1 -65.6 -122.5 -33.25 -65.8 -25.85 -52.85 24.95 -52.85 Z" />
  204.  
  205. 			<path fill="#5599FF" stroke="none" d="
  206. M 52.65 -122.55
  207. L 60.5 -136.85 10.55 -136.85 -3.25 -105.55 18 -65.85 30.15 -65.85 52.65 -122.55 Z" />
  208. 		</g>
  209.  
  210. 		<g id="coin_0_Layer0_0_FILL">
  211. 			<path fill="url(#Gradient_9)" stroke="none" d="
  212. M 37.95 -19.15
  213. Q 34.95 -25 29.95 -30 27.55 -32.4 24.95 -34.35 15.7 -41.2 4 -42.2 2.05 -42.4 0 -42.4 -12.3 -42.4 -22.1 -36.25 -24 -35.1 -25.85 -33.65 -26.9 -32.85 -27.9 -31.95 -28.6 -31.35 -29.3 -30.65 -29.65 -30.35 -30 -30 -35.75 -24.2 -38.85 -17.3 -42.4 -9.4 -42.4 0 -42.4 17.55 -30 29.95 -17.55 42.4 0 42.4 2.05 42.4 4 42.25 19 40.95 29.95 29.95 42.4 17.55 42.4 0 42.4 -10.5 37.95 -19.15
  214. M 2.7 -28.35
  215. Q 12.8 -27.5 20.15 -20.15 28.55 -11.8 28.55 0 28.55 11.8 20.15 20.15 12.8 27.55 2.7 28.45 1.4 28.55 0 28.55 -11.8 28.55 -20.15 20.15 -21.2 19.1 -22.1 18.05 -26.55 12.7 -27.9 6.1 -28.5 3.15 -28.5 0 -28.5 -3.15 -27.9 -6.05 -26.55 -12.7 -22.1 -18 -21.2 -19.1 -20.15 -20.15 -11.8 -28.5 0 -28.5 1.4 -28.5 2.7 -28.35 Z" />
  216.  
  217. 			<path fill="url(#Gradient_10)" stroke="none" d="
  218. M 20.15 -20.15
  219. Q 12.8 -27.5 2.7 -28.35 1.4 -28.5 0 -28.5 -11.8 -28.5 -20.15 -20.15 -21.2 -19.1 -22.1 -18 -26.55 -12.7 -27.9 -6.05 -28.5 -3.15 -28.5 0 -28.5 3.15 -27.9 6.1 -26.55 12.7 -22.1 18.05 -21.2 19.1 -20.15 20.15 -11.8 28.55 0 28.55 1.4 28.55 2.7 28.45 12.8 27.55 20.15 20.15 28.55 11.8 28.55 0 28.55 -11.8 20.15 -20.15
  220. M -3.4 -18.05
  221. L -3.05 -19.05 3.25 -19.05 15.25 14.35 13.9 14.35 9.45 14.35 7.05 7.55 -6.9 7.55 -7.25 8.55 -9.3 14.35 -9.95 14.35 -15 14.35 -3.4 -18.05 Z" />
  222.  
  223. 			<path fill="#FFCE05" stroke="none" d="
  224. M -7.25 8.55
  225. L -7.9 8.55 -9.95 14.35 -9.3 14.35 -7.25 8.55 Z" />
  226.  
  227. 			<path fill="#FFF570" stroke="none" d="
  228. M -7.25 8.55
  229. L -6.9 7.55 7.05 7.55 9.45 14.35 13.9 14.35 2.25 -18.05 -3.4 -18.05 -15 14.35 -9.95 14.35 -7.9 8.55 -7.25 8.55
  230. M -0.9 -11.45
  231. L -0.55 -10.5 0.1 -12.45 5.5 3.1 4.15 3.1 4.5 4.1 -6.4 4.1 -0.9 -11.45 Z" />
  232.  
  233. 			<path fill="url(#Gradient_11)" stroke="none" d="
  234. M 4.15 3.1
  235. L 5.5 3.1 0.1 -12.45 -0.55 -10.5 -5.4 3.1 4.15 3.1 Z" />
  236.  
  237. 			<path fill="#FFCD03" stroke="none" d="
  238. M -0.55 -10.5
  239. L -0.9 -11.45 -6.4 4.1 4.5 4.1 4.15 3.1 -5.4 3.1 -0.55 -10.5
  240. M -3.05 -19.05
  241. L -3.4 -18.05 2.25 -18.05 13.9 14.35 15.25 14.35 3.25 -19.05 -3.05 -19.05 Z" />
  242. 		</g>
  243. 	</defs>
  244.  
  245. 	<g id="shadow" transform="matrix( 1, 0, 0, 1, 250,742.25) ">
  246. 		<g transform="matrix( 1, 0, 0, 0.1714935302734375, 0.1,0.05) ">
  247. 			<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  248. 				<use xlink:href="#Symbol_1_0_Layer0_0_FILL" />
  249. 			</g>
  250. 		</g>
  251. 	</g>
  252.  
  253. 	<g id="confetti1" transform="matrix( 0.258819580078125, 0.965911865234375, -0.965911865234375, 0.258819580078125, 179.6,389.35) ">
  254. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  255. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  256. 		</g>
  257. 	</g>
  258.  
  259. 	<g id="confetti2" transform="matrix( 1, 0, 0, 1, 210.4,392.1) ">
  260. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  261. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  262. 		</g>
  263. 	</g>
  264.  
  265. 	<g id="confetti3" transform="matrix( 0.86602783203125, 0.4999847412109375, -0.4999847412109375, 0.86602783203125, 192.1,376.55) ">
  266. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  267. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  268. 		</g>
  269. 	</g>
  270.  
  271. 	<g id="confetti4" transform="matrix( 0.258819580078125, 0.965911865234375, -0.965911865234375, 0.258819580078125, 216.25,373.3) ">
  272. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  273. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  274. 		</g>
  275. 	</g>
  276.  
  277. 	<g id="confetti5" transform="matrix( 0.86602783203125, -0.4999847412109375, 0.4999847412109375, 0.86602783203125, 207.45,416.7) ">
  278. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  279. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  280. 		</g>
  281. 	</g>
  282.  
  283. 	<g id="confetti6" transform="matrix( 0.70709228515625, -0.70709228515625, 0.70709228515625, 0.70709228515625, 273.15,383.75) ">
  284. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  285. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  286. 		</g>
  287. 	</g>
  288.  
  289. 	<g id="confetti7" transform="matrix( 0.5, -0.8660125732421875, 0.8660125732421875, 0.5, 335.9,408.9) ">
  290. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  291. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  292. 		</g>
  293. 	</g>
  294.  
  295. 	<g id="confetti8" transform="matrix( 0.70709228515625, -0.70709228515625, 0.70709228515625, 0.70709228515625, 176.15,423.05) ">
  296. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  297. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  298. 		</g>
  299. 	</g>
  300.  
  301. 	<g id="confetti9" transform="matrix( 0.258819580078125, -0.965911865234375, 0.965911865234375, 0.258819580078125, 317.85,429.15) ">
  302. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  303. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  304. 		</g>
  305. 	</g>
  306.  
  307. 	<g id="confetti10" transform="matrix( 0, 1, -1, 0, 248.45,409.15) ">
  308. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  309. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  310. 		</g>
  311. 	</g>
  312.  
  313. 	<g id="confetti11" transform="matrix( -0.9659271240234375, 0.2587890625, -0.2587890625, -0.9659271240234375, 236,421.95) ">
  314. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  315. 			<use xlink:href="#confetti_0_Layer0_0_FILL" />
  316. 		</g>
  317. 	</g>
  318.  
  319. 	<g id="star2" transform="matrix( 0.5, -0.8660125732421875, 0.8660125732421875, 0.5, 210.4,404.9) ">
  320. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  321. 			<use xlink:href="#star_0_Layer0_0_FILL" />
  322. 		</g>
  323. 	</g>
  324.  
  325. 	<g id="star3" transform="matrix( 0.7775726318359375, -0.6287841796875, 0.6287841796875, 0.7775726318359375, 266.1,374.05) ">
  326. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  327. 			<use xlink:href="#star_0_Layer0_0_FILL" />
  328. 		</g>
  329. 	</g>
  330.  
  331. 	<g id="star1" transform="matrix( 0.6024169921875, 0.79815673828125, -0.79815673828125, 0.6024169921875, 296,429.35) ">
  332. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  333. 			<use xlink:href="#star_0_Layer0_0_FILL" />
  334. 		</g>
  335. 	</g>
  336.  
  337. 	<g id="base" transform="matrix( 1, 0, 0, 1, 250,747.2) ">
  338. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  339. 			<use xlink:href="#base_0_Layer0_0_FILL" />
  340. 		</g>
  341. 	</g>
  342.  
  343. 	<g id="handleL" transform="matrix( 1, 0, 0, 1, 147.35,429.3) ">
  344. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  345. 			<use xlink:href="#handleL_0_Layer0_0_FILL" />
  346. 		</g>
  347. 	</g>
  348.  
  349. 	<g id="medalBack" transform="matrix( 1, 0, 0, 1, 307.85,317.15) ">
  350. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  351. 			<use xlink:href="#ribbonBack_0_Layer0_0_FILL" />
  352. 		</g>
  353. 	</g>
  354.  
  355. 	<g id="cup" transform="matrix( 1, 0, 0, 1, 250,578.35) ">
  356. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  357. 			<use xlink:href="#cup_0_Layer0_0_FILL" />
  358. 		</g>
  359. 	</g>
  360.  
  361. 	<g id="handleR" transform="matrix( 1, 0, 0, 1, 348.4,430.85) ">
  362. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  363. 			<use xlink:href="#handleR_0_Layer0_0_FILL" />
  364. 		</g>
  365. 	</g>
  366.  
  367. 	<g id="medal" transform="matrix( 1, 0, 0, 1, 280.15,446.9) ">
  368. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  369. 			<use xlink:href="#coin_0_Layer1_0_FILL" />
  370. 		</g>
  371.  
  372. 		<g transform="matrix( 1, 0, 0, 1, 0,0) ">
  373. 			<use xlink:href="#coin_0_Layer0_0_FILL" />
  374. 		</g>
  375. 	</g>
  376. </svg>

3. Create a new CSS file named styles.css. Add CSS rules to style the different parts of the trophy, including their size, position, and appearance.

Add animation effects to make the trophy appear as if it’s rotating or sparkling. You can use CSS keyframes for animations.

  1. @keyframes confetti9 {
  2.   0% {
  3.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 317.85, 429.15);
  4.     animation-timing-function: ease-in;
  5.   }
  6.   21.008403361344538% {
  7.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 250, 429.15);
  8.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  9.   }
  10.   42.857142857142854% {
  11.     transform: matrix(-0.9999694824, 0, 0, -0.9999694824, 351.4, 136.85);
  12.     opacity: 1;
  13.     animation-timing-function: ease-in;
  14.   }
  15.   61.34453781512605% {
  16.     transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);
  17.     opacity: 0;
  18.     animation-timing-function: ease-out;
  19.   }
  20.   100% {
  21.     transform: matrix(0.0000152588, 0.9999237061, -0.9999237061, 0.0000152588, 394.55, 354.55);
  22.     opacity: 0;
  23.     animation-timing-function: ease-out;
  24.   }
  25. }
  26. @keyframes confetti6 {
  27.   0% {
  28.     transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 273.15, 383.75);
  29.     animation-timing-function: ease-in;
  30.   }
  31.   21.008403361344538% {
  32.     transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 383.75);
  33.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  34.   }
  35.   42.857142857142854% {
  36.     transform: matrix(-0.9658813477, -0.2587890625, 0.2587890625, -0.9658813477, 273.25, 62.2);
  37.     opacity: 1;
  38.     animation-timing-function: ease-in;
  39.   }
  40.   63.02521008403361% {
  41.     transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);
  42.     opacity: 0;
  43.     animation-timing-function: ease-out;
  44.   }
  45.   100% {
  46.     transform: matrix(0.2588195801, 0.9658813477, -0.9658813477, 0.2588195801, 322.1, 227.75);
  47.     opacity: 0;
  48.     animation-timing-function: ease-out;
  49.   }
  50. }
  51. @keyframes confetti11 {
  52.   0% {
  53.     transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 236, 421.95);
  54.     animation-timing-function: ease-in;
  55.   }
  56.   21.008403361344538% {
  57.     transform: matrix(-0.965927124, 0.2587890625, -0.2587890625, -0.965927124, 250.05, 421.95);
  58.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  59.   }
  60.   42.016806722689076% {
  61.     transform: matrix(-0.4999847412, 0.8659667969, -0.8659667969, -0.4999847412, 278.8, 164.8);
  62.     opacity: 1;
  63.     animation-timing-function: ease-in;
  64.   }
  65.   58.82352941176471% {
  66.     transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);
  67.     opacity: 0;
  68.     animation-timing-function: ease-out;
  69.   }
  70.   100% {
  71.     transform: matrix(-0.9658508301, 0.2587890625, -0.2587890625, -0.9658508301, 310.45, 303.4);
  72.     opacity: 0;
  73.     animation-timing-function: ease-out;
  74.   }
  75. }
  76. @keyframes cup {
  77.   0% {
  78.     transform: matrix(1, 0, 0, 1, 250, 578.35);
  79.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  80.   }
  81.   10.084033613445378% {
  82.     transform: matrix(1, 0, 0, 1, 250, 609.2);
  83.     animation-timing-function: ease-in;
  84.   }
  85.   13.445378151260504% {
  86.     transform: matrix(1, 0, 0, 1, 250, 609.2);
  87.     animation-timing-function: ease-in;
  88.   }
  89.   18.487394957983195% {
  90.     transform: matrix(1, 0, 0, 1, 250, 563.5);
  91.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  92.   }
  93.   28.57142857142857% {
  94.     transform: matrix(1, 0, 0, 1, 250, 495);
  95.     animation-timing-function: ease-in;
  96.   }
  97.   36.134453781512605% {
  98.     transform: matrix(1, 0, 0, 1, 250, 495);
  99.     animation-timing-function: ease-in;
  100.   }
  101.   45.378151260504204% {
  102.     transform: matrix(1, 0, 0, 1, 250, 563.5);
  103.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  104.   }
  105.   51.26050420168067% {
  106.     transform: matrix(1, 0, 0, 1, 250, 609.2);
  107.     animation-timing-function: ease-in;
  108.   }
  109.   59.66386554621849% {
  110.     transform: matrix(1, 0, 0, 1, 250, 578.35);
  111.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  112.   }
  113.   100% {
  114.     transform: matrix(1, 0, 0, 1, 250, 578.35);
  115.     animation-timing-function: linear;
  116.   }
  117. }
  118. @keyframes shadow {
  119.   0% {
  120.     transform: matrix(1, 0, 0, 1, 250, 742.25);
  121.     opacity: 1;
  122.     animation-timing-function: linear;
  123.   }
  124.   18.487394957983195% {
  125.     transform: matrix(1, 0, 0, 1, 250, 742.25);
  126.     opacity: 1;
  127.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  128.   }
  129.   28.57142857142857% {
  130.     transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);
  131.     opacity: 0.46875;
  132.     animation-timing-function: ease-in;
  133.   }
  134.   36.134453781512605% {
  135.     transform: matrix(0.6494445801, 0, 0, 0.6494445801, 250, 742.25);
  136.     opacity: 0.46875;
  137.     animation-timing-function: ease-in;
  138.   }
  139.   45.378151260504204% {
  140.     transform: matrix(1, 0, 0, 1, 250, 742.25);
  141.     opacity: 1;
  142.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  143.   }
  144.   100% {
  145.     transform: matrix(1, 0, 0, 1, 250, 742.25);
  146.     opacity: 1;
  147.     animation-timing-function: linear;
  148.   }
  149. }
  150. @keyframes confetti2 {
  151.   0% {
  152.     transform: matrix(1, 0, 0, 1, 210.4, 392.1);
  153.     animation-timing-function: ease-in;
  154.   }
  155.   21.84873949579832% {
  156.     transform: matrix(1, 0, 0, 1, 250, 392.1);
  157.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  158.   }
  159.   43.69747899159664% {
  160.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 190.3, 141.5);
  161.     opacity: 1;
  162.     animation-timing-function: ease-in;
  163.   }
  164.   65.54621848739495% {
  165.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);
  166.     opacity: 0;
  167.     animation-timing-function: ease-out;
  168.   }
  169.   100% {
  170.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 192.5, 291);
  171.     opacity: 0;
  172.     animation-timing-function: ease-out;
  173.   }
  174. }
  175. @keyframes handleL {
  176.   0% {
  177.     transform: matrix(1, 0, 0, 1, 147.35, 429.3);
  178.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  179.   }
  180.   10.084033613445378% {
  181.     transform: matrix(1, 0, 0, 1, 147.35, 460.15);
  182.     animation-timing-function: ease-in;
  183.   }
  184.   13.445378151260504% {
  185.     transform: matrix(1, 0, 0, 1, 147.35, 460.15);
  186.     animation-timing-function: ease-in;
  187.   }
  188.   18.487394957983195% {
  189.     transform: matrix(1, 0, 0, 1, 147.35, 414.45);
  190.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  191.   }
  192.   28.57142857142857% {
  193.     transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);
  194.     animation-timing-function: ease-in;
  195.   }
  196.   36.134453781512605% {
  197.     transform: matrix(0.7661743164, 0, 0, 1, 158.85, 345.95);
  198.     animation-timing-function: ease-in;
  199.   }
  200.   45.378151260504204% {
  201.     transform: matrix(1, 0, 0, 1, 147.35, 414.45);
  202.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  203.   }
  204.   51.26050420168067% {
  205.     transform: matrix(1, 0, 0, 1, 147.35, 460.15);
  206.     animation-timing-function: ease-in;
  207.   }
  208.   59.66386554621849% {
  209.     transform: matrix(1, 0, 0, 1, 147.35, 429.3);
  210.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  211.   }
  212.   100% {
  213.     transform: matrix(1, 0, 0, 1, 147.35, 429.3);
  214.     animation-timing-function: linear;
  215.   }
  216. }
  217. @keyframes confetti7 {
  218.   0% {
  219.     transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 335.9, 408.9);
  220.     animation-timing-function: ease-in;
  221.   }
  222.   22.689075630252102% {
  223.     transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 249.95, 408.9);
  224.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  225.   }
  226.   46.21848739495798% {
  227.     transform: matrix(-0.8660125732, -0.5, 0.5, -0.8660125732, 380.55, 80.75);
  228.     opacity: 1;
  229.     animation-timing-function: ease-in;
  230.   }
  231.   67.22689075630252% {
  232.     transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);
  233.     opacity: 0;
  234.     animation-timing-function: ease-out;
  235.   }
  236.   100% {
  237.     transform: matrix(-0.2587890625, 0.9658813477, -0.9658813477, -0.2587890625, 442.5, 257.05);
  238.     opacity: 0;
  239.     animation-timing-function: ease-out;
  240.   }
  241. }
  242. @keyframes star1 {
  243.   0% {
  244.     transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 296, 429.35);
  245.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  246.   }
  247.   19.327731092436977% {
  248.     transform: matrix(0.6024169922, 0.7981567383, -0.7981567383, 0.6024169922, 286, 429.35);
  249.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  250.   }
  251.   42.857142857142854% {
  252.     transform: matrix(-0.712677002, 0.7014160156, -0.7014160156, -0.712677002, 292.5, 104.15);
  253.     opacity: 1;
  254.     animation-timing-function: ease-in;
  255.   }
  256.   64.70588235294117% {
  257.     transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);
  258.     opacity: 0;
  259.     animation-timing-function: linear;
  260.   }
  261.   100% {
  262.     transform: matrix(-0.7884521484, -0.6150512695, 0.6150512695, -0.7884521484, 300.3, 344.2);
  263.     opacity: 0;
  264.     animation-timing-function: ease-out;
  265.   }
  266. }
  267. @keyframes confetti3 {
  268.   0% {
  269.     transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 192.1, 376.55);
  270.     animation-timing-function: ease-in;
  271.   }
  272.   21.008403361344538% {
  273.     transform: matrix(0.866027832, 0.4999847412, -0.4999847412, 0.866027832, 250, 376.55);
  274.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  275.   }
  276.   43.69747899159664% {
  277.     transform: matrix(-0.9658813477, 0.2587890625, -0.2587890625, -0.9658813477, 119.85, 46.45);
  278.     opacity: 1;
  279.     animation-timing-function: ease-in;
  280.   }
  281.   63.86554621848739% {
  282.     transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);
  283.     opacity: 0;
  284.     animation-timing-function: ease-out;
  285.   }
  286.   100% {
  287.     transform: matrix(0.2587890625, -0.9658813477, 0.9658813477, 0.2587890625, 64.4, 210.5);
  288.     opacity: 0;
  289.     animation-timing-function: ease-out;
  290.   }
  291. }
  292. @keyframes confetti1 {
  293.   0% {
  294.     transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 179.6, 389.35);
  295.     animation-timing-function: ease-in;
  296.   }
  297.   21.008403361344538% {
  298.     transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 389.35);
  299.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  300.   }
  301.   42.857142857142854% {
  302.     transform: matrix(-0.2587890625, 0.9659118652, -0.9659118652, -0.2587890625, 159.45, 71.2);
  303.     opacity: 1;
  304.     animation-timing-function: ease-in;
  305.   }
  306.   67.22689075630252% {
  307.     transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);
  308.     opacity: 0;
  309.     animation-timing-function: ease-out;
  310.   }
  311.   100% {
  312.     transform: matrix(0.9659118652, 0.2587890625, -0.2587890625, 0.9659118652, 145.7, 200.85);
  313.     opacity: 0;
  314.     animation-timing-function: ease-out;
  315.   }
  316. }
  317. @keyframes confetti8 {
  318.   0% {
  319.     transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 176.15, 423.05);
  320.     animation-timing-function: ease-in;
  321.   }
  322.   21.84873949579832% {
  323.     transform: matrix(0.7070922852, -0.7070922852, 0.7070922852, 0.7070922852, 249.95, 423.05);
  324.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  325.   }
  326.   44.537815126050425% {
  327.     transform: matrix(0, -0.9999694824, 0.9999694824, 0, 123.05, 130.6);
  328.     opacity: 1;
  329.     animation-timing-function: ease-in;
  330.   }
  331.   63.02521008403361% {
  332.     transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);
  333.     opacity: 0;
  334.     animation-timing-function: ease-out;
  335.   }
  336.   100% {
  337.     transform: matrix(0.9658660889, 0.2587738037, -0.2587738037, 0.9658660889, 96.7, 292.15);
  338.     opacity: 0;
  339.     animation-timing-function: ease-out;
  340.   }
  341. }
  342. @keyframes star2 {
  343.   0% {
  344.     transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 404.9);
  345.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  346.   }
  347.   23.52941176470588% {
  348.     transform: matrix(0.5, -0.8660125732, 0.8660125732, 0.5, 210.4, 392.05);
  349.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  350.   }
  351.   44.537815126050425% {
  352.     transform: matrix(-0.4999389648, 0.8659362793, -0.8659362793, -0.4999389648, 161.8, 152.8);
  353.     opacity: 1;
  354.     animation-timing-function: ease-in;
  355.   }
  356.   61.34453781512605% {
  357.     transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);
  358.     opacity: 0;
  359.     animation-timing-function: linear;
  360.   }
  361.   100% {
  362.     transform: matrix(-0.4999389648, -0.8659667969, 0.8659667969, -0.4999389648, 135.2, 395.15);
  363.     opacity: 0;
  364.     animation-timing-function: ease-out;
  365.   }
  366. }
  367. @keyframes handleR {
  368.   0% {
  369.     transform: matrix(1, 0, 0, 1, 348.4, 430.85);
  370.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  371.   }
  372.   10.084033613445378% {
  373.     transform: matrix(1, 0, 0, 1, 348.4, 461.7);
  374.     animation-timing-function: ease-in;
  375.   }
  376.   13.445378151260504% {
  377.     transform: matrix(1, 0, 0, 1, 348.4, 461.7);
  378.     animation-timing-function: ease-in;
  379.   }
  380.   18.487394957983195% {
  381.     transform: matrix(1, 0, 0, 1, 348.4, 416);
  382.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  383.   }
  384.   28.57142857142857% {
  385.     transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);
  386.     animation-timing-function: ease-in;
  387.   }
  388.   36.134453781512605% {
  389.     transform: matrix(0.8685302734, 0, 0, 1, 336.9, 347.5);
  390.     animation-timing-function: ease-in;
  391.   }
  392.   45.378151260504204% {
  393.     transform: matrix(1, 0, 0, 1, 348.4, 416);
  394.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  395.   }
  396.   51.26050420168067% {
  397.     transform: matrix(1, 0, 0, 1, 348.4, 461.7);
  398.     animation-timing-function: ease-in;
  399.   }
  400.   59.66386554621849% {
  401.     transform: matrix(1, 0, 0, 1, 348.4, 430.85);
  402.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  403.   }
  404.   100% {
  405.     transform: matrix(1, 0, 0, 1, 348.4, 430.85);
  406.     animation-timing-function: linear;
  407.   }
  408. }
  409. @keyframes confetti10 {
  410.   0% {
  411.     transform: matrix(0, 1, -1, 0, 248.45, 409.15);
  412.     animation-timing-function: ease-in;
  413.   }
  414.   27.73109243697479% {
  415.     transform: matrix(0, 1, -1, 0, 250.05, 409.15);
  416.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  417.   }
  418.   48.739495798319325% {
  419.     transform: matrix(1, 0, 0, 1, 248.45, 116.65);
  420.     opacity: 1;
  421.     animation-timing-function: ease-in;
  422.   }
  423.   63.86554621848739% {
  424.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);
  425.     opacity: 0;
  426.     animation-timing-function: ease-out;
  427.   }
  428.   100% {
  429.     transform: matrix(0.2588195801, -0.9659118652, 0.9659118652, 0.2588195801, 248.45, 238.05);
  430.     opacity: 0;
  431.     animation-timing-function: ease-out;
  432.   }
  433. }
  434. @keyframes star3 {
  435.   0% {
  436.     transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05);
  437.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  438.   }
  439.   30.252100840336134% {
  440.     transform: matrix(0.7775726318, -0.6287841797, 0.6287841797, 0.7775726318, 266.1, 374.05);
  441.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  442.   }
  443.   49.57983193277311% {
  444.     transform: matrix(0.7248535156, 0.6888275146, -0.6888275146, 0.7248535156, 361.8, 151.7);
  445.     opacity: 1;
  446.     animation-timing-function: ease-in;
  447.   }
  448.   67.22689075630252% {
  449.     transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4);
  450.     opacity: 0;
  451.     animation-timing-function: linear;
  452.   }
  453.   100% {
  454.     transform: matrix(-0.5883178711, 0.80859375, -0.80859375, -0.5883178711, 413.4, 412.4);
  455.     opacity: 0;
  456.     animation-timing-function: ease-out;
  457.   }
  458. }
  459. @keyframes confetti4 {
  460.   0% {
  461.     transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 216.25, 373.3);
  462.     animation-timing-function: ease-in;
  463.   }
  464.   28.57142857142857% {
  465.     transform: matrix(0.2588195801, 0.9659118652, -0.9659118652, 0.2588195801, 250.05, 373.3);
  466.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  467.   }
  468.   49.57983193277311% {
  469.     transform: matrix(-0.9658660889, 0.2587890625, -0.2587890625, -0.9658660889, 216.5, 54.4);
  470.     opacity: 1;
  471.     animation-timing-function: ease-in;
  472.   }
  473.   70.58823529411765% {
  474.     transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95);
  475.     opacity: 0;
  476.     animation-timing-function: ease-out;
  477.   }
  478.   100% {
  479.     transform: matrix(0.4999389648, -0.8659667969, 0.8659667969, 0.4999389648, 202.55, 204.95);
  480.     opacity: 0;
  481.     animation-timing-function: ease-out;
  482.   }
  483. }
  484. @keyframes medal {
  485.   0% {
  486.     transform: matrix(1, 0, 0, 1, 280.15, 446.9);
  487.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  488.   }
  489.   10.084033613445378% {
  490.     transform: matrix(1, 0, 0, 1, 280.15, 477.75);
  491.     animation-timing-function: ease-in;
  492.   }
  493.   13.445378151260504% {
  494.     transform: matrix(1, 0, 0, 1, 280.15, 477.75);
  495.     animation-timing-function: ease-in;
  496.   }
  497.   18.487394957983195% {
  498.     transform: matrix(1, 0, 0, 1, 280.15, 432.05);
  499.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  500.   }
  501.   28.57142857142857% {
  502.     transform: matrix(1, 0, 0, 1, 249.15, 349.75);
  503.     animation-timing-function: ease-in;
  504.   }
  505.   36.134453781512605% {
  506.     transform: matrix(1, 0, 0, 1, 249.15, 349.75);
  507.     animation-timing-function: ease-in;
  508.   }
  509.   45.378151260504204% {
  510.     transform: matrix(1, 0, 0, 1, 280.15, 432.05);
  511.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  512.   }
  513.   51.26050420168067% {
  514.     transform: matrix(1, 0, 0, 1, 280.15, 477.75);
  515.     animation-timing-function: ease-in;
  516.   }
  517.   59.66386554621849% {
  518.     transform: matrix(1, 0, 0, 1, 280.15, 446.9);
  519.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  520.   }
  521.   100% {
  522.     transform: matrix(1, 0, 0, 1, 280.15, 446.9);
  523.     animation-timing-function: linear;
  524.   }
  525. }
  526. @keyframes base {
  527.   0% {
  528.     transform: matrix(1, 0, 0, 1, 250, 747.2);
  529.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  530.   }
  531.   10.084033613445378% {
  532.     transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);
  533.     animation-timing-function: ease-in;
  534.   }
  535.   13.445378151260504% {
  536.     transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);
  537.     animation-timing-function: ease-in;
  538.   }
  539.   18.487394957983195% {
  540.     transform: matrix(1, 0, 0, 1.092956543, 250, 747.2);
  541.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  542.   }
  543.   28.57142857142857% {
  544.     transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7);
  545.     animation-timing-function: ease-in;
  546.   }
  547.   36.134453781512605% {
  548.     transform: matrix(0.8340454102, 0, 0, 1.092956543, 250, 678.7);
  549.     animation-timing-function: ease-in;
  550.   }
  551.   45.378151260504204% {
  552.     transform: matrix(1, 0, 0, 1.092956543, 250, 747.2);
  553.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  554.   }
  555.   51.26050420168067% {
  556.     transform: matrix(1, 0, 0, 0.8267211914, 250, 747.2);
  557.     animation-timing-function: ease-in;
  558.   }
  559.   59.66386554621849% {
  560.     transform: matrix(1, 0, 0, 1, 250, 747.2);
  561.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  562.   }
  563.   100% {
  564.     transform: matrix(1, 0, 0, 1, 250, 747.2);
  565.     animation-timing-function: linear;
  566.   }
  567. }
  568. @keyframes confetti5 {
  569.   0% {
  570.     transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 207.45, 416.7);
  571.     animation-timing-function: ease-in;
  572.   }
  573.   22.689075630252102% {
  574.     transform: matrix(0.866027832, -0.4999847412, 0.4999847412, 0.866027832, 250, 416.7);
  575.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  576.   }
  577.   44.537815126050425% {
  578.     transform: matrix(0.7070770264, 0.7070922852, -0.7070922852, 0.7070770264, 348.55, 49.15);
  579.     opacity: 1;
  580.     animation-timing-function: ease-in;
  581.   }
  582.   65.54621848739495% {
  583.     transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9);
  584.     opacity: 0;
  585.     animation-timing-function: ease-out;
  586.   }
  587.   100% {
  588.     transform: matrix(-0.9658508301, 0.2588195801, -0.2588195801, -0.9658508301, 417.15, 198.9);
  589.     opacity: 0;
  590.     animation-timing-function: ease-out;
  591.   }
  592. }
  593. @keyframes medalBack {
  594.   0% {
  595.     transform: matrix(1, 0, 0, 1, 307.85, 317.15);
  596.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  597.   }
  598.   10.084033613445378% {
  599.     transform: matrix(1, 0, 0, 1, 307.85, 348);
  600.     animation-timing-function: ease-in;
  601.   }
  602.   13.445378151260504% {
  603.     transform: matrix(1, 0, 0, 1, 307.85, 348);
  604.     animation-timing-function: ease-in;
  605.   }
  606.   18.487394957983195% {
  607.     transform: matrix(1, 0, 0, 1, 307.85, 302.3);
  608.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  609.   }
  610.   28.57142857142857% {
  611.     transform: matrix(1, 0, 0, 1, 276.85, 220);
  612.     animation-timing-function: ease-in;
  613.   }
  614.   36.134453781512605% {
  615.     transform: matrix(1, 0, 0, 1, 276.85, 220);
  616.     animation-timing-function: ease-in;
  617.   }
  618.   45.378151260504204% {
  619.     transform: matrix(1, 0, 0, 1, 307.85, 302.3);
  620.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  621.   }
  622.   51.26050420168067% {
  623.     transform: matrix(1, 0, 0, 1, 307.85, 348);
  624.     animation-timing-function: ease-in;
  625.   }
  626.   59.66386554621849% {
  627.     transform: matrix(1, 0, 0, 1, 307.85, 317.15);
  628.     animation-timing-function: cubic-bezier(0.17, 0.76, 0.44, 0.97);
  629.   }
  630.   100% {
  631.     transform: matrix(1, 0, 0, 1, 307.85, 317.15);
  632.     animation-timing-function: linear;
  633.   }
  634. }
  635. #confetti9 {
  636.   animation: confetti9 1.9833333333s infinite;
  637.   animation-delay: 0s;
  638. }
  639.  
  640. #confetti6 {
  641.   animation: confetti6 1.9833333333s infinite;
  642.   animation-delay: 0s;
  643. }
  644.  
  645. #confetti11 {
  646.   animation: confetti11 1.9833333333s infinite;
  647.   animation-delay: 0s;
  648. }
  649.  
  650. #confetti2 {
  651.   animation: confetti2 1.9833333333s infinite;
  652.   animation-delay: 0s;
  653. }
  654.  
  655. #confetti7 {
  656.   animation: confetti7 1.9833333333s infinite;
  657.   animation-delay: 0s;
  658. }
  659.  
  660. #star1 {
  661.   animation: star1 1.9833333333s infinite;
  662.   animation-delay: 0s;
  663. }
  664.  
  665. #confetti3 {
  666.   animation: confetti3 1.9833333333s infinite;
  667.   animation-delay: 0s;
  668. }
  669.  
  670. #confetti1 {
  671.   animation: confetti1 1.9833333333s infinite;
  672.   animation-delay: 0s;
  673. }
  674.  
  675. #confetti8 {
  676.   animation: confetti8 1.9833333333s infinite;
  677.   animation-delay: 0s;
  678. }
  679.  
  680. #star2 {
  681.   animation: star2 1.9833333333s infinite;
  682.   animation-delay: 0s;
  683. }
  684.  
  685. #confetti10 {
  686.   animation: confetti10 1.9833333333s infinite;
  687.   animation-delay: 0s;
  688. }
  689.  
  690. #star3 {
  691.   animation: star3 1.9833333333s infinite;
  692.   animation-delay: 0s;
  693. }
  694.  
  695. #confetti4 {
  696.   animation: confetti4 1.9833333333s infinite;
  697.   animation-delay: 0s;
  698. }
  699.  
  700. #confetti5 {
  701.   animation: confetti5 1.9833333333s infinite;
  702.   animation-delay: 0s;
  703. }
  704.  
  705. #shadow {
  706.   animation: shadow 1.9833333333s infinite;
  707.   animation-delay: 0s;
  708. }
  709.  
  710. #cup {
  711.   animation: cup 1.9833333333s infinite;
  712.   animation-delay: 0s;
  713. }
  714.  
  715. #handleL {
  716.   animation: handleL 1.9833333333s infinite;
  717.   animation-delay: 0s;
  718. }
  719.  
  720. #handleR {
  721.   animation: handleR 1.9833333333s infinite;
  722.   animation-delay: 0s;
  723. }
  724.  
  725. #medal {
  726.   animation: medal 1.9833333333s infinite;
  727.   animation-delay: 0s;
  728. }
  729.  
  730. #base {
  731.   animation: base 1.9833333333s infinite;
  732.   animation-delay: 0s;
  733. }
  734.  
  735. #medalBack {
  736.   animation: medalBack 1.9833333333s infinite;
  737.   animation-delay: 0s;
  738. }
  739.  
  740. body {
  741.   display: flex;
  742.   align-items: center;
  743.   justify-content: center;
  744.   height: 100vh;
  745.   background: #eed !important;
  746. }
  747.  
  748. svg {
  749.   width: 250px;
  750.   height: auto;
  751. }

That’s all! hopefully, you have successfully created Trophy Animation on your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X