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 dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Css Page grid layout

Css Page grid layout

Drag and drop or upload input file

Drag and drop or upload input file

Form login et créer un compte style01

Form login et créer un compte style01

Image hover 01

Image hover 01

Image hover 04

Image hover 04

Image hover 06

Image hover 06

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Radio button style

Radio button style

Vidéo background en html5 style01

Vidéo background en html5 style01