Polyon Lion Enhanced
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 - 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);
Developer | GRAY GHOST |
Username | grayghostvisuals |
Uploaded | August 30, 2022 |
Rating | 4.5 |
Size | 10,801 Kb |
Views | 40,480 |
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!
Name | Size |
Blur Filter | 1,784 Kb |
The Wheel of Circles | 2,919 Kb |
Wave | 5,440 Kb |
Fixed Curtains | 4,912 Kb |
Accessible Dropdown Menu | 4,790 Kb |
Mocean PlayfulModals | 5,611 Kb |
Underneath | 93,385 Kb |
Dark Sky Weather App | 12,458 Kb |
Off Canvas Overlay Full Screen | 5,270 Kb |
ScrollTop Demo | 7,104 Kb |
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!
Name | Username | Size |
Ripples in water | Nobitagit | 2,704 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Fading gradient button | Insprd | 1,713 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Video mute | Leon9208 | 2,131 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!