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

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Card Profile Style01

Card Profile Style01

Convertir une div en image

Convertir une div en image

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Image hover 07

Image hover 07

Image hover style border top

Image hover style border top

Input range slider HTML style02

Input range slider HTML style02

Vidéo background en html5 style02

Vidéo background en html5 style02

bootstrap4 tabs

bootstrap4 tabs

texte animate effects style 01

texte animate effects style 01