Create icon animate with svg

<!DOCTYPE html>
<html>
<head>
<title>Formulaire Legend avec validation | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Formulaire Legend avec validation">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="box mr20">
        <div class="title">Medical Square</div>
        <div class="svg">
            <svg id="svg-medical-square" width="180" height="180">
                <title>Medical Square</title>
                <g id="svg-medical-square-g-01">
                    <polygon class="cls-1" points="60.22 140.82 31.02 90.24 60.22 39.67 118.62 39.67 147.81 90.24 118.62 140.82 60.22 140.82" />
                    <path class="cls-2" d="M116.62,43.14v94.22L35,90.24l81.59-47.11m2-3.46L31,90.24l87.59,50.57V39.67h0Z" />
                    <path class="cls-2" d="M62.22,43.14l81.59,47.11L62.22,137.35V43.14m-2-3.46V140.82l87.59-50.57L60.22,39.67h0Z" />
                    <line class="cls-1" x1="118.62" y1="39.67" x2="61.12" y2="139.28" />
                    <line class="cls-1" x1="60.22" y1="39.67" x2="118.62" y2="140.82" />
                    <line class="cls-1" x1="31.46" y1="90.83" x2="147.81" y2="90.24" />
                    <circle class="cls-3" cx="146.44" cy="90" r="8" />
                    <circle class="cls-4" cx="31.46" cy="90.49" r="8" />
                    <circle class="cls-3" cx="61.12" cy="39.67" r="8" />
                    <circle class="cls-4" cx="118.62" cy="39.67" r="8" />
                    <circle class="cls-4" cx="118.62" cy="140.82" r="8" />
                    <circle class="cls-3" cx="60.22" cy="140.82" r="8" />
                </g>
                <g id="svg-medical-square-g-02">
                    <circle class="cls-5" cx="89.42" cy="90.24" r="28.67" />
                    <path class="cls-6" d="M102.42,98.61L99.51,97v2.48a0.65,0.65,0,0,1,0,.07c2.47,0.38,3.32,3.15,3.37,4.68l-1.4,0c0-.14-0.21-3.46-2.64-3.4s-2.49,3.23-2.48,3.37l-1.4,0c0-1.5.66-4.21,3.19-4.69a0.66,0.66,0,0,1,0-.1V96.3l-4-2.13V91.42a12,12,0,0,0,2.79-4.08,0.71,0.71,0,0,0,.15.08c0.75,0.23,1.75-.84,2.22-2.4s0.25-3-.5-3.23a0.83,0.83,0,0,0-.57.05h0l0,0a5.26,5.26,0,0,0,0-.53c0,0.05,0,.1,0,0.16v0c0-.19,0-0.38,0-0.57,0-6.35-3.71-10.15-8.28-10.15s-8.28,3.8-8.28,10.15c0,0.19,0,.38,0,0.57,0,0,0,0,0,0s0-.1,0-0.15c0,0.17,0,.34,0,0.52l0,0h0a0.83,0.83,0,0,0-.57-0.05c-0.75.23-1,1.68-.5,3.23s1.47,2.63,2.22,2.4A0.71,0.71,0,0,0,83,87.33a12,12,0,0,0,2.79,4.08V94l-1.72,1.08L81,96.78V101a2.1,2.1,0,1,1-1.4,0V97.53l-2,1.08c-3.24,1.8-5.87,3.58-5.87,5.08v2.92a0.92,0.92,0,0,0,.92.92h34.76a0.92,0.92,0,0,0,.92-0.92v-2.92C108.29,102.19,105.66,100.41,102.42,98.61Z" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box mr20">
        <div class="title">Articles</div>
        <div class="svg">
            <svg id="svg-articles" width="180" height="180" viewBox="0 0 200 200">
                <defs>
                    <clipPath id="svg-articles-clip">
                        <rect x="59.77" y="68" width="80" height="52" />
                    </clipPath>
                </defs>
                <title>Articles</title>
                <g id="svg-articles-g-01">
                    <path class="cls-1" d="M47.6,122v12a4,4,0,0,0,4,4h96a4,4,0,0,0,4-4V122H47.6Z" />
                    <polygon class="cls-2" points="115.6 154.01 83.6 154.01 87.6 130.01 111.6 130.01 115.6 154.01" />
                    <rect class="cls-3" x="79.6" y="152.01" width="40" height="2" />
                    <path class="cls-4" d="M147.6,62h-96a4,4,0,0,0-4,4v56h104V66a4,4,0,0,0-4-4h0Z" />
                    <polygon class="cls-5" points="147.6 66.01 147.6 118.01 51.6 118.01 51.6 66.01 147.6 66.01 147.6 66.01" />
                    <path class="cls-3" d="M47.6,122v12a4,4,0,0,0,4,4h96a4,4,0,0,0,4-4V122H47.6Z" />
                    <circle class="cls-4" cx="99.6" cy="130.01" r="2" />
                    <rect class="cls-6" x="59.77" y="66.01" width="80" height="52" />
                </g>
                <g clip-path="url(#svg-articles-clip)">
                    <g id="svg-articles-g-02">
                        <rect class="cls-7" x="62.59" y="35.93" width="22.62" height="6.78" />
                        <rect class="cls-8" x="88.76" y="35.93" width="49.34" height="6.78" />
                        <rect class="cls-8" x="62.04" y="74.2" width="76.06" height="2.24" />
                        <rect class="cls-8" x="62.04" y="79.09" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="83.76" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="88.44" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="116.61" width="76.06" height="2.24" />
                        <rect class="cls-8" x="62.04" y="121.5" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="126.18" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="130.86" width="76.06" height="2.23" />
                        <rect class="cls-8" x="62.04" y="93.28" width="43.38" height="2.23" />
                        <rect class="cls-8" x="62.04" y="98.12" width="43.38" height="2.23" />
                        <rect class="cls-8" x="62.04" y="102.96" width="43.38" height="2.23" />
                        <rect class="cls-8" x="94.88" y="136.05" width="43.38" height="2.23" />
                        <rect class="cls-8" x="94.88" y="140.89" width="43.38" height="2.23" />
                        <rect class="cls-8" x="94.88" y="145.73" width="43.38" height="2.23" />
                        <rect class="cls-7" x="62.04" y="108.91" width="76.06" height="6" />
                        <polyline class="cls-9" points="62.59 46.53 62.59 70.2 136.8 70.2" />
                        <polyline class="cls-10" points="72.3 65.31 89.21 63.81 99.97 54.12 114.29 57.18 128.78 51.42" />
                        <circle class="cls-11" cx="89.14" cy="63.47" r="2" />
                        <circle class="cls-11" cx="100.07" cy="53.99" r="2" />
                        <circle class="cls-11" cx="114.57" cy="57.32" r="2" />
                        <circle class="cls-11" cx="128.78" cy="51.99" r="2" />
                        <circle class="cls-11" cx="72.3" cy="65.31" r="2" />
                        <rect class="cls-8" x="107.89" y="93.23" width="30" height="12" />
                        <rect class="cls-11" x="62.04" y="136.01" width="30" height="12" />
                    </g>
                </g>
            </svg>
        </div>
    </div>
    <div class="box mr20">
        <div class="title">Slide</div>
        <div class="svg">
            <svg id="svg-slide" width="180" height="180" viewBox="0 0 200 200">
                <title>Slide</title>
                <g id="svg-slide-g-01">
                    <rect class="cls-1" x="55.28" y="62.44" width="90.19" height="66.13" />
                </g>
                <g id="svg-slide-g-02">
                    <rect class="cls-2" x="51.38" y="54.43" width="98" height="8.01" />
                </g>
                <g id="svg-slide-g-03">
                    <rect class="cls-4" x="99.3" y="131.89" width="2.15" height="5.53" />
                    <path class="cls-5" d="M100.37,135.87a5,5,0,1,0,5,5A5,5,0,0,0,100.37,135.87Zm0,7.91a2.87,2.87,0,1,1,2.87-2.88A2.88,2.88,0,0,1,100.37,143.78Z" />
                    <rect class="cls-2" x="51.38" y="128.57" width="98" height="3.32" />
                </g>
                <g id="svg-slide-g-04">
                    <rect class="cls-3" x="60.56" y="72.17" width="50" height="2" />
                    <rect class="cls-3" x="60.56" y="68.17" width="38" height="2" />
                </g>
                <g id="svg-slide-g-05">
                    <path class="cls-6" d="M110.58,83.14l9.55-14.2c-5.71-4.09-11.86-6.5-20.86-6.5V79.88C104.66,79.88,107.72,81.1,110.58,83.14Z" />
                    <path class="cls-7" d="M115.14,97.08a14.31,14.31,0,0,1-2.1,7.45L125.38,112a28.8,28.8,0,0,0-7.9-38.36l-8.37,11.72A14.37,14.37,0,0,1,115.14,97.08Z" />
                    <path class="cls-2" d="M113,104.53a14.38,14.38,0,0,1-12.3,6.95c-8,0-15.14-6.45-15.14-14.4s6.46-14.4,13.66-14.4V68.28c-14.4,0-28.06,12.89-28.06,28.8s13.26,28.8,29.17,28.8A29.1,29.1,0,0,0,125.19,112Z" />
                </g>
                <g id="svg-slide-g-06">
                    <rect class="cls-6" x="60.56" y="118.17" width="6" height="6" />
                    <rect class="cls-7" x="86.56" y="118.17" width="6" height="6" />
                    <rect class="cls-2" x="111.56" y="118.17" width="6" height="6" />
                    <rect class="cls-3" x="119.56" y="121.17" width="20" height="1" />
                    <rect class="cls-3" x="94.56" y="121.17" width="10" height="1" />
                    <rect class="cls-3" x="68.56" y="121.17" width="10" height="1" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box mr20">
        <div class="title">FAQ</div>
        <div class="svg">
            <svg id="svg-faq" width="180" height="180" viewBox="0 0 200 200">
                <title>FAQ</title>
                <g id="svg-faq-g-01">
                    <polygon class="cls-1" points="171.82 110.35 152.7 82 100 99.52 47.3 82 28.18 110.35 90.22 133.41 87.81 138.7 112.19 138.7 109.78 133.41 171.82 110.35" />
                    <path class="cls-2" d="M148.73,84s1.28-.85-7,0L100,99.52,58.28,84c-8.28-.86-7,0-7,0L36.62,110.35c5.42-1,63.38,22.06,63.38,22.06s58-23,63.38-22.06Z" />
                    <path class="cls-3" d="M141.72,84C111.45,78.58,100,99.29,100,99.29h0c-0.65-1-13.27-19.41-41.72-15.29l-14,24.2s36.31-2.71,55.73,19.35c19.43-22.06,55.73-19.35,55.73-19.35Z" />
                </g>
                <g id="svg-faq-g-02">
                    <path class="cls-4" d="M62.34,97.56H54.9V61.87H75.36v6.2h-13v9.2H74.45v6.18H62.34V97.56Z" />
                    <path class="cls-4" d="M104.19,97.56l-2.59-8.5h-13L86,97.56H77.85l12.6-35.84H99.7l12.65,35.84h-8.15ZM99.8,82.72q-3.59-11.55-4-13.06t-0.65-2.39q-0.81,3.13-4.61,15.45h9.3Z" />
                    <path class="cls-4" d="M149.23,79.66A22.55,22.55,0,0,1,147,90.22a13.62,13.62,0,0,1-6.56,6.24l8.59,9.59h-9.69l-6.54-8h-0.56q-8.2,0-12.6-4.76t-4.39-13.67q0-8.91,4.41-13.61t12.63-4.7q8.23,0,12.59,4.74T149.23,79.66Zm-26,0q0,6,2.27,9a7.94,7.94,0,0,0,6.79,3q9.06,0,9.06-12t-9-12.06a8,8,0,0,0-6.81,3Q123.18,73.68,123.18,79.66Z" />
                </g>
                <g id="svg-faq-g-03">
                    <path class="cls-5" d="M60.28,97.56H52.83V61.87H73.29v6.2h-13v9.2H72.39v6.18H60.28V97.56Z" />
                    <path class="cls-5" d="M102.12,97.56l-2.59-8.5h-13l-2.59,8.5H75.78l12.6-35.84h9.25l12.65,35.84h-8.15ZM97.73,82.72q-3.59-11.55-4-13.06T93,67.26q-0.81,3.13-4.61,15.45h9.3Z" />
                    <path class="cls-5" d="M147.17,79.66a22.55,22.55,0,0,1-2.23,10.56,13.62,13.62,0,0,1-6.56,6.24l8.59,9.59h-9.69l-6.54-8h-0.56q-8.2,0-12.6-4.76t-4.39-13.67q0-8.91,4.41-13.61t12.63-4.7q8.23,0,12.59,4.74T147.17,79.66Zm-26,0q0,6,2.27,9a7.94,7.94,0,0,0,6.79,3q9.06,0,9.06-12t-9-12.06a8,8,0,0,0-6.81,3Q121.12,73.68,121.12,79.66Z" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box">
        <div class="title">Guideline</div>
        <div class="svg">
            <svg id="svg-guideline" width="180" height="180" viewBox="0 0 200 200">
                <title>Guideline</title>
                <g  id="svg-guideline-g-01">
                    <path class="st0" d="M100.1,67.8c-21.9,0-39.7,17.8-39.7,39.7s17.8,39.7,39.7,39.7s39.7-17.8,39.7-39.7h-39.7"/>
                    <path class="st1" d="M128.4,80.5h-16.1c-7.4,0-13.3-6-13.3-13.3c0-7.4,6-13.3,13.3-13.3h16.1"/>
                    <circle class="st2" cx="128" cy="53.8" r="5"/>
                    <circle class="st2" cx="128" cy="80.8" r="5"/>
                    <ellipse transform="matrix(0.9993 -3.859485e-02 3.859485e-02 0.9993 -4.0725 4.0145)" class="st3" cx="101.9" cy="107.5" rx="7.5" ry="7.5"/>
                    <ellipse transform="matrix(0.9993 -3.859485e-02 3.859485e-02 0.9993 -4.0725 4.0145)" class="st4" cx="101.9" cy="107.5" rx="5" ry="5"/>
                </g>
                <g  id="svg-guideline-g-02">
                    <path class="st5" d="M104.1,107.5l-0.4-1.5h-0.2c-0.3,0.6-0.8,1-1.5,1.3c-0.6,0.3-1.4,0.5-2.2,0.5c-1.4,0-2.5-0.4-3.2-1.1 c-0.7-0.8-1.1-1.8-1.1-3.3v-7.8h3.3v7c0,0.9,0.2,1.5,0.5,2c0.3,0.4,0.8,0.6,1.5,0.6c0.9,0,1.6-0.3,2-0.9c0.4-0.6,0.6-1.6,0.6-3 v-5.6h3.3v12H104.1z"/>
                    <path class="st5" d="M109.9,92.4c0-1.1,0.6-1.6,1.8-1.6s1.8,0.5,1.8,1.6c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.4-1.3,0.4 C110.5,94,109.9,93.4,109.9,92.4z M113.3,107.5H110v-12h3.3V107.5z"/>
                    <path class="st5" d="M120.5,107.7c-1.4,0-2.5-0.5-3.3-1.6c-0.8-1.1-1.2-2.6-1.2-4.6c0-2,0.4-3.5,1.2-4.6c0.8-1.1,1.9-1.6,3.4-1.6 c1.5,0,2.7,0.6,3.5,1.8h0.1c-0.2-0.9-.2-1.7-.2-2.4v-3.8h3.3v16.7h-2.5l-0.6-1.6h-0.1C123.2,107.1,122.1,107.7,120.5,107.7z M121.7,105.1c0.8,0,1.5-0.2,1.8-0.7c0.4-0.5,.6-1.3,.6-2.5v-0.4c0-1.3-0.2-2.2-0.6-2.8c-0.4-0.6-1-0.8-1.9-0.8 c-0.7,0-1.3,0.3-1.7,0.9c-0.4,0.6-0.6,1.5-0.6,2.7c0,1.2,0.2,2.1,0.6,2.7C120.3,104.8,120.9,105.1,121.7,105.1z"/>
                    <path class="st5" d="M136.1,107.7c-1.9,0-3.4-0.5-4.5-1.6s-1.6-2.6-1.6-4.5c0-2,0.5-3.6,1.5-4.7c1-1.1,2.4-1.6,4.2-1.6 c1.7,0,3,0.5,4,1.5s1.4,2.3,1.4,4v1.6h-7.7c0,0.9,0.3,1.7,0.8,2.2s1.2,0.8,2.2,0.8c0.7,0,1.4-0.1,2.1-0.2s1.3-0.4,2-0.7v2.5 c-0.6,0.3-1.2,0.5-1.8,.6C137.8,107.6,137,107.7,136.1,107.7z M135.6,97.6c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.6,1.1-0.7,1.9h4.6 c0-.8-.2-1.4-.6-1.9C136.9,97.8,136.3,97.6,135.6,97.6z"/>
                    <path class="st5" d="M146.9,107.5h-3.3V90.8h3.3V107.5z"/>
                    <path class="st5" d="M150.2,92.4c0-1.1,0.6-1.6,1.8-1.6s1.8,0.5,1.8,1.6c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.4-1.3,0.4 C150.8,94,150.2,93.4,150.2,92.4z M153.6,107.5h-3.3v-12h3.3V107.5z"/>
                    <path class="st5" d="M168.2,107.5h-3.3v-7c0-0.9-0.2-1.5-0.5-2c-0.3-0.4-0.8-0.6-1.5-0.6c-0.9,0-1.6,0.3-2,0.9 c-.4,.6-.6,1.6-.6,3v5.7h-3.3v-12h2.5L160,97h0.2c0.4-0.6,0.9-1,1.5-1.3c0.6-0.3,1.4-0.4,2.2-0.4c1.4,0,2.5,0.4,3.2,1.1 c0.7,0.8,1.1,1.8,1.1,3.3V107.5z"/>
                    <path class="st5" d="M177,107.7c-1.9,0-3.4-0.5-4.5-1.6s-1.6-2.6-1.6-4.5c0-2,0.5-3.6,1.5-4.7c1-1.1,2.4-1.6,4.2-1.6
                    c1.7,0,3,0.5,4,1.5s1.4,2.3,1.4,4v1.6h-7.7c0,0.9,0.3,1.7,0.8,2.2s1.2,0.8,2.2,0.8c0.7,0,1.4-0.1,2.1-0.2s1.3-0.4,2-0.7v2.5 c-0.6,0.3-1.2,.5-1.8,.6C178.7,107.6,177.9,107.7,177,107.7z M176.5,97.6c-0.7,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.6,1.1-0.7,1.9h4.6 c0-0.8-0.2-1.4-.6-1.9C177.8,97.8,177.2,97.6,176.5,97.6z"/></g>
            </svg>
        </div>
    </div>
    <div class="line"></div>
    <div class="box mr20">
        <div class="title">Product</div>
        <div class="svg">
            <svg id="svg-lilly-product" width="180" height="180" viewBox="0 0 200 200">
                <title>Product</title>
                <g id="svg-lilly-product-g-01">
                    <rect class="cls-3" x="74.16" y="98.92" width="50.24" height="66.99" rx="8" ry="8" />
                    <path class="cls-4" d="M117.7,102.27a3.35,3.35,0,0,1,3.35,3.35v53.59a3.35,3.35,0,0,1-3.35,3.35H80.86a3.35,3.35,0,0,1-3.35-3.35V105.62a3.35,3.35,0,0,1,3.35-3.35H117.7m0-3.35H80.86a6.7,6.7,0,0,0-6.7,6.7v53.59a6.7,6.7,0,0,0,6.7,6.7H117.7a6.7,6.7,0,0,0,6.7-6.7V105.62a6.7,6.7,0,0,0-6.7-6.7h0Z" />
                    <rect class="cls-2" x="89.23" y="118.16" width="32.01" height="28.27" />
                    <rect class="cls-3" x="101.14" y="121.27" width="20.1" height="3.35" />
                    <rect class="cls-3" x="106.16" y="127.59" width="15.07" height="3.35" />
                    <path class="cls-4" d="M110.28,93.87v4h-22v-4h22m4-4h-30v12h30v-12h0Z" />
                    <polyline class="cls-3" points="110.28 93.87 110.28 97.87 88.28 97.87 88.28 93.87 110.28 93.87" />
                </g>
                <g id="svg-lilly-product-g-02">
                    <path class="cls-5" d="M82.79,82.42h32a4,4,0,0,1,4,4v12a0,0,0,0,1,0,0h-40a0,0,0,0,1,0,0v-12A4,4,0,0,1,82.79,82.42Z" />
                    <rect class="cls-6" x="82.79" y="82.92" width="4" height="16" />
                    <rect class="cls-6" x="91.79" y="82.92" width="4" height="16" />
                    <rect class="cls-6" x="101.79" y="82.92" width="4" height="16" />
                    <rect class="cls-6" x="110.79" y="82.92" width="4" height="16" />
                </g>
                <g id="svg-lilly-product-g-03">
                    <path class="cls-1" d="M109.69,60.1a11.18,11.18,0,0,0-2.45-.83,5.45,5.45,0,0,0-3.71.77,6.56,6.56,0,0,0-2.52,3.4L99.3,67.67l-0.69,1.72,1.1,0.44c0.93-2.35,1.8-4.75,2.86-7a4.31,4.31,0,0,1,3-2.3,6.64,6.64,0,0,1,5.72,2.4,4.31,4.31,0,0,1,.41,3.75c-0.81,2.33-1.85,4.61-2.78,6.9L110,74l1.94-4.81a19.62,19.62,0,0,0,1-2.7A5.56,5.56,0,0,0,109.69,60.1Z" />
                    <path class="cls-2" d="M95.69,76.62A5.69,5.69,0,0,0,96,81.87a5.61,5.61,0,0,0,2.7,2.24,9.27,9.27,0,0,0,2.82.84A5.57,5.57,0,0,0,107,81.53l2.76-6.84-11.39-4.6Z" />
                    <path class="cls-1" d="M116.9,34.72a11.18,11.18,0,0,0-2.23,1.3,5.45,5.45,0,0,0-1.86,3.3,6.56,6.56,0,0,0,.9,4.14l2.06,4.07,0.84,1.65,1.06-.54c-1.15-2.25-2.4-4.48-3.42-6.79a4.31,4.31,0,0,1,.23-3.76A6.64,6.64,0,0,1,120,35.37a4.31,4.31,0,0,1,3.1,2.16c1.23,2.14,2.26,4.42,3.37,6.63l1.06-.54L125.22,39a19.62,19.62,0,0,0-1.36-2.55A5.56,5.56,0,0,0,116.9,34.72Z" />
                    <path class="cls-2" d="M120.13,56.13a5.69,5.69,0,0,0,4.16,3.22,5.61,5.61,0,0,0,3.46-.56,9.27,9.27,0,0,0,2.48-1.57,5.57,5.57,0,0,0,1-6.34l-3.33-6.58-11,5.55Z" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box mr20">
        <div class="title">Corporate Site</div>
        <div class="svg">
            <svg id="svg-corporate-site" width="180" height="180" viewBox="0 0 200 200">
                <title>Corporate Site</title>
                <g id="svg-corporate-site-g-01">
                    <polygon class="cls-1" points="36.34 106.52 36.36 96.77 102.85 77.45 102.75 127.04 61.92 114.45 63.69 134.85 52.08 134.83 48.03 110.15 36.34 106.52" />
                    <rect class="cls-2" x="76.07" y="100.31" width="57.32" height="3.87" transform="translate(2.27 206.77) rotate(-89.88)" />
                </g>
                <g id="svg-corporate-site-g-02">
                    <path class="cls-3" d="M126,122.51a31.14,31.14,0,0,0-2-44" />
                    <path class="cls-3" d="M137.45,133a46.71,46.71,0,0,0-3-66" />
                </g>
                <g id="svg-corporate-site-g-03">
                    <path class="cls-4" d="M126,122.51a31.14,31.14,0,0,0-2-44" />
                    <path class="cls-4" d="M137.45,133a46.71,46.71,0,0,0-3-66" />
                    <path class="cls-4" d="M147.92,142.89A60.72,60.72,0,0,0,144,57.11" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box mr20">
        <div class="title">Product Information</div>
        <div class="svg">
            <svg id="svg-product-information" width="180" height="180" viewBox="0 0 200 200">
                <title>Product Information</title>
                <g id="svg-product-information-g-01">
                    <rect class="cls-1" x="75.65" y="130.39" width="11.62" height="17.78" />
                    <path class="cls-2" d="M90.72,104.53H72.52a1.89,1.89,0,0,0-2.1,1.54v1.72a1.89,1.89,0,0,0,2.1,1.54h18.2a1.89,1.89,0,0,0,2.1-1.54v-1.72A1.89,1.89,0,0,0,90.72,104.53Z" />
                    <rect class="cls-2" x="80.02" y="96.34" width="3.2" height="12.8" />
                    <path class="cls-2" d="M86.07,93H77.17a2.42,2.42,0,1,0,0,4.8h8.89A2.42,2.42,0,1,0,86.07,93Z" />
                    <path class="cls-2" d="M81.91,149.89H81.18a0.83,0.83,0,0,0-.59,1V162a1,1,0,0,0,2,0V150.84A0.83,0.83,0,0,0,81.91,149.89Z" />
                    <path class="cls-2" d="M85.41,109.53v37.21h-8V109.53h8m3.2-3.2H74.21v43.61h14.4V106.33h0Z" />
                    <rect class="cls-2" x="81.24" y="118.4" width="6.4" height="1.6" />
                    <rect class="cls-2" x="81.24" y="125.05" width="6.4" height="1.6" />
                    <rect class="cls-2" x="81.24" y="133.05" width="6.4" height="1.6" />
                    <rect class="cls-2" x="77.72" y="146.86" width="8" height="8" />
                    <path class="cls-2" d="M116,93.59a28.93,28.93,0,0,0-6.68.39,14.1,14.1,0,0,0-8.14,5.45c-2.34,3.22-2.76,6.79-2.75,10.61v16.6h3.07c0-6.54-.3-13.15,0-19.68a11.16,11.16,0,0,1,4.93-8.41c2.45-1.68,5.15-1.88,8-1.88a13.35,13.35,0,0,1,8,2.1,11.16,11.16,0,0,1,4.63,8.6c0.32,6.39,0,12.86,0,19.26h3.07V113.19a50.78,50.78,0,0,0-.17-7.48A14.4,14.4,0,0,0,116,93.59Z" />
                    <path class="cls-3" d="M98.42,146.82c0,4.85,1.83,9.38,5.84,12.31a14.53,14.53,0,0,0,8.65,2.76,24,24,0,0,0,7.58-.73,14.41,14.41,0,0,0,9.73-13.48V128.58H98.42v18.23Z" />
                </g>
                <g id="svg-product-information-g-02">
                    <circle class="cls-4" cx="100.42" cy="59.82" r="24" />
                    <path class="cls-5" d="M104.88,71.54c-0.29,0-1.94-.11-5.08-0.11-2.09,0-3.49.11-3.89,0.11-0.18,0-.29-0.07-0.29-0.36V70.46c0-.22.11-0.29,0.36-0.29h1.33A0.62,0.62,0,0,0,98,69.45c0.07-1.08.07-2.2,0.07-3.2L98,61.2c0-1-.22-1.73-1.73-2.27a0.47,0.47,0,0,1-.43-0.5V58c0-.11.07-0.18,0.4-0.29L101.6,56a3,3,0,0,1,1-.22,0.33,0.33,0,0,1,.36.43c-0.07.61-.07,2.88-0.07,6v3.85c0,1.4,0,2.7,0,3.1,0.07,0.68.25,0.94,0.65,0.94h1.3c0.29,0,.36.11,0.36,0.32v0.68A0.29,0.29,0,0,1,104.88,71.54ZM99.95,53.07a2.55,2.55,0,0,1-2.63-2.59,2.68,2.68,0,0,1,2.81-2.38,2.44,2.44,0,0,1,2.66,2.27A2.72,2.72,0,0,1,99.95,53.07Z" />
                    <polygon class="cls-4" points="95.16 79.32 107.17 79.32 100.42 90.89 95.16 79.32" />
                    <circle class="cls-6" cx="100.34" cy="53.19" r="31.2" />
                    <path class="cls-5" d="M106.14,68.42c-0.37,0-2.53-.14-6.6-0.14-2.71,0-4.54.14-5.05,0.14-0.23,0-.37-0.09-0.37-0.47V67c0-.28.14-0.37,0.47-0.37h1.73a0.8,0.8,0,0,0,.89-0.94c0.09-1.4.09-2.86,0.09-4.17L97.21,55c0-1.31-.28-2.25-2.25-2.95a0.61,0.61,0,0,1-.56-0.66V50.87c0-.14.09-0.23,0.52-0.37l7-2.25a3.9,3.9,0,0,1,1.26-.28,0.43,0.43,0,0,1,.47.56c-0.09.8-.09,3.74-0.09,7.86v5c0,1.82,0,3.51,0,4,0.09,0.89.33,1.22,0.84,1.22h1.68c0.37,0,.47.14,0.47,0.42v0.89A0.37,0.37,0,0,1,106.14,68.42Zm-6.41-24A3.31,3.31,0,0,1,96.32,41,3.49,3.49,0,0,1,100,38a3.17,3.17,0,0,1,3.46,2.95A3.53,3.53,0,0,1,99.73,44.41Z" />
                    <polygon class="cls-6" points="93.51 78.53 109.12 78.53 100.34 93.57 93.51 78.53" />
                </g>
            </svg>
        </div>
    </div>
    <div class="box">
        <div class="title">Digital Tool</div>
        <div class="svg">
            <svg id="svg-digital-tool" width="180" height="180" viewBox="0 0 200 200">
                <title>Digital Tool</title>
                <g id="svg-digital-tool-g-01">
                    <circle class="cls-1" cx="97" cy="124.65" r="14.78" />
                    <rect class="cls-2" x="72.58" y="42.67" width="46.13" height="86.49" rx="5.77" ry="5.77" />
                    <rect class="cls-3" x="92.77" y="47.71" width="5.77" height="1.44" />
                    <circle class="cls-3" cx="95.65" cy="123.39" r="2.9" />
                    <rect class="cls-1" x="95.65" y="130.02" width="31.71" height="26.15" />
                    <rect class="cls-4" x="75.47" y="54.2" width="40.36" height="63.43" />
                </g>
                <g id="svg-digital-tool-g-02">
                    <rect class="cls-5" x="90" y="90" width="15" height="15" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-03">
                    <rect class="cls-5" x="78.21" y="76.21" width="10" height="10" rx="2" ry="2" />
                    <rect class="cls-5" x="90.74" y="76.21" width="10" height="10" rx="2" ry="2" />
                    <rect class="cls-5" x="78.21" y="60.99" width="10" height="10" rx="2" ry="2" />
                    <rect class="cls-5" x="90.74" y="60.99" width="10" height="10" rx="2" ry="2" />
                    <rect class="cls-5" x="103.27" y="60.99" width="10" height="10" rx="2" ry="2" />
                    <rect class="cls-5" x="103.27" y="76.21" width="10" height="10" rx="2" ry="2" />
                </g>
                <g id="svg-digital-tool-g-04">
                    <path class="cls-1" d="M121.6,118.34a5.76,5.76,0,0,0,5.77-5.77V112.3c0-3.65,0-13.36,3.8-19.39a5.77,5.77,0,0,0-9.76-6.15c-5.58,8.86-5.58,20.55-5.57,25.55v0.27A5.77,5.77,0,0,0,121.6,118.34Z" />
                </g>
                <g id="svg-digital-tool-g-05">
                    <circle class="cls-1" cx="72.58" cy="94.42" r="5.77" />
                    <circle class="cls-1" cx="72.58" cy="82.76" r="5.77" />
                    <circle class="cls-1" cx="72.58" cy="105.96" r="5.77" />
                    <path class="cls-1" d="M127.36,106.09v23.06H104.3A23.06,23.06,0,0,1,127.36,106.09Z" />
                    <circle class="cls-1" cx="115.83" cy="129.16" r="11.53" />
                    <circle class="cls-1" cx="72.58" cy="117.49" r="5.77" />
                </g>
            </svg>
        </div>
    </div>
