Animated Sunflower Coding by HTML & CSS Programming

Ticker

10/recent/ticker-posts

Animated Sunflower Coding by HTML & CSS Programming

Attractive Sunflower by HTML & CSS


HTML Code

 <!DOCTYPE html>

<html lang="en">

    <head>

        <title>Page Title</title>

    </head>

    <body>

        <canvas id="c"></canvas>

     <script>

      var x=10,y=10;

      var rad=0;

      c.height=innerHeight

      c.width=innerWidth

      var h=0;

      const phi=1.61803398875;

         var ctx=c.getContext("2d")

         function pk(){

         ctx.strokeStyle="rgba(255,0,0,0.6)"

         h+=0.1

         var rand=Math.random()*100

         rad+=phi;

         x=c.width/2+Math.sin(rad)*h;

         y=c.height/2+Math.cos(rad)*h;

         ctx.beginPath();

         ctx.arc(x,y,5,0,Math.PI*2);

         ctx.stroke()

         x++;y++

         }

         setInterval(pk,10)

     </script>          

   </body>

</html>


CSS Code

body {

    background:#c46363;

}


OUTPUT




Post a Comment

50 Comments

  1. delightful, delightful, delightful,

    ReplyDelete
  2. nice flowers 💐 💐 💐 💐 💐 💐 💐 💐 💐 💐 programming

    ReplyDelete
  3. 💐 💐 💐 💐 💐 💐 attractive

    ReplyDelete
  4. classic 💐 💐 💐 💐 💐 💐 💐 💐

    ReplyDelete
  5. perfect 👌 💐 💐 💐 💐 💐

    ReplyDelete
  6. Outstanding 💐 💐 💐 💐 💐 💐 💐 Coding

    ReplyDelete
  7. grand 💐 💐 💐 💐 💐 💐 💐

    ReplyDelete
  8. fancy flower 🌸 🌸 🌸 🌸 🌸 🌸 🌸

    ReplyDelete
  9. really good flower 🌸 🌸 🌸 🌸 🌸 🌸 🌸 🌸 🌸 🌸

    ReplyDelete
  10. classy flower 🌸 🌸 🌸 🌸 🌸 🌸 🌸 🌸

    ReplyDelete
  11. classy flower 🌸 🌸 🌸 🌸 🌸 🌸 🌸

    ReplyDelete
  12. 🌻🌻W🌻🌻o🌻🌻n🌻🌻d🌻🌻e🌻🌻r🌻🌻f🌻🌻u🌻🌻l
    🌻🌻F🌻🌻l🌻🌻o🌻🌻w🌻🌻e🌻🌻r

    ReplyDelete
  13. 👌 👌 👌 👌 👌 mind blowing

    ReplyDelete
  14. Osm 😘😘😘😘😘

    ReplyDelete
  15. Amazing 😘😘😘😘😘😘

    ReplyDelete
  16. 😘😘😘😘😘😘

    ReplyDelete
  17. Nice flower 🌷🌷🌷🌷🌷
    🌻🌻🌻🌻🌻🌻

    ReplyDelete