Halloween Pumpkin Loader

Vous souhaitez mettre un soupçon d’horreur, de sorcellerie ou encore d’Halloween dans votre élément de chargement ? Alors je vous invite à foncer sur le site codpen.io pour découvrir le script Halloween Pumpkin Loader.

Le code est composé d’une partie HTML et d’une partie CSS.

La partie HTML :

<div class="container">
  <svg width="291" height="272" viewBox="0 0 291 272" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="pumpkin">
  <g id="pumpkin-body" filter="url(#filter0_ddi)">
  <ellipse id="Ellipse 12" cx="116.5" cy="134.5" rx="55.5" ry="86.5" fill="url(#paint0_radial)"/>
  <ellipse id="Ellipse 13" cx="172.5" cy="138.5" rx="55.5" ry="86.5" fill="url(#paint1_radial)"/>
  <g id="Vector 62" filter="url(#filter1_i)">
  <path d="M170.5 77.1094C138.9 63.9094 166.667 26.9428 184.5 10.1094C186.167 8.60942 186.6 4.90942 175 2.10942C163.4 -0.690578 126.833 50.9428 110 77.1094H170.5Z" fill="url(#paint2_linear)"/>
  </g>
  <ellipse id="Ellipse 8" cx="211.256" cy="156.339" rx="71.2557" ry="96.3391" fill="url(#paint3_radial)"/>
  <ellipse id="Ellipse 9" cx="185.256" cy="164.339" rx="71.2557" ry="96.3391" fill="url(#paint4_radial)"/>
  <ellipse id="Ellipse 11" cx="75.2557" cy="148.339" rx="71.2557" ry="96.3391" fill="url(#paint5_radial)"/>
  <ellipse id="Ellipse 10" cx="94.2557" cy="156.339" rx="71.2557" ry="96.3391" fill="url(#paint6_radial)"/>
  <ellipse id="Ellipse 5" cx="141.114" cy="166.962" rx="71.2557" ry="96.3391" fill="url(#paint7_radial)"/>
  </g>
  <g id="face">
  <g id="eyes">
  <g id="Vector 60" filter="url(#filter2_i)">
  <path d="M85.66 143.786C50.6055 95.1616 76.6003 88.1166 88.2005 91.8505C92.2648 106.107 116.48 119.938 123 115.27C123 142.004 95.7551 157.789 85.66 143.786Z" />
  </g>
  <g id="Vector 61" filter="url(#filter3_i)">
  <path d="M209.624 143.786C242.129 95.1616 218.025 88.1166 207.269 91.8505C203.5 106.107 181.046 119.938 175 115.27C175 142.004 200.263 157.789 209.624 143.786Z" />
  </g>
  </g>
  <g id="nostrils">
  <g id="Polygon 6" filter="url(#filter4_i)">
  <path d="M137.124 149.923C137.768 151.665 140.232 151.665 140.876 149.923L144.933 138.943C145.416 137.637 144.449 136.25 143.057 136.25H134.943C133.551 136.25 132.584 137.637 133.067 138.943L137.124 149.923Z" />
  </g>
  <g id="Polygon 7" filter="url(#filter5_i)">
  <path d="M159.124 149.923C159.768 151.665 162.232 151.665 162.876 149.923L166.933 138.943C167.416 137.637 166.449 136.25 165.057 136.25H156.943C155.551 136.25 154.584 137.637 155.067 138.943L159.124 149.923Z" />
  </g>
  </g>
  <g id="mouth">
  <g id="Vector 63" filter="url(#filter6_ddi)">
  <path d="M74.4291 177.596C67.7297 196.422 36.4662 172.367 32 167.661L53.7728 193.807V206.881L69.4046 213.679C68.6602 207.578 67.6181 195.899 69.4046 197.991C71.1911 200.083 85.7807 203.394 92.8522 204.789V216.294H112.392L111.275 204.789C118.868 208.972 124.488 206.532 126.349 204.789L124.116 221H156.496L154.263 204.789C161.409 208.972 172.128 206.532 176.594 204.789V216.294H197.808L196.692 204.789H220.698L218.465 213.679H238.563L236.888 204.789C246.378 206.358 268.16 164.821 260.335 174.459C257.788 177.596 242.471 193.284 227.397 185.44L230.747 175.505L208.416 174.459C208.416 178.642 211.207 176.028 211.207 185.44C211.207 192.842 191.667 187.532 185.526 185.44L187.759 174.459H162.079C160.962 176.55 164.312 185.44 164.312 185.44C164.312 185.44 141.981 187.532 134.165 185.44L136.398 164H110.159L111.275 185.44C97.4301 190.461 93.2244 187.532 92.8522 185.44L94.5271 164H74.4291V177.596Z" />
  </g>
  </g>
  </g>
  </g>
  <defs>
  <filter id="filter0_ddi" x="0" y="-2" width="290.511" height="273.301" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dy="4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dx="4" dy="2"/>
  <feGaussianBlur stdDeviation="2"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
  <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="-4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
  </filter>
  <filter id="filter1_i" x="110" y="-2" width="75.3757" height="79.1094" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="-6"/>
  <feGaussianBlur stdDeviation="2"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
  </filter>
  <filter id="filter2_i" x="68" y="91" width="55" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="5"/>
  <feGaussianBlur stdDeviation="2.5"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
  </filter>
  <filter id="filter3_i" x="175" y="91" width="51" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="5"/>
  <feGaussianBlur stdDeviation="2.5"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
  </filter>
  <filter id="filter4_i" x="132.941" y="136.25" width="12.1176" height="17.9797" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="3"/>
  <feGaussianBlur stdDeviation="1.5"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
  </filter>
  <filter id="filter5_i" x="154.941" y="136.25" width="12.1176" height="17.9797" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="3"/>
  <feGaussianBlur stdDeviation="1.5"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.99 0"/>
  <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
  </filter>
  <filter id="filter6_ddi" x="28" y="164" width="238" height="65" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dy="2"/>
  <feGaussianBlur stdDeviation="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0.737255 0 0 0 0 0.34902 0 0 0 0 0.121569 0 0 0 1 0"/>
  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dy="4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
  <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
  <feOffset dy="6"/>
  <feGaussianBlur stdDeviation="4"/>
  <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
  <feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
  </filter>
  <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120.306 61.3576) rotate(91.3998) scale(159.42 102.307)">
  <stop stop-color="#D18122"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(176.306 65.3576) rotate(91.3998) scale(159.42 102.307)">
  <stop stop-color="#D18122"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <linearGradient id="paint2_linear" x1="148" y1="20" x2="166" y2="77" gradientUnits="userSpaceOnUse">
  <stop offset="0.0001" stop-color="#7C8B20"/>
  <stop offset="1" stop-color="#38433A"/>
  </linearGradient>
  <radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(216.142 74.877) rotate(91.6135) scale(177.57 131.337)">
  <stop stop-color="#D1B522"/>
  <stop offset="0.354167" stop-color="#D18122"/>
  <stop offset="0.776042" stop-color="#D15522"/>
  <stop offset="0.963542" stop-color="#95683D"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(190.142 82.877) rotate(91.6135) scale(177.57 131.337)">
  <stop stop-color="#D1B522"/>
  <stop offset="0.354167" stop-color="#D18122"/>
  <stop offset="0.776042" stop-color="#D15522"/>
  <stop offset="0.963542" stop-color="#95683D"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(80.1416 66.877) rotate(91.6135) scale(177.57 131.337)">
  <stop stop-color="#D1B522"/>
  <stop offset="0.354167" stop-color="#D18122"/>
  <stop offset="0.776042" stop-color="#D15522"/>
  <stop offset="0.963542" stop-color="#95683D"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint6_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(99.1416 74.877) rotate(91.6135) scale(177.57 131.337)">
  <stop stop-color="#D1B522"/>
  <stop offset="0.354167" stop-color="#D18122"/>
  <stop offset="0.776042" stop-color="#D15522"/>
  <stop offset="0.963542" stop-color="#95683D"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint7_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146 85.5) rotate(91.6135) scale(177.57 131.337)">
  <stop offset="0.0104167" stop-color="#D1B522"/>
  <stop offset="0.078125" stop-color="#D1B522"/>
  <stop offset="0.354167" stop-color="#D18122"/>
  <stop offset="0.776042" stop-color="#D15522"/>
  <stop offset="0.963542" stop-color="#95683D"/>
  <stop offset="1" stop-color="#624224"/>
  </radialGradient>
  <radialGradient id="paint8_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(95.5 120) rotate(90) scale(29 27.5)">
  <stop stop-color="#FDB832"/>
  <stop offset="1" stop-color="#271D19"/>
  </radialGradient>
  <radialGradient id="paint9_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200.5 120) rotate(90) scale(29 25.5)">
  <stop stop-color="#FDB832"/>
  <stop offset="1" stop-color="#271D19"/>
  </radialGradient>
  <radialGradient id="paint10_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(139 142.5) rotate(-90) scale(12.5 8)">
  <stop stop-color="#FDB832"/>
  <stop offset="1" stop-color="#271D19"/>
  </radialGradient>
  <radialGradient id="paint11_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(161 142.5) rotate(-90) scale(12.5 8)">
  <stop stop-color="#FDB832"/>
  <stop offset="1" stop-color="#271D19"/>
  </radialGradient>
  <radialGradient id="paint12_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(147 192.5) rotate(90) scale(28.5 115)">
  <stop stop-color="#FDB832"/>
  <stop offset="1" stop-color="#271D19"/>
  </radialGradient>
  </defs>
  </svg>
</div>

La partie CSS :

body {
  background: #271D19;
    animation: darken-background 4s ease-in-out infinite alternate;
}
.container {
  position: absolute;
  top: 30%;
  left: 40%;
}
#face {
  fill: #271D19;
  animation: light 4s ease-in-out infinite alternate;
}
#pumpkin-body{
    animation: darken 4s ease-in-out infinite alternate;
}

@keyframes light {
  from{
    fill: #271D19;
  }
  to{
    fill: #FDB832;
  }
}
@keyframes darken {
  to{
   opacity: 0.3;
  }
}
@keyframes darken-background {
  to{
   background: #0E0701;
  }
}

@media screen and (max-width: 600px) {
  .container {
    top: 15%;
    left: 10%;
}

Site officiel et code  : https://codepen.io/marija-hajnal/pen/MWeVdxR