211k views
2 votes
Use HTLM

1.A circle shape
2. And a semi-circle
3. A and a rectangle
Your animations must have the use of a rotate, and translate, and a scale. Your animations and draws can be as pain or as advanced as you want.
• A pt. for drawing a circle.
• I pt. for drawing a semi-circle.
• A pt. for drawing a rectangle.
• 0+ 1 pt. for using a translation to animate a shape.
• One pt. for using a rotation to animate a shape.
• One pt. for using a scale (dilation) to animate a shape.

1 Answer

6 votes

Answer: Your welcome!

Step-by-step explanation:

<svg width="400" height="400">

<circle cx="200" cy="200" r="150" fill="red" />

<defs>

<clipPath id="semiCircle">

<rect x="175" y="175" width="50" height="50" rx="25" ry="25" />

</clipPath>

</defs>

<circle cx="200" cy="200" r="150" fill="blue" clip-path="url(#semiCircle)" />

<rect x="100" y="100" width="200" height="200" fill="green" />

<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="0s" dur="2s" from="0 0" to="200 0" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML" type="rotate" begin="0s" dur="2s" from="0 0 0" to="360 0 0" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML" type="scale" begin="0s" dur="2s" from="1 1" to="2 2" fill="freeze" />

</svg>

User Bclymer
by
7.1k points