Question

In: Physics

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>

<style>
#shapet1 {
animation-name: shapet1;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

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


Related Solutions

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.
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.
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) Create a program using 3 methods. The methods must be public and static. Ask the...
(Java) Create a program using 3 methods. The methods must be public and static. Ask the user for 3 numbers, then call the methods from main to print max, min, and average. The first method max (int x, int y, int z) returns the maximum value of 3 integer values. The second method min (int X, int y, int z) returns the minimum value of 3 integer values. And the third average (int x, int y, int z) returns the...
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
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT