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

Solutions

Expert Solution

https://onlinegdb.com/rJLkZ_2JH

The above is the link of my work. Below is code to copy and output screenshot.

PLEASE VISIT THE ABOVE LINK TO SEE EXACT OUTPUT

CODE TO COPY:

<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:

genius_generous answered 1 year ago

Next > < Previous

Related Solutions

WITH using methods create an array with numbers

IN JAVA Prompt 3:WITH using methods create an array with numbersint [] number = { 35, 68, 80, 34, 45, 79, 80};Display the numbers in the array using for loopDisplay the sumFind biggest element in the arrayDisplay the numers in the array with index numbersDisplay the numers using for loop in ascending order (sort)

In C++ Create an abstract class called Shape Shape should have the following pure virtual functions:...

In C++ Create an abstract class called Shape Shape should have the following pure virtual functions: getArea() setArea() printArea() Create classes to inherit from the base class Circle Square Rectangle Both implement the functions derived from the abstract base class AND must have private variables and functions unique to them like double Radius double length calculateArea() Use the spreadsheet info.txt read in information about the circle, rectangle, or square text file: circle 3.5 square 3 rectangle 38 36 circle 23 ...

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

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.

Create a simple C++ application that will exhibit concurrencyconcepts. Your application should create two threads...

Create a simple C++ application that will exhibit concurrency concepts. Your application should create two threads that will act as counters. One thread should count up to 20. Once thread one reaches 20, then a second thread should be used to count down to 0. For your created code, provide a detailed analysis of appropriate concepts that could impact your application. Specifically, address:Performance issues with concurrencyVulnerabilities exhibited with use of stringsSecurity of the data types exhibited.

Java Solution Create a class hierarchy that represents shapes. It should have the following classes: Shape,...

Java Solution Create a class hierarchy that represents shapes. It should have the following classes: Shape, Two Dimensional Shape, Three Dimensional Shape, Square, Circle, Cube, Rectangular Prism, and Sphere. Cube should inherit from Rectangular Prism. The two dimensional shapes should include methods to calculate Area. The three dimensional shapes should include methods to calculate surface area and volume. Use as little methods as possible (total, across all classes) to accomplish this, think about what logic should be written at which...

Which of the following inventory valuation methods should be used for unique items? first-in, first-out last-in,...

Which of the following inventory valuation methods should be used for unique items? first-in, first-out last-in, first-out weighted-average specific identification Merchandise Inventory and Cost of Goods Sold appear ________. on the balance sheet and statement of owner's equity, respectively on the statement of owner's equity and income statement, respectively on the balance sheet and income statement, respectively on the income statement and statement of cash flows, respectively

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...

Subjects