Twinkle Animation

Developer
Alex Pate
Size
5,487 Kb
Views
14,168
  1. Twinkle Animation Previews
  2. Twinkle Animation HTML Codes
  3. Twinkle Animation CSS Codes

How do I make an twinkle animation?

What is a twinkle animation? How do you make a twinkle animation? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.

Twinkle Animation Previews
IQ Test

Twinkle Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twinkle Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 198 236" width="300" height="500" xml:space="preserve">	<g class="device-icon__group-1">	<rect x="117.4" y="39.9" transform="matrix(-0.866 0.5 -0.5 -0.866 241.7416 17.329)" class="st0" width="2.4" height="2.3"/>	<rect x="113.8" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="108.1" y="23.9" transform="matrix(-0.866 0.5 -0.5 -0.866 216.4278 -8.0153)" class="st0" width="2.4" height="2.3"/>	<rect x="115.1" y="35.9" transform="matrix(-0.866 0.5 -0.5 -0.866 235.5359 10.9671)" class="st0" width="2.4" height="2.3"/>	<rect x="112.7" y="31.9" transform="matrix(-0.866 0.5 -0.5 -0.866 229.1325 4.6443)" class="st0" width="2.4" height="2.3"/>	<rect x="110.5" y="27.9" transform="matrix(-0.866 0.5 -0.5 -0.866 222.9554 -1.64)" class="st0" width="2.4" height="2.3"/>	<rect x="90.5" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="105.8" y="19.8" transform="matrix(-0.866 0.5 -0.5 -0.866 210.1873 -14.4026)" class="st0" width="2.4" height="2.3"/>	<rect x="85.9" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="95.2" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="104.5" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="99.8" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="109.1" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="79.8" y="35.9" transform="matrix(0.866 0.5 -0.5 0.866 29.38 -35.5286)" class="st0" width="2.4" height="2.3"/>	<rect x="81.3" y="46.3" class="st0" width="2.3" height="2.4"/>	<rect x="77.5" y="40" transform="matrix(0.866 0.5 -0.5 0.866 31.1259 -33.8198)" class="st0" width="2.4" height="2.3"/>	<rect x="103.4" y="15.7" transform="matrix(-0.866 0.5 -0.5 -0.866 203.6323 -20.8312)" class="st0" width="2.4" height="2.3"/>	<rect x="82.1" y="31.9" transform="matrix(0.866 0.5 -0.5 0.866 27.6928 -37.1946)" class="st0" width="2.4" height="2.3"/>	<rect x="91.5" y="15.9" transform="matrix(0.866 0.5 -0.5 0.866 20.9035 -44.0494)" class="st0" width="2.4" height="2.3"/>	<rect x="84.5" y="27.8" transform="matrix(0.866 0.5 -0.5 0.866 25.9494 -38.963)" class="st0" width="2.4" height="2.3"/>	<rect x="101.2" y="11.7" transform="matrix(0.5 0.866 -0.866 0.5 62.3133 -82.2101)" class="st0" width="2.3" height="2.4"/>	<rect x="93.8" y="11.7" transform="matrix(0.866 0.5 -0.5 0.866 19.1607 -45.751)" class="st0" width="2.4" height="2.3"/>	<rect x="89.1" y="19.8" transform="matrix(0.866 0.5 -0.5 0.866 22.5485 -42.3529)" class="st0" width="2.4" height="2.3"/>	<rect x="86.8" y="23.9" transform="matrix(0.866 0.5 -0.5 0.866 24.2985 -40.6223)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M52.4,11.6c0.3,0,0.5,0,0.8-0.1l19,32.9c-0.7,0.8-1.1,1.8-1.1,2.9c0,2.3,1.9,4.2,4.2,4.2c0.3,0,0.6,0,1-0.1l18.4,31.9c-1.1,1.1-1.8,2.6-1.8,4.2c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-1.7-0.7-3.2-1.8-4.3L121,51.4c0,0,0.1,0,0.1,0c2.3,0,4.2-1.9,4.2-4.2c0-0.8-0.2-1.6-0.6-2.2l19.4-33.6c0.4,0.1,0.8,0.2,1.2,0.2c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2c-1.8,0-3.3,1.1-3.9,2.7l-38.9-0.1c-0.6-1.5-2.1-2.6-3.9-2.6c-1.8,0-3.3,1.1-3.9,2.6L56.2,5.7c-0.7-1.5-2.1-2.5-3.8-2.5c-2.3,0-4.2,1.9-4.2,4.2S50.1,11.6,52.4,11.6z M98.7,11.6c1.8,0,3.3-1.1,3.9-2.6l39,0.1c0,0.1,0.1,0.2,0.1,0.3l-19.5,33.8c-0.3-0.1-0.7-0.1-1-0.1c-2.3,0-4.2,1.9-4.2,4.2c0,1.1,0.4,2.2,1.2,2.9L99.9,81.6c-0.4-0.1-0.8-0.1-1.3-0.1c-0.5,0-0.9,0.1-1.3,0.2L78.7,49.5c0.4-0.7,0.7-1.4,0.7-2.3c0-2.3-1.9-4.2-4.2-4.2c-0.1,0-0.1,0-0.2,0L55.8,9.8c0.2-0.3,0.4-0.6,0.5-1l38.4,0.1C95.4,10.5,96.9,11.6,98.7,11.6z"/>	</g>	<g class="device-icon__group-2">	<rect x="78" y="132.8" transform="matrix(0.866 -0.5 0.5 0.866 -56.3489 57.5317)" class="st0" width="2.4" height="2.3"/>	<rect x="81.7" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="87.2" y="148.8" transform="matrix(0.866 -0.5 0.5 0.866 -63.1403 64.3155)" class="st0" width="2.4" height="2.3"/>	<rect x="80.2" y="136.8" transform="matrix(0.866 -0.5 0.5 0.866 -58.0541 59.1961)" class="st0" width="2.4" height="2.3"/>	<rect x="82.6" y="140.8" transform="matrix(0.866 -0.5 0.5 0.866 -59.7477 60.9103)" class="st0" width="2.4" height="2.3"/>	<rect x="84.8" y="144.8" transform="matrix(0.866 -0.5 0.5 0.866 -61.4322 62.5671)" class="st0" width="2.4" height="2.3"/>	<rect x="104.9" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="89.5" y="152.9" transform="matrix(0.866 -0.5 0.5 0.866 -64.8514 65.9867)" class="st0" width="2.4" height="2.3"/>	<rect x="109.6" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="100.3" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="91" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="95.6" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="86.3" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="115.5" y="136.8" transform="matrix(-0.866 -0.5 0.5 -0.866 148.8911 315.7116)" class="st0" width="2.4" height="2.3"/>	<rect x="114.2" y="126.3" class="st0" width="2.3" height="2.4"/>	<rect x="117.9" y="132.7" transform="matrix(-0.866 -0.5 0.5 -0.866 155.2681 309.196)" class="st0" width="2.4" height="2.3"/>	<rect x="91.9" y="157" transform="matrix(0.866 -0.5 0.5 0.866 -66.5747 67.7449)" class="st0" width="2.4" height="2.3"/>	<rect x="113.3" y="140.8" transform="matrix(-0.866 -0.5 0.5 -0.866 142.6733 322.0047)" class="st0" width="2.4" height="2.3"/>	<rect x="103.9" y="156.9" transform="matrix(-0.866 -0.5 0.5 -0.866 117.092 347.3453)" class="st0" width="2.4" height="2.3"/>	<rect x="110.9" y="144.9" transform="matrix(-0.866 -0.5 0.5 -0.866 136.0742 328.5145)" class="st0" width="2.4" height="2.3"/>	<rect x="94.2" y="160.9" transform="matrix(-0.5 -0.866 0.866 -0.5 2.6791 325.7556)" class="st0" width="2.3" height="2.4"/>	<rect x="101.6" y="161" transform="matrix(-0.866 -0.5 0.5 -0.866 110.7418 353.8495)" class="st0" width="2.4" height="2.3"/>	<rect x="106.2" y="152.9" transform="matrix(-0.866 -0.5 0.5 -0.866 123.4225 341.2032)" class="st0" width="2.4" height="2.3"/>	<rect x="108.6" y="148.8" transform="matrix(-0.866 -0.5 0.5 -0.866 129.8816 334.6753)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M145.4,163.4c-0.3,0-0.5,0-0.8,0.1l-19-32.9c0.7-0.8,1.1-1.8,1.1-2.9c0-2.3-1.9-4.2-4.2-4.2c-0.3,0-0.6,0-1,0.1l-18.4-31.9c1.1-1.1,1.8-2.6,1.8-4.2c0-3.3-2.6-5.9-5.9-5.9c-3.3,0-5.9,2.6-5.9,5.9c0,1.7,0.7,3.2,1.8,4.3l-18.3,31.7c0,0-0.1,0-0.1,0c-2.3,0-4.2,1.9-4.2,4.2c0,0.8,0.2,1.6,0.6,2.2l-19.4,33.6c-0.4-0.1-0.8-0.2-1.2-0.2c-2.3,0-4.2,1.9-4.2,4.2s1.9,4.2,4.2,4.2c1.8,0,3.3-1.1,3.9-2.7l38.9,0.1c0.6,1.5,2.1,2.6,3.9,2.6c1.8,0,3.3-1.1,3.9-2.6l38.6,0.1c0.7,1.5,2.1,2.5,3.8,2.5c2.3,0,4.2-1.9,4.2-4.2S147.7,163.4,145.4,163.4z M99.1,163.4c-1.8,0-3.3,1.1-3.9,2.6l-39-0.1c0-0.1-0.1-0.2-0.1-0.3l19.5-33.8c0.3,0.1,0.7,0.1,1,0.1c2.3,0,4.2-1.9,4.2-4.2c0-1.1-0.4-2.2-1.2-2.9l18.2-31.5c0.4,0.1,0.8,0.1,1.3,0.1c0.5,0,0.9-0.1,1.3-0.2l18.6,32.2c-0.4,0.7-0.7,1.4-0.7,2.3c0,2.3,1.9,4.2,4.2,4.2c0.1,0,0.1,0,0.2,0l19.2,33.2c-0.2,0.3-0.4,0.6-0.5,1L103,166C102.3,164.5,100.8,163.4,99.1,163.4z"/>	</g>	<g class="device-icon__group-3">	<rect x="164.8" y="120.4" transform="matrix(-0.866 0.5 -0.5 -0.866 370.5414 143.8574)" class="st0" width="2.4" height="2.3"/>	<rect x="161.2" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="155.5" y="104.4" transform="matrix(-0.866 0.5 -0.5 -0.866 345.2279 118.5125)" class="st0" width="2.4" height="2.3"/>	<rect x="162.6" y="116.4" transform="matrix(-0.866 0.5 -0.5 -0.866 364.3362 137.4945)" class="st0" width="2.4" height="2.3"/>	<rect x="160.2" y="112.4" transform="matrix(-0.866 0.5 -0.5 -0.866 357.9323 131.1727)" class="st0" width="2.4" height="2.3"/>	<rect x="158" y="108.4" transform="matrix(-0.866 0.5 -0.5 -0.866 351.7558 124.8875)" class="st0" width="2.4" height="2.3"/>	<rect x="138" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="153.3" y="100.3" transform="matrix(-0.866 0.5 -0.5 -0.866 338.9872 112.1258)" class="st0" width="2.4" height="2.3"/>	<rect x="133.3" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="142.6" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="151.9" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="147.3" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="156.6" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="127.2" y="116.4" transform="matrix(0.866 0.5 -0.5 0.866 75.9985 -48.465)" class="st0" width="2.4" height="2.3"/>	<rect x="128.7" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="124.9" y="120.6" transform="matrix(0.866 0.5 -0.5 0.866 77.7444 -46.7563)" class="st0" width="2.4" height="2.3"/>	<rect x="150.9" y="96.3" transform="matrix(-0.866 0.5 -0.5 -0.866 332.4326 105.6963)" class="st0" width="2.4" height="2.3"/>	<rect x="129.5" y="112.5" transform="matrix(0.866 0.5 -0.5 0.866 74.3102 -50.131)" class="st0" width="2.4" height="2.3"/>	<rect x="138.9" y="96.4" transform="matrix(0.866 0.5 -0.5 0.866 67.522 -56.9858)" class="st0" width="2.4" height="2.3"/>	<rect x="131.9" y="108.3" transform="matrix(0.866 0.5 -0.5 0.866 72.5679 -51.8994)" class="st0" width="2.4" height="2.3"/>	<rect x="148.7" y="92.2" transform="matrix(0.5 0.866 -0.866 0.5 155.7687 -83.042)" class="st0" width="2.3" height="2.4"/>	<rect x="141.2" y="92.3" transform="matrix(0.866 0.5 -0.5 0.866 65.7792 -58.6874)" class="st0" width="2.4" height="2.3"/>	<rect x="136.6" y="100.3" transform="matrix(0.866 0.5 -0.5 0.866 69.166 -55.2893)" class="st0" width="2.4" height="2.3"/>	<rect x="134.2" y="104.4" transform="matrix(0.866 0.5 -0.5 0.866 70.917 -53.5588)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M99.8,92.1c0.3,0,0.5,0,0.8-0.1l19,32.9c-0.7,0.8-1.1,1.8-1.1,2.9c0,2.3,1.9,4.2,4.2,4.2c0.3,0,0.6,0,1-0.1l18.4,31.9c-1.1,1.1-1.8,2.6-1.8,4.2c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-1.7-0.7-3.2-1.8-4.3l18.3-31.7c0,0,0.1,0,0.1,0c2.3,0,4.2-1.9,4.2-4.2c0-0.8-0.2-1.6-0.6-2.2l19.4-33.6c0.4,0.1,0.8,0.2,1.2,0.2c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2c-1.8,0-3.3,1.1-3.9,2.7L150,86.3c-0.6-1.5-2.1-2.6-3.9-2.6c-1.8,0-3.3,1.1-3.9,2.6l-38.6-0.1c-0.7-1.5-2.1-2.5-3.8-2.5c-2.3,0-4.2,1.9-4.2,4.2S97.5,92.1,99.8,92.1z M146.1,92.1c1.8,0,3.3-1.1,3.9-2.6l39,0.1c0,0.1,0.1,0.2,0.1,0.3l-19.5,33.8c-0.3-0.1-0.7-0.1-1-0.1c-2.3,0-4.2,1.9-4.2,4.2c0,1.1,0.4,2.2,1.2,2.9l-18.2,31.5c-0.4-0.1-0.8-0.1-1.3-0.1c-0.5,0-0.9,0.1-1.3,0.2L126.2,130c0.4-0.7,0.7-1.4,0.7-2.3c0-2.3-1.9-4.2-4.2-4.2c-0.1,0-0.1,0-0.2,0l-19.2-33.2c0.2-0.3,0.4-0.6,0.5-1l38.4,0.1C142.8,91,144.3,92.1,146.1,92.1z"/>	</g>	<g class="device-icon__group-4">	<rect x="31.3" y="52.3" transform="matrix(0.866 -0.5 0.5 0.866 -22.3865 23.4086)" class="st0" width="2.4" height="2.3"/>	<rect x="35" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="40.6" y="68.4" transform="matrix(0.866 -0.5 0.5 0.866 -29.1776 30.1919)" class="st0" width="2.4" height="2.3"/>	<rect x="33.5" y="56.4" transform="matrix(0.866 -0.5 0.5 0.866 -24.0912 25.072)" class="st0" width="2.4" height="2.3"/>	<rect x="35.9" y="60.4" transform="matrix(0.866 -0.5 0.5 0.866 -25.7854 26.7872)" class="st0" width="2.4" height="2.3"/>	<rect x="38.1" y="64.3" transform="matrix(0.866 -0.5 0.5 0.866 -27.4693 28.443)" class="st0" width="2.4" height="2.3"/>	<rect x="58.2" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="42.8" y="72.4" transform="matrix(0.866 -0.5 0.5 0.866 -30.889 31.8636)" class="st0" width="2.4" height="2.3"/>	<rect x="62.9" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="53.6" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="44.3" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="48.9" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="39.6" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="68.9" y="56.3" transform="matrix(-0.866 -0.5 0.5 -0.866 101.9804 142.2703)" class="st0" width="2.4" height="2.3"/>	<rect x="67.5" y="45.8" class="st0" width="2.3" height="2.4"/>	<rect x="71.2" y="52.2" transform="matrix(-0.866 -0.5 0.5 -0.866 108.3573 135.7546)" class="st0" width="2.4" height="2.3"/>	<rect x="45.2" y="76.5" transform="matrix(0.866 -0.5 0.5 0.866 -32.6118 33.6208)" class="st0" width="2.4" height="2.3"/>	<rect x="66.6" y="60.3" transform="matrix(-0.866 -0.5 0.5 -0.866 95.7615 148.5634)" class="st0" width="2.4" height="2.3"/>	<rect x="57.2" y="76.4" transform="matrix(-0.866 -0.5 0.5 -0.866 70.1813 173.904)" class="st0" width="2.4" height="2.3"/>	<rect x="64.2" y="64.5" transform="matrix(-0.866 -0.5 0.5 -0.866 89.1634 155.0732)" class="st0" width="2.4" height="2.3"/>	<rect x="47.6" y="80.5" transform="matrix(-0.5 -0.866 0.866 -0.5 2.2978 164.6642)" class="st0" width="2.3" height="2.4"/>	<rect x="54.9" y="80.5" transform="matrix(-0.866 -0.5 0.5 -0.866 63.8311 180.4081)" class="st0" width="2.4" height="2.3"/>	<rect x="59.5" y="72.5" transform="matrix(-0.866 -0.5 0.5 -0.866 76.5107 167.7619)" class="st0" width="2.4" height="2.3"/>	<rect x="61.9" y="68.4" transform="matrix(-0.866 -0.5 0.5 -0.866 82.9709 161.234)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M98.7,83c-0.3,0-0.5,0-0.8,0.1l-19-32.9c0.7-0.8,1.1-1.8,1.1-2.9c0-2.3-1.9-4.2-4.2-4.2c-0.3,0-0.6,0-1,0.1	L56.5,11.4c1.1-1.1,1.8-2.6,1.8-4.2c0-3.3-2.6-5.9-5.9-5.9s-5.9,2.6-5.9,5.9c0,1.7,0.7,3.2,1.8,4.3L30,43.1c0,0-0.1,0-0.1,0	c-2.3,0-4.2,1.9-4.2,4.2c0,0.8,0.2,1.6,0.6,2.2L6.9,83.1C6.5,83,6.1,83,5.7,83c-2.3,0-4.2,1.9-4.2,4.2s1.9,4.2,4.2,4.2	c1.8,0,3.3-1.1,3.9-2.7l38.9,0.1c0.6,1.5,2.1,2.6,3.9,2.6c1.8,0,3.3-1.1,3.9-2.6l38.6,0.1c0.7,1.5,2.1,2.5,3.8,2.5	c2.3,0,4.2-1.9,4.2-4.2S101,83,98.7,83z M52.4,83c-1.8,0-3.3,1.1-3.9,2.6l-39-0.1c0-0.1-0.1-0.2-0.1-0.3l19.5-33.8	c0.3,0.1,0.7,0.1,1,0.1c2.3,0,4.2-1.9,4.2-4.2c0-1.1-0.4-2.2-1.2-2.9l18.2-31.5c0.4,0.1,0.8,0.1,1.3,0.1c0.5,0,0.9-0.1,1.3-0.2	l18.6,32.2c-0.4,0.7-0.7,1.4-0.7,2.3c0,2.3,1.9,4.2,4.2,4.2c0.1,0,0.1,0,0.2,0l19.2,33.2c-0.2,0.3-0.4,0.6-0.5,1l-38.4-0.1	C55.7,84.1,54.1,83,52.4,83z"/>	</g>	<g class="device-icon__group-5">	<rect x="70.8" y="120.4" transform="matrix(-0.866 0.5 -0.5 -0.866 195.1117 190.8641)" class="st0" width="2.4" height="2.3"/>	<rect x="67.2" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="61.5" y="104.4" transform="matrix(-0.866 0.5 -0.5 -0.866 169.7986 165.5197)" class="st0" width="2.4" height="2.3"/>	<rect x="68.5" y="116.4" transform="matrix(-0.866 0.5 -0.5 -0.866 188.9071 184.5021)" class="st0" width="2.4" height="2.3"/>	<rect x="66.2" y="112.4" transform="matrix(-0.866 0.5 -0.5 -0.866 182.5026 178.1794)" class="st0" width="2.4" height="2.3"/>	<rect x="63.9" y="108.4" transform="matrix(-0.866 0.5 -0.5 -0.866 176.3267 171.8951)" class="st0" width="2.4" height="2.3"/>	<rect x="44" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="59.3" y="100.3" transform="matrix(-0.866 0.5 -0.5 -0.866 163.5575 159.1324)" class="st0" width="2.4" height="2.3"/>	<rect x="39.3" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="48.6" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="57.9" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="53.3" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="62.6" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="33.2" y="116.4" transform="matrix(0.866 0.5 -0.5 0.866 63.4024 -1.4574)" class="st0" width="2.4" height="2.3"/>	<rect x="34.7" y="126.8" class="st0" width="2.3" height="2.4"/>	<rect x="30.9" y="120.6" transform="matrix(0.866 0.5 -0.5 0.866 65.1484 0.2514)" class="st0" width="2.4" height="2.3"/>	<rect x="56.8" y="96.3" transform="matrix(-0.866 0.5 -0.5 -0.866 157.0035 152.7039)" class="st0" width="2.4" height="2.3"/>	<rect x="35.5" y="112.5" transform="matrix(0.866 0.5 -0.5 0.866 61.7147 -3.1243)" class="st0" width="2.4" height="2.3"/>	<rect x="44.9" y="96.4" transform="matrix(0.866 0.5 -0.5 0.866 54.926 -9.9782)" class="st0" width="2.4" height="2.3"/>	<rect x="37.9" y="108.3" transform="matrix(0.866 0.5 -0.5 0.866 59.9718 -4.8918)" class="st0" width="2.4" height="2.3"/>	<rect x="54.7" y="92.2" transform="matrix(0.5 0.866 -0.866 0.5 108.7637 -1.6255)" class="st0" width="2.3" height="2.4"/>	<rect x="47.2" y="92.3" transform="matrix(0.866 0.5 -0.5 0.866 53.1831 -11.6798)" class="st0" width="2.4" height="2.3"/>	<rect x="42.5" y="100.3" transform="matrix(0.866 0.5 -0.5 0.866 56.5704 -8.2826)" class="st0" width="2.4" height="2.3"/>	<rect x="40.2" y="104.4" transform="matrix(0.866 0.5 -0.5 0.866 58.321 -6.5511)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M5.8,92.1c0.3,0,0.5,0,0.8-0.1l19,32.9c-0.7,0.8-1.1,1.8-1.1,2.9c0,2.3,1.9,4.2,4.2,4.2c0.3,0,0.6,0,1-0.1L48,163.7c-1.1,1.1-1.8,2.6-1.8,4.2c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-1.7-0.7-3.2-1.8-4.3l18.3-31.7c0,0,0.1,0,0.1,0c2.3,0,4.2-1.9,4.2-4.2c0-0.8-0.2-1.6-0.6-2.2l19.4-33.6c0.4,0.1,0.8,0.2,1.2,0.2c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2c-1.8,0-3.3,1.1-3.9,2.7L56,86.3c-0.6-1.5-2.1-2.6-3.9-2.6c-1.8,0-3.3,1.1-3.9,2.6L9.6,86.2c-0.7-1.5-2.1-2.5-3.8-2.5c-2.3,0-4.2,1.9-4.2,4.2S3.5,92.1,5.8,92.1z M52.1,92.1c1.8,0,3.3-1.1,3.9-2.6l39,0.1c0,0.1,0.1,0.2,0.1,0.3l-19.5,33.8c-0.3-0.1-0.7-0.1-1-0.1c-2.3,0-4.2,1.9-4.2,4.2c0,1.1,0.4,2.2,1.2,2.9l-18.2,31.5c-0.4-0.1-0.8-0.1-1.3-0.1c-0.5,0-0.9,0.1-1.3,0.2L32.2,130c0.4-0.7,0.7-1.4,0.7-2.3c0-2.3-1.9-4.2-4.2-4.2c-0.1,0-0.1,0-0.2,0L9.3,90.3c0.2-0.3,0.4-0.6,0.5-1l38.4,0.1C48.8,91,50.3,92.1,52.1,92.1z"/>	</g>	<g class="device-icon__group-6">	<rect x="124" y="53.1" transform="matrix(0.866 -0.5 0.5 0.866 -10.3353 69.8744)" class="st0" width="2.4" height="2.3"/>	<rect x="127.7" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="133.3" y="69.2" transform="matrix(0.866 -0.5 0.5 0.866 -17.1261 76.6582)" class="st0" width="2.4" height="2.3"/>	<rect x="126.3" y="57.1" transform="matrix(0.866 -0.5 0.5 0.866 -12.0394 71.5388)" class="st0" width="2.4" height="2.3"/>	<rect x="128.6" y="61.1" transform="matrix(0.866 -0.5 0.5 0.866 -13.7342 73.253)" class="st0" width="2.4" height="2.3"/>	<rect x="130.9" y="65.1" transform="matrix(0.866 -0.5 0.5 0.866 -15.4176 74.9098)" class="st0" width="2.4" height="2.3"/>	<rect x="151" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="135.5" y="73.2" transform="matrix(0.866 -0.5 0.5 0.866 -18.8378 78.3294)" class="st0" width="2.4" height="2.3"/>	<rect x="155.6" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="146.3" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="137" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="141.7" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="132.4" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="161.6" y="57.1" transform="matrix(-0.866 -0.5 0.5 -0.866 274.6458 190.0278)" class="st0" width="2.4" height="2.3"/>	<rect x="160.3" y="46.6" class="st0" width="2.3" height="2.4"/>	<rect x="163.9" y="53" transform="matrix(-0.866 -0.5 0.5 -0.866 281.0227 183.5121)" class="st0" width="2.4" height="2.3"/>	<rect x="138" y="77.3" transform="matrix(0.866 -0.5 0.5 0.866 -20.56 80.0876)" class="st0" width="2.4" height="2.3"/>	<rect x="159.3" y="61.1" transform="matrix(-0.866 -0.5 0.5 -0.866 268.4275 196.3199)" class="st0" width="2.4" height="2.3"/>	<rect x="149.9" y="77.2" transform="matrix(-0.866 -0.5 0.5 -0.866 242.8467 221.6615)" class="st0" width="2.4" height="2.3"/>	<rect x="156.9" y="65.2" transform="matrix(-0.866 -0.5 0.5 -0.866 261.8289 202.8307)" class="st0" width="2.4" height="2.3"/>	<rect x="140.3" y="81.2" transform="matrix(-0.5 -0.866 0.866 -0.5 140.7505 246.0889)" class="st0" width="2.3" height="2.4"/>	<rect x="147.6" y="81.3" transform="matrix(-0.866 -0.5 0.5 -0.866 236.4965 228.1656)" class="st0" width="2.4" height="2.3"/>	<rect x="152.3" y="73.2" transform="matrix(-0.866 -0.5 0.5 -0.866 249.1766 215.5184)" class="st0" width="2.4" height="2.3"/>	<rect x="154.6" y="69.1" transform="matrix(-0.866 -0.5 0.5 -0.866 255.6363 208.9915)" class="st0" width="2.4" height="2.3"/>	<path class="st0" d="M191.4,83.7c-0.3,0-0.5,0-0.8,0.1l-19-32.9c0.7-0.8,1.1-1.8,1.1-2.9c0-2.3-1.9-4.2-4.2-4.2c-0.3,0-0.6,0-1,0.1l-18.4-31.9c1.1-1.1,1.8-2.6,1.8-4.2c0-3.3-2.6-5.9-5.9-5.9c-3.3,0-5.9,2.6-5.9,5.9c0,1.7,0.7,3.2,1.8,4.3l-18.3,31.7c0,0-0.1,0-0.1,0c-2.3,0-4.2,1.9-4.2,4.2c0,0.8,0.2,1.6,0.6,2.2L99.6,83.9c-0.4-0.1-0.8-0.2-1.2-0.2c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2c1.8,0,3.3-1.1,3.9-2.7l38.9,0.1c0.6,1.5,2.1,2.6,3.9,2.6c1.8,0,3.3-1.1,3.9-2.6l38.6,0.1c0.7,1.5,2.1,2.5,3.8,2.5c2.3,0,4.2-1.9,4.2-4.2C195.6,85.6,193.7,83.7,191.4,83.7z M145.1,83.7c-1.8,0-3.3,1.1-3.9,2.6l-39-0.1c0-0.1-0.1-0.2-0.1-0.3l19.5-33.8c0.3,0.1,0.7,0.1,1,0.1c2.3,0,4.2-1.9,4.2-4.2c0-1.1-0.4-2.2-1.2-2.9l18.2-31.5c0.4,0.1,0.8,0.1,1.3,0.1c0.5,0,0.9-0.1,1.3-0.2L165,45.8c-0.4,0.7-0.7,1.4-0.7,2.3c0,2.3,1.9,4.2,4.2,4.2c0.1,0,0.1,0,0.2,0L188,85.5c-0.2,0.3-0.4,0.6-0.5,1L149,86.3C148.4,84.8,146.9,83.7,145.1,83.7z"/>	</g>
</svg>
</body>
</html>

