Skip to content

Instantly share code, notes, and snippets.

@anon987654321

anon987654321/halloween-pumpkin.markdown

Created October 20, 2024 07:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anon987654321/ea8a0122c9d5539d19032d37f41cc064 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anon987654321/ea8a0122c9d5539d19032d37f41cc064 to your computer and use it in GitHub Desktop.
Download ZIP
Halloween Pumpkin
Raw
halloween-pumpkin.markdown
Raw
index.html
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<path id="pumpkinFace" d="M324.8,423.7c-2,1.8-3.8,3.3-5.5,4.8c-1.8,1.6-4,2.6-6.3,3.4
c-4.6,1.3-9.1,1.4-13.4-1.1c-2.2-1.4-4.5-2.8-6.8-4.3c-2.4-1.4-4.9-1.8-7.7-0.6c-5.6,2.5-11.7,3.9-17.7,6c-2.2,0.8-4.6,1.1-7.1,1.4
c-2.4,0.3-4.3-0.4-6.1-1.8c-2-2-4.1-4-6.2-5.8c-1.4-1.4-3-2.8-4.5-4.2c-3.3-2.4-6.8-4.2-10.9-5.2c-2.9-0.6-5.8-1.4-8.8-2
c-7.1-1.3-13.7-3.6-20.2-6.3c-9.7-4-19.4-8.1-27.7-14.3c-0.4-0.3-0.7-0.6-1.3-0.9c-7.7-4.4-13.3-10.7-18.2-17.4
c-2.2-3-4.1-6.2-6.1-9.3c-2-3-3-6-3-9.6c-0.1-3-1.2-6-1.9-9.3c0.1-3.1,0.6-6.5,0.6-9.8c0.1-12.6,2.6-24.9,6.7-36.8
c4-11.3,8.8-22.3,16.8-31.9c6.4-7.9,13-15.5,21.4-22c1.6-1.3,3.3-2.5,5.4-3.2c2-0.8,3.8-1.9,5.7-2.8c6.3-3,12.5-6,19.6-7.6
c5.1-1.1,10.2-2,15.4-2.5c11.4-0.9,22.6,0.2,33.7,2.5c1.8,0.4,3.6,1.2,5.4,1.8c1.3,0.4,2.5,0.8,4.1,1.1c0.9-0.7,1.9-1.3,2.3-2
c4.5-7.6,7-21.8,5.4-30.1c-0.7-3.5-1.2-7.1-2.7-10.5c-0.3-0.6,0.1-1.4,0.2-2c12.2-4.8,22.8-11.7,32.3-19.8c1.2-1,2.2-2.2,3.5-3.1
c1.5-1.1,3-2.1,5.1-1.9c0.5,0.1,1.2,0.2,1.6,0.4c3.7,3.2,7.9,5.9,12,8.7c3.5,2.5,6.7,5.2,9.8,7.7c1,0.8,1.8,1.8,2.8,2.8
c0.1,1.4,0.1,2.8,0.2,3.9c-2.8,3.8-5.1,7.3-7.6,10.7c-1.9,2.6-4.5,4.8-8.5,5.7c-3.1,0-6.2-0.8-9.5-1.6c-4.2-1.1-7.2-3.4-9.3-6.7
c-0.4-0.6-0.4-1.4-0.7-2.1c2-2.3,5-3.5,6.5-5.4c2.2,0.2,2.8,1.1,3.3,2c1.2,2.3,3,4,5.8,5c3.3-1.1,5-3.6,6.6-5.5
c0.5-2.1-0.5-3.3-1.7-4.2c-4.2-2.9-8.8-5-13.7-6.3c-5.9,3.7-7.7,6-10.4,10.8c-4.5,7.7-5.9,16.1-5.9,24.4c0,6.4,2.2,12.3,7.2,17.2
c0.1,0.1,0.4,0.2,1.2,0.4c2-0.9,4-1.9,6.2-2.9c2.1-0.9,4.4-2,6.7-2.9c11.2-4.5,22.6-7.5,35.1-6.2c3.9,0.4,7.7,0.6,11.6,0.8
c7.1,0.3,13.4,2.5,19.6,5.2c0.4,0.2,0.9,0.6,1.4,0.8c7.8,2.1,13.4,7.2,18.8,12.4c1.2,1.1,2.1,2.2,3.3,3.2c5.3,4.4,9,9.7,12.4,15.2
c5.2,8.4,10.1,17.1,13.5,26.2c0.7,1.8,1.7,3.5,2.5,5.3c1.5,4.1,3.5,8.2,4.3,12.3c2.1,10.9,3.8,21.9,3.5,32.9
c-0.4,13.9-3,27.2-11.2,39.5c-6.2,9.5-15.2,16.1-26.4,20.8c-10.3,4.4-21.3,6.5-32,9.4c-1.4,0.4-2.8,0.4-4,0.9
c-3.2,1.1-5.9,2.6-7.6,5.3c-1.3,1.8-2.5,3.7-3.9,5.5c-0.9,1.3-1.5,2.5-2.6,3.7c-2.5,2.8-5.8,4.4-9.9,4.6c-2.8,0.2-5.4,0-8.2-0.6
c-3.8-0.8-7.7-1.4-11.3-2.3C333.4,422.8,329.3,422.8,324.8,423.7z"/>
<text opacity="1" class="topText hallowText" id="topText" x="50%" y="120"><tspan> </tspan>HAPPY<tspan x="50%" dy="90">HALLOWEEN</tspan></text>
<text opacity="1" class="botText hallowText" id="botText" x="50%" y="505"><tspan> </tspan>YOU<tspan x="50%" dy="80">FREAKS!</tspan></text>
<linearGradient id="pumpkinDepthGrad" data-name="New Gradient Swatch 1" x1="382.43" y1="262.77" x2="391.61" y2="261.46" gradientUnits="userSpaceOnUse">
<stop class="depthGradMid" offset="0.01" stop-color="#f6b431"/>
<stop offset="0.92" stop-color="#b42213"/>
</linearGradient>
<linearGradient id="pumpkinDepthGrad-2" x1="201.28" y1="341.55" x2="189.27" y2="346.13" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-3" x1="248.29" y1="377.28" x2="238.47" y2="385.15" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-4" x1="360.88" y1="373.64" x2="371.28" y2="381.58" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-5" x1="398.22" y1="333.4" x2="413.73" y2="338.21" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-6" x1="211.22" y1="270.28" x2="201.17" y2="268.54" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-7" x1="283.51" y1="289.42" x2="296.66" y2="289.42" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-8" x1="302.37" y1="288.79" x2="315.19" y2="288.79" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-9" x1="281.14" y1="390.57" x2="273.87" y2="396.38" xlink:href="#pumpkinDepthGrad"/>
<linearGradient id="pumpkinDepthGrad-10" x1="327.22" y1="384.21" x2="333.69" y2="389.15" xlink:href="#pumpkinDepthGrad"/>
<radialGradient id="pumpkinBgGrad" cx="300" cy="300" r="150" gradientUnits="userSpaceOnUse">
<stopoffset="0.1" style="stop-color:#F7B93F"/>
<stop class="lanternMid" offset="0.2" style="stop-color:#F6B431"/>
<stop class="lanternTop" offset="0.57" style="stop-color:#B42213"/>
<stop offset="1" style="stop-color:#542213"/>
</radialGradient>
<filter id="goo" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 17 -7" result="cm" />
</filter>
<radialGradient id="bgGrad" cx="290" cy="390" r="120" gradientUnits="userSpaceOnUse">
<stop offset="1.899808e-002" style="stop-color:#4C587A"/>
<stop offset="5.148149e-002" style="stop-color:#7D8090"/>
<stop offset="8.377692e-002" style="stop-color:#A5A2A3"/>
<stop offset="0.1153" style="stop-color:#C5BBB1"/>
<stop offset="0.1457" style="stop-color:#DBCEBC"/>
<stop offset="0.1747" style="stop-color:#E8D9C2"/>
<stop offset="0.2006" style="stop-color:#EDDDC4"/>
<stop offset="0.2603" style="stop-color:#EFE1CB"/>
<stop offset="0.3462" style="stop-color:#F5ECDE"/>
<stop offset="0.4477" style="stop-color:#FEFEFD"/>
<stop offset="0.4531" style="stop-color:#FFFFFF"/>
<stop offset="0.4902" style="stop-color:#FEF3DD"/>
<stop offset="0.5714" style="stop-color:#FAD488"/>
<stop offset="0.6375" style="stop-color:#F7B93F"/>
<stop offset="0.767" style="stop-color:#F6B431"/>
<stop offset="0.9223" style="stop-color:#B42213"/>
</radialGradient>
<path id="dot" fill="#fff" d="M303,300c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S303,298.3,303,300z"/>
<radialGradient id="bgGlowGrad" cx="300" cy="310" r="290" gradientUnits="userSpaceOnUse">
<stop class="backgroundGradient" offset="0" stop-color="#A30001"/>
<stop offset="1" stop-color="#000"/>
</radialGradient>
</defs>
<rect class="glowBg" width="600" height="600" fill="url(#bgGlowGrad)" opacity="0.41"/>
<g class="topTextGroup">
<use xlink:href="#topText" fill="#101000" stroke="url(#pumpkinBgGrad)" stroke-width="6" y="-1"/>
<use xlink:href="#topText" fill="#101000" stroke="#101010" stroke-width="3" />
</g>
<g class="wholePumpkin" opacity="1">
<use xlink:href="#pumpkinFace" fill="url(#pumpkinBgGrad)"/>
<mask id="flameMask"></mask>
<g id="pumpkinDepthGroup">
<path d="M323.16,269.26h0s0,.08,0,.12Z"/>
<path d="M390.22,270a7.58,7.58,0,0,1-2.17.75c-1.8,0-3.59,0-5.39,0a18.27,18.27,0,0,0,.32-3.14c.07-4.59-1.77-9-3.85-13.1a19.47,19.47,0,0,1,8.12.67,27.63,27.63,0,0,1,2.1,3.46A21.63,21.63,0,0,1,390.22,270Z" fill="url(#pumpkinDepthGrad)"/>
<path d="M211.3,356.6c3.86,4.75,6.49,10.34,8.85,16-2.1,1.75-4.37,3.35-6.34,5.21-.58.51-1.53.57-2.68.95a14.49,14.49,0,0,1-2.39-1.64c-1.45-1.83-2.9-3.53-4.28-5.35-2.82-4-5.86-8.06-8.47-12.35-3.11-5.22-6.23-10.64-7.89-16.56-.73-2.2-1.52-4.53-2.25-6.92a17.83,17.83,0,0,1-1-3.47c-.8-7.43-1.52-14.79-2.25-22.22a5.24,5.24,0,0,1,.73-2.71c.07-.38.65-.57,1.3-.82,2.1.13,3.19,1.51,4.64,2.71,3.1,2.73,6.23,5.44,9.26,8.22.37,8.41,2.58,16.67,4.77,24.83a30.18,30.18,0,0,0,2.61,7.23C207.33,352.26,209.45,354.34,211.3,356.6Z" fill="url(#pumpkinDepthGrad-2)"/>
<path d="M252.39,381.78a61.57,61.57,0,0,1,6.26,9.22,12.38,12.38,0,0,1-3.93,4.77,6,6,0,0,1-4.85-2.9c-5.43-6.36-10.79-12.78-16-19.2-1.51-1.77-2.84-3.64-4-5.28l8.46-.06A7.4,7.4,0,0,1,242,369a7.28,7.28,0,0,1,2.06,2Z" fill="url(#pumpkinDepthGrad-3)"/>
<path d="M377.85,361.8a47,47,0,0,0-4.72,7,168.78,168.78,0,0,1-13.33,18.07c-1.3,1.76-3.4,3.08-5.21,4.47-.51.44-1.45.38-2.32.5a8.26,8.26,0,0,1-1.52-1.7c-.23-.84-.48-1.67-.72-2.51,1-1,1.89-2,2.8-3.1q8.08-9.34,15.8-19a10.8,10.8,0,0,1,3.32-3.14,8.12,8.12,0,0,1,3.26-.73A14.58,14.58,0,0,1,377.85,361.8Z" fill="url(#pumpkinDepthGrad-4)"/>
<path d="M415.64,302.76c-.65,4.79-.94,9.64-2.1,14.3-3.26,12.09-6.59,24.18-10.21,36.33a35.55,35.55,0,0,1-7.75,14.17c-.07.25-.44.38-.58.5a7.89,7.89,0,0,1-5.8.57c-2.07-1.55-2.3-4.08-3.48-6.07q.83-2.22,1.77-4.41c3-6.87,6.65-13.45,8.9-20.58,2.38-7.54,3.08-15.48,3.53-23.39,4.44-4.37,8.7-8.83,13-13.24.29-.32.94-.38,1.44-.57A2.16,2.16,0,0,1,415.64,302.76Z" fill="url(#pumpkinDepthGrad-5)"/>
<path d="M219.48,259.18c-3,1.1-4.83,4.14-6,7.12a34.72,34.72,0,0,0-2.39,12.86c-1.59.37-3.16.81-4.73,1.31-.95.32-2,.63-3.19,1-.58-.7-1.45-1.2-1.45-1.77a14.35,14.35,0,0,1,.22-4.28c1-4.41,2.32-8.88,3.47-13.29a9.73,9.73,0,0,1,1.16-2.14c1.6-1.13,3-1,4.42-1C213.85,258.9,216.68,259,219.48,259.18Z" fill="url(#pumpkinDepthGrad-6)"/>
<path d="M289.27,288a15.5,15.5,0,0,1,7.39-3.21,23.27,23.27,0,0,0-5.48,8.92L285,294a4.58,4.58,0,0,1-1.44-.5c0-.38-.15-1,.14-1.2C285.57,290.8,287.38,289.48,289.27,288Z" fill="url(#pumpkinDepthGrad-7)"/>
<path d="M315.19,292.25a27.94,27.94,0,0,1-3.11.5l-4.83.24c-.09-.4-.18-.8-.28-1.2a13.85,13.85,0,0,0-1.66-4.28,11.78,11.78,0,0,0-2.94-2.91,12.75,12.75,0,0,1,5.15,1.6c2.46,1.58,4.92,3,7.31,4.54C315.19,290.92,315,291.55,315.19,292.25Z" fill="url(#pumpkinDepthGrad-8)"/>
<path d="M290.21,402a8.19,8.19,0,0,1-1.89.42,14.56,14.56,0,0,1-7.45-5c-1.89-2.45-3.84-4.72-5.51-7.11a24.24,24.24,0,0,0-7.75-6.55,4.37,4.37,0,0,0-.78-.31l5.46,0A7.4,7.4,0,0,1,276,384a7.28,7.28,0,0,1,2.06,2l8.32,10.79C287.7,398.48,289,400.18,290.21,402Z" fill="url(#pumpkinDepthGrad-9)"/>
<path d="M340.28,374.68c-2,2.15-3.93,4.35-5.9,6.61-3.62,4.21-7.09,8.56-10.71,12.84a10.3,10.3,0,0,1-2.25,1.95,3.92,3.92,0,0,1-3.67.4q7.61-8.82,14.88-17.92a10.8,10.8,0,0,1,3.32-3.14,8.12,8.12,0,0,1,3.26-.73C339.57,374.67,339.92,374.67,340.28,374.68Z" fill="url(#pumpkinDepthGrad-10)"/>
</g>
<g class="pContainer" filter="url(#goo)"></g>
<g class="flameGroup">
<rect mask="url(#flameMask)" width="100%" height="100%" fill="url(#bgGrad)"/>
</g>
<path class="pumpkin" d="M324.8,423.7c-2,1.8-3.8,3.3-5.5,4.8c-1.8,1.6-4,2.6-6.3,3.4c-4.6,1.3-9.1,1.4-13.4-1.1
c-2.2-1.4-4.5-2.8-6.8-4.3c-2.4-1.4-4.9-1.8-7.7-0.6c-5.6,2.5-11.7,3.9-17.7,6c-2.2,0.8-4.6,1.1-7.1,1.4c-2.4,0.3-4.3-0.4-6.1-1.8
c-2-2-4.1-4-6.2-5.8c-1.4-1.4-3-2.8-4.5-4.2c-3.3-2.4-6.8-4.2-10.9-5.2c-2.9-0.6-5.8-1.4-8.8-2c-7.1-1.3-13.7-3.6-20.2-6.3
c-9.7-4-19.4-8.1-27.7-14.3c-0.4-0.3-0.7-0.6-1.3-0.9c-7.7-4.4-13.3-10.7-18.2-17.4c-2.2-3-4.1-6.2-6.1-9.3c-2-3-3-6-3-9.6
c-0.1-3-1.2-6-1.9-9.3c0.1-3.1,0.6-6.5,0.6-9.8c0.1-12.6,2.6-24.9,6.7-36.8c4-11.3,8.8-22.3,16.8-31.9c6.4-7.9,13-15.5,21.4-22
c1.6-1.3,3.3-2.5,5.4-3.2c2-0.8,3.8-1.9,5.7-2.8c6.3-3,12.5-6,19.6-7.6c5.1-1.1,10.2-2,15.4-2.5c11.4-0.9,22.6,0.2,33.7,2.5
c1.8,0.4,3.6,1.2,5.4,1.8c1.3,0.4,2.5,0.8,4.1,1.1c0.9-0.7,1.9-1.3,2.3-2c4.5-7.6,7-21.8,5.4-30.1c-0.7-3.5-1.2-7.1-2.7-10.5
c-0.3-0.6,0.1-1.4,0.2-2c12.2-4.8,22.8-11.7,32.3-19.8c1.2-1,2.2-2.2,3.5-3.1c1.5-1.1,3-2.1,5.1-1.9c0.5,0.1,1.2,0.2,1.6,0.4
c3.7,3.2,7.9,5.9,12,8.7c3.5,2.5,6.7,5.2,9.8,7.7c1,0.8,1.8,1.8,2.8,2.8c0.1,1.4,0.1,2.8,0.2,3.9c-2.8,3.8-5.1,7.3-7.6,10.7
c-1.9,2.6-4.5,4.8-8.5,5.7c-3.1,0-6.2-0.8-9.5-1.6c-4.2-1.1-7.2-3.4-9.3-6.7c-0.4-0.6-0.4-1.4-0.7-2.1c2-2.3,5-3.5,6.5-5.4
c2.2,0.2,2.8,1.1,3.3,2c1.2,2.3,3,4,5.8,5c3.3-1.1,5-3.6,6.6-5.5c0.5-2.1-0.5-3.3-1.7-4.2c-4.2-2.9-8.8-5-13.7-6.3
c-5.9,3.7-7.7,6-10.4,10.8c-4.5,7.7-5.9,16.1-5.9,24.4c0,6.4,2.2,12.3,7.2,17.2c0.1,0.1,0.4,0.2,1.2,0.4c2-0.9,4-1.9,6.2-2.9
c2.1-0.9,4.4-2,6.7-2.9c11.2-4.5,22.6-7.5,35.1-6.2c3.9,0.4,7.7,0.6,11.6,0.8c7.1,0.3,13.4,2.5,19.6,5.2c0.4,0.2,0.9,0.6,1.4,0.8
c7.8,2.1,13.4,7.2,18.8,12.4c1.2,1.1,2.1,2.2,3.3,3.2c5.3,4.4,9,9.7,12.4,15.2c5.2,8.4,10.1,17.1,13.5,26.2c0.7,1.8,1.7,3.5,2.5,5.3
c1.5,4.1,3.5,8.2,4.3,12.3c2.1,10.9,3.8,21.9,3.5,32.9c-0.4,13.9-3,27.2-11.2,39.5c-6.2,9.5-15.2,16.1-26.4,20.8
c-10.3,4.4-21.3,6.5-32,9.4c-1.4,0.4-2.8,0.4-4,0.9c-3.2,1.1-5.9,2.6-7.6,5.3c-1.3,1.8-2.5,3.7-3.9,5.5c-0.9,1.3-1.5,2.5-2.6,3.7
c-2.5,2.8-5.8,4.4-9.9,4.6c-2.8,0.2-5.4,0-8.2-0.6c-3.8-0.8-7.7-1.4-11.3-2.3C333.4,422.8,329.3,422.8,324.8,423.7z M323.2,269.3
c1.8,0.4,3.8,0.3,5.6,0c3.5-0.4,7.2-0.9,10.6-0.8c9.9,0.4,19.8,0.8,29.6,1.6c6.3,0.6,12.7,0.6,19,0.6c0.7,0,1.4-0.5,2.2-0.8
c0.7-3.9,0.4-7.6-0.9-11.3c-0.6-1.3-1.5-2.5-2.1-3.5c-3.4-1.1-6.4-0.8-9.4-0.6c-11.2,1-22.4,2.5-33.2,5c-6.1,1.6-12.1,3.3-17.5,6.2
c-1.7,0.9-3.4,1.6-4,3.5V269.3z M395,368.1c0.1-0.1,0.5-0.3,0.6-0.5c3.8-4.2,6.3-9,7.7-14.2c3.6-12.2,7-24.2,10.2-36.3
c1.2-4.7,1.4-9.5,2.1-14.3c0.1-0.9-0.1-1.9-1.3-2.4c-0.5,0.2-1.2,0.3-1.4,0.6c-4.6,4.7-9.1,9.5-13.9,14.2c-3.4,3.4-5.9,7.5-8.9,11.1
c-0.6,0.6-1.2,1-2,1.4c-1.9,0.4-4.7,1.3-7.4-0.9c-2.4-2.3-4.9-4.7-7.6-7.2c-0.9-0.8-1.8-1-3-0.6c-3.6,2.7-2.2,7.2-4.8,10.5
c-0.9,0-1.7,0.1-2.3-0.2c-1.1-0.4-2-0.9-2.8-1.7c-6.7-6-15.3-9.3-24-12.2c-1.6-0.6-3.3-0.8-5.1,0.3c-2.8,4.7-4.9,9.8-6.7,15
c-1.3,2.3-2.8,3.8-5.2,4.2c-2.6,0.1-4.3-0.9-5.6-2.1c-1.7-1.5-3.3-3.2-5.1-4.8c-1.4-1.3-2.8-2.4-5.2-2.6c-0.9,0.7-1.9,1.4-2.7,2.3
c-2.2,2.7-4.4,5.5-6.7,8.2c-0.6,0.9-1.4,1.4-3.1,1.4c-2.4-2-4.1-3.8-4.9-5.4c-2-2-4.1-4-5.7-6.2c-2.5-3-5.7-5.2-9.6-6.4
c-0.9,0.3-2,0.3-2.5,0.6c-3,1.8-5.9,3.7-8.8,5.5c-4.8,2.8-8.6,6.5-12,10.1c-1.9,1.4-3.8-0.1-5-1.3c-0.7-0.6-1.2-1.5-1.8-2.3
c-1.7-2.2-3.6-4.2-6.1-5.3c-1.7,0-2.5,0.5-2.8,1.5c-1,2.8-1.9,5.5-3,8.2c-0.9,2.2-3.3,4.6-5.6,3.6c-0.9-0.6-1.7-1.3-2.4-1.8
c-2.7-2.8-5-5.8-7.8-8.4c-3-2.8-6.9-4.8-9.9-7.7c-4.3-4.3-9.1-8.3-13.7-12.4c-1.4-1.2-2.5-2.6-4.6-2.7c-0.7,0.3-1.2,0.4-1.3,0.8
c-0.4,0.8-0.8,1.8-0.7,2.7c0.7,7.4,1.4,14.8,2.2,22.2c0.1,1.3,0.7,2.3,1,3.5c0.7,2.4,1.5,4.7,2.2,6.9c1.7,5.9,4.8,11.3,7.9,16.6
c2.6,4.3,5.6,8.3,8.5,12.3c1.4,1.8,2.8,3.5,4.3,5.4c0.7,0.7,1.7,1.1,2.4,1.6c1.2-0.4,2.1-0.4,2.7-0.9c3.3-3.1,7.5-5.5,10.3-9.2
c1.2-1.6,3-2,5.4-0.8c1.3,1.8,2.8,3.8,4.4,5.8c5.2,6.4,10.6,12.8,16,19.2c1,1.4,2.3,2.8,4.9,2.9c4.6-3.1,4.7-8.9,8.8-12.3
c0.7-0.1,1.3-0.4,1.7-0.4c0.9,0.1,1.7,0.3,2.4,0.6c3,1.8,5.7,3.7,7.7,6.5c1.7,2.4,3.6,4.7,5.5,7.1c1.8,2.4,4.4,4.1,7.5,5
c2.3-0.3,3.9-1.3,5-2.6c2.1-2.5,4-5.3,6.2-7.7c2.2-2.2,3-3.9,5.9-8.5c0.1-0.5,0.5-1,1.3-1.5c1.4,4,4.4,7.5,6.9,10.7
c0.9,1.1,2,2.2,3.2,3.2c1.1,1,3.5,1.1,4.6,0.1c0.9-0.6,1.7-1.3,2.2-2c3.6-4.3,7.1-8.6,10.7-12.8c2-2.3,4-4.6,6.1-6.8
c0.7-0.7,1.7-1.3,3.3-0.6c2.4,2.6,4.2,5.8,5,9.4c0.6,2.3,1.3,4.6,2,6.9c0.3,0.6,1,1.1,1.5,1.7c0.9-0.1,1.8-0.1,2.3-0.5
c1.8-1.4,3.9-2.7,5.2-4.5c4.9-5.9,9.5-11.8,13.3-18.1c1.8-3,3.5-6,5.9-8.2c3.2-1.1,5.2-0.4,6.6,1.9c1.2,2,1.4,4.6,3.5,6.2
C391.4,369.2,393.3,368.9,395,368.1z M282.2,275.1c-2.9-2.3-6.4-3.6-10.1-4.4c-8-1.8-16.1-3.5-24.2-5.3c-3.1-0.7-6.4-1.3-9.5-2.4
c-8.8-3.1-18-4.2-27.4-4c-1.4,0-2.8-0.1-4.4,1c-0.2,0.4-0.9,1.3-1.2,2.1c-1.2,4.4-2.5,8.9-3.5,13.3c-0.3,1.4-0.4,2.9-0.2,4.3
c0,0.6,0.9,1.1,1.4,1.8c1.2-0.3,2.2-0.6,3.2-0.9c5.5-1.8,11.1-2.7,16.9-3.3c5.4-0.6,10.9-1,16.4-1.4c6.1-0.5,12.1-1.3,18.2-0.5
c6.3,0.8,12.6,1.1,19,0.9c1.5,0,3.3,0.1,4.8,0.1C281.8,276.3,282,275.5,282.2,275.1z M315.2,292.2c-0.1-0.7,0-1.3-0.4-1.5
c-2.4-1.6-4.9-3-7.3-4.5c-2.4-1.4-5-1.8-7.8-1.7c-4,0.2-7.5,1.1-10.4,3.5c-1.9,1.4-3.7,2.8-5.6,4.3c-0.3,0.2-0.1,0.8-0.1,1.2
c0.4,0.2,1,0.5,1.4,0.5c9.1-0.4,18-0.8,27.1-1.3C313.2,292.8,314.1,292.4,315.2,292.2z"/>
<use class="pumpkinCover" xlink:href="#pumpkinFace" fill="#000"/>
</g>
<rect class="plinth" fill="#000" x="160" y="416" width="270" height="600" rx="8"/>
<g class="botTextGroup">
<use xlink:href="#botText" fill="#101000" stroke="url(#pumpkinBgGrad)" stroke-width="6" y="-1"/>
<use xlink:href="#botText" fill="#101000" stroke="#101010" stroke-width="3" />
</g>
</svg>
Raw
script.js
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
dot = select('#dot'),
flameMask = select('#flameMask'),
flameGroup = select('.flameGroup'),
pContainer = select('.pContainer'),
mainTl = new TimelineMax()
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(pContainer, {
x:20,
y: 15,
transformOrigin: '50% 50%'
})
var tl = new TimelineMax({});
tl.from('.wholePumpkin',1, {
y:-500,
ease:Power3.easeIn
})
.to('.wholePumpkin',0.7, {
rotation:-12,
transformOrigin:'50% 70%',
ease:Power3.easeOut
},'-=0')
.to('.wholePumpkin',0.973, {
rotation:0,
ease:Sine.easeInOut
},'-=0.3')
.to('.pumpkinCover', 3, {
alpha:0,
onStart:createParticles,
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 1,
points: 50,
taper: "none",
randomize: true,
clamp: false
})
},'-=0')
.staggerFrom(['.topTextGroup', '.botTextGroup'], 1, {
alpha:0,
ease:RoughEase.ease.config({
template: Power0.easeNone,
strength: 1,
points: 50,
taper: "none",
randomize: true,
clamp: false
})
},0.6,'-=2')
function createParticles(){
var i = 100, p;
while (--i > -1) {
p = dot.cloneNode(true)
pContainer.appendChild(p);
//p.setAttributeNS(xlinkns, "xlink:href", '#dot');
//set the particles' transform origin to be in the middle
TweenMax.set(p, {
transformOrigin: '50% 50%',
x: randomBetween(-26, -20),
y: randomBetween(80, 90)
})
var particleTl = new TimelineMax({});
particleTl.to(p, randomBetween(1, 4), {
physics2D: {
velocity: randomBetween(10, 30),
angle: randomBetween(-90, -80),
gravity: 0
},
scale: 0.58,
repeat: -1
});
mainTl.add(particleTl, i / 20)
}
mainTl.seek(0).timeScale(6) ;
innerLightFlicker();
//ScrubGSAPTimeline(mainTl)
}
function innerLightFlicker() {
TweenMax.to('.lanternTop', randomBetween(12, 19) / 10, {
stopColor: '#741B16',
repeat: 1,
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 3,
points: 10,
taper: "none",
randomize: true,
clamp: false
}),
onRepeat: innerLightFlicker
})
TweenMax.to('.depthGradMid', 0.6, {
stopColor: '#B24A1D',
repeat: 1,
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 3,
points: 2,
taper: "none",
randomize: true,
clamp: false
}),
yoyo: true
})
TweenMax.to('#pumpkinBgGrad', 0.2,{
attr:{
cy:randomBetween(330, 360)
},
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 1,
points: 2,
taper: "none",
randomize: false,
clamp: false
}),
})
}
//createParticles();
//innerLightFlicker();
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
//TweenMax.globalTimeScale(0.5)
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://www.greensock.com/js/src/plugins/Physics2DPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js"></script>
Raw
style.css
body {
background:#000;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
width:100%;
height:100%;
visibility:hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hallowText {
font-family: 'Creepster', cursive;
text-anchor:middle;
letter-spacing:2px;
fill:#E48D29;
}
.topText{
font-size:105px;
}
.botText{
font-size:100px;
}
/* #D97624 */
.backgroundGradient{
stop-color:#35409C;
stop-color:#AE0000;
stop-color:#C410B1;
/* stop-color:#89B405; */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment