利用HTML5实现SVG盆栽植物动画特效



8 28 10



特效描述:利用HTML5实现 SVG 盆栽植物 动画特效,利用HTML5实现SVG盆栽植物动画特效

代码结构

1. 引入JS

<script src="js/TweenMax.min.js"></script>
<script src="js/TimelineMax.min.js"></script>

2. HTML代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 850.5 850.5">
  <defs>
    <clipPath id="haworthia-clip-path">
      <path class="no-fill" d="M346.55,207H19.41V406.62h83.88c1.11,4.16,36.24,7.5,79.45,7.5s78.33-3.34,79.44-7.5h84.37Z"/>
    </clipPath>
    <clipPath id="cactus-clip-path">
      <path class="no-fill" d="M297.57,215.13V406.42h58c0,4.25,35.59,7.7,79.49,7.7s79.5-3.45,79.5-7.7h53.67V215.13Z"/>
    </clipPath>
    <clipPath id="echeveria-clip-path">
      <path class="no-fill" d="M553.15,240.87V406.42h58.56c0,4.25,35.6,7.7,79.5,7.7s79.5-3.45,79.5-7.7h62.5V240.87Z"/>
    </clipPath>
  </defs>
  <rect class="back" width="850.5" height="850.5"/>
  <text
    x="436"
    y="700"
    text-anchor="middle"
    class="replay-text"
  >Click anywhere to replay</text>
  <ellipse class="pot-shadow" cx="181.74" cy="577.62" rx="79.66" ry="19.62"/>
  <g class="pot">
    <path class="pot-lightest" d="M183.74,406.62H91.66c-17,54,1,118,39.15,172H236.66c38.1-54,56.11-118,39.15-172Z"/>
    <path class="pot-lighter" d="M275.81,406.62h-.63a2.44,2.44,0,0,1,.69,1.6c0,5.25-21.77,9.78-53.2,11.87-3.29,17.67-17.12,34.26-35.13,47C164.64,483,135.2,493,103,493q-6.24,0-12.43-.47c7.14,29.54,21.18,59.08,40.26,86.14H236.66C274.76,524.59,292.77,460.65,275.81,406.62Z"/>
    <path d="M275.81,406.62h-.63a2.44,2.44,0,0,1,.69,1.6c0,3.58-10.12,6.82-26.51,9.19q.69,3.27,1.1,6.63c4.95,32.31-16.11,63.56-37.58,85.67-22.55,22.28-45.5,35.43-69.32,35.5-11.63,0-23.74-2.88-37.09-8.17a279.16,279.16,0,0,0,24.32,41.55v0c0,2.54,23.71,4.6,53,4.6s52.95-2.06,52.95-4.6v0C274.77,524.57,292.77,460.64,275.81,406.62Z"/>
    <ellipse class="pot-top-lightest" cx="183.53" cy="408.22" rx="92.34" ry="13.1"/>
    <ellipse cx="183.78" cy="406.09" rx="90.87" ry="10.96"/>
    <ellipse class="pot-top-soil" cx="182.74" cy="406.42" rx="79.5" ry="7.7"/>
  </g>
  <g class="haworthia plant">
    <g class="leaf">
      <path d="M206.26,412.9c0,62.49-25.15,69.34-25.15,69.34S156,475.39,156,412.9,181.11,256,181.11,256,206.26,350.42,206.26,412.9Z"/>
      <path class="haworthia-strip" d="M193.77,311.41q-.81-4-1.6-7.83l-.36.37-2.84.49-2.85-2.34-2.84.27-2.84-1.11-2.85,5.58-2.84-2.1-2.84,1.14-2-1.38q-.81,3.92-1.62,8l.88,1.39,2.85-.09,2.84-.15,2.84-.26,2.84-3.27,2.84,4.88,2.85-3.09,2.84-.06,2.84,1.61Z"/>
      <path class="haworthia-strip" d="M199.08,340.39l-1.59.87-2.84.42-2.84-4.62-2.84.47-2.85,3.55-2.84-2-2.84-1.3-2.85,5.07-2.84-4.47-2.84.08-2.85.15-2.84.27-2.84,3.27-.4-.69c-.55,3.34-1.08,6.71-1.59,10.09l2.05-3.4,2.84,3.68,2.84,1.14,2.85-1.33,2.84,1.15,2.84-2,2.84-1.17,2.84-1.61,2.85,4.47,2.84-3.7,2.84-.81,2.85-.14,2.84.17,2.85,3.94.52.17Q200,346.18,199.08,340.39Z"/>
      <path class="haworthia-strip" d="M203.83,416.18,201,416l-2.85.29-2.84,1.43-2.85-1.59-2.84,1-2.84.61-2.84-.41-2.84-.48-2.85,4.73L175.4,418l-2.84-1.14-2.85,1.33L166.87,417l-2.84,2-2.85,1.16-2.84,1.61L156,418.2a168.84,168.84,0,0,0,1.74,21.07l.63.18h2.84l2.85-1.53,2.84,2.22,2.84-5.06,2.84,3.18,2.84-1.54,2.85,1.55,2.84-3.9,2.84,4,2.85-1.13,2.84-2.79,2.85,6,2.84-1.07,2.84-.71,2.85-3.68,2.84,4.94.62-1a169.91,169.91,0,0,0,1.69-21.07Z"/>
      <path class="haworthia-strip" d="M204.25,378.19l-.42-.48L201,383.35l-2.85-4.68-2.84,2.25-2.85-3.25-2.84,5.46L186.77,377l-2.84,6.07-2.84-4.21-2.85-.81-2.84,0-2.84,1.52-2.85-2.22-2.84,5.06L164,379.26l-2.85,1.54-2.84-1.56-.54.75c-.5,5-.91,9.88-1.21,14.69l1.81,2.95,2.84-6.36,2.85,2.87,2.84-.45,2.84.54,2.84-2.79,2.84,1.82,2.85,3.05,2.84.27,2.84-5.07,2.85-.12,2.84,2,2.85,3.18,2.84-2.08,2.84-1.08,2.85-.4,2.84,2.34,1.79,0C205.34,389.76,204.85,384,204.25,378.19Z"/>
      <path class="haworthia-ouline" d="M181.11,256S156,350.42,156,412.9s25.14,69.34,25.14,69.34,25.15-6.85,25.15-69.34S181.11,256,181.11,256Zm0,206.09s-17.29-5.63-17.29-57,17.29-128.93,17.29-128.93,17.3,77.6,17.3,128.93S181.11,462,181.11,462Z"/>
    </g>
    <g class="leaf">
      <path d="M201.31,443.11c7.87,72.8-25.7,78.51-24.26,78.23-1.29,0-23.75-10.1-27.66-72.47C147,417.55,143.32,377.06,136,344.25c-6.62-32.78-16.92-57.88-16.48-57.79-.4.27,19.22,18.39,38.56,48.7C177.65,365,197,406.94,201.31,443.11Z"/>
      <path class="haworthia-strip" d="M158.34,335.51c-1.65-2.55-3.31-5-5-7.4,0,.17-.1.34-.14.51L151,330.19l-3.52-1.27-2.32,1.36-3,0c0,2.2,0,4.4,0,6.59l-3.37-1c-.65.73-1.31,1.46-2,2.18l-2.35-.57c.63,2.73,1.25,5.53,1.86,8.38l1.32,1,2.48-1.1,2.44-1.16,2.39-1.28c.39-1.43.77-2.85,1.13-4.29q2.28,1.92,4.56,3.88c.41-1.38.81-2.75,1.19-4.14l2.48-1.09,3.2.63Q158,336.92,158.34,335.51Z"/>
      <path class="haworthia-strip" d="M175,364.16l-1.15,1.4-2.49,1.29q-2.16-2-4.32-4l-2.45,1.37c-.44,1.52-.9,3-1.38,4.54l-3.34-1.25-3.07-.47q-.45,3-.94,6-2.06-1.87-4.12-3.7l-2.6.94-2.58,1L144,372.4q-.8,2.06-1.62,4.08l-.58-.56q.78,5.19,1.45,10.42c.34-1.31.66-2.62,1-3.93q1.88,1.43,3.74,2.89l3,.38c.78-.7,1.55-1.41,2.31-2.12l3,.41c.7-.94,1.4-1.89,2.09-2.84l2.32-2c.73-.81,1.45-1.63,2.17-2.45q2.06,1.92,4.1,3.89.76-2.32,1.5-4.68l2.41-1.64,2.63-.94,2.73-.62c1.35,1.15,2.69,2.3,4,3.47l.55,0Q178,370.08,175,364.16Z"/>
      <path class="haworthia-strip" d="M199.3,447.11l-3,.14-2.91.63-2.75,1.89-3.16-1.47-2.81,1.45-2.88,1-3-.15-3-.23q-1.2,2.7-2.45,5.35-1.67-1.83-3.34-3.65l-3.07-.92-2.81,1.7-3.07-.92c-.92.8-1.83,1.6-2.76,2.39l-2.85,1.48-2.84,1.9q-1.33-1.74-2.69-3.45c.87,8,1.85,15.07,3,21.28l.68.15,3-.13,3-1.7c1,.72,2.06,1.46,3.09,2.19.95-1.8,1.89-3.62,2.8-5.45q1.59,1.6,3.16,3.22l2.94-1.77,3.09,1.54c.94-1.45,1.87-2.9,2.78-4.37,1.09,1.39,2.17,2.78,3.25,4.19l3-1.37c.95-1.07,1.89-2.14,2.82-3.23,1.15,2.18,2.28,4.38,3.41,6.6l3-1.32,3-.93q1.38-2.14,2.73-4.32,1.71,2.74,3.39,5.52c.2-.4.4-.81.59-1.21a138.13,138.13,0,0,0-.52-24.33C201.1,448.21,200.2,447.66,199.3,447.11Z"/>
      <path class="haworthia-strip" d="M191.94,404.2l-.54-.46q-.66,3.43-1.38,6.85c-1.33-1.55-2.65-3.09-4-4.61q-1.11,1.51-2.25,3c-1.2-1-2.41-2-3.61-3-.48,2.17-1,4.33-1.51,6.48q-2.11-3-4.26-6-.66,3.54-1.4,7.06c-1.26-1.32-2.51-2.62-3.77-3.91l-3-.27-2.8.6L161,412.14l-3.29-1.71q-.84,2.9-1.76,5.76l-3.45-2.67L150,415.65l-3.12-1-.39.86c.47,5.06.9,10.05,1.31,14.93l2.27,2.68q1-3.44,1.88-6.9l3.34,2.45,2.79-.93,3,.09c.8-1.12,1.59-2.25,2.37-3.38l3.19,1.43c1.14.91,2.27,1.83,3.41,2.76l2.92-.16q1-2.94,1.93-5.89l2.83-.63c1.09.55,2.17,1.11,3.26,1.68,1.16,1,2.33,2,3.49,3,.83-.91,1.65-1.82,2.47-2.74l2.64-1.67,2.78-.92c1.13.71,2.25,1.44,3.37,2.16l1.82-.26C195.93,416.94,194.07,410.57,191.94,404.2Z"/>
      <path class="haworthia-ouline" d="M119.52,286.46c-.44-.09,9.86,25,16.48,57.79,7.32,32.81,11,73.3,13.39,104.62,3.91,62.37,26.37,72.45,27.66,72.47-1.44.28,32.13-5.43,24.26-78.23C197,406.94,177.65,365,158.08,335.16,138.74,304.85,119.12,286.73,119.52,286.46Zm58.54,212.83c-.89,0-16.36-7-21.5-59.37-2.9-26.26-7-59.83-13-86.87-5.62-27-13.23-47.53-12.93-47.5.68-1.62,54.44,69.84,61.34,129.69C199.5,493.45,177.11,499.48,178.06,499.29Z"/>
    </g>
    <g class="leaf">
      <path d="M196.74,430.69c36.3,63.59,7.81,82.24,9,81.41-1.19.49-25.81.23-54.31-55.39-14.75-27.73-34.26-63.4-54.08-90.55-19.17-27.4-38.65-46.29-38.21-46.39-.26.42,25,9.18,54.81,29.23C143.82,368.49,178.29,399.28,196.74,430.69Z"/>
      <path class="haworthia-strip" d="M114.35,349.22q-3.81-2.5-7.5-4.8c0,.17.05.35.08.53l-1.42,2.32-3.73.25-1.59,2.17-2.7,1.16q1.35,3,2.62,6l-3.48.43c-.31.93-.62,1.86-.94,2.79l-2.38.41c1.67,2.25,3.36,4.57,5,6.94l1.63.42,1.83-2,1.78-2.05,1.68-2.13c-.22-1.45-.44-2.91-.68-4.37,1.91.56,3.81,1.14,5.73,1.73-.18-1.42-.36-2.85-.56-4.27l1.83-2,3.19-.71C114.65,351.14,114.5,350.18,114.35,349.22Z"/>
      <path class="haworthia-strip" d="M141.05,368.84c-.16.58-.33,1.16-.49,1.74l-1.78,2.18c-1.85-.68-3.71-1.33-5.56-2l-1.7,2.23c.2,1.58.38,3.15.55,4.72l-3.56.19-3,.8q.81,2.94,1.55,5.9-2.62-.9-5.25-1.75l-2,1.9-2,2-1.88,2c.06,1.47.11,2.93.14,4.39l-.75-.28c1.85,3,3.68,6,5.49,9-.21-1.33-.44-2.66-.68-4,1.53.37,3,.76,4.58,1.15l2.92-.85c.43-1,.86-1.91,1.28-2.87l2.94-.83c.26-1.15.52-2.29.77-3.44l1.34-2.75c.34-1,.67-2.08,1-3.12,1.77.63,3.55,1.27,5.32,1.93-.15-1.63-.32-3.26-.5-4.89l1.56-2.46,2-1.92,2.26-1.65q2.54.76,5.08,1.57l.52-.19Q146.2,373,141.05,368.84Z"/>
      <path class="haworthia-strip" d="M196.49,435.16l-2.66,1.31-2.42,1.74c-.58.94-1.18,1.89-1.77,2.83l-3.48-.08-2,2.46-2.25,2-2.81,1.06-2.84,1c0,2,0,3.93-.11,5.89-1.51-.69-3-1.36-4.52-2l-3.18.39-1.9,2.68-3.18.38c-.52,1.1-1,2.2-1.57,3.3l-2,2.49c-.61,1-1.22,1.92-1.84,2.88-1.28-.71-2.56-1.4-3.84-2.09,4,7,7.71,13.07,11.24,18.31l.68-.13,2.71-1.32c.69-.92,1.37-1.83,2-2.75l3.71.77c.15-2,.29-4.07.39-6.11,1.4.55,2.79,1.12,4.19,1.69l2-2.8,3.45.17c.28-1.7.55-3.4.8-5.11l4.66,2.54,2.15-2.43c.44-1.36.87-2.72,1.3-4.09q2.88,2.31,5.75,4.68l2.19-2.39,2.35-2c.27-1.68.53-3.36.78-5.05q2.65,1.83,5.31,3.7l.06-1.34a140.51,140.51,0,0,0-10.2-22.1Z"/>
      <path class="haworthia-strip" d="M172.6,398.76l-.68-.2q.77,3.4,1.47,6.83-2.74-1.35-5.49-2.64c-.28,1.23-.57,2.46-.86,3.68-1.5-.43-3-.86-4.49-1.27q.63,3.27,1.2,6.54c-2.1-1.29-4.2-2.57-6.31-3.82q.81,3.51,1.53,7-2.5-1.07-5-2.08l-2.85.95-2.33,1.67c-.46,1-.93,2-1.4,3l-3.7-.25c.25,2,.48,4,.69,6l-4.24-1.07c-.48,1-1,2-1.45,3-1.09.1-2.17.22-3.25.33,0,.31,0,.63,0,.94,2.45,4.46,4.84,8.86,7.17,13.16l3.15,1.56q-.48-3.54-1-7.08l4,.91,2.19-2,2.75-1.11c.28-1.35.56-2.69.83-4l3.49,0,4.23,1.17,2.61-1.32q-.26-3.08-.59-6.17l2.35-1.7,3.66.23,4.41,1.38c.39-1.17.78-2.33,1.16-3.5l1.76-2.59,2.18-2,4,.65,1.56-1C181.35,408.85,177.1,403.74,172.6,398.76Z"/>
      <path class="haworthia-ouline" d="M59.16,319.77c-.43.1,19,19,38.21,46.4,19.82,27.14,39.34,62.81,54.08,90.54,28.5,55.62,53.12,55.88,54.31,55.39-1.21.83,27.28-17.82-9-81.42C178.29,399.28,143.82,368.49,114,349,84.12,329,58.9,320.19,59.16,319.77Zm138.71,171.7c-.8.38-17.77.17-43.43-45.82-13.15-22.92-30.29-52.07-46.65-74.43-16-22.54-31.12-38.29-30.84-38.38,0-1.76,77.82,42.26,108.06,94.37C215.2,477.55,197.08,492,197.87,491.47Z"/>
    </g>
    <g class="leaf">
      <path d="M231.59,447.33c-4.45,51-27.45,59-28.51,59,1.2.29-30.65-5.07-22-66.13,4.65-30.31,22.85-64.81,40.73-88.85,17.73-24.52,35.14-38.57,34.82-38.83.37-.09-8.14,21.05-13.52,48.34C237.09,388.23,234.22,421.71,231.59,447.33Z"/>
      <path class="haworthia-strip" d="M243,361.25c.49-2.33,1-4.6,1.5-6.83l-.44.16-2.55-.73q-.75-1.5-1.47-3l-2.46-.91-1.92-2c-1.53,1.14-3.05,2.28-4.58,3.45-.52-1-1-1.9-1.54-2.85l-2.83-.16c-.39-.65-.77-1.3-1.14-2q-2.29,3-4.62,6.14l.21,1.5,2.45,1L226,356l2.52.85,3.65-1.63c.18,1.7.38,3.39.59,5.08,1.19-.49,2.37-1,3.55-1.45l2.43,1,1.84,2.37Z"/>
      <path class="haworthia-strip" d="M238.48,386.3l-1.66.21-2.68-.55c-.42-1.56-.82-3.12-1.21-4.69l-2.68-.53-3.61,2c-.65-.86-1.3-1.73-1.94-2.6l-2.14-2q-2.07,1.68-4.13,3.41c-.4-1.57-.78-3.15-1.15-4.73l-2.57-.84-2.59-.78-2.64-.68-3.65,2c0-.25-.09-.49-.13-.74q-2.41,4.19-4.72,8.54c1-.82,2-1.64,3-2.44.47,1.37,1,2.75,1.45,4.11.75.62,1.51,1.23,2.27,1.83l3-.34,2.27,1.82,3.19-.93,2.93-.16,3.06-.52c.43,1.54.89,3.08,1.35,4.61,1.21-.77,2.41-1.53,3.62-2.28l2.81.19,2.63.73,2.54,1c.52,1.36,1.05,2.7,1.59,4l.44.29Q237.75,391.28,238.48,386.3Z"/>
      <path class="haworthia-strip" d="M228.82,449.71l-2.85-.5-2.91-.13-3,.85-2.71-1.74-3,.54-2.94.16-2.83-.72-2.81-.8q-1.72,1.92-3.44,3.89-1.25-1.83-2.44-3.69l-2.73-1.4-3,.85-2.72-1.43-3.15,1.53-3.05.75-3.1,1.19c-.62-1.24-1.22-2.49-1.82-3.75a105.12,105.12,0,0,0-.78,20.44l.64.22,2.94.19,3.08-1.25c.91.78,1.83,1.54,2.75,2.3q1.68-2.28,3.38-4.51c.88,1.06,1.77,2.12,2.66,3.16l3.06-1.19,2.82,1.63q1.6-1.67,3.23-3.3c.87,1.27,1.75,2.54,2.64,3.79l3-.79,3.12-2.22c.84,1.84,1.69,3.68,2.57,5.49l3-.73,3-.4q1.56-1.47,3.14-2.91,1.32,2.2,2.69,4.38l.69-.82c1.21-5.07,2.25-10.82,3.15-17.38Z"/>
      <path class="haworthia-strip" d="M234.58,418.42l-.31-.49c-1.26,1.32-2.51,2.65-3.76,4q-1-2.25-1.88-4.51-1.57.6-3.15,1.23c-.71-1.12-1.41-2.24-2.1-3.37q-1.9,2-3.81,4-.78-2.93-1.48-5.89-2,2.28-4,4.61-.94-2.14-1.86-4.3l-2.55-1.35-2.72-.64-3.08.71c-.74-.87-1.48-1.75-2.21-2.64q-2,1.95-3.91,3.95c-.67-1.17-1.33-2.35-2-3.53-1,.25-2.07.51-3.1.78l-2.35-2.08-.71.57c-1.7,4.51-3.23,9-4.54,13.52.39,1.05.78,2.08,1.17,3.12,1.36-1.83,2.73-3.63,4.11-5.42q1.08,1.62,2.19,3.21l2.88.13,2.68,1,3.33-2,2.42,2.19c.74,1.09,1.48,2.17,2.24,3.25l2.75.76q1.83-2,3.68-3.91l2.8.45,2.44,2.26c.75,1.1,1.51,2.19,2.27,3.27l3.13-1.24,3-.38L229,430c.81.83,1.62,1.66,2.44,2.48l1.76.36C233.63,428.12,234.09,423.31,234.58,418.42Z"/>
      <path class="haworthia-ouline" d="M256.6,312.55c.32.26-17.09,14.31-34.82,38.83-17.88,24-36.08,58.54-40.73,88.85-8.62,61.06,23.23,66.42,22,66.13,1.06,0,24.06-8,28.51-59,2.63-25.62,5.5-59.1,11.49-86.44C248.46,333.6,257,312.46,256.6,312.55ZM202.78,488c.78.19-20.44-5.37-12.56-54,7.49-50.11,56.29-107.36,56.7-105.88.25,0-6.09,17.15-10.79,39.62-5.08,22.49-8.52,50.28-11.48,71.84C219.29,482.63,203.51,488,202.78,488Z"/>
    </g>
    <g class="leaf">
      <path d="M222.14,401.72c-4.45,51-27.45,59-28.51,59,1.2.28-30.65-5.08-22-66.14,4.65-30.31,22.85-64.81,40.73-88.85,17.73-24.52,35.14-38.57,34.82-38.83.37-.09-8.14,21.05-13.52,48.34C227.64,342.62,224.77,376.1,222.14,401.72Z"/>
      <path class="haworthia-strip" d="M233.51,315.64c.49-2.33,1-4.6,1.5-6.83l-.45.16-2.54-.73q-.75-1.5-1.47-3l-2.46-.91-1.92-2c-1.53,1.13-3,2.27-4.58,3.44-.52-.95-1-1.9-1.54-2.85l-2.84-.16c-.38-.65-.76-1.3-1.13-2-1.53,2-3.07,4-4.62,6.14l.21,1.51,2.45,1,2.47.94,2.52.84,3.65-1.63c.18,1.7.38,3.39.59,5.08,1.19-.49,2.37-1,3.55-1.45l2.43,1,1.84,2.37Z"/>
      <path class="haworthia-strip" d="M229,340.69l-1.66.21-2.68-.55c-.42-1.56-.82-3.12-1.21-4.69l-2.68-.53-3.61,2c-.65-.86-1.3-1.73-1.94-2.6l-2.14-2Q211,334.25,209,336c-.4-1.57-.78-3.15-1.15-4.73l-2.57-.84-2.59-.78L200,329l-3.65,2c0-.25-.09-.49-.13-.74q-2.43,4.2-4.72,8.54c1-.82,2-1.64,2.95-2.44.47,1.38,1,2.75,1.45,4.11.75.62,1.51,1.23,2.27,1.83l3-.34,2.28,1.83,3.19-.94,2.93-.16,3.06-.52c.43,1.54.89,3.08,1.35,4.61,1.21-.77,2.41-1.53,3.62-2.28l2.81.19,2.63.73,2.54,1c.52,1.36,1,2.7,1.59,4l.44.29C228.07,347.34,228.54,344,229,340.69Z"/>
      <path class="haworthia-strip" d="M219.37,404.1l-2.86-.5-2.9-.13-3,.85-2.71-1.74-3,.54-2.94.16-2.83-.72-2.81-.8q-1.72,1.92-3.45,3.89-1.23-1.83-2.43-3.69l-2.73-1.4-3.05.86L182,400l-3.15,1.53-3.05.75-3.11,1.19c-.61-1.24-1.21-2.49-1.81-3.75a105.12,105.12,0,0,0-.78,20.44l.64.22,2.94.19,3.08-1.25c.91.78,1.83,1.54,2.75,2.3q1.68-2.28,3.38-4.51c.88,1.06,1.77,2.12,2.66,3.17l3.06-1.2,2.82,1.63q1.6-1.67,3.23-3.3c.87,1.27,1.75,2.54,2.64,3.79l3-.79q1.56-1.12,3.12-2.22c.84,1.84,1.69,3.68,2.57,5.5l3-.74,3-.4q1.56-1.47,3.14-2.91,1.32,2.2,2.69,4.38l.69-.82c1.21-5.07,2.25-10.82,3.15-17.38Z"/>
      <path class="haworthia-strip" d="M225.13,372.81l-.31-.49c-1.26,1.32-2.51,2.65-3.76,4q-1-2.25-1.88-4.51L216,373.05c-.71-1.12-1.41-2.24-2.1-3.37q-1.91,2-3.81,4-.78-2.93-1.48-5.89-2,2.28-4,4.61c-.63-1.42-1.25-2.86-1.86-4.3l-2.55-1.35-2.73-.64-3.07.71c-.74-.87-1.48-1.75-2.21-2.64-1.31,1.31-2.61,2.62-3.91,3.95-.67-1.17-1.33-2.35-2-3.53-1,.25-2.07.51-3.1.78l-2.35-2.08-.71.57c-1.7,4.51-3.23,9-4.54,13.53l1.17,3.11c1.36-1.83,2.73-3.63,4.11-5.42.72,1.08,1.45,2.15,2.19,3.22l2.88.12,2.68,1,3.33-2,2.42,2.19c.74,1.09,1.48,2.17,2.23,3.25l2.75.76c1.23-1.31,2.46-2.62,3.69-3.91l2.8.45,2.44,2.26c.75,1.1,1.51,2.19,2.27,3.27l3.12-1.24,3-.38,2.85.21c.81.83,1.62,1.66,2.44,2.48l1.76.36C224.18,382.51,224.64,377.7,225.13,372.81Z"/>
      <path class="haworthia-ouline" d="M247.15,266.94c.32.26-17.09,14.31-34.82,38.83-17.88,24-36.08,58.54-40.73,88.85-8.62,61.06,23.23,66.42,22,66.14,1.06,0,24.06-8,28.51-59,2.63-25.62,5.5-59.1,11.49-86.44C239,288,247.52,266.85,247.15,266.94ZM193.33,442.4c.78.19-20.44-5.37-12.56-54,7.49-50.11,56.29-107.36,56.7-105.88.25,0-6.09,17.15-10.79,39.62-5.08,22.49-8.52,50.28-11.48,71.84C209.84,437,194.06,442.43,193.33,442.4Z"/>
    </g>
    <g class="leaf">
      <path d="M253.15,438.84c-10.44,50.11-34.24,55.36-35.29,55.25,1.16.43-29.83-8.66-14.06-68.28,8.2-29.54,30.35-61.65,50.95-83.41,20.5-22.25,39.45-34.14,39.16-34.44.37,0-10.57,19.94-19.14,46.4C265.59,380.8,258.79,413.71,253.15,438.84Z"/>
      <path class="haworthia-strip" d="M274.61,354.7c.76-2.25,1.53-4.45,2.29-6.6l-.45.1-2.45-1c-.37-1-.74-2.09-1.1-3.14l-2.34-1.2-1.66-2.25L264,343.46c-.41-1-.81-2-1.2-3L260,340c-.3-.69-.6-1.39-.89-2.08-1.75,1.78-3.53,3.63-5.31,5.55,0,.5,0,1,0,1.52l2.32,1.27,2.35,1.23,2.4,1.13c1.27-.4,2.54-.8,3.81-1.18,0,1.71,0,3.41,0,5.11l3.69-1,2.3,1.3,1.54,2.57Z"/>
      <path class="haworthia-strip" d="M267.2,379.05h-1.68l-2.59-.86c-.23-1.6-.45-3.2-.65-4.81l-2.59-.83c-1.28.52-2.55,1.05-3.83,1.59l-1.62-2.8-1.89-2.24q-2.25,1.42-4.5,2.89c-.21-1.6-.41-3.21-.58-4.83L244.81,366,242.33,365l-2.54-1c-1.28.51-2.57,1-3.86,1.55,0-.25,0-.5,0-.75-1.93,2.58-3.84,5.22-5.69,7.92l3.21-2.08q.47,2.14,1,4.26c.67.7,1.35,1.39,2,2.09h3l2,2.08,3.28-.55,2.93.19,3.1-.16c.25,1.59.51,3.17.8,4.74,1.28-.62,2.57-1.23,3.86-1.83l2.77.51,2.52,1,2.41,1.29c.35,1.4.72,2.8,1.1,4.2l.4.33C265.47,385.54,266.32,382.28,267.2,379.05Z"/>
      <path class="haworthia-strip" d="M250.12,440.88l-2.78-.84-2.87-.47-3.09.48-2.48-2-3,.18-2.94-.19L230.21,437l-2.7-1.12c-1.29,1.13-2.59,2.28-3.88,3.45-.67-1.31-1.33-2.62-2-3.95l-2.54-1.71-3.13.49-2.53-1.75-3.32,1.15-3.11.38-3.23.81q-.69-1.95-1.35-3.93a105.14,105.14,0,0,0-3.19,20.2l.6.29,2.91.54,3.2-.87,2.46,2.61c1.29-1.38,2.59-2.74,3.88-4.09.75,1.16,1.51,2.32,2.28,3.46l3.17-.83,2.61,2c1.2-1,2.4-1.94,3.6-2.9.71,1.37,1.44,2.73,2.17,4.08l3.09-.43,3.37-1.84c.61,1.93,1.24,3.86,1.9,5.77l3.06-.38,3,0c1.15-.85,2.3-1.68,3.46-2.51.7,1.56,1.42,3.12,2.15,4.66l.79-.73c1.8-4.89,3.51-10.48,5.18-16.89C251.46,442.18,250.79,441.53,250.12,440.88Z"/>
      <path class="haworthia-strip" d="M259.53,410.49c-.08-.18-.17-.36-.25-.53q-2.1,1.74-4.2,3.53c-.46-1.56-.91-3.12-1.33-4.7l-3.29.86q-.86-1.8-1.68-3.6-2.13,1.74-4.25,3.52c-.29-2-.55-4-.78-6q-2.26,2-4.51,4.1c-.46-1.48-.9-3-1.33-4.48l-2.37-1.65-2.64-.95-3.13.34c-.64-1-1.27-1.92-1.89-2.88q-2.17,1.71-4.34,3.46c-.53-1.25-1-2.49-1.56-3.75l-3.18.41-2.09-2.34-.76.48c-2.23,4.28-4.28,8.6-6.11,12.9.26,1.08.52,2.15.8,3.23,1.56-1.65,3.14-3.28,4.72-4.9.58,1.16,1.18,2.31,1.79,3.45l2.84.47,2.54,1.33,3.54-1.57c.71.83,1.43,1.65,2.15,2.46.6,1.17,1.21,2.34,1.83,3.5l2.64,1.08c1.38-1.17,2.75-2.32,4.13-3.45l2.73.77c.71.85,1.43,1.7,2.15,2.54.61,1.18,1.24,2.35,1.87,3.51l3.25-.86,3,0,2.8.54c.7.92,1.41,1.84,2.13,2.75l1.7.56C257.44,420,258.47,415.28,259.53,410.49Z"/>
      <path class="haworthia-ouline" d="M293.91,308c.29.3-18.66,12.19-39.16,34.44-20.6,21.76-42.75,53.87-50.95,83.41C188,485.43,219,494.52,217.86,494.09c1,.11,24.85-5.14,35.29-55.25,5.64-25.13,12.44-58,21.62-84.48C283.34,327.9,294.28,307.91,293.91,308ZM219.73,475.83c.75.28-19.66-7.75-6.09-55.09,13.36-48.87,68.58-100,68.81-98.44.26,0-8.07,16.31-15.39,38.07-7.71,21.74-14.41,48.92-19.89,70C236.77,472.43,220.45,476,219.73,475.83Z"/>
    </g>
  </g>
  <ellipse class="pot-shadow" cx="434.07" cy="577.62" rx="79.66" ry="19.62"/>
  <g class="pot">
    <path class="pot-lightest" d="M436.07,406.62H344c-17,54,1.05,118,39.15,172H489c38.1-54,56.11-118,39.15-172Z"/>
    <path class="pot-lighter" d="M528.15,406.62h-.63a2.49,2.49,0,0,1,.69,1.6c0,5.25-21.77,9.78-53.21,11.87-3.28,17.67-17.11,34.26-35.13,47C417,483,387.54,493,355.32,493q-6.24,0-12.43-.47c7.14,29.54,21.18,59.08,40.26,86.14H489C527.1,524.59,545.11,460.65,528.15,406.62Z"/>
    <path d="M528.15,406.62h-.63a2.49,2.49,0,0,1,.69,1.6c0,3.58-10.12,6.82-26.51,9.19q.69,3.27,1.1,6.63c4.95,32.31-16.11,63.56-37.58,85.67-22.55,22.28-45.5,35.43-69.32,35.5-11.63,0-23.75-2.88-37.1-8.17a280.1,280.1,0,0,0,24.33,41.55,0,0,0,0,0,0,0c0,2.54,23.71,4.6,52.95,4.6s53-2.06,53-4.6v0C527.11,524.57,545.1,460.64,528.15,406.62Z"/>
    <ellipse class="pot-top-lightest" cx="435.87" cy="408.22" rx="92.34" ry="13.1"/>
    <ellipse cx="436.12" cy="406.09" rx="90.87" ry="10.96"/>
    <ellipse class="pot-top-soil" cx="435.07" cy="406.42" rx="79.5" ry="7.7"/>
  </g>
  <g class="cactus plant">
    <g class="leaf">
      <line class="cactus-prickle" x1="519.14" y1="354.57" x2="528.68" y2="343.31"/>
      <line class="cactus-prickle" x1="487.88" y1="328.76" x2="500.32" y2="319.06"/>
      <path d="M514.74,383.37c-21.18,29.69-64.51,65.8-78.87,55.55s5.68-63,26.86-92.65,35.48-25.11,49.84-14.87S535.92,353.68,514.74,383.37Z"/>
      <path class="cactus-lighter" d="M503.33,375.59c8.73-12.23,15.1-24.7,18.73-35.78a48.76,48.76,0,0,0-9.49-8.41c-14.36-10.24-28.65-14.82-49.84,14.87-10.32,14.46-20.37,34.4-26.3,52.22,0,7,1.93,12.33,6,15.23C454.77,422.52,482,405.45,503.33,375.59Z"/>
      <ellipse class="cactus-lightest" cx="485.71" cy="351.52" rx="22.94" ry="14.99" transform="translate(-82.54 542.76) rotate(-54.49)"/>
      <line class="cactus-prickle" x1="439.6" y1="425.28" x2="436.16" y2="404.77"/>
      <line class="cactus-prickle" x1="454.46" y1="428.36" x2="460.63" y2="419.71"/>
      <line class="cactus-prickle" x1="444.38" y1="392.96" x2="442.75" y2="372.73"/>
      <line class="cactus-prickle" x1="462.84" y1="392.69" x2="476.37" y2="380.76"/>
      <line class="cactus-prickle" x1="479.9" y1="405.36" x2="493.33" y2="392.86"/>
      <line class="cactus-prickle" x1="488.53" y1="383.41" x2="499.35" y2="367.55"/>
      <line class="cactus-prickle" x1="460.26" y1="363.25" x2="463.44" y2="348.95"/>
      <line class="cactus-prickle" x1="507.57" y1="379.94" x2="521.38" y2="369.72"/>
      <line class="cactus-prickle" x1="506.46" y1="354.06" x2="508.12" y2="344.7"/>
      <line class="cactus-prickle" x1="480.41" y1="348.38" x2="480.26" y2="338.74"/>
      <line class="cactus-prickle" x1="497.14" y1="333.36" x2="510.44" y2="325.28"/>
      <line class="cactus-prickle" x1="464.6" y1="371.24" x2="474.8" y2="356.94"/>
      <line class="cactus-prickle" x1="454.9" y1="371.47" x2="449.05" y2="359.27"/>
      <line class="cactus-prickle" x1="486.15" y1="365.66" x2="497.44" y2="356.15"/>
      <line class="cactus-prickle" x1="498.89" y1="399.84" x2="512.47" y2="393.47"/>
      <line class="cactus-prickle" x1="474.54" y1="424.12" x2="485.99" y2="424.25"/>
      <line class="cactus-prickle" x1="481.85" y1="411.77" x2="489.31" y2="416.08"/>
      <line class="cactus-prickle" x1="470.03" y1="412.87" x2="470.87" y2="396.91"/>
      <line class="cactus-prickle" x1="455.59" y1="414.11" x2="461.81" y2="407.51"/>
      <line class="cactus-prickle" x1="447.66" y1="410.46" x2="454.68" y2="403.43"/>
      <line class="cactus-prickle" x1="506.24" y1="386.02" x2="520.54" y2="385.68"/>
      <line class="cactus-prickle" x1="521.28" y1="365.64" x2="529.02" y2="357.61"/>
      <line class="cactus-prickle" x1="518.66" y1="341.18" x2="522.55" y2="332.92"/>
      <line class="cactus-prickle" x1="467.33" y1="344.2" x2="464.76" y2="332.33"/>
      <line class="cactus-prickle" x1="478.96" y1="334.94" x2="483.36" y2="317.51"/>
      <line class="cactus-prickle" x1="453" y1="387.25" x2="461.63" y2="379.36"/>
      <line class="cactus-prickle" x1="480.89" y1="395.53" x2="480.36" y2="387.12"/>
    </g>
    <g class="flower flower-left">
      <path class="flower-back" d="M349.52,301.89c-.19-4.68,1.18-8.81,4.89-11.19-.86-3.38.1-6.85,2.17-10.08,1.95-3,4.51-5.29,7.67-6.06,1-3.74,4-6.33,7.9-7.93,6.71-2.74,13.63-1.59,17.69,7.67,3.75,8.56,3.74,21-1.59,25.05a5.68,5.68,0,0,1-.6,1.21,6.27,6.27,0,0,1-1.56,1.65c-.75,6.82-12.55,12.39-22.21,12.56C353.77,314.94,349.83,309.13,349.52,301.89Z"/>
      <path class="flower-root" d="M370,305.1c8.58,5.5,22.59,7.38,26.58,1.17S393,288.1,384.45,282.59s-14.95-2.48-18.94,3.74S361.42,299.59,370,305.1Z"/>
      <path class="flower-lighter" d="M367.48,285.4c4,9.39,14.48,18.85,21.28,16s7.32-17,3.35-26.39-10.94-10.49-17.74-7.61S363.51,276,367.48,285.4Z"/>
      <path class="flower-lighter" d="M364.65,289.82c10.19-.3,23.17,5.31,23.39,12.69s-12.41,13.74-22.61,14-14.09-5.57-14.3-12.95S354.45,290.12,364.65,289.82Z"/>
      <path d="M361.62,302.74c8.58,5.51,23.21,6.43,28-1s-2.19-20.31-10.77-25.82-15.56-1.52-20.31,5.88S353,297.23,361.62,302.74Z"/>
      <path class="flower-lighter" d="M363,300.6c8.58,5.5,22.59,7.38,26.58,1.17S386,283.6,377.43,278.09s-14.94-2.48-18.93,3.74S354.41,295.09,363,300.6Z"/>
    </g>
    <g class="leaf">
      <line class="cactus-prickle" x1="450.48" y1="282.35" x2="452.1" y2="262.8"/>
      <line class="cactus-prickle" x1="396.7" y1="278.55" x2="402.68" y2="258.45"/>
      <path d="M468,316.92c0,48.5-19,121-42.48,121S383,365.42,383,316.92s19-54.57,42.47-54.57S468,268.43,468,316.92Z"/>
      <path class="cactus-lighter" d="M449.6,317.31c0-20-2.74-38.4-7.36-53.19a65.26,65.26,0,0,0-16.77-1.77c-23.45,0-42.47,6.08-42.47,54.57,0,23.63,4.52,53,11.86,76.84,5.37,7.54,11.61,11.86,18.26,11.86C433.27,405.62,449.6,366.08,449.6,317.31Z"/>
      <ellipse class="cactus-lightest" cx="411.93" cy="304.87" rx="19.94" ry="30.5"/>
      <line class="cactus-prickle" x1="418.97" y1="420.31" x2="399.42" y2="400.76"/>
      <line class="cactus-prickle" x1="437.44" y1="412.17" x2="437.44" y2="398.04"/>
      <line class="cactus-prickle" x1="399.2" y1="381.64" x2="381.81" y2="361"/>
      <line class="cactus-prickle" x1="418.97" y1="367.09" x2="424.4" y2="343.73"/>
      <line class="cactus-prickle" x1="447.22" y1="367.63" x2="452.1" y2="343.73"/>
      <line class="cactus-prickle" x1="439.61" y1="337.21" x2="439.07" y2="311.68"/>
      <line class="cactus-prickle" x1="393.44" y1="337.21" x2="385.84" y2="319.29"/>
      <line class="cactus-prickle" x1="457.54" y1="318.74" x2="464.6" y2="297.02"/>
      <line class="cactus-prickle" x1="436.35" y1="291.59" x2="430.92" y2="280.18"/>
      <line class="cactus-prickle" x1="403.76" y1="305.56" x2="396.16" y2="295.24"/>
      <line class="cactus-prickle" x1="410.28" y1="276.38" x2="418.43" y2="257.37"/>
      <line class="cactus-prickle" x1="404.31" y1="342.51" x2="404.31" y2="319.15"/>
      <line class="cactus-prickle" x1="393.99" y1="350.25" x2="378.24" y2="341.56"/>
      <line class="cactus-prickle" x1="423.32" y1="319.83" x2="428.21" y2="300.82"/>
      <line class="cactus-prickle" x1="463.51" y1="346.99" x2="473.29" y2="329.61"/>
      <line class="cactus-prickle" x1="455.91" y1="392.07" x2="468.4" y2="383.38"/>
      <line class="cactus-prickle" x1="454.28" y1="373.06" x2="465.68" y2="371.97"/>
      <line class="cactus-prickle" x1="442.33" y1="383.38" x2="430.92" y2="365.46"/>
      <line class="cactus-prickle" x1="427.66" y1="395.87" x2="429.29" y2="383.92"/>
      <line class="cactus-prickle" x1="416.26" y1="398.04" x2="418.43" y2="385.01"/>
      <line class="cactus-prickle" x1="460.8" y1="326.35" x2="476" y2="314.94"/>
      <line class="cactus-prickle" x1="461.34" y1="292.67" x2="463.51" y2="278.01"/>
      <line class="cactus-prickle" x1="439.61" y1="268.23" x2="437.44" y2="256.28"/>
      <line class="cactus-prickle" x1="386.38" y1="311.14" x2="374.43" y2="300.28"/>
      <line class="cactus-prickle" x1="391.81" y1="292.13" x2="383.12" y2="269.86"/>
      <line class="cactus-prickle" x1="404.11" y1="368.8" x2="407.37" y2="353.59"/>
      <line class="cactus-prickle" x1="440.7" y1="356.22" x2="433.64" y2="347.53"/>
    </g>
    <g class="leaf">
      <line class="cactus-prickle" x1="364.34" y1="342.03" x2="355.41" y2="334.02"/>
      <line class="cactus-prickle" x1="341.01" y1="365.17" x2="333.55" y2="354.96"/>
      <path d="M388.24,346.92c23.76,18,51.7,53.69,42.34,64.4s-52.49-7.6-76.24-25.63-19.15-29-9.78-39.68S364.49,328.88,388.24,346.92Z"/>
      <path class="cactus-lighter" d="M381.11,355.44a117.16,117.16,0,0,0-29-16.43,40.14,40.14,0,0,0-7.55,7c-9.37,10.7-14,21.64,9.78,39.68a180.16,180.16,0,0,0,42.37,23.16c5.84.35,10.44-.89,13.1-3.93C417.85,395.73,405,373.57,381.11,355.44Z"/>
      <ellipse class="cactus-lightest" cx="359.98" cy="368" rx="12.04" ry="18.79" transform="matrix(0.57, -0.82, 0.82, 0.57, -147.09, 456.85)"/>
      <line class="cactus-prickle" x1="419.34" y1="407.72" x2="401.96" y2="409.38"/>
      <line class="cactus-prickle" x1="422.72" y1="396.26" x2="415.8" y2="391.01"/>
      <line class="cactus-prickle" x1="392.5" y1="402.37" x2="375.46" y2="402.62"/>
      <line class="cactus-prickle" x1="393.27" y1="387.93" x2="384" y2="376.76"/>
      <line class="cactus-prickle" x1="404.81" y1="375.24" x2="395.05" y2="364.12"/>
      <line class="cactus-prickle" x1="386.87" y1="367.39" x2="374.15" y2="358.15"/>
      <line class="cactus-prickle" x1="368.45" y1="388.47" x2="356.63" y2="385.27"/>
      <line class="cactus-prickle" x1="384.98" y1="352.34" x2="377.15" y2="341.04"/>
      <line class="cactus-prickle" x1="363.22" y1="351.91" x2="355.47" y2="350.15"/>
      <line class="cactus-prickle" x1="357.06" y1="371.99" x2="348.97" y2="371.62"/>
      <line class="cactus-prickle" x1="345.37" y1="358.16" x2="339.31" y2="347.37"/>
      <line class="cactus-prickle" x1="375.38" y1="385.48" x2="363.93" y2="376.79"/>
      <line class="cactus-prickle" x1="375.05" y1="393.07" x2="364.51" y2="397.03"/>
      <line class="cactus-prickle" x1="371.86" y1="368.37" x2="364.49" y2="359.07"/>
      <line class="cactus-prickle" x1="401.2" y1="360.12" x2="396.59" y2="349.19"/>
      <line class="cactus-prickle" x1="420.25" y1="380.36" x2="420.98" y2="371.42"/>
      <line class="cactus-prickle" x1="410.29" y1="374.03" x2="414.31" y2="368.42"/>
      <line class="cactus-prickle" x1="410.57" y1="383.32" x2="397.24" y2="381.87"/>
      <line class="cactus-prickle" x1="410.84" y1="394.66" x2="405.64" y2="389.48"/>
      <line class="cactus-prickle" x1="407.35" y1="400.68" x2="401.83" y2="394.84"/>
      <line class="cactus-prickle" x1="390.01" y1="353.69" x2="390.49" y2="342.5"/>
      <line class="cactus-prickle" x1="373.73" y1="340.91" x2="367.41" y2="334.47"/>
      <line class="cactus-prickle" x1="353.08" y1="341.74" x2="346.36" y2="338.29"/>
      <line class="cactus-prickle" x1="352.86" y1="382" x2="342.77" y2="383.41"/>
      <line class="cactus-prickle" x1="345.71" y1="372.45" x2="331.34" y2="368.13"/>
      <line class="cactus-prickle" x1="388.18" y1="395.35" x2="382.03" y2="388.2"/>
      <line class="cactus-prickle" x1="396.62" y1="373.97" x2="389.54" y2="373.96"/>
    </g>
    <g class="flower">
      <path class="flower-back" d="M500.21,285.41c-.53-5.8-2.89-10.67-7.87-13,.5-4.3-1.24-8.43-4.33-12.08-2.91-3.43-6.44-5.78-10.46-6.22-1.82-4.45-5.93-7.16-11.05-8.5-8.74-2.28-17.09.29-20.58,12.38-3.22,11.18-1.16,26.58,6.06,30.65a8.35,8.35,0,0,0,.94,1.4,8.12,8.12,0,0,0,2.2,1.79c2.05,8.29,17.53,13.23,29.48,11.85C497.11,302.22,501,294.4,500.21,285.41Z"/>
      <path class="flower-root" d="M475.45,292.74c-9.69,8.2-26.68,12.82-32.62,5.8s1.42-23,11.11-31.21,18-5.51,24,1.5S485.14,284.53,475.45,292.74Z"/>
      <path class="flower-lighter" d="M475.33,268c-3.36,12.24-14.78,25.65-23.64,23.21s-11.83-19.79-8.46-32,11.78-14.74,20.65-12.3S478.7,255.77,475.33,268Z"/>
      <path class="flower-lighter" d="M479.56,273c-12.63,1.31-27.73,10.36-26.79,19.5s17.58,14.93,30.21,13.62,16.47-9.19,15.53-18.33S492.19,271.7,479.56,273Z"/>
      <path d="M485.42,288.45c-9.69,8.21-27.6,11.74-34.67,3.39s-.64-25.43,9.05-33.64,19-4.42,26,3.93S495.11,280.25,485.42,288.45Z"/>
      <path class="flower-lighter" d="M483.37,286c-9.69,8.21-26.68,12.83-32.62,5.81s1.41-23,11.1-31.22,18-5.51,24,1.51S493.06,277.83,483.37,286Z"/>
    </g>
  </g>
  <ellipse class="pot-shadow" cx="690.21" cy="577.62" rx="79.66" ry="19.62"/>
  <g class="pot">
    <path class="pot-lightest" d="M692.21,406.62H600.14c-17,54,1.05,118,39.15,172H745.14c38.1-54,56.11-118,39.15-172Z"/>
    <path class="pot-lighter" d="M784.29,406.62h-.63a2.49,2.49,0,0,1,.69,1.6c0,5.25-21.77,9.78-53.21,11.87-3.28,17.67-17.11,34.26-35.13,47C673.11,483,643.68,493,611.46,493q-6.24,0-12.43-.47c7.14,29.54,21.18,59.08,40.26,86.14H745.14C783.24,524.59,801.25,460.65,784.29,406.62Z"/>
    <path d="M784.29,406.62h-.63a2.49,2.49,0,0,1,.69,1.6c0,3.58-10.12,6.82-26.51,9.19q.69,3.27,1.1,6.63c4.95,32.31-16.11,63.56-37.58,85.67-22.55,22.28-45.5,35.43-69.32,35.5-11.63,0-23.75-2.88-37.1-8.17a280.1,280.1,0,0,0,24.33,41.55,0,0,0,0,0,0,0c0,2.54,23.71,4.6,53,4.6s53-2.06,53-4.6v0C783.25,524.57,801.24,460.64,784.29,406.62Z"/>
    <ellipse class="pot-top-lightest" cx="692.01" cy="408.22" rx="92.34" ry="13.1"/>
    <ellipse cx="692.26" cy="406.09" rx="90.87" ry="10.96"/>
    <ellipse class="pot-top-soil" cx="691.21" cy="406.42" rx="79.5" ry="7.7"/>
  </g>
  <g class="echeveria plant">
    <g class="leaf leaf-back">
      <path class="echeveria-darker" d="M652.43,320.88c13.15,15.37,24.32,44,14.85,52.06s-36-7.35-49.14-22.71,3.32-29.19,1.53-32.93C622.82,320,639.29,305.52,652.43,320.88Z"/>
      <path class="echeveria-lighter" d="M649.78,317.9a20,20,0,0,0-6.34-4.64c-11.32-5.07-22.87,4.26-25.45,2.08,1.46,3.05-9.27,12.85-6.06,24.71,1,2.66,1.52,4.44,3.53,6.79,13.26,15.5,29.92,25,34.71,20.89,3.07-2.63.06-14.73-14.24-31.43,14.46,16.9,25.78,21.55,28.85,18.92C669.57,351.13,663.05,333.4,649.78,317.9Z"/>
      <path d="M651.46,319.86a20.07,20.07,0,0,0-6.33-4.64c-11.33-5.06-22.88,4.27-25.46,2.08,1.46,3.05-9.27,12.85-6.06,24.72,1,2.65,1.52,4.44,3.53,6.78,13.26,15.5,29.93,25,34.71,20.89,3.07-2.63.06-14.72-14.24-31.43,14.46,16.9,25.78,21.55,28.85,18.93C671.25,353.09,664.73,335.36,651.46,319.86Z"/>
    </g>
    <g class="leaf leaf-back">
      <path class="echeveria-darker" d="M729.75,321.88c-13.15,15.37-24.32,44-14.85,52.06s36-7.35,49.14-22.71-3.32-29.19-1.53-32.93C759.36,321,742.9,306.52,729.75,321.88Z"/>
      <path class="echeveria-lighter" d="M732.4,318.9a20.1,20.1,0,0,1,6.34-4.64c11.32-5.07,22.87,4.26,25.46,2.08-1.47,3.05,9.26,12.85,6,24.71-1,2.66-1.52,4.44-3.52,6.79-13.27,15.5-29.93,25-34.72,20.89-3.07-2.63-.06-14.73,14.24-31.43-14.46,16.9-25.78,21.55-28.85,18.92C712.62,352.13,719.14,334.4,732.4,318.9Z"/>
      <path d="M730.72,320.86a20,20,0,0,1,6.34-4.64c11.32-5.06,22.87,4.27,25.45,2.08-1.46,3.05,9.27,12.85,6.06,24.72-1,2.65-1.52,4.44-3.53,6.78-13.26,15.5-29.92,25-34.71,20.89-3.07-2.63-.06-14.72,14.24-31.43-14.46,16.9-25.78,21.55-28.85,18.93C710.94,354.09,717.45,336.36,730.72,320.86Z"/>
    </g>
    <g class="leaf leaf-back">
      <path class="echeveria-darker" d="M694.69,305.7c3.23,20-2.12,50.19-14.43,52.17s-26.9-25-30.13-45,18-23.2,18.45-27.32C669.89,289.5,691.47,285.74,694.69,305.7Z"/>
      <path class="echeveria-lighter" d="M694,301.77a20.26,20.26,0,0,0-3-7.26c-7-10.22-21.75-8.27-22.82-11.48-.34,3.37-14.6,6.14-18,17.94-.53,2.79-1,4.59-.52,7.64,3.25,20.13,12.54,36.91,18.76,35.9,4-.64,7.72-12.53,4.21-34.24,3.55,22,10.79,31.82,14.78,31.17C693.57,340.44,697.24,321.91,694,301.77Z"/>
      <path d="M694.4,304.32a20.26,20.26,0,0,0-3-7.26c-7-10.22-21.75-8.27-22.82-11.48-.34,3.37-14.6,6.15-18,17.95-.53,2.78-1,4.58-.52,7.63,3.26,20.14,12.55,36.91,18.76,35.91,4-.65,7.72-12.54,4.21-34.25,3.55,22,10.79,31.82,14.78,31.18C694,343,697.65,324.46,694.4,304.32Z"/>
    </g>
    <g class="leaf">
      <path class="echeveria-darker" d="M630.56,349c20.13,12.32,42.82,40,35.22,52.43s-42.59,4.81-62.71-7.51-6.83-33.6-10.16-37.09C597.37,358.69,610.44,336.72,630.56,349Z"/>
      <path class="echeveria-lighter" d="M626.55,346.68a23.6,23.6,0,0,0-8.71-2.87c-14.39-1.54-23.85,13-27.5,11.48,2.72,2.86-5.66,17.6,2.17,29.61,2.06,2.59,3.29,4.38,6.36,6.26,20.3,12.43,42.21,16.95,46,10.68,2.46-4-5.24-16.36-27.12-29.75,22.13,13.55,36.37,14.64,38.83,10.61C660.47,376.44,646.85,359.11,626.55,346.68Z"/>
      <path d="M629.12,348.25a23.51,23.51,0,0,0-8.71-2.86c-14.39-1.54-23.84,13-27.5,11.48,2.72,2.85-5.66,17.59,2.18,29.6,2.06,2.59,3.28,4.38,6.35,6.27,20.31,12.42,42.22,16.94,46,10.68,2.46-4-5.23-16.36-27.12-29.76,22.14,13.55,36.37,14.64,38.84,10.62C663,378,649.42,360.68,629.12,348.25Z"/>
    </g>
    <g class="leaf leaf-back">
      <path class="echeveria-darker" d="M693.49,305.7c-3.23,20,2.12,50.19,14.43,52.17s26.9-25,30.13-45-18-23.2-18.45-27.32C718.3,289.5,696.71,285.74,693.49,305.7Z"/>
      <path class="echeveria-lighter" d="M694.2,301.77a20.08,20.08,0,0,1,3-7.26c7-10.22,21.75-8.27,22.82-11.48.34,3.37,14.6,6.14,18,17.94.53,2.79,1,4.59.52,7.64-3.25,20.13-12.54,36.91-18.76,35.9-4-.64-7.71-12.53-4.21-34.24-3.54,22-10.79,31.82-14.78,31.17C694.61,340.44,690.94,321.91,694.2,301.77Z"/>
      <path d="M693.78,304.32a20.26,20.26,0,0,1,3-7.26c7-10.22,21.75-8.27,22.82-11.48.34,3.37,14.6,6.15,18,17.95.53,2.78,1,4.58.52,7.63-3.25,20.14-12.55,36.91-18.76,35.91-4-.65-7.72-12.54-4.21-34.25-3.55,22-10.79,31.82-14.78,31.18C694.2,343,690.53,324.46,693.78,304.32Z"/>
    </g>
    <g class="leaf">
      <path class="echeveria-darker" d="M739.51,356.55C723,373.42,707.8,405.84,718.2,416s42.48-5.78,59-22.65-1.62-34.24.76-38.45C774.05,357.77,756,339.67,739.51,356.55Z"/>
      <path class="echeveria-lighter" d="M742.82,353.28a23.59,23.59,0,0,1,7.74-4.92c13.57-5,26.3,6.74,29.48,4.39-1.94,3.44,9.79,15.67,5.14,29.24-1.36,3-2.11,5.05-4.63,7.63-16.64,17-36.77,26.77-42,21.64-3.38-3.3,1.06-17.15,19-35.49-18.14,18.55-31.68,23.1-35,19.8C717.23,390.44,726.18,370.3,742.82,353.28Z"/>
      <path d="M740.71,355.43a23.55,23.55,0,0,1,7.74-4.91c13.58-5,26.3,6.73,29.48,4.39-1.94,3.44,9.79,15.67,5.14,29.24-1.36,3-2.11,5.05-4.63,7.63-16.63,17-36.77,26.77-42,21.64-3.38-3.3,1.06-17.15,19-35.5-18.14,18.56-31.68,23.11-35,19.81C715.12,392.59,724.08,372.45,740.71,355.43Z"/>
    </g>
    <g class="leaf">
      <path class="echeveria-darker" d="M723.4,360c0,26.48-13.24,64.45-29.56,64.45s-29.56-38-29.56-64.45,28.16-26.23,29.56-31.47C694.7,333.84,723.4,333.48,723.4,360Z"/>
      <path class="echeveria-lighter" d="M723.3,354.74a26.57,26.57,0,0,0-2.35-10c-7-14.68-26.4-15.23-27.11-19.6-1.14,4.28-20.17,4.89-27.08,19.43-1.27,3.49-2.27,5.71-2.27,9.76,0,26.72,8.51,50.35,16.76,50.35,5.3,0,12.6-14.6,12.6-43.41,0,29.14,7.3,43.41,12.59,43.41C714.69,404.66,723.3,381.46,723.3,354.74Z"/>
      <path d="M723.3,358.13a26.53,26.53,0,0,0-2.35-10c-7-14.68-26.4-15.23-27.11-19.61-1.14,4.29-20.17,4.9-27.08,19.44-1.27,3.49-2.27,5.71-2.27,9.76,0,26.71,8.51,50.34,16.76,50.34,5.3,0,12.6-14.6,12.6-43.4,0,29.13,7.3,43.4,12.59,43.4C714.69,408,723.3,384.85,723.3,358.13Z"/>
    </g>
    <g class="leaf">
      <path class="echeveria-darker" d="M683.19,380.34c7.46,20.62,7.84,53.9-4.87,58.5s-33.7-21.23-41.16-41.85,14.55-28.35,14.16-32.82C653.5,368.08,675.73,359.72,683.19,380.34Z"/>
      <path class="echeveria-lighter" d="M681.64,376.3a21.76,21.76,0,0,0-4.65-7.14c-9.55-9.47-24.84-4.42-26.63-7.63.32,3.66-14.31,9.49-15.6,22.76,0,3.07-.16,5.08,1,8.23,7.52,20.8,20.8,36.8,27.22,34.48,4.13-1.49,5.7-14.91-2.41-37.34,8.2,22.68,17.9,31.74,22,30.25C689,417.58,689.17,397.1,681.64,376.3Z"/>
      <path d="M682.6,378.93a21.73,21.73,0,0,0-4.66-7.13c-9.55-9.47-24.84-4.42-26.62-7.63.32,3.65-14.32,9.49-15.61,22.75,0,3.08-.15,5.09,1,8.24,7.52,20.8,20.8,36.8,27.22,34.48,4.12-1.49,5.69-14.92-2.42-37.34,8.2,22.68,17.91,31.73,22,30.24C690,420.22,690.12,399.74,682.6,378.93Z"/>
    </g>
    <g class="leaf">
      <path class="echeveria-darker" d="M694.77,396.66c-4.29,21.5.32,54.47,13.57,57.11s30.14-26,34.43-47.55-18.63-25.85-18.91-30.33C722.29,380.08,699.05,375.15,694.77,396.66Z"/>
      <path class="echeveria-lighter" d="M695.69,392.43a21.79,21.79,0,0,1,3.53-7.75c8-10.8,23.9-8.1,25.19-11.54.23,3.67,15.57,7.24,18.83,20.16.47,3,.92,5,.27,8.29-4.33,21.7-15.06,39.5-21.75,38.17-4.3-.86-7.87-13.89-3.21-37.28-4.71,23.66-12.95,34.06-17.25,33.2C694.61,434.35,691.37,414.12,695.69,392.43Z"/>
      <path d="M695.14,395.18a21.89,21.89,0,0,1,3.54-7.75c8-10.8,23.89-8.1,25.18-11.54.23,3.67,15.58,7.24,18.84,20.16.46,3,.91,5,.26,8.29-4.32,21.69-15.06,39.5-21.75,38.17-4.3-.86-7.87-13.89-3.21-37.28-4.71,23.66-13,34.06-17.24,33.2C694.06,437.1,690.82,416.87,695.14,395.18Z"/>
    </g>
  </g>
