SKI V3

svg.html
---------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
</head>
<body>
    <svg width="500" height="500" style="border:1px solid black;">
        <!-- <rect x="20" y="20" rx="20" ry="20" width="100" height="80" style="fill:red; stroke:green">

        </rect>

        <polygon points="180,90 120,278 270,158 90,158 240,278" style="fill:green; stroke:yellow;">
            <animatetransform attributeName="transform" type="rotate" from="0 180 185" to="360 180 185" dur="5s"></animatetransform>
        </polygon>

        <circle cx="60" cy="50" r="30">
            <animate attributename="cx" from="60" to="460" dur="3s" repeatCount="indefinite">

            </animate>
        </circle> -->
        <circle cx="30" cy="30" r="25" style="stroke: none; fill: #0000ff;">

          <animate attributeName="cy" attributeType="XML" from="0" to="525" begin="0s" dur="3s"
          repeatcount="indefinite" />

          <set attributeName="cx" attributeType="XML" to="90" begin="3s" />


        </circle>

    </svg>
</body>
</html>

---------------------
canvas.html
---------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vezba 3</title>
</head>
<body>
    <canvas id="kanvas1" width="500px" height="500px" style="border:1px solid black;"></canvas>


    <script>
        var c=document.getElementById("kanvas1");
        var ctx=c.getContext("2d");

        // var grd1=ctx.createLinearGradient(0,0,300,0);
        // grd1.addColorStop(0,"green");
        // grd1.addColorStop(1,"yellow");

        // ctx.fillStyle=grd1;
        // ctx.fillRect(0,0,300,150);


        // var grd2=ctx.createRadialGradient(150,275,40,150,275,150);
        // grd2.addColorStop(0,"green");
        // grd2.addColorStop(0.2,"purple")
        // grd2.addColorStop(0.5,"cyan");
        // grd2.addColorStop(0.7,"maroon");
        // grd2.addColorStop(0.9,"yellow")
        // grd2.addColorStop(1,"brown");

        // ctx.fillStyle=grd2;
        // ctx.fillRect(0,200,300,150);

        // ctx.font="40px Arial";
        // ctx.shadowColor="red";
        // ctx.shadowOffsetX=2;
        // ctx.shadowOffsetY=2;
        // ctx.shadowBlu   r=4;
        // ctx.fillText("Popunjen text", 50,50);
        // ctx.strokeText("Nepopunjen text", 50, 150);


        ctx.translate(70,30);


        ctx.rotate(45*Math.PI/180);
        ctx.fillRect(0,0,150,90);
        ctx.font="40px Arial";
        ctx.fillStyle="yellow"
        ctx.fillText("Viser",0,50);


    </script>
</body>
</html>

------------------------------
output.html
------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" id="a" value="50" min="10" max="100">+
        <input type="number" id="b" value="50">
        =<output name="x" for="a b"></output>
    </form>
</body>
</html>