Untitled

                Never    
HTML
       
<html>
  <head>
    <title>SVG-owoce</title>
  <script type="text/javascript" charset="UTF-8"></script></head>

<body>
<h1>Owoce</h1>
<p> gruszka, borówka amerykańska, wiśnie </p>

<svg width="200" height="200">
  <polyline points="70,10 60,20 40,25  " style="fill:none;stroke:black;stroke-width:3" />
  <circle cx="50" cy="40" r="20" stroke="yellow" stroke-width="1" fill="yellow" />
  <circle cx="50" cy="80" r="40" stroke="yellow" stroke-width="4" fill="yellow" />
  <circle cx="50" cy="120" r="1" fill="black" />

  
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(17,31,71);stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="120" cy="100" r="15" fill="url(#grad1)" />

  <circle cx="160" cy="100" r="11" fill="red" />
  <circle cx="185" cy="100" r="11" fill="red" />
   <line x1="167" y1="60" x2="160" y2="89" style="stroke:black;stroke-width:2" />
   <line x1="164" y1="60" x2="185" y2="89" style="stroke:black;stroke-width:2" />
</svg>

<h1> Kompozycja <h1>
<svg width="200" height="200">
  <polyline points="70,10 60,20 40,25  " style="fill:none;stroke:black;stroke-width:3" />
  <circle cx="50" cy="40" r="20" stroke="yellow" stroke-width="1" fill="yellow" />
  <circle cx="50" cy="80" r="40" stroke="yellow" stroke-width="4" fill="yellow" />
  <circle cx="50" cy="120" r="1" fill="black" />

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(17,31,71);stop-opacity:1" />
    </linearGradient>
  </defs>
  <circle cx="125" cy="50" r="15" fill="url(#grad1)" />


<circle cx="160" cy="100" r="11" fill="red" />
  <circle cx="185" cy="100" r="11" fill="red" />
   <line x1="167" y1="60" x2="160" y2="89" style="stroke:black;stroke-width:2" />
   <line x1="164" y1="60" x2="185" y2="89" style="stroke:black;stroke-width:2" />
</svg>

<h1>Nadruk</h1>
<div id="container"/>
    <script>
      function addCircle(svg, cx, cy, r, fill, stroke, strokeWidth) {
        let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("cx", cx);
        circle.setAttribute("cy", cy);
        circle.setAttribute("r", r);
        circle.setAttribute("fill", fill);
        circle.setAttribute("stroke", stroke);
        circle.setAttribute("stroke-width", strokeWidth);
        svg.appendChild(circle);
      }

      function addLine(svg, x1, x2, y1, y2, stroke, strokeWidth) {
        let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
        line.setAttribute("x1", x1);
        line.setAttribute("x2", x2);
        line.setAttribute("y1", y1);
        line.setAttribute("y2", y2);
        line.setAttribute("stroke", stroke);
        line.setAttribute("stroke-width", strokeWidth);
        svg.appendChild(line);
      }

     function addPolyline(svg, points, fill, stroke, strokeWidth) {
        let line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
        polyline.setAttribute("points", x1);
        polyline.setAttribute("fill", fill);
        polyline.setAttribute("stroke", stroke);
        polyline.setAttribute("stroke-width", strokeWidth);
        svg.appendChild(polyline);
      }

      var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute("width", "60cm");
      svg.setAttribute("height", "64cm");
      svg.setAttribute("style", "background-color: #73E466");
      var x = 0;
      var y = 0;
      for(var i = 0 ; i < 10; i++, y += 40){
        for(var j = 0; j < 10; j++, x += 80) {
          //gruszka
          
          
          // wiśnie
          addCircle(svg, 160 + x , 100 + y, 11 + x, "red", "none", 0);
          addCircle(svg, 185 + x, 100 + y, 11 + x, "red", "none", 0);
          addLine(svg, 167 + x, 160 + x, 60 + y, 89 + y, "black", 2);
          addLine(svg, 164 + x, 185 + x, 60 + y, 89 + y, "black", 2);
          document.getElementById("container").appendChild(svg);
        }
        x = 0;
      }
    </script>
</body>
</html>

Raw Text