Polyon Lion Enhanced

Developer
Size
10,801 Kb
Views
40,480

How do I make an polyon lion enhanced?

The Enhancement and Integration of TimelineMax post CSS-Tricks article http://css-tricks.com/polylion for Jonno Riekwel of Polyon. The lion featured from that article can be seen here http://codepen.io/grayghostvisuals/pen/vEWKWq. What is a polyon lion enhanced? How do you make a polyon lion enhanced? This script and codes were developed by GRAY GHOST on 30 August 2022, Tuesday.

Polyon Lion Enhanced Previews

Polyon Lion Enhanced - Script Codes HTML Codes

<!DOCTYPE html>
<html class="no-js">
<head> <meta charset="UTF-8"> <title>Polyon Lion Enhanced</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1"> <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> <a class='logo' href='/'> <svg class='polyonlion' version='1.1' viewBox='13 103.7 586 580' xmlns='http://www.w3.org/2000/svg'> <defs> <filter color-interpolation-filters='sRGB' id='polycleaner'> <feComponentTransfer> <feFuncA tableValues='0 0.5 1 1' type='table'></feFuncA> </feComponentTransfer> </filter> </defs> <g filter='url(#polycleaner)'> <g id='polyonlion-mouth'> <polygon fill='#231F20' points='306,524.3 388.3,551.9 311.6,502	'></polygon> <polygon fill='#333333' points='223.7,551.9 306,524.3 300.4,501.8	'></polygon> </g> <g id='polyonlion-nose'> <polygon fill='#333333' points='359.6,420.7 306.2,448.6 354.7,448.6	'></polygon> <polygon fill='#454545' points='306,413.9 306.2,448.6 359.6,420.7	'></polygon> <polygon fill='#707070' points='306,413.9 252.4,420.7 306.2,448.6	'></polygon> <polygon fill='#454545' points='252.4,420.7 257.5,448.6 306.2,448.6	'></polygon> <polygon fill='#333333' points='257.5,448.6 306.4,484.9 306.2,448.6	'></polygon> <polygon fill='#333333' points='306.4,484.9 306,524.3 318.2,476.1	'></polygon> <polygon fill='#231F20' points='306.2,448.6 306.4,484.9 354.7,448.6	'></polygon> <polygon fill='#231F20' points='293.8,475.5 306,524.3 306.4,484.9	'></polygon> </g> <g id='polyonlion-eye--left'> <polygon fill='#454545' points='211.3,319.9 192.4,325.5 228.4,339 261.2,326.2	'></polygon> <polygon fill='#333333' points='261.2,326.2 228.4,339 248.7,355.1	'></polygon> <polygon fill='#231F20' points='192.4,325.5 202.7,353.9 248.7,355.1 228.4,339	'></polygon> <polygon fill='#231F20' points='248.7,355.1 259.2,377.6 261.2,326.2	'></polygon> </g> <g id='polyonlion-eye--right'> <polygon fill='#454545' points='350.8,326.2 363,355.1 383.6,339 366,338.7	'></polygon> <polygon fill='#333333' points='350.8,326.2 352.8,377.6 363,355.1	'></polygon> <polygon fill='#333333' points='400.7,319.9 350.8,326.2 366,338.7 383.6,339 419.6,325.5 '></polygon> <polygon fill='#231F20' points='363,355.1 383.6,339 419.6,325.5 409.3,353.9	'></polygon> </g> <g id='polyonlion-face'> <polygon fill='#CCCCCC' points='490.1,341.9 409.3,353.9 425.5,411.7	'></polygon> <polygon fill='#D9D9D9' points='419.6,325.5 409.3,353.9 490.1,341.9	'></polygon> <polygon fill='#CCCCCC' points='415.4,278.3 400.7,319.9 419.6,325.5 490.1,341.9	'></polygon> <polygon fill='#BFBFBF' points='451.4,238.6 415.4,278.3 490.1,341.9	'></polygon> <polygon fill='#E4E4E4' points='451.4,238.6 353.7,279.5 415.4,278.3	'></polygon> <polygon fill='#D9D9D9' points='415.4,278.3 353.7,279.5 400.7,319.9	'></polygon> <polygon fill='#D9D9D9' points='306,219.3 353.7,279.5 451.4,238.6	'></polygon> <polygon fill='#E4E4E4' points='306,219.3 160.6,238.6 258,279.5	'></polygon> <polygon fill='#D9D9D9' points='306,219.3 258,279.5 306,296.6	'></polygon> <polygon fill='#CCCCCC' points='306,219.3 306,296.6 353.7,279.5	'></polygon> <polygon fill='#D9D9D9' points='353.7,279.5 306,296.6 350.8,326.2	'></polygon> <polygon fill='#E4E4E4' points='353.7,279.5 350.8,326.2 400.7,319.9	'></polygon> <polygon fill='#D9D9D9' points='350.8,326.2 306,382.3 352.8,377.6	'></polygon> <polygon fill='#CCCCCC' points='261.2,326.2 306,382.3 350.8,326.2	'></polygon> <polygon fill='#D9D9D9' points='194.6,278.3 211.3,319.9 258,279.5	'></polygon> <polygon fill='#E4E4E4' points='258,279.5 211.3,319.9 261.2,326.2	'></polygon> <polygon fill='#E4E4E4' points='194.6,278.3 122.2,341.9 192.4,325.5 211.3,319.9	'></polygon> <polygon fill='#D9D9D9' points='160.6,238.6 122.2,341.9 194.6,278.3	'></polygon> <polygon fill='#CCCCCC' points='160.6,238.6 194.6,278.3 258,279.5	'></polygon> <polygon fill='#E4E4E4' points='202.7,353.9 186.3,411.7 259.2,377.6	'></polygon> <polygon fill='#D9D9D9' points='259.2,377.6 186.3,411.7 252.4,420.7	'></polygon> <polygon fill='#E4E4E4' points='261.2,326.2 259.2,377.6 306,382.3	'></polygon> <polygon fill='#E4E4E4' points='409.3,353.9 352.8,377.6 425.5,411.7	'></polygon> <polygon fill='#D9D9D9' points='352.8,377.6 359.6,420.7 425.5,411.7	'></polygon> <polygon fill='#CCCCCC' points='352.8,377.6 306,382.3 359.6,420.7	'></polygon> <polygon fill='#D9D9D9' points='306,382.3 306,413.9 359.6,420.7	'></polygon> <polygon fill='#E4E4E4' points='306,382.3 252.4,420.7 306,413.9	'></polygon> <polygon fill='#CCCCCC' points='259.2,377.6 252.4,420.7 306,382.3	'></polygon> <polygon fill='#E4E4E4' points='306,296.6 261.2,326.2 350.8,326.2	'></polygon> <polygon fill='#CCCCCC' points='258,279.5 261.2,326.2 306,296.6	'></polygon> <polygon fill='#BFBFBF' points='490.1,341.9 425.5,411.7 439.7,485.8	'></polygon> <polygon fill='#D9D9D9' points='257.5,448.6 229.4,502.2 293.8,475.5	'></polygon> <polygon fill='#E4E4E4' points='257.5,448.6 172.6,485.8 229.4,502.2	'></polygon> <polygon fill='#D9D9D9' points='354.7,448.6 382.6,502.2 439.7,485.8	'></polygon> <polygon fill='#BFBFBF' points='439.7,485.8 382.6,502.2 388.3,551.9	'></polygon> <polygon fill='#CCCCCC' points='311.6,502 388.3,551.9 382.6,502.2	'></polygon> <polygon fill='#D9D9D9' points='318.2,476.1 311.6,502 382.6,502.2	'></polygon> <polygon fill='#E4E4E4' points='354.7,448.6 318.2,476.1 382.6,502.2	'></polygon> <polygon fill='#D9D9D9' points='306,524.3 306.2,566.9 388.3,551.9	'></polygon> <polygon fill='#CCCCCC' points='388.3,551.9 306.2,566.9 361.2,605.5	'></polygon> <polygon fill='#BFBFBF' points='306.2,566.9 250.9,605.5 361.2,605.5	'></polygon> <polygon fill='#D9D9D9' points='223.7,551.9 250.9,605.5 306.2,566.9	'></polygon> <polygon fill='#E4E4E4' points='306,524.3 223.7,551.9 306.2,566.9	'></polygon> <polygon fill='#CCCCCC' points='300.4,501.8 229.4,502.2 223.7,551.9	'></polygon> <polygon fill='#BFBFBF' points='293.8,475.5 229.4,502.2 300.4,501.8	'></polygon> <polygon fill='#D9D9D9' points='172.6,485.8 223.7,551.9 229.4,502.2	'></polygon> <polygon fill='#CCCCCC' points='186.3,411.7 172.6,485.8 257.5,448.6	'></polygon> <polygon fill='#BFBFBF' points='122.2,341.9 172.6,485.8 186.3,411.7	'></polygon> <polygon fill='#CCCCCC' points='425.5,411.7 354.7,448.6 439.7,485.8	'></polygon> <polygon fill='#E4E4E4' points='186.3,411.7 257.5,448.6 252.4,420.7	'></polygon> <polygon fill='#D9D9D9' points='122.2,341.9 186.3,411.7 202.7,353.9	'></polygon> <polygon fill='#E4E4E4' points='369.6,191.6 306,219.3 451.4,238.6	'></polygon> <polygon fill='#D9D9D9' points='242.4,191.6 160.6,238.6 306,219.3	'></polygon> <polygon fill='#CCCCCC' points='192.4,325.5 122.2,341.9 202.7,353.9	'></polygon> <polygon fill='#BFBFBF' points='425.5,411.7 359.6,420.7 354.7,448.6	'></polygon> <polygon fill='#D9D9D9' points='409.3,353.9 363,355.1 352.8,377.6	'></polygon> <polygon fill='#D9D9D9' points='259.2,377.6 248.7,355.1 202.7,353.9	'></polygon> </g> <g id='polyonlion-mane'> <polygon fill='#F06F28' points='369.6,191.6 242.4,191.6 306,219.3	'></polygon> <polygon fill='#F79333' points='242.4,191.6 306,57.7 369.6,191.6	'></polygon> <polygon fill='#F06F28' points='160,88.5 306,57.7 242.4,191.6	'></polygon> <polygon fill='#FAB03F' points='160.6,238.6 242.4,191.6 160,88.5	'></polygon> <polygon fill='#F79333' points='60.2,184.7 160.6,238.6 160,88.5	'></polygon> <polygon fill='#FAB03F' points='60.2,184.7 122.2,341.9 160.6,238.6	'></polygon> <polygon fill='#F06F28' points='60.2,184.7 13,341.9 122.2,341.9	'></polygon> <polygon fill='#F1562F' points='13,341.9 49.4,503.7 122.2,341.9	'></polygon> <polygon fill='#F79333' points='122.2,341.9 49.4,503.7 172.6,485.8	'></polygon> <polygon fill='#FAB03F' points='172.6,485.8 49.4,503.7 223.7,551.9	'></polygon> <polygon fill='#F06F28' points='49.4,503.7 116.5,620 223.7,551.9	'></polygon> <polygon fill='#F1562F' points='223.7,551.9 116.5,620 250.9,605.5	'></polygon> <polygon fill='#FFC149' points='250.9,605.5 116.5,620 203.9,694.2	'></polygon> <polygon fill='#FAB03F' points='250.9,605.5 203.9,694.2 306,734.3	'></polygon> <polygon fill='#F06F28' points='361.2,605.5 250.9,605.5 306,734.3	'></polygon> <polygon fill='#F79333' points='361.2,605.5 306,734.3 408.3,694.2	'></polygon> <polygon fill='#CB2E20' points='361.2,605.5 408.3,694.2 495.5,620	'></polygon> <polygon fill='#F06F28' points='388.3,551.9 361.2,605.5 495.5,620	'></polygon> <polygon fill='#FAB03F' points='562.6,503.7 388.3,551.9 495.5,620	'></polygon> <polygon fill='#F06F28' points='439.7,485.8 388.3,551.9 562.6,503.7	'></polygon> <polygon fill='#F1562F' points='490.1,341.9 439.7,485.8 562.6,503.7	'></polygon> <polygon fill='#CB2E20' points='599,341.9 490.1,341.9 562.6,503.7	'></polygon> <polygon fill='#F1562F' points='551.8,184.7 490.1,341.9 599,341.9	'></polygon> <polygon fill='#F79333' points='451.4,238.6 551.8,184.7 490.1,341.9	'></polygon> <polygon fill='#FAB03F' points='455.8,88.8 451.4,238.6 551.8,184.7	'></polygon> <polygon fill='#F06F28' points='455.8,88.8 369.6,191.6 451.4,238.6	'></polygon> <polygon fill='#F1562F' points='306,57.7 369.6,191.6 455.8,88.8	'></polygon> </g> </g> </svg>
</a> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Polyon Lion Enhanced - Script Codes CSS Codes