</div>
</body>
</html>
* {
  padding: 0;
  margin: 0;
}
body {
  background: #F0ECE7;
}
.mr20 {
margin-right: 20px;
}
.container {
  overflow: hidden;
  width: 1080px;
  padding: 40px 0;
  margin: 0 auto;
}
.box {
  cursor: pointer;
  display: block;
  float: left;
  width: 200px;
  margin-bottom: 50px;
}
.box .title {
  margin-bottom: 20px;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #0E1644;
  text-align: center;
}
.box .svg {
  width: 180px;
  height: 180px;
  border-radius: 100%;
  margin: 0 10px;
  background: #FFF;
  box-shadow: 0 5px 5px #999;
  transition: all 0.2s linear;
}
.box:hover .svg {
  box-shadow: 0 5px 5px #666;
}
.svg g {
  transform-origin: 90px 90px;
  transition: all 0.2s linear;
}
.line {
  clear: both;
  width: 100%;
  height: 4px;
  margin-bottom: 20px;
  background: #CCC4B0;
}
/*Medical Square css begin*/
#svg-medical-square .cls-1 {
  fill: none;
  stroke: #bcbec0;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
#svg-medical-square .cls-2 {
  fill: #bcbec0;
}
#svg-medical-square .cls-3 {
  fill: #414141;
}
#svg-medical-square .cls-4 {
  fill: #c4c4c4;
}
#svg-medical-square .cls-5 {
  fill: #d42d27;
}
#svg-medical-square .cls-6 {
  fill: #f5f5f5;
}
#svg-medical-square-g-01 {
  transform: rotate(30deg);
}
.svg:hover #svg-medical-square-g-01 {
  transform: rotate(120deg);
}
/*Medical Square css end*/
/*Articles css begin*/
#svg-articles .cls-1 {
  fill: #fbca62;
}
#svg-articles .cls-2 {
  fill: #ededed;
}
#svg-articles .cls-3 {
  fill: #dcdbdb;
}
#svg-articles .cls-4 {
  fill: #414141;
}
#svg-articles .cls-5 {
  fill: #d1d3d4;
}
#svg-articles .cls-6 {
  fill: #fff;
}
#svg-articles .cls-7 {
  fill: #f36e41;
}
#svg-articles .cls-8 {
  fill: #e6e5e5;
}
#svg-articles .cls-10,
#svg-articles .cls-9 {
  fill: none;
  stroke-miterlimit: 10;
}
#svg-articles .cls-9 {
  stroke: #a7a9ac;
}
#svg-articles .cls-10 {
  stroke: #9cceee;
}
#svg-articles .cls-11 {
  fill: #5eb8e8;
}
#svg-articles-g-02 {
  transform: translateY(33px);
}
.svg:hover #svg-articles-g-02 {
  transform: translateY(-33px);
}
/*Articles css end*/
/*Slide css begin*/
#svg-slide .cls-1 {
  fill: #fff;
  stroke: #c4c4c3;
  stroke-width: 2px;
}
#svg-slide .cls-2 {
  fill: #263f6a;
}
#svg-slide .cls-3 {
  fill: #414141;
}
#svg-slide .cls-4 {
  fill: #546778;
}
#svg-slide .cls-5 {
  fill: #f26a50;
}
#svg-slide .cls-6 {
  fill: #9cceee;
}
#svg-slide .cls-7 {
  fill: #f79d87;
}
#svg-slide-g-01 {
  transform: scaleY(1);
}
#svg-slide-g-02 {
  transform: translateY(0);
}
#svg-slide-g-03 {
  transform: translateY(0);
}
#svg-slide-g-04 {
  opacity: 1;
}
#svg-slide-g-05 {
  transform: scale(0.6);
}
#svg-slide-g-06 {
  transform: translateY(0);
}
.svg:hover #svg-slide-g-01 {
  transform: scaleY(1.4);
}
.svg:hover #svg-slide-g-02 {
  transform: translateY(-11px);
}
.svg:hover #svg-slide-g-03 {
  transform: translateY(15px);
}
.svg:hover #svg-slide-g-04 {
  opacity: 0;
}
.svg:hover #svg-slide-g-05 {
  transform: scale(1);
}
.svg:hover #svg-slide-g-06 {
  transform: translateY(15px);
}
/*Slide css end*/
/*FAQ css begin*/
#svg-faq .cls-1 {
  fill: #263f6a;
}
#svg-faq .cls-2 {
  fill: #cccbca;
}
#svg-faq .cls-3 {
  fill: #fff;
  stroke: #c4c4c3;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