Twinkle Animation - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #9ACD32;
}
svg { fill: #fff;
}
.device-icon__group-1 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 200ms; animation-delay: 200ms; opacity: 0;
}
.device-icon__group-2 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 400ms; animation-delay: 400ms; opacity: 0;
}
.device-icon__group-3 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 600ms; animation-delay: 600ms; opacity: 0;
}
.device-icon__group-4 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 800ms; animation-delay: 800ms; opacity: 0;
}
.device-icon__group-5 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 1000ms; animation-delay: 1000ms; opacity: 0;
}
.device-icon__group-6 { -webkit-animation: twinkle 1600ms ease-in-out alternate infinite; animation: twinkle 1600ms ease-in-out alternate infinite; -webkit-animation-delay: 1200ms; animation-delay: 1200ms; opacity: 0;
}
@-webkit-keyframes twinkle { from { opacity: 0; } to { opacity: 1; }
}
@keyframes twinkle { from { opacity: 0; } to { opacity: 1; }
}
Twinkle Animation - Script Codes
Twinkle Animation - Script Codes
Home Page Home
Developer Alex Pate
Username alexpate
Uploaded November 24, 2022
Rating 4
Size 5,487 Kb
Views 14,168
Do you need developer help for Twinkle 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!

Alex Pate (alexpate) Script Codes
Name
Graph Preloader
Emoji CSS Selectors
Subtle Draw Nav Animation
Wobble Notification
Single Element Stacked Paper
CSS Colors
SVG Progress Circle JS
SVG Circle progress
A Pen by Alex Pate
Smock Gradient Button
Create amazing SEO content 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!