</svg>
<script>
function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}var POT_BOTTOM_Y = 585;
var POTS_TIMES = [
{
  duration: 0.5 + Math.random() * 0.3,
  delay: 0 },
{
  duration: 0.5 + Math.random() * 0.3,
  delay: 0.5 },
{
  duration: 0.5 + Math.random() * 0.3,
  delay: 0.2 }];
var masterTimeline = new TimelineMax();
var potsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.pot'))).map(function (pot, i) {
  var timeline = new TimelineMax();
  timeline.from(
  pot,
  POTS_TIMES[i].duration,
  {
    delay: POTS_TIMES[i].delay,
    y: -POT_BOTTOM_Y });
  return timeline;
});
var shadowsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.pot-shadow'))).map(function (shadow, i) {
  var timeline = new TimelineMax();
  timeline.from(
  shadow,
  POTS_TIMES[i].duration,
  {
    ease: Power0.easeInOut,
    delay: POTS_TIMES[i].delay,
    scale: 0,
    transformOrigin: 'center center' });
  return timeline;
});
var leafsTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.leaf'))).map(function (leaf) {
  var isBack = leaf.classList.contains('leaf-back');
  var timeline = new TimelineMax();
  timeline.from(
  leaf,
  0.5 + Math.random() * 0.8,
  {
    delay: isBack ? 0.5 : 0,
    ease: Back.easeOut.config(0.5 + Math.random()),
    scale: 0,
    yPercent: 10 * Math.random(),
    transformOrigin: 'center bottom' });
  return timeline;
});
var flowersTimeline = [].concat(_toConsumableArray(document.querySelectorAll('.flower'))).map(function (flower) {
  var isLeft = flower.classList.contains('flower-left');
  var timeline = new TimelineMax();
  timeline.from(
  flower,
  1 + Math.random() * 1,
  {
    ease: Circ.easeOut,
    scale: 0,
    transformOrigin: isLeft ? 'right bottom' : 'left bottom' });
  return timeline;
});
masterTimeline.
to('.replay-text', 0, { opacity: 0 }).
add(potsTimeline, 0).
add(shadowsTimeline, 0).
add(leafsTimeline).
add(flowersTimeline).
to('.replay-text', .5, { opacity: 1 });
document.body.addEventListener('click', function () {
  if (!masterTimeline.isActive()) {
    masterTimeline.restart();
  }
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到