#svg-faq .cls-4 {
  fill: #7d605b;
}
#svg-faq .cls-5 {
  fill: #f26a50;
}
#svg-faq-g-01 {
  transform: scale(1) translateY(0);
}
#svg-faq-g-02 {
  transform: scale(1) translateX(-5px);
}
#svg-faq-g-03 {
  transform: scale(1);
}
.svg:hover #svg-faq-g-01 {
  transform: scale(0.8) translateY(30px);
}
.svg:hover #svg-faq-g-02 {
  transform: scale(1.3) translateX(3px);
}
.svg:hover #svg-faq-g-03 {
  transform: scale(1.3);
}
/*FAQ css end*/
/*Guideline css begin*/
#svg-guideline .st0 {
  fill: none;
  stroke: #F26A50;
  stroke-width: 8;
  stroke-miterlimit: 10;
}
#svg-guideline .st1 {
  fill: none;
  stroke: #C4C4C3;
  stroke-width: 4;
  stroke-miterlimit: 10;
}
#svg-guideline .st2 {
  fill: #9CCEEE;
}
#svg-guideline .st3 {
  fill: #BDB4AE;
}
#svg-guideline .st4 {
  fill: #213646;
}
#svg-guideline .st5 {
  fill: #263F6A;
}
#svg-guideline-g-01 {
  transform: scale(0.5) translateX(-60px);
}
#svg-guideline-g-02 {
  opacity: 1;
}
.svg:hover #svg-guideline-g-01 {
  transform: scale(1) translateX(0);
}
.svg:hover #svg-guideline-g-02 {
  opacity: 0;
}
/*Guideline css end*/
/*Lilly Product css begin*/
#svg-lilly-product .cls-1 {
  fill: #c4c4c4;
}
#svg-lilly-product .cls-2 {
  fill: #d42d27;
}
#svg-lilly-product .cls-3 {
  fill: #fff;
}
#svg-lilly-product .cls-4 {
  fill: #4d4d4e;
}
#svg-lilly-product .cls-5 {
  fill: #7d605b;
}
#svg-lilly-product .cls-6 {
  fill: #4d4d4d;
}
#svg-lilly-product-g-01 {
  transform: translateY(-15px);
}
#svg-lilly-product-g-02 {
  transform: translate(0, -15px) rotate(0);
}
#svg-lilly-product-g-03 {
  opacity: 0;
  transform: translateX(0) scale(0);
}
.svg:hover #svg-lilly-product-g-01 {
  transform: translateY(0px);
}
.svg:hover #svg-lilly-product-g-02 {
  transform: translate(-5px, -5px) rotate(-45deg);
}
.svg:hover #svg-lilly-product-g-03 {
  opacity: 1;
  transform: translateX(20px) scale(1);
}
/*Lilly Product css end*/
/*Corporate Site css begin*/
#svg-corporate-site .cls-1 {
  fill: #dcdbdb;
}
#svg-corporate-site .cls-2 {
  fill: #9cceee;
}
#svg-corporate-site .cls-3,
#svg-corporate-site .cls-4 {
  fill: none;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}
