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*/

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Card Bootstrap4 01

Card Bootstrap4 01

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Cards box with title

Cards box with title

Image hover 07

Image hover 07

Input range slider HTML style03

Input range slider HTML style03

Scroll down button 01

Scroll down button 01

Timeline style05

Timeline style05

Titre section avec une anmation style01

Titre section avec une anmation style01

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Vidéo background en html5 style01

Vidéo background en html5 style01

input file récupérer le nom du fichier

input file récupérer le nom du fichier