Interacthings logo animation

Developer
Adem Ilter
Size
2,841 Kb
Views
78,936
  1. Interacthings logo animation Previews
  2. Interacthings logo animation HTML Codes
  3. Interacthings logo animation CSS Codes

How do I make an interacthings logo animation?

What is a interacthings logo animation? How do you make a interacthings logo animation? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.

Interacthings logo animation Previews
IQ Test

Interacthings logo animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>interacthings logo animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ #interacthings { position: absolute; top: 50%; right: 0; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 60px; width: 52px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="interacthings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="60px" viewBox="0 0 52 60" enable-background="new 0 0 52 60" xml:space="preserve">
<g> <line id="yesil2" fill="none" stroke="#B2E04C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2" y1="44" x2="2" y2="16" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 2 16" to="0 2 16" begin="3400ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3400ms" dur="100ms" /> </line> <line id="sari2" fill="none" stroke="#FFD100" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="2" y1="16" x2="26" y2="2" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 26 2" to="0 26 2" begin="3200ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3200ms" dur="100ms" /> </line> <line id="turuncu2" fill="none" stroke="#FF9700" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="16" x2="26" y2="2" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 50 16" to="0 50 16" begin="3s" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="3s" dur="100ms" /> </line> <line id="kirmizi2" fill="none" stroke="#FD5857" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="44" x2="50" y2="16" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 50 44" to="0 50 44" begin="2800ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2800ms" dur="100ms" /> </line> <line id="mor" fill="none" stroke="#A086C4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50" y1="44" x2="26" y2="58" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 26 58" to="0 26 58" begin="2600ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2600ms" dur="100ms" /> </line> <line id="mavi" fill="none" stroke="#00ACE6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="14" y1="51" x2="26" y2="58" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 14 51" to="0 14 51" begin="2400ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2400ms" dur="100ms" /> </line> <line id="turkuaz" fill="none" stroke="#3ECFE6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="14" y1="51" x2="14" y2="23" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 14 23" to="0 14 23" begin="2200ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2200ms" dur="100ms" /> </line> <line id="koyuyesil" fill="none" stroke="#37CBA2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="16" x2="14" y2="23" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 26 16" to="0 26 16" begin="2s" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="2s" dur="100ms" /> </line> <line id="yesil" fill="none" stroke="#B2E04C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="16" x2="38" y2="23" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 38 23" to="0 38 23" begin="1800ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1800ms" dur="100ms" /> </line> <line id="sari" fill="none" stroke="#FFD100" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38" y1="37" x2="38" y2="23" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 38 37" to="0 38 37" begin="1600ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1600ms" dur="100ms" /> </line> <line id="turuncu" fill="none" stroke="#FF9700" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38" y1="37" x2="26" y2="44" opacity="0"> <animateTransform attributeName="transform" type="rotate" from="-60 26 44" to="0 26 44" begin="1400ms" dur="200ms" additive="replace" fill="freeze"/> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1400ms" dur="100ms" /> </line> <line id="kirmizi" fill="none" stroke="#FD5857" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26" y1="44" x2="26" y2="30" opacity="0"> <animate attributeName="y1" begin="1200ms" dur="200ms" fill="freeze" from="30" to="44" /> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1200ms" dur="100ms" /> </line> <circle id="nokta" fill="#FD5857" cx="26" cy="30" r="4" opacity="0"> <animate attributeName="r" begin="1s" dur="200ms" fill="freeze" from="0" to="4" /> <animate attributeName="opacity" from="0" to="1" fill="freeze" begin="1s" dur="100ms" /> </circle>
</g>
</svg>
</body>
</html>

Interacthings logo animation - Script Codes CSS Codes

#interacthings { position: absolute; top: 50%; right: 0; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 60px; width: 52px;
}
Interacthings logo animation - Script Codes
Interacthings logo animation - Script Codes
Home Page Home
Developer Adem Ilter
Username ademilter
Uploaded June 11, 2022
Rating 4
Size 2,841 Kb
Views 78,936
Do you need developer help for Interacthings logo animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adem Ilter (ademilter) Script Codes
Name
Border box arrow
Navigation Knob
CSShrome
Product list
Loading svg
Timeline with css
Prayer times layout
Fluid width step-navigation
A Pen by Adem ilter
Responsive table
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!