#svg-corporate-site .cls-3 {
  stroke: #9cceee;
}
#svg-corporate-site .cls-4 {
  stroke: #f26a50;
}
#svg-corporate-site-g-01 {
  transform: translate(0, 0) rotate(0) scale(1);
}
#svg-corporate-site-g-02 {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}
#svg-corporate-site-g-03 {
  transform: translate(0, 0) rotate(0);
  opacity: 0;
}
.svg:hover #svg-corporate-site-g-01 {
  transform: translate(-5px, 20px) rotate(-30deg) scale(0.8);
}
.svg:hover #svg-corporate-site-g-02 {
  transform: translate(-5px, 15px) rotate(-20deg);
  opacity: 0;
}
.svg:hover #svg-corporate-site-g-03 {
  transform: translate(-5px, 15px) rotate(-20deg);
  opacity: 1;
}
/*Corporate Site css end*/
/*Product Information css begin*/
#svg-product-information .cls-1 {
  fill: #f26a50;
}
#svg-product-information .cls-2 {
  fill: #c4c4c4;
}
#svg-product-information .cls-3 {
  fill: #9cceee;
}
#svg-product-information .cls-4 {
  fill: #7d605b;
}
#svg-product-information .cls-5 {
  fill: #fff;
}
#svg-product-information .cls-6 {
  fill: #d42d27;
  transition: all 0.2s linear;
}
#svg-product-information-g-01 {
  transform: translateY(0) scale(1);
}
#svg-product-information-g-02 {
  transform: translateY(-5px) scale(0.8);
}
#svg-product-information-g-02 .cls-6 {
  fill: #653E2D;
}
.svg:hover #svg-product-information-g-01 {
  transform: translateY(10px) scale(0.9);
}
.svg:hover #svg-product-information-g-02 {
  transform: translateY(0) scale(1);
}
.svg:hover #svg-product-information-g-02 .cls-6 {
  fill: #d42d27;
}
/*Product Information css end*/
/*Digital Tool css bgin*/
#svg-digital-tool .cls-1 {
  fill: #ffd99c;
}
#svg-digital-tool .cls-2 {
  fill: #555;
}
#svg-digital-tool .cls-3 {
  fill: #414141;
}
#svg-digital-tool .cls-4 {
  fill: #5eb8e8;
}
#svg-digital-tool .cls-5 {
  fill: #fff;
}
#svg-digital-tool-g-01 .cls-4 {
  fill: #F66D43;
  transition: all 0.2s linear;
}
#svg-digital-tool-g-02 {
  opacity: 1;
}
#svg-digital-tool-g-03 {
  opacity: 0;
}
#svg-digital-tool-g-04 {
  transform: translate(0, 0) rotate(0);
}
.svg:hover #svg-digital-tool-g-01 .cls-4 {
  fill: #5eb8e8;
}
.svg:hover #svg-digital-tool-g-02 {
  opacity: 0;
}
.svg:hover #svg-digital-tool-g-03 {
  opacity: 1;
}
.svg:hover #svg-digital-tool-g-04 {
  transform: translate(-8px, 15px) rotate(-30deg);
}
/*Digital Tool css end*/

                                    
Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Bloc resizable with jquery

Bloc resizable with jquery

Carousel Bootstrap4

Carousel Bootstrap4

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Lightbox gallery style01

Lightbox gallery style01

Loading style book loader

Loading style book loader

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Tablet style code texte

Tablet style code texte

Timeline style02

Timeline style02

Timeline style04

Timeline style04

Timeline style07

Timeline style07