E-P’SSPIM (Copy 6799)

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#80DEEA;
        box-shadow:0 0 20px #0002;
        width:80%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      
      <path fill="#8BC34A" stroke="#fff" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round"
            d="M-10,60 h120 v50 h-120
               "/> 
      
      <path d= "M50,60
                v22"
            fill="#50C878" stroke="#50C878" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M20,80 
               h30 v-15 h15" fill="#50C878" stroke="#50C878" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" />
      <circle r="10" fill="#CE93D8" cx="47" cy="50" />
      <circle r="10" fill="#CE93D8" cx="50" cy="47" />
      <circle r="10" fill="#CE93D8" cx="53" cy="50" />
      <circle r="10" fill="#CE93D8" cx="50" cy="53" />
      <circle r="8.3" fill="#BA68C8" cx="47" cy="50" />
      <circle r="8.3" fill="#BA68C8" cx="50" cy="47" />
      <circle r="8.3" fill="#BA68C8" cx="53" cy="50" />
      <circle r="8.3" fill="#BA68C8" cx="50" cy="53" />
      <circle r="6.3" fill="#AB47BC" cx="47" cy="50" />
      <circle r="6.3" fill="#AB47BC" cx="50" cy="47" />
      <circle r="6.3" fill="#AB47BC" cx="53" cy="50" />
      <circle r="6.3" fill="#AB47BC" cx="50" cy="53" />
      <circle r="3.3" fill="#9C27B0" cx="47" cy="50" />
      <circle r="3.3" fill="#9C27B0" cx="50" cy="47" />
      <circle r="3.3" fill="#9C27B0" cx="53" cy="50" />
      <circle r="3.3" fill="#9C27B0" cx="50" cy="53" />
      <circle r="1" fill="#7B1FA2" cx="50" cy="50" />
      
      <circle stroke="white" stroke-width="2"
              r="15" fill="#fc0" cx="20" cy="20">
      </circle>
      </g>
    </svg>
  <br>
  <br>
  <svg viewBox="0 0 100 100">
    <defs>
      <pattern id="grass"
               viewBox="0 0 10 10"
               patternUnits="userSpaceOnUse"
               x="0" y="0"
               width="10" height="10"
               >
        <rect width="100" height="100" fill="#b1fbfc"/>
        <circle r="1.3" fill="#ffef78" cx="8" cy="2">
          <animate attributeName="cx" values="
                                             6;
                                             8;
                                            8;
                                            8;
                                             6" dur="1s" repeatCount="indefinite" />
           <animate attributeName="cy" values="
                                             3;
                                             2;
                                            2;
                                            2;
                                             3" dur="1s" repeatCount="indefinite" />
        </circle>
        <circle r="1.3" fill="white" cx="4" cy="4" />
        <circle r="1.8" fill="white" cx="6" cy="3" />
        <circle r="1.3" fill="white" cx="8" cy="4" />
        <circle r="1.3" fill="white" cx="6" cy="4" />
        <path d="m4,6 l 1,1"
              fill="black" stroke="#00BCD4" stroke-width="0.5"
              stroke-linecap="round" stroke-linejoin="round">
          <animate attributeName="d" values="
                                             m4,6 l 1,1;
                                             m4,6 l 0,0;
                                             m4,6 l 1,1;" dur="1s" repeatCount="indefinite" />
        </path>
        <path d="m6,6 l 1,1"
              fill="black" stroke="#00BCD4" stroke-width="0.5"
              stroke-linecap="round" stroke-linejoin="round">
          <animate attributeName="d" values="
                                             m6,6 l 1.5,1.5;
                                             m6,6 l 0,0;
                                             m6,6 l 1.5,1.5;" dur="1s" repeatCount="indefinite" />
        </path>
        <path d="m8,6 l 1,1"
              fill="black" stroke="#00BCD4" stroke-width="0.5"
              stroke-linecap="round" stroke-linejoin="round">
          <animate attributeName="d" values="
                                             m8,6 l 1,1;
                                             m8,6 l 0,0;
                                             m8,6 l 1,1;" dur="1s" repeatCount="indefinite" />
        </path>
        <path d="M2 5 
                 l0.5,-0.5
                 l0.5,0.5
                 l-0.5,0.5
                 l-0.5,-0.5
                 " 
              stroke-width="0.2"
              stroke="#f1f736"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#f1f736"
              />
        <path d="M8 6
                 l0.5,-0.5
                 l0.5,0.5
                 l-0.5,0.5
                 l-0.5,-0.5
                 " 
              stroke-width="0.2"
              stroke="#f1f736"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#f1f736"
              />
      </pattern>
      <pattern id="sabai" viewBox="0,0,10,10" width="10%" height="10%">
        <rect width="10" height="10" fill="#04b807">
        </rect>
        <circle r="1.3" fill="white" cx="4" cy="4" />
        <circle r="1.3" fill="white" cx="4" cy="6" />
        <circle r="1.3" fill="white" cx="3" cy="5" />
        <circle r="1.3" fill="white" cx="5" cy="5" />
        <circle r=".9" fill="#04b807" cx="4" cy="5" />
        <path d="M.3 1 
                 l1,-1
                 l1,1
                 l-1,1
                 l-1,-1
                 " 
              stroke-width="0.2"
              stroke="#f1f736"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#f1f736"
              />
        <path d="M7.3 5 
                 l1,-1
                 l1,1
                 l-1,1
                 l-1,-1
                 " 
              stroke-width="0.2"
              stroke="#f1f736"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#f1f736"
              />
        <path d="M5.5,10 
                 l2,-2
                 l2,2
                 l-2,2
                 l-2,-2
                 " 
              stroke-width="0.2"
              stroke="#0cf510"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#0cf510"
              />
        <path d="M5.5,0 
                 l2,-2
                 l2,2
                 l-2,2
                 l-2,-2
                 " 
              stroke-width="0.2"
              stroke="#0cf510"
              stroke-linecap="round"
              stroke-linejoin="round"
              fill="#0cf510"
              />
      </pattern>
    </defs>
    <rect fill="url(#sabai)" 
          width="100" height="100"/>
    <path fill="url(#sea)" 
          d="M0,0 h100 L0,100
             "/>
    <rect fill="url(#grass)" width="100" height="40" y="60"/>
  </svg> 
  </body>
</html>