Skip to content

Instantly share code, notes, and snippets.

@qipt8

qipt8/fwdays-sunflower-animation-final-animation.markdown

Created March 19, 2019 11:38
Show Gist options
  • Save qipt8/aaf1d0747b1fb16e26cd2d73e0f09f0d to your computer and use it in GitHub Desktop.
Save qipt8/aaf1d0747b1fb16e26cd2d73e0f09f0d to your computer and use it in GitHub Desktop.
Download ZIP
FWDays Sunflower animation [Final animation]
Raw
fwdays-sunflower-animation-final-animation.markdown
Raw
index.html
<svg class="sunflowerSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g class="wholeFlower">
<line class="stalk" x1="400" y1="600" x2="400" y2="186" fill="none" stroke="#4c934c" stroke-miterlimit="10" stroke-width="10"/>
<g class="leafGroup2">
<path class="leaf leafR" d="M421,442.6l-11-.38,9.53-27.08c6.87-19.52,22.85-30.46,43.44-29.75l11,.38-9.53,27.09C457.56,432.37,441.58,443.31,421,442.6Z" fill="#4c934c"/>
<path class="leaf leafL" d="M379,401.37l11-.38-9.53-27.09c-6.87-19.52-22.85-30.46-43.44-29.75l-11,.38,9.53,27.09C342.4,391.14,358.38,402.08,379,401.37Z" fill="#4c934c"/>
</g>
<g class="leafGroup1">
<path class="leaf leafR" d="M421,568.34,410,568l9.53-27.09c6.87-19.51,22.85-30.45,43.44-29.74l11,.37-9.53,27.09C457.56,558.11,441.58,569.05,421,568.34Z" fill="#4c934c"/>
<path class="leaf leafL" d="M379,535.79l11-.37-9.53-27.09c-6.87-19.52-22.85-30.46-43.44-29.75L326,479l9.53,27.09C342.4,525.56,358.38,536.5,379,535.79Z" fill="#4c934c"/>
</g>
<g class="flowerHead">
<g class="petalGroupBack" fill="#d3ad0d">
<path d="M414.08,84.05c0,14.2-2.74,32.25-14.08,32.25s-14.08-18-14.08-32.25S400,51.8,400,51.8,414.08,69.85,414.08,84.05Z"/>
<path d="M396.17,83.15c2.46,14,2.89,32.24-8.27,34.21S370.89,102,368.43,88s8.27-34.2,8.27-34.2S393.7,69.17,396.17,83.15Z"/>
<path d="M378.36,85.38c4.86,13.34,8.45,31.25-2.2,35.12S356.75,108.36,351.9,95s2.2-35.12,2.2-35.12S373.51,72,378.36,85.38Z"/>
<path d="M361.22,90.67c7.1,12.29,13.75,29.3,3.93,35s-21.22-8.59-28.32-20.89-3.93-35-3.93-35S354.12,78.37,361.22,90.67Z"/>
<path d="M345.26,98.85c9.12,10.87,18.62,26.47,9.94,33.76s-22.39-4.78-31.52-15.66-9.94-33.75-9.94-33.75S336.13,88,345.26,98.85Z"/>
<path d="M331,109.68c10.88,9.13,22.94,22.83,15.66,31.52s-22.89-.82-33.76-9.94S297.2,99.74,297.2,99.74,320.08,100.55,331,109.68Z"/>
<path d="M318.75,122.83c12.3,7.1,26.56,18.5,20.89,28.32s-22.68,3.17-35-3.93-20.89-28.32-20.89-28.32S306.45,115.73,318.75,122.83Z"/>
<path d="M309,137.9c13.35,4.85,29.37,13.61,25.49,24.26s-21.78,7.06-35.12,2.2-25.49-24.26-25.49-24.26S295.67,133,309,137.9Z"/>
<path d="M302,154.43c14,2.46,31.29,8.3,29.32,19.47s-20.23,10.73-34.21,8.27-29.31-19.47-29.31-19.47S288.06,152,302,154.43Z"/>
<path d="M298.05,171.92c14.2,0,32.25,2.74,32.25,14.08s-18.05,14.08-32.25,14.08S265.8,186,265.8,186,283.85,171.92,298.05,171.92Z"/>
<path d="M297.15,189.83c14-2.46,32.24-2.89,34.21,8.27S316,215.11,302,217.57s-34.2-8.27-34.2-8.27S283.17,192.3,297.15,189.83Z"/>
<path d="M299.38,207.64c13.34-4.86,31.25-8.45,35.12,2.2S322.36,229.25,309,234.1s-35.12-2.2-35.12-2.2S286,212.49,299.38,207.64Z"/>
<path d="M304.67,224.78c12.29-7.1,29.3-13.75,35-3.93s-8.59,21.22-20.89,28.32-35,3.93-35,3.93S292.37,231.88,304.67,224.78Z"/>
<path d="M312.85,240.74c10.87-9.12,26.47-18.62,33.76-9.94s-4.78,22.39-15.66,31.52-33.75,9.94-33.75,9.94S302,249.87,312.85,240.74Z"/>
<path d="M323.68,255.05c9.13-10.88,22.83-22.94,31.52-15.66s-.82,22.89-9.94,33.76-31.52,15.65-31.52,15.65S314.55,265.92,323.68,255.05Z"/>
<path d="M336.83,267.25c7.1-12.3,18.5-26.56,28.32-20.89s3.17,22.68-3.93,35-28.32,20.89-28.32,20.89S329.73,279.55,336.83,267.25Z"/>
<path d="M351.9,277c4.85-13.35,13.61-29.37,24.26-25.49s7.06,21.78,2.2,35.12-24.26,25.49-24.26,25.49S347,290.33,351.9,277Z"/>
<path d="M368.43,284c2.46-14,8.3-31.29,19.47-29.32s10.73,20.23,8.27,34.21-19.47,29.31-19.47,29.31S366,297.94,368.43,284Z"/>
<path d="M385.92,288c0-14.2,2.74-32.25,14.08-32.25s14.08,18.05,14.08,32.25S400,320.2,400,320.2,385.92,302.15,385.92,288Z"/>
<path d="M403.83,288.85c-2.46-14-2.89-32.24,8.27-34.21s17,15.33,19.47,29.32-8.27,34.2-8.27,34.2S406.3,302.83,403.83,288.85Z"/>
<path d="M421.64,286.62c-4.86-13.34-8.45-31.25,2.2-35.12S443.25,263.64,448.1,277s-2.2,35.12-2.2,35.12S426.49,300,421.64,286.62Z"/>
<path d="M438.78,281.33c-7.1-12.29-13.75-29.3-3.93-35s21.22,8.59,28.32,20.89,3.93,35,3.93,35S445.88,293.63,438.78,281.33Z"/>
<path d="M454.74,273.15c-9.12-10.87-18.62-26.47-9.94-33.76s22.39,4.78,31.52,15.66,9.94,33.75,9.94,33.75S463.87,284,454.74,273.15Z"/>
<path d="M469.05,262.32c-10.88-9.13-22.94-22.83-15.66-31.52s22.89.82,33.76,9.94,15.65,31.52,15.65,31.52S479.92,271.45,469.05,262.32Z"/>
<path d="M481.25,249.17c-12.3-7.1-26.56-18.5-20.89-28.32s22.68-3.17,35,3.93,20.89,28.32,20.89,28.32S493.55,256.27,481.25,249.17Z"/>
<path d="M491,234.1c-13.35-4.85-29.37-13.61-25.49-24.26s21.78-7.06,35.12-2.2,25.49,24.26,25.49,24.26S504.33,239,491,234.1Z"/>
<path d="M498,217.57c-14-2.46-31.29-8.3-29.32-19.47s20.23-10.73,34.21-8.27,29.31,19.47,29.31,19.47S511.94,220,498,217.57Z"/>
<path d="M502,200.08c-14.2,0-32.25-2.74-32.25-14.08s18.05-14.08,32.25-14.08S534.2,186,534.2,186,516.15,200.08,502,200.08Z"/>
<path d="M502.85,182.17c-14,2.46-32.24,2.89-34.21-8.27s15.33-17,29.32-19.47,34.2,8.27,34.2,8.27S516.83,179.7,502.85,182.17Z"/>
<path d="M500.62,164.36c-13.34,4.86-31.25,8.45-35.12-2.2S477.64,142.75,491,137.9s35.12,2.2,35.12,2.2S514,159.51,500.62,164.36Z"/>
<path d="M495.33,147.22c-12.29,7.1-29.3,13.75-35,3.93s8.59-21.22,20.89-28.32,35-3.93,35-3.93S507.63,140.12,495.33,147.22Z"/>
<path d="M487.15,131.26c-10.87,9.12-26.47,18.62-33.76,9.94s4.78-22.39,15.66-31.52,33.75-9.94,33.75-9.94S498,122.13,487.15,131.26Z"/>
<path d="M476.32,117c-9.13,10.88-22.83,22.94-31.52,15.66s.82-22.89,9.94-33.76S486.26,83.2,486.26,83.2,485.45,106.08,476.32,117Z"/>
<path d="M463.17,104.75c-7.1,12.3-18.5,26.56-28.32,20.89s-3.17-22.68,3.93-35S467.1,69.78,467.1,69.78,470.27,92.45,463.17,104.75Z"/>
<path d="M448.1,95c-4.85,13.35-13.61,29.37-24.26,25.49s-7.06-21.78-2.2-35.12S445.9,59.89,445.9,59.89,453,81.67,448.1,95Z"/>
<path d="M431.57,88c-2.46,14-8.3,31.29-19.47,29.32s-10.73-20.23-8.27-34.21S423.3,53.84,423.3,53.84,434,74.06,431.57,88Z"/>
</g>
<g class="petalGroup" fill="#efc90c">
<path d="M389.68,89.31a48.84,48.84,0,0,0,4.49,11.16q2.82-.24,5.82-.24c2.09,0,4,.08,5.88.26a48.9,48.9,0,0,0,4.45-11.1,49.21,49.21,0,0,1,1.43-11v-.35c0-11-4.09-21.66-11.79-31-7.69,9.36-11.75,20-11.74,31v.29a50,50,0,0,1,1.46,11Z"/>
<path d="M416.63,101.91c1.76.31,3.59.71,5.53,1.2s3.92,1.16,5.64,1.79A48.06,48.06,0,0,0,435,95.31a49.83,49.83,0,0,1,4.23-10.23c0-.11.07-.23.09-.33,2.83-10.63,1.67-22-3.37-32.95-9.86,7-16.54,16.3-19.37,26.89a3,3,0,0,1-.08.32A49.14,49.14,0,0,1,415,90a48.27,48.27,0,0,0,1.44,11.89.23.23,0,0,1,.15,0Z"/>
<path d="M437.73,109c1.91.9,3.61,1.79,5.17,2.7s3.35,2,5,3.15a48.68,48.68,0,0,0,9.4-7.37A49.73,49.73,0,0,1,464,98.63l.14-.25c5.49-9.55,7.3-20.82,5.28-32.73-11.37,4.26-20.21,11.48-25.67,21a2.29,2.29,0,0,0-.14.27,50.19,50.19,0,0,1-4.23,10.25A47.17,47.17,0,0,0,437.73,109Z"/>
<path d="M467.84,101.54a50,50,0,0,1-6.78,8.86,48,48,0,0,0-4.69,11c1.45,1.21,2.86,2.51,4.29,3.94s2.69,2.79,4,4.33a48.49,48.49,0,0,0,11-4.73,49.69,49.69,0,0,1,8.67-6.66c.11-.11.22-.2.31-.31,7.8-7.79,12.46-18.21,13.59-30.25C486.2,88.89,475.8,93.58,468,101.34c-.07.07-.13.14-.2.2Z"/>
<path d="M487.27,122.06a49.32,49.32,0,0,1-8.67,6.68,47.93,47.93,0,0,0-7.43,9.45c1.07,1.52,2.09,3.14,3.13,4.91s1.9,3.48,2.71,5.2a47.82,47.82,0,0,0,11.9-1.71A49.31,49.31,0,0,1,499,142.41l.43-.24c9.52-5.49,16.72-14.34,20.94-25.68a56.44,56.44,0,0,0-9.25-.78,46.07,46.07,0,0,0-23.46,6.13l-.37.22Z"/>
<path d="M500.81,146.84A50.43,50.43,0,0,1,490.76,151a47.16,47.16,0,0,0-9.63,7.22c.68,1.85,1.26,3.72,1.76,5.57s.93,3.8,1.26,5.7a47.93,47.93,0,0,0,11.92,1.41,49.59,49.59,0,0,1,10.85-1.43l.44-.1c10.62-2.86,19.87-9.53,26.89-19.39a51.34,51.34,0,0,0-21.31-4.84,44.55,44.55,0,0,0-11.68,1.55l-.45.13Z"/>
<path d="M508,174.24h-.43a49.59,49.59,0,0,1-10.84,1.44,47.93,47.93,0,0,0-11.15,4.48q.26,2.9.26,5.84c0,2-.08,3.94-.26,5.87a48.16,48.16,0,0,0,11.16,4.45,49.79,49.79,0,0,1,10.94,1.43H508c11,0,21.68-4.09,31-11.78-9.34-7.69-20-11.74-30.9-11.74Z"/>
<path d="M507,202.49a49.79,49.79,0,0,1-10.95-1.42,48,48,0,0,0-11.93,1.44c-.35,1.93-.76,3.83-1.25,5.66s-1.08,3.74-1.77,5.6a47.6,47.6,0,0,0,9.62,7.21,50.8,50.8,0,0,1,10.15,4.18l.38.11a44.86,44.86,0,0,0,11.59,1.52,51.21,51.21,0,0,0,21.42-4.89c-7.06-9.85-16.32-16.52-26.91-19.34l-.35-.07Z"/>
<path d="M499.41,229.79l-.35-.19a47.91,47.91,0,0,1-10.16-4.19A48.41,48.41,0,0,0,477,223.7c-.81,1.74-1.7,3.44-2.7,5.17s-2,3.3-3.15,4.94a48,48,0,0,0,7.4,9.43,50.22,50.22,0,0,1,8.76,6.7l.33.19a46.32,46.32,0,0,0,23.44,6.09,55.3,55.3,0,0,0,9.33-.8c-4.29-11.33-11.52-20.17-21-25.63Z"/>
<path d="M484.39,253.76a50.45,50.45,0,0,1-8.76-6.7,47.66,47.66,0,0,0-11-4.7c-1.28,1.52-2.6,3-3.94,4.29s-2.8,2.69-4.33,3.95a49,49,0,0,0,4.71,11,49.17,49.17,0,0,1,6.68,8.7c.11.11.2.22.31.32,7.81,7.77,18.23,12.44,30.26,13.58-1.17-12.07-5.85-22.47-13.64-30.21a1.6,1.6,0,0,0-.26-.26Z"/>
<path d="M463.94,273.25a49.48,49.48,0,0,1-6.69-8.7,47,47,0,0,0-9.45-7.4c-1.65,1.14-3.3,2.2-4.91,3.14s-3.49,1.9-5.2,2.7a48,48,0,0,0,1.69,11.85A49.52,49.52,0,0,1,443.61,285l.19.35c5.52,9.54,14.38,16.73,25.72,20.93,2-12,.15-23.23-5.37-32.68-.06-.12-.13-.24-.21-.37Z"/>
<path d="M439.2,286.86A48.6,48.6,0,0,1,435,276.69a47.83,47.83,0,0,0-7.21-9.58c-1.83.66-3.7,1.25-5.56,1.73-1.53.42-3.09.77-4.7,1.07-.33.08-.68.14-1,.21A49.33,49.33,0,0,0,415.05,282a50.05,50.05,0,0,1,1.44,10.9c0,.13.07.28.11.41,2.87,10.64,9.56,19.88,19.41,26.88,5-11,6.16-22.38,3.31-33a1.7,1.7,0,0,1-.12-.34Z"/>
<path d="M410.29,282.63a48.57,48.57,0,0,0-4.47-11.12c-1.84.16-3.76.26-5.83.26-1.82,0-3.7-.08-5.6-.25h-.27a48.23,48.23,0,0,0-4.46,11.14,49.28,49.28,0,0,1-1.44,10.93V294c0,11,4.09,21.66,11.8,31,7.71-9.37,11.75-20,11.72-31,0-.13,0-.28,0-.41a48.78,48.78,0,0,1-1.44-10.9Z"/>
<path d="M383.38,270.09c-1.8-.32-3.67-.74-5.59-1.25a58.35,58.35,0,0,1-5.61-1.76,48.35,48.35,0,0,0-7.19,9.59,48.92,48.92,0,0,1-4.18,10.13c0,.14-.09.28-.12.42-2.85,10.66-1.67,22,3.36,33,9.86-7,16.52-16.3,19.34-26.92,0-.1.06-.22.08-.33A49.64,49.64,0,0,1,384.91,282a47.64,47.64,0,0,0-1.45-11.92Z"/>
<path d="M362.24,263c-1.78-.82-3.52-1.72-5.17-2.67-1.82-1.07-3.44-2.12-4.94-3.17a48.5,48.5,0,0,0-9.43,7.4,49.16,49.16,0,0,1-6.68,8.73l-.22.35c-5.49,9.52-7.3,20.79-5.29,32.75,11.35-4.26,20.19-11.48,25.65-21l.2-.37a49.61,49.61,0,0,1,4.19-10.13A47.65,47.65,0,0,0,362.24,263Z"/>
<path d="M332.21,270.33a48.78,48.78,0,0,1,6.69-8.72,48.36,48.36,0,0,0,4.7-11c-1.51-1.27-3-2.58-4.3-3.91-1.5-1.52-2.79-2.94-4-4.33a48.74,48.74,0,0,0-11,4.71,49.07,49.07,0,0,1-8.73,6.71l-.29.28c-7.78,7.77-12.45,18.18-13.59,30.23,12.09-1.2,22.5-5.89,30.23-13.64a3.84,3.84,0,0,0,.27-.29Z"/>
<path d="M312.66,250a48.66,48.66,0,0,1,8.73-6.72,47.31,47.31,0,0,0,7.39-9.45c-1.1-1.57-2.15-3.23-3.11-4.9s-1.85-3.36-2.72-5.22a48.93,48.93,0,0,0-11.86,1.71,49.14,49.14,0,0,1-10.23,4.23l-.3.17c-9.52,5.53-16.72,14.38-20.94,25.71a57,57,0,0,0,9.21.78,46.3,46.3,0,0,0,23.51-6.13,3.3,3.3,0,0,0,.32-.18Z"/>
<path d="M299,225.2A49,49,0,0,1,309.24,221a48.82,48.82,0,0,0,9.61-7.2,58.48,58.48,0,0,1-1.75-5.59c-.42-1.57-.78-3.15-1.07-4.73,0-.21-.09-.42-.14-.65s0-.21-.07-.33a48.73,48.73,0,0,0-12-1.41,49.88,49.88,0,0,1-10.89,1.44l-.33.09c-10.63,2.89-19.87,9.58-26.88,19.42A51.27,51.27,0,0,0,287,226.84a44.55,44.55,0,0,0,11.68-1.55,2.63,2.63,0,0,1,.3-.09Z"/>
<path d="M292.31,197.74a50.24,50.24,0,0,1,10.88-1.44,47.56,47.56,0,0,0,11.24-4.49c-.18-2-.26-3.91-.26-5.81s.09-3.89.27-5.87a48.66,48.66,0,0,0-11.15-4.46,48.82,48.82,0,0,1-10.94-1.43H292c-11,0-21.67,4.1-31,11.78,9.34,7.68,20,11.72,31,11.72Z"/>
<path d="M293,169.5a49.26,49.26,0,0,1,10.95,1.41,48,48,0,0,0,11.92-1.44c.36-2,.79-3.89,1.27-5.67s1.07-3.7,1.76-5.62a47.92,47.92,0,0,0-9.59-7.18A49.93,49.93,0,0,1,299,146.77l-.3-.09a45.46,45.46,0,0,0-11.57-1.51,51.19,51.19,0,0,0-21.44,4.91c7.07,9.85,16.34,16.51,26.94,19.33l.33.09Z"/>
<path d="M300.58,142.21c.07,0,.16.08.24.13a49.94,49.94,0,0,1,10.28,4.25A47.78,47.78,0,0,0,323,148.27c.82-1.76,1.72-3.5,2.68-5.15,1.06-1.84,2.1-3.47,3.15-5a49.09,49.09,0,0,0-7.37-9.37,49.9,49.9,0,0,1-8.86-6.8,2.34,2.34,0,0,0-.27-.15,46.41,46.41,0,0,0-23.41-6.06,55.09,55.09,0,0,0-9.32.8c4.27,11.33,11.48,20.17,21,25.64Z"/>
<path d="M315.49,118.17a49.29,49.29,0,0,1,8.86,6.8,48,48,0,0,0,11,4.66c1.21-1.45,2.51-2.87,3.95-4.29s2.82-2.69,4.33-4a48.94,48.94,0,0,0-4.73-11,50.09,50.09,0,0,1-6.73-8.74l-.22-.24c-7.8-7.76-18.22-12.43-30.28-13.57,1.18,12.07,5.87,22.47,13.64,30.21l.18.18Z"/>
<path d="M336,98.66a48.85,48.85,0,0,1,6.73,8.75,48.63,48.63,0,0,0,9.46,7.42c1.56-1.09,3.18-2.13,4.92-3.13s3.45-1.89,5.21-2.71a47.86,47.86,0,0,0-1.7-11.88A48.29,48.29,0,0,1,356.38,87a3.54,3.54,0,0,0-.19-.33c-5.52-9.52-14.38-16.73-25.73-21-2,12-.14,23.21,5.35,32.71a1.64,1.64,0,0,0,.16.29Z"/>
<path d="M360.78,85.13A49.57,49.57,0,0,1,365,95.29a47.15,47.15,0,0,0,7.21,9.59c1.92-.7,3.76-1.28,5.57-1.76,1.55-.42,3.21-.77,4.92-1.1.26-.06.54-.1.81-.15a48.63,48.63,0,0,0,1.42-11.94,49.24,49.24,0,0,1-1.46-11,2.09,2.09,0,0,0-.08-.34C380.53,68,373.85,58.79,364,51.77c-5,11.07-6.15,22.42-3.29,33,0,.12.06.24.09.37Z"/>
</g>
<circle class="face" cx="400" cy="186" r="86.5" fill="#220c10"/>
<g class="seedGroup" fill="#53131e" stroke="none" stroke-miterlimit="10">
<circle cx="332.1" cy="184" r="6.5"/>
<circle cx="351.22" cy="187.5" r="4"/>
<circle cx="369.99" cy="185.5" r="4"/>
<circle cx="329.6" cy="165.5" r="4"/>
<circle cx="446.6" cy="146.5" r="4"/>
<circle cx="457.96" cy="173" r="4"/>
<circle cx="387.1" cy="198.61" r="4"/>
<circle cx="369.99" cy="112.5" r="4"/>
<circle cx="399.98" cy="235.5" r="4"/>
<circle cx="366.1" cy="254.31" r="4"/>
<circle cx="426.01" cy="192.5" r="4"/>
<circle cx="460.1" cy="233.5" r="4"/>
<circle cx="430.6" cy="253" r="4"/>
<circle cx="367.6" cy="218.5" r="4"/>
<circle cx="420.1" cy="205.5" r="4"/>
<circle cx="475.42" cy="205.5" r="4"/>
<circle cx="376.6" cy="235.5" r="4"/>
<circle cx="339.49" cy="232.5" r="4"/>
<circle cx="404.1" cy="214.5" r="4"/>
<circle cx="327.58" cy="202.61" r="4"/>
<circle cx="453.6" cy="196.5" r="4"/>
<circle cx="433.1" cy="225" r="4"/>
<circle cx="361.1" cy="151.5" r="4"/>
<circle cx="346.6" cy="167.5" r="4"/>
<circle cx="397.6" cy="162.5" r="4"/>
<circle cx="344.1" cy="135" r="4"/>
<circle cx="376.6" cy="166" r="4"/>
<circle cx="435.6" cy="116.5" r="4"/>
<circle cx="390.6" cy="135" r="4"/>
<circle cx="402.1" cy="109.64" r="4"/>
<circle cx="426.6" cy="136" r="4"/>
<circle cx="430.01" cy="171.5" r="4"/>
<circle cx="416.1" cy="157.5" r="4"/>
<circle cx="475.46" cy="166.5" r="4"/>
<circle cx="340.1" cy="153" r="6.5"/>
<circle cx="361.1" cy="130" r="6.5"/>
<circle cx="387.1" cy="119" r="6.5"/>
<circle cx="417.1" cy="119" r="6.5"/>
<circle cx="444.1" cy="132" r="6.5"/>
<circle cx="460.1" cy="156" r="6.5"/>
<circle cx="470.1" cy="186" r="6.5"/>
<circle cx="460.1" cy="216" r="6.5"/>
<circle cx="442.1" cy="240" r="6.5"/>
<circle cx="413.1" cy="253" r="6.5"/>
<circle cx="384.1" cy="253" r="6.5"/>
<circle cx="359.1" cy="239" r="6.5"/>
<circle cx="342.1" cy="214" r="6.5"/>
<circle cx="366.1" cy="201" r="6.5"/>
<circle cx="361.1" cy="173" r="6.5"/>
<circle cx="380.1" cy="151" r="6.5"/>
<circle cx="407.1" cy="144" r="6.5"/>
<circle cx="444.1" cy="181" r="6.5"/>
<circle cx="436.1" cy="207" r="6.5"/>
<circle cx="416.1" cy="225" r="6.5"/>
<circle cx="387.1" cy="221" r="6.5"/>
<circle cx="404.1" cy="199" r="6.5"/>
<circle cx="413.1" cy="174" r="6.5"/>
<circle cx="433.1" cy="155" r="6.5"/>
<circle cx="387.1" cy="179" r="6.5"/>
</g>
</g>
</g>
</svg>
Raw
script.js
TweenMax.set('svg', {
visibility: 'visible'
})
var sunflowerTL = new TimelineMax().timeScale(1.62);
sunflowerTL.from('.stalk', 2, {
attr: {
y2:596.67
},
ease: Power2.easeInOut
})
.from('.leafGroup1 .leafR', 2, {
scale: 0,
rotation: -34,
transformOrigin: '0% 100%',
ease: Elastic.easeOut.config(0.4, 0.5)
}, '-=1.5')
.from('.leafGroup1 .leafL', 2, {
scale: 0,
rotation: 34,
transformOrigin: '100% 100%',
ease: Elastic.easeOut.config(0.4, 0.5)
}, '-=1.6')
.from('.leafGroup2 .leafR', 2, {
scale: 0,
rotation: -34,
transformOrigin: '0% 100%',
ease: Elastic.easeOut.config(0.4, 0.5)
},'-=2')
.from('.leafGroup2 .leafL', 2, {
scale: 0,
rotation: 34,
transformOrigin: '100% 100%',
ease: Elastic.easeOut.config(0.4, 0.5)
},'-=1.8')
.from('.face', 2, {
attr: {
r: 0
},
ease: Elastic.easeOut.config(0.4, 0.75)
}, '-=1.42')
.staggerFrom('.petalGroup path', 2, {
scale: 0,
svgOrigin: '400 186',
ease: Elastic.easeOut.config(0.4, 0.5)
}, 0.07, '-=1.4')
.staggerFrom('.petalGroupBack path', 2, {
scale: 0,
svgOrigin: '400 186',
ease: Elastic.easeOut.config(0.4, 0.5)
}, 0.03, '-=3' )
.staggerFrom('.seedGroup circle', 1, {
attr:{
r: 0
},
ease: Elastic.easeOut.config(0.5, 0.5)
}, 0.0097, '-=3.64' )
.to('.wholeFlower', 8, {
rotation: 2,
transformOrigin: '50% 100%',
ease: CustomWiggle.create('', {wiggles: 6, type: 'easeOut'})
}, 0)
.staggerTo('.leaf', 5, {
cycle: {
rotation: [-2, 3, 2, -3]
},
ease: CustomWiggle.create('', {wiggles: 8, type: 'easeInOut'})
}, 0.05, '-=4.8')
.to('.flowerHead', 7, {
scaleX: 1.05,
transformOrigin: '50% 50%',
ease: CustomWiggle.create('', {wiggles: 3, type: 'easeInOut'})
}, '-=8')
.to('.flowerHead', 10, {
rotation: 2,
transformOrigin: '50% 50%',
ease: CustomWiggle.create('', {wiggles: 16, type: 'easeInOut'})
}, '-=9')
//ScrubGSAPTimeline(sunflowerTL);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/utils/Draggable.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=12"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSTransform.min.js?r=5"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/EndArrayPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubGSAPTimeline.js"></script>
Raw
style.css
body {
background-color: #235789;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment