0
Someone tell me how to make a square and circle in web development in html css or js language
I want to know how to make a square and a animation of a square with the help of html and css
11 Answers
+ 4
Kakashi Hatake before you ask the question do search on google http://www.java2s.com/example/html-css/css-animation/css-square-to-circle-fade-animation.html
https://code.sololearn.com/W0uW3Wks8UBk/?ref=app
+ 2
Kakashi Hatake Use the exact method explained in the course. How well did you understand the canvas lesson?
+ 2
The easiest way to create 2d polygons and circle is to learn svg (but don't learn it), there are several tools like inkscape, photoshop etc that can generate svg code for you.
Animating the shapes by transformation(rotate, scale, translate) can be done with css.. its much simpler
The complex way of drawing shape is to learn a rasterization engine like webgl/webgl2. Do this if you really care about computer graphics and this will even help you create complex animations that are impossible with css. for example the Mandelbrot zoom and Fibonacci spiral
https://code.sololearn.com/Wgl0XGu6fJWV/?ref=app
+ 1
Additionally, the Khan academy series on web dev covers drawing and animating simple shapes, if you're interested in a more hand-holding approach.
(don't worry, it's not taught by Sal Khan)
+ 1
Kakashi Hatake I recommend the other way round: first learn the subject, then try to use it, and finally ask about the difficulties. Otherwise, you're asking for people to teach you a lesson which is already written and available. Counterproductive, huh?
+ 1
Emerson Prado thnx sir for your valuable suggestion
+ 1
Try doing this course, as it will help you with learning CSS:
https://www.sololearn.com/learn/courses/css
Hope this helps.
0
I have just started web development course, a day or two back I was taking suggestions
0
Orin Cook what about Yahoo baba yt channel
0
go to this link
https://www.w3schools.com/html/html5_svg.asp
the "w3schools" website is one the best website for learning HTML and CSS from scratch
0
HTML:
To make a square in HTML, you can use the div element. The div element is a generic container element that can be used to hold any type of content. To make a square, you can set the width and height properties of the div element to the same value. For example, the following HTML code will create a square that is 100 pixels wide and 100 pixels high:
<div style="width: 100px; height: 100px;">
</div>
The circle element is a special element that is used to create circles. To make a circle, you can set the cx and cy properties of the circle element to the coordinates of the center of the circle, and the r property to the radius of the circle. For example, the following HTML code will create a circle that is centered at (70, 70) and has a radius of 70 pixels
<circle cx="50" cy="50" r="50">
</circle>
To make a square in CSS, you can use the border-radius property. The border-radius property can be used to round the corners of an element. To make a square, you can set the border-radius property to 50%
div {
width: 100px;
height: 100px;
border-radius: 50%;
}