Using the examples found in the readings for this week, create a simple, yet unique graphic...

Using the examples found in the readings for this week, create a simple, yet unique graphic using SVG.

The graphic should incorporate shape transformation methods and animation.

Share both the code and screen capture of the graphic.

Expert Solution

`Hey,

Note: Brother if you have any queries related the answer please do comment. I would be very happy to resolve all your queries.

The required code for the svg is as follows....Hope you like the graphics it's not unique but worth of appreciation.

ShapeTransformation.html

<html>
<head>
<title>Shape Transformation</title>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">

<g>
<title>Layer 1</title>
<rect fill="#fff" id="cb" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="cg">
<rect fill="url(#gridptttn)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 2</title>

<ellipse id="shapet1" stroke="#000" ry="119.5" rx="123.5" id="sha1" cy="193.5" cx="298" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#fff"/>
<ellipse id="shapet1" stroke="#000" ry="87" rx="93.00001" id="sha2" cy="197" cx="300.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
<ellipse id="shapet2" stroke="#000" ry="63" rx="64.5" id="sha3" cy="197" cx="302" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
<ellipse id="shapet2" stroke="#000" ry="38" rx="37" id="sha4" cy="198" cx="302.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>

</g>
</svg>

#shapet2 {
animation-name: shapet2;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

@keyframes shapet1 {
from {
cy: 0%;
fill: none;
stroke: grey;
}
to {
cy: 50%;
fill: #9284D9;
stroke: white;
}
}

@keyframes shapet2 {
from {
cx: 100%;
fill: none;
stroke: grey;
}
to {
cx: 52%;
fill: #9284D9;
stroke: white;
}
}
</style>
</body>
</html>

Output:

Kindly revert for any queries

Thanks.

venereology answered 1 day ago

create a simple, yet unique graphic using SVG. The graphic should incorporate shape transformation methods and...

create a simple, yet unique graphic using SVG. The graphic should incorporate shape transformation methods and animation. Share both the code and screen capture of the graphic. Please I need the code and the shotscreen of the result and works cited

11.1 Simple Arithmetic Program Using the instructions from Week 1 Lab, create a new folder named...

11.1 Simple Arithmetic Program Using the instructions from Week 1 Lab, create a new folder named Project01. In this folder create a new class named Project01. This class must be in the default package. Make sure that in the comments at the top of the Java program you put your name and today's date using the format for Java comments given in the Week 1 Lab. For this lab, you will write a Java program to prompt the user to...

Using PHP and MYSQL and with a simple customer database, how can I create a simple...

Using PHP and MYSQL and with a simple customer database, how can I create a simple log in and registration system for an ecommerce site

Write a simple javascript program using express and node.js to create a simple webpage that can...

Write a simple javascript program using express and node.js to create a simple webpage that can lead to other pages within the program. if possible, Comment everything out so I could understand how every things works. But basically, server should be hosted on localhost:8000 and should have a simple starting page. Maybe a welcome message, with at least two "links" that goes to a "homepage" and then a "exit" page.

Contrast two different methods of estimating bad debts. Create simple examples.

Create an ASP.Net Website using Visual Studio with C#: Create a simple calculator that has 3...

Create an ASP.Net Website using Visual Studio with C#: Create a simple calculator that has 3 text boxes: 2 of them to enter numbers, the 3rd one displays the results Create 4 buttons to add, subtract, multiply, and divide Prevent the user from entering text in the number fields Display a message indicating “cannot divide by” when the user click “/” and there is a zero the in the second box Create two additional buttons: - One to store data...

Please create using only For loops, as simple as possible as I am attending Java1 Create...

Please create using only For loops, as simple as possible as I am attending Java1 Create two Java programs that do the following: a. Use a for loop to print the numbers below on a single line as shown. 1 2 4 8 16 32 64 128. b. Ask the user to enter numbers using the for loop. First ask the user how many numbers they will be entering in. Print the sum and average of the entered numbers. c. Write...

Using java you have to create a simple program that will allow for the storage of...

Using java you have to create a simple program that will allow for the storage of requests for money. Each request will consist of a person's name and dollar amount (US dollars). The business rules are straight forward. Each name should be a first and last name. The first letter of each element in the name should be capitalized. The dollar amount should be between 1 and 1000 dollars and include cents (2 decimals). You should include validations, but it...

Design a simple program, using pseudocode, to implement the recursive formula you found in part (a)...

Design a simple program, using pseudocode, to implement the recursive formula you found in part (a) to compute numbers in the Fibonacci sequence. Describe in detail how your program implements the recursive formula. You may find it useful to discuss how it through a concrete example such as F(8) = 21.

In linux , Using a simple text editor, create a text file with the following name...

In linux , Using a simple text editor, create a text file with the following name "Test" and content: GNU GENERAL PUBLIC LICENSE The GNU General Public License is a free, copy left license for the GNU General Public License is intended to guarantee your freedom to GNU General Public License for most of our software; it applies … 2-Write the command to create the text file. 3-Print the file permissions. 4-Create a directory named "361" 5-Copy file "Test" to...

Question