@-webkit-keyframes polyonlion { to { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes polyonlion { to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; background: #151C2A;
}
svg { max-width: 100%;
}
.polyonlion > g polygon { opacity: 0; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transition: 0.25s fill linear, 0.25s stroke linear; transition: 0.25s fill linear, 0.25s stroke linear;
}
.no-cssanimations .polyonlion > g polygon { -webkit-transform: scale(1); transform: scale(1); opacity: 1;
}
.no-js .polyonlion > g polygon { -webkit-transform: scale(0); transform: scale(0);
}
.no-js .polyonlion > g polygon:nth-of-type(1) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.025s; animation-delay: 0.025s;
}
.no-js .polyonlion > g polygon:nth-of-type(2) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.05s; animation-delay: 0.05s;
}
.no-js .polyonlion > g polygon:nth-of-type(3) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.075s; animation-delay: 0.075s;
}
.no-js .polyonlion > g polygon:nth-of-type(4) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
.no-js .polyonlion > g polygon:nth-of-type(5) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.125s; animation-delay: 0.125s;
}
.no-js .polyonlion > g polygon:nth-of-type(6) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.15s; animation-delay: 0.15s;
}
.no-js .polyonlion > g polygon:nth-of-type(7) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.175s; animation-delay: 0.175s;
}
.no-js .polyonlion > g polygon:nth-of-type(8) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.no-js .polyonlion > g polygon:nth-of-type(9) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.225s; animation-delay: 0.225s;
}
.no-js .polyonlion > g polygon:nth-of-type(10) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.25s; animation-delay: 0.25s;
}
.no-js .polyonlion > g polygon:nth-of-type(11) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.275s; animation-delay: 0.275s;
}
.no-js .polyonlion > g polygon:nth-of-type(12) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.no-js .polyonlion > g polygon:nth-of-type(13) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.325s; animation-delay: 0.325s;
}
.no-js .polyonlion > g polygon:nth-of-type(14) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.35s; animation-delay: 0.35s;
}
.no-js .polyonlion > g polygon:nth-of-type(15) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.375s; animation-delay: 0.375s;
}
.no-js .polyonlion > g polygon:nth-of-type(16) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
.no-js .polyonlion > g polygon:nth-of-type(17) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.425s; animation-delay: 0.425s;
}
.no-js .polyonlion > g polygon:nth-of-type(18) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.45s; animation-delay: 0.45s;
}
.no-js .polyonlion > g polygon:nth-of-type(19) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.475s; animation-delay: 0.475s;
}
.no-js .polyonlion > g polygon:nth-of-type(20) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
.no-js .polyonlion > g polygon:nth-of-type(21) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.525s; animation-delay: 0.525s;
}
.no-js .polyonlion > g polygon:nth-of-type(22) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.55s; animation-delay: 0.55s;
}
.no-js .polyonlion > g polygon:nth-of-type(23) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.575s; animation-delay: 0.575s;
}
.no-js .polyonlion > g polygon:nth-of-type(24) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
.no-js .polyonlion > g polygon:nth-of-type(25) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.625s; animation-delay: 0.625s;
}
.no-js .polyonlion > g polygon:nth-of-type(26) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.65s; animation-delay: 0.65s;
}
.no-js .polyonlion > g polygon:nth-of-type(27) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.675s; animation-delay: 0.675s;
}
.no-js .polyonlion > g polygon:nth-of-type(28) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
.no-js .polyonlion > g polygon:nth-of-type(29) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.725s; animation-delay: 0.725s;
}
.no-js .polyonlion > g polygon:nth-of-type(30) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.75s; animation-delay: 0.75s;
}
.no-js .polyonlion > g polygon:nth-of-type(31) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.775s; animation-delay: 0.775s;
}
.no-js .polyonlion > g polygon:nth-of-type(32) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
.no-js .polyonlion > g polygon:nth-of-type(33) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.825s; animation-delay: 0.825s;
}
.no-js .polyonlion > g polygon:nth-of-type(34) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.85s; animation-delay: 0.85s;
}
.no-js .polyonlion > g polygon:nth-of-type(35) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.875s; animation-delay: 0.875s;
}
.no-js .polyonlion > g polygon:nth-of-type(36) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.no-js .polyonlion > g polygon:nth-of-type(37) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.925s; animation-delay: 0.925s;
}
.no-js .polyonlion > g polygon:nth-of-type(38) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.95s; animation-delay: 0.95s;
}
.no-js .polyonlion > g polygon:nth-of-type(39) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 0.975s; animation-delay: 0.975s;
}
.no-js .polyonlion > g polygon:nth-of-type(40) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1s; animation-delay: 1s;
}
.no-js .polyonlion > g polygon:nth-of-type(41) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.025s; animation-delay: 1.025s;
}
.no-js .polyonlion > g polygon:nth-of-type(42) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.05s; animation-delay: 1.05s;
}
.no-js .polyonlion > g polygon:nth-of-type(43) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.075s; animation-delay: 1.075s;
}
.no-js .polyonlion > g polygon:nth-of-type(44) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.1s; animation-delay: 1.1s;
}
.no-js .polyonlion > g polygon:nth-of-type(45) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.125s; animation-delay: 1.125s;
}
.no-js .polyonlion > g polygon:nth-of-type(46) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.15s; animation-delay: 1.15s;
}
.no-js .polyonlion > g polygon:nth-of-type(47) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.175s; animation-delay: 1.175s;
}
.no-js .polyonlion > g polygon:nth-of-type(48) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
.no-js .polyonlion > g polygon:nth-of-type(49) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.225s; animation-delay: 1.225s;
}
.no-js .polyonlion > g polygon:nth-of-type(50) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.25s; animation-delay: 1.25s;
}
.no-js .polyonlion > g polygon:nth-of-type(51) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.275s; animation-delay: 1.275s;
}
.no-js .polyonlion > g polygon:nth-of-type(52) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.3s; animation-delay: 1.3s;
}
.no-js .polyonlion > g polygon:nth-of-type(53) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.325s; animation-delay: 1.325s;
}
.no-js .polyonlion > g polygon:nth-of-type(54) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.35s; animation-delay: 1.35s;
}
.no-js .polyonlion > g polygon:nth-of-type(55) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.375s; animation-delay: 1.375s;
}
.no-js .polyonlion > g polygon:nth-of-type(56) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.4s; animation-delay: 1.4s;
}
.no-js .polyonlion > g polygon:nth-of-type(57) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.425s; animation-delay: 1.425s;
}
.no-js .polyonlion > g polygon:nth-of-type(58) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.45s; animation-delay: 1.45s;
}
.no-js .polyonlion > g polygon:nth-of-type(59) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.475s; animation-delay: 1.475s;
}
.no-js .polyonlion > g polygon:nth-of-type(60) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.no-js .polyonlion > g polygon:nth-of-type(61) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.525s; animation-delay: 1.525s;
}
.no-js .polyonlion > g polygon:nth-of-type(62) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.55s; animation-delay: 1.55s;
}
.no-js .polyonlion > g polygon:nth-of-type(63) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.575s; animation-delay: 1.575s;
}
.no-js .polyonlion > g polygon:nth-of-type(64) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.6s; animation-delay: 1.6s;
}
.no-js .polyonlion > g polygon:nth-of-type(65) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.625s; animation-delay: 1.625s;
}
.no-js .polyonlion > g polygon:nth-of-type(66) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.65s; animation-delay: 1.65s;
}
.no-js .polyonlion > g polygon:nth-of-type(67) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.675s; animation-delay: 1.675s;
}
.no-js .polyonlion > g polygon:nth-of-type(68) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.7s; animation-delay: 1.7s;
}
.no-js .polyonlion > g polygon:nth-of-type(69) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.725s; animation-delay: 1.725s;
}
.no-js .polyonlion > g polygon:nth-of-type(70) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.75s; animation-delay: 1.75s;
}
.no-js .polyonlion > g polygon:nth-of-type(71) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.775s; animation-delay: 1.775s;
}
.no-js .polyonlion > g polygon:nth-of-type(72) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.8s; animation-delay: 1.8s;
}
.no-js .polyonlion > g polygon:nth-of-type(73) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.825s; animation-delay: 1.825s;
}
.no-js .polyonlion > g polygon:nth-of-type(74) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.85s; animation-delay: 1.85s;
}
.no-js .polyonlion > g polygon:nth-of-type(75) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.875s; animation-delay: 1.875s;
}
.no-js .polyonlion > g polygon:nth-of-type(76) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.9s; animation-delay: 1.9s;
}
.no-js .polyonlion > g polygon:nth-of-type(77) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.925s; animation-delay: 1.925s;
}
.no-js .polyonlion > g polygon:nth-of-type(78) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.95s; animation-delay: 1.95s;
}
.no-js .polyonlion > g polygon:nth-of-type(79) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 1.975s; animation-delay: 1.975s;
}
.no-js .polyonlion > g polygon:nth-of-type(80) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 2s; animation-delay: 2s;
}
.no-js .polyonlion > g polygon:nth-of-type(81) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 2.025s; animation-delay: 2.025s;
}
.no-js .polyonlion > g polygon:nth-of-type(82) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 2.05s; animation-delay: 2.05s;
}
.no-js .polyonlion > g polygon:nth-of-type(83) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 2.075s; animation-delay: 2.075s;
}
.no-js .polyonlion > g polygon:nth-of-type(84) { -webkit-animation: polyonlion 100ms linear 1 forwards; animation: polyonlion 100ms linear 1 forwards; -webkit-animation-delay: 2.1s; animation-delay: 2.1s;
}
.polyonlion > g polygon:nth-of-type(1) { -webkit-transition-delay: 0.02s; transition-delay: 0.02s;
}
.polyonlion > g polygon:nth-of-type(2) { -webkit-transition-delay: 0.04s; transition-delay: 0.04s;
}
.polyonlion > g polygon:nth-of-type(3) { -webkit-transition-delay: 0.06s; transition-delay: 0.06s;
}
.polyonlion > g polygon:nth-of-type(4) { -webkit-transition-delay: 0.08s; transition-delay: 0.08s;
}
.polyonlion > g polygon:nth-of-type(5) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.polyonlion > g polygon:nth-of-type(6) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s;
}
.polyonlion > g polygon:nth-of-type(7) { -webkit-transition-delay: 0.14s; transition-delay: 0.14s;
}
.polyonlion > g polygon:nth-of-type(8) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s;
}
.polyonlion > g polygon:nth-of-type(9) { -webkit-transition-delay: 0.18s; transition-delay: 0.18s;
}
.polyonlion > g polygon:nth-of-type(10) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.polyonlion > g polygon:nth-of-type(11) { -webkit-transition-delay: 0.22s; transition-delay: 0.22s;
}
.polyonlion > g polygon:nth-of-type(12) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s;
}
.polyonlion > g polygon:nth-of-type(13) { -webkit-transition-delay: 0.26s; transition-delay: 0.26s;
}
.polyonlion > g polygon:nth-of-type(14) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s;
}
.polyonlion > g polygon:nth-of-type(15) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s;
}
.polyonlion > g polygon:nth-of-type(16) { -webkit-transition-delay: 0.32s; transition-delay: 0.32s;
}
.polyonlion > g polygon:nth-of-type(17) { -webkit-transition-delay: 0.34s; transition-delay: 0.34s;
}
.polyonlion > g polygon:nth-of-type(18) { -webkit-transition-delay: 0.36s; transition-delay: 0.36s;
}
.polyonlion > g polygon:nth-of-type(19) { -webkit-transition-delay: 0.38s; transition-delay: 0.38s;
}
.polyonlion > g polygon:nth-of-type(20) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s;
}
.polyonlion > g polygon:nth-of-type(21) { -webkit-transition-delay: 0.42s; transition-delay: 0.42s;
}
.polyonlion > g polygon:nth-of-type(22) { -webkit-transition-delay: 0.44s; transition-delay: 0.44s;
}
.polyonlion > g polygon:nth-of-type(23) { -webkit-transition-delay: 0.46s; transition-delay: 0.46s;
}
.polyonlion > g polygon:nth-of-type(24) { -webkit-transition-delay: 0.48s; transition-delay: 0.48s;
}
.polyonlion > g polygon:nth-of-type(25) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
.polyonlion > g polygon:nth-of-type(26) { -webkit-transition-delay: 0.52s; transition-delay: 0.52s;
}
.polyonlion > g polygon:nth-of-type(27) { -webkit-transition-delay: 0.54s; transition-delay: 0.54s;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(1) { fill: #ff5533;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(2) { fill: #ff7733;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(3) { fill: #ff9933;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(4) { fill: #ffbb33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(5) { fill: #ffdd33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(6) { fill: #ffff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(7) { fill: #ddff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(8) { fill: #bbff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(9) { fill: #99ff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(10) { fill: #77ff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(11) { fill: #55ff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(12) { fill: #33ff33;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(13) { fill: #33ff55;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(14) { fill: #33ff77;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(15) { fill: #33ff99;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(16) { fill: #33ffbb;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(17) { fill: #33ffdd;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(18) { fill: #33ffff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(19) { fill: #33ddff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(20) { fill: #33bbff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(21) { fill: #3399ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(22) { fill: #3377ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(23) { fill: #3355ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(24) { fill: #3333ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(25) { fill: #5533ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(26) { fill: #7733ff;
}
.polyonlion:hover g#polyonlion-mane polygon:nth-of-type(27) { fill: #9933ff;
}
.logo { display: block; height: 129.375px; width: 110.25px;
}
.logo span { display: inline-block; width: 0; height: 0;
}
.logo .polyonlion { height: 129.375px; max-width: 100%; width: 110.25px;
}

Polyon Lion Enhanced - Script Codes JS Codes

(function() { var polyonlion_duration, polyonlion_shapes, polyonlion_stagger, polyonlion_staggerFrom, polyonlion_staggerTo, tmax_options, tmax_tl; tmax_options = { delay: 0, repeat: 0 }; tmax_tl = new TimelineMax(tmax_options); polyonlion_shapes = $('svg > g polygon'); polyonlion_stagger = 0.025; polyonlion_duration = 0.1675; polyonlion_staggerFrom = { scale: 0, opacity: 0, transformOrigin: 'center center' }; polyonlion_staggerTo = { opacity: 1, scale: 1, ease: Linear.easeOut }; tmax_tl.staggerFromTo(polyonlion_shapes, polyonlion_duration, polyonlion_staggerFrom, polyonlion_staggerTo, polyonlion_stagger, 0);
}).call(this);
Polyon Lion Enhanced - Script Codes
Polyon Lion Enhanced - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded August 30, 2022
Rating 4.5
Size 10,801 Kb
Views 40,480
Do you need developer help for Polyon Lion Enhanced?

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!

GRAY GHOST (grayghostvisuals) Script Codes
Create amazing video scripts 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!