× Aidez la recherche contre le COVID-19 avec votre ordi ! Rejoignez l'équipe PC Astuces Folding@home
 > Tous les forums > Forum des Webmasters
 Petite leçon de CSS et d'images vectorielles (SVG)Sujet résolu
Ajouter un message à la discussion
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]
zoulouman
  Posté le 23/10/2020 @ 15:40 
Aller en bas de la page 
Astucien

Attention, là ça décoiffe !
Je vous laisse copier/coller pour créer un fichier HTML, puis tester et admirer.

Ce n'est que du CSS et du vectoriel (SVG) ! Le tout encapsulé dans un fichier HTML et rien d'autre !

<!doctype html>
<html lang="fr">
<head>

    <meta charset="UTF-8">
    <title>Covid-19</title>

    <style>
    html,
            body {
                margin: 0px;
                padding: 0px;
                width: 100vw;
            height: 100vh;
            }

            body {
                display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background: #080e1e;
                background: radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
                background: -webkit-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
              background: -moz-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);
              background: -o-radial-gradient(circle, rgb(65, 102, 202) -60%, rgba(0, 0, 0, 0.8901960784313725) 75%);            
            }

            #covid-19 { 
                width: 220px; 
                height: 220px; 
                animation-name: float;
                animation-duration: 1s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            .shadow {
                width: 100px;
              height: 10px;
              background: #1c1c1c;          
              border-radius: 70%;
              opacity: 1;
              filter: blur(3px);
              animation-name: animate-shadow;
                animation-duration: 1s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            g.evelope {
                animation-name: rotate;
                transform-origin: 100px 105px;
                animation-duration: 2s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            ellipse.left-eyeball,
            ellipse.right-eyeball {
                animation-name: moveEyeBalls;
                transform-origin: 50% 50%;
                animation-duration: 3s;
                animation-direction: normal;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            .left-eyebrows,
            .right-eyebrows {
                animation-name: moveEyebrows;
                transform-origin: 50% 50%;
                animation-duration: 1s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            .mouth {
                animation-name: moveMouth;
                transform-origin: 50% 50%;
                animation-duration: 2s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out;
            }

            @keyframes moveMouth {
                
                0% {
                    transform: rotate(0deg);
                } 100% {
                    transform: rotate(12deg);
                }

            }

            @keyframes moveEyebrows {
                
                0% {
                    transform: translateY(0px);
                } 100% {
                    transform: translateY(-1px);
                }

            }

            @keyframes moveEyeBalls {
                
                0% {
                    transform: translateX(0px);
                } 25% {
                    transform: translateX(2px);
                } 50%{
                    transform: translateX(-2px);
                } 75%{
                    transform: translateX(-2px);
                } 100% {
                    transform: translateX(0px);
                }

            }

            @keyframes float {
                
                0% {
                    transform: translateY(0px);
                } 100% {
                    transform: translateY(20px);
                }
            }

            @keyframes animate-shadow {
                
                0% {
                    transform: scale(1);
                } 100% {
                    transform: scale(1.2);
                }
            }

            @keyframes rotate {
                
                0% {
                    transform: rotate(0deg);
                } 50% {
                    transform: rotate(4deg);
                } 100% {
                    transform: rotate(0deg);
                }
                
            }
    </style>
</head>

<body translate="no">
    <svg id="covid-19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">

        <g id="body">
            
                <g class="evelope">
                    <g>
                        
                            <rect x="103.956" y="57.628" transform="matrix(-0.2015 0.9795 -0.9795 -0.2015 186.9409 -34.9744)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175"></rect>
                        
                            <ellipse transform="matrix(0.9784 0.2068 -0.2068 0.9784 13.3685 -21.4106)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="109.074" cy="53.226" rx="3.557" ry="1.779"></ellipse>
                    </g>
                    <g>
                        
                            <rect x="120.357" y="64.516" transform="matrix(-0.6423 0.7665 -0.7665 -0.6423 254.1387 12.601)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175"></rect>
                        
                            <ellipse transform="matrix(0.7629 0.6465 -0.6465 0.7629 70.0389 -68.1447)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="127.921" cy="61.411" rx="3.557" ry="1.778"></ellipse>
                    </g>
                    <g>
                        
                            <rect x="134.108" y="77.591" transform="matrix(-0.8209 0.5711 -0.5711 -0.8209 295.9926 64.5149)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175"></rect>
                        
                            <ellipse transform="matrix(0.5666 0.824 -0.824 0.5666 124.1331 -84.7547)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="142.637" cy="75.628" rx="3.558" ry="1.779"></ellipse>
                    </g>
                    <g>
                        
                            <rect x="140.875" y="97.239" transform="matrix(-0.9835 0.1808 -0.1808 -0.9835 304.683 168.8848)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M150.863,101.02c-0.967,0.17-2.029-1.256-2.374-3.192
                            c-0.346-1.935,0.16-3.643,1.125-3.814c0.97-0.174,2.032,1.256,2.377,3.191C152.335,99.138,151.829,100.848,150.863,101.02z"></path>
                    </g>
                    <g>
                        
                            <rect x="139.409" y="117.607" transform="matrix(-0.958 -0.2867 0.2867 -0.958 246.3248 273.4525)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M147.492,123.921c-0.938-0.287-1.235-2.041-0.662-3.922
                            s1.8-3.172,2.737-2.885c0.942,0.285,1.239,2.043,0.665,3.924C149.659,122.917,148.431,124.208,147.492,123.921z"></path>
                    </g>
                    <g>
                        
                            <rect x="129.26" y="135.677" transform="matrix(-0.8199 -0.5726 0.5726 -0.8199 163.7922 325.0609)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M135.486,143.081c-0.8-0.568-0.533-2.326,0.602-3.932
                            c1.134-1.605,2.703-2.447,3.504-1.881c0.805,0.566,0.536,2.328-0.6,3.934C137.859,142.806,136.288,143.646,135.486,143.081z"></path>
                    </g>
                    <g>
                        
                            <rect x="109.059" y="148.468" transform="matrix(-0.4482 -0.8939 0.8939 -0.4482 29.7178 317.4522)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M111.98,156.278c-0.432-0.881,0.64-2.299,2.402-3.17
                            c1.761-0.873,3.542-0.865,3.977,0.014c0.438,0.883-0.638,2.303-2.401,3.174C114.198,157.167,112.417,157.157,111.98,156.278z"></path>
                    </g>
                    <g>
                        
                            <rect x="87.73" y="149.962" transform="matrix(0.062 -0.9981 0.9981 0.062 -64.927 233.0152)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M87.387,156.435c0.07-0.98,1.708-1.666,3.67-1.533
                            c1.96,0.131,3.496,1.033,3.431,2.012c-0.066,0.982-1.71,1.67-3.672,1.535C88.856,158.317,87.322,157.413,87.387,156.435z"></path>
                    </g>
                    <g>
                        
                            <rect x="69.332" y="143.727" transform="matrix(0.6362 -0.7716 0.7716 0.6362 -85.1344 109.094)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M66.61,146.757c0.631-0.75,2.361-0.346,3.871,0.914
                            c1.509,1.258,2.223,2.891,1.596,3.645c-0.63,0.756-2.365,0.348-3.875-0.914C66.694,149.146,65.983,147.513,66.61,146.757z"></path>
                    </g>
                    <g>
                        
                            <rect x="55.152" y="129.772" transform="matrix(0.8659 -0.5001 0.5001 0.8659 -57.5493 47.0135)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.173"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M52.162,130.407c0.854-0.482,2.333,0.502,3.306,2.211
                            c0.973,1.705,1.071,3.484,0.219,3.971c-0.854,0.486-2.337-0.502-3.31-2.211C51.404,132.671,51.31,130.896,52.162,130.407z"></path>
                    </g>
                    <g>
                        
                            <rect x="48.102" y="110.994" transform="matrix(0.9957 -0.0924 0.0924 0.9957 -10.1365 5.2739)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M45.919,108.843c0.978-0.082,1.91,1.432,2.079,3.391
                            c0.171,1.957-0.484,3.613-1.461,3.699c-0.979,0.086-1.913-1.434-2.082-3.393C44.285,110.583,44.941,108.931,45.919,108.843z"></path>
                    </g>
                    <g>
                        
                            <rect x="49.077" y="89.789" transform="matrix(0.9512 0.3087 -0.3087 0.9512 30.6372 -11.8766)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.174"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M48.66,85.549c0.93,0.312,1.188,2.07,0.568,3.936
                            c-0.617,1.865-1.873,3.129-2.804,2.82c-0.934-0.309-1.191-2.072-0.571-3.938C46.47,86.501,47.727,85.244,48.66,85.549z"></path>
                    </g>
                    <g>
                        
                            <rect x="61.05" y="70.169" transform="matrix(0.7939 0.608 -0.608 0.7939 56.6806 -24.7286)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.175"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M62.648,64.837c0.772,0.604,0.429,2.348-0.776,3.9
                            c-1.203,1.553-2.809,2.325-3.583,1.725c-0.777-0.603-0.432-2.351,0.774-3.904C60.266,65.006,61.87,64.238,62.648,64.837z"></path>
                    </g>
                    <g>
                        
                            <rect x="78.954" y="59.388" transform="matrix(0.3117 0.9502 -0.9502 0.3117 114.4062 -36.9789)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.176"></rect>
                        <path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M84.56,53.952c0.296,0.936-0.973,2.18-2.844,2.78
                            c-1.87,0.602-3.631,0.331-3.932-0.602c-0.301-0.937,0.973-2.184,2.845-2.783C82.5,52.746,84.257,53.017,84.56,53.952z"></path>
                    </g>
                </g>

                <g class="head">
                    
                    <ellipse class="circle" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="98.358" cy="104.591" rx="43.131" ry="42.906"></ellipse>
                    
                    <g class="face">

                        <ellipse class="left-eye" fill="#FFFFFF" cx="87.792" cy="109.901" rx="7.745" ry="6.936"></ellipse>

                        <ellipse class="left-eyeball" fill="#1E1E1E" cx="87.759" cy="108.753" rx="3.092" ry="2.938"></ellipse>

                        <path class="left-eyebrows" fill="#1E1E1E" d="M68.29,101.559c0,0,0.179-0.059,0.516-0.17c0.321-0.084,0.815-0.262,1.388-0.393
                                c0.582-0.15,1.263-0.295,2.018-0.434c0.754-0.139,1.574-0.25,2.439-0.35c0.86-0.086,1.762-0.145,2.679-0.176
                                c0.913-0.016,1.846-0.021,2.764,0.033c0.468,0.004,0.914,0.051,1.371,0.094c0.455,0.021,0.905,0.063,1.345,0.121
                                c0.874,0.094,1.732,0.24,2.516,0.357c0.805,0.152,1.502,0.273,2.156,0.449c0.151,0.031,0.292,0.045,0.441,0.088
                                c0.151,0.051,0.299,0.102,0.411,0.127l0.375,0.115c0.104,0.025,0.195,0.08,0.301,0.125c0.25,0.123,0.303,0.141,0.515,0.298
                                c0.091,0.1,0.279,0.223,0.378,0.342c0.293,0.277,0.605,0.457,1.13,0.49c0.249-0.012,0.479-0.086,0.781-0.148
                                c0.27-0.111,0.504-0.264,0.793-0.406c0.526-0.324,0.986-0.747,1.425-1.106c0.371-0.387,0.757-0.725,0.98-0.965
                                c0.257-0.248,0.394-0.378,0.394-0.378l0.799-0.031c0,0,0.018,0.552,0.047,1.517c-0.036,0.482-0.055,1.081-0.178,1.759
                                c-0.08,0.338-0.156,0.701-0.257,1.082c-0.15,0.367-0.308,0.756-0.5,1.15c-0.458,0.748-1.039,1.564-1.9,2.133
                                c-0.397,0.338-0.883,0.529-1.353,0.785c-0.493,0.172-1,0.391-1.53,0.475c-1.055,0.266-2.151,0.293-3.252,0.307
                                c-1.095-0.043-2.204-0.127-3.285-0.318c-2.167-0.383-4.262-0.99-6.182-1.654c-1.923-0.66-3.653-1.432-5.126-2.1
                                c-1.473-0.672-2.651-1.33-3.481-1.777c-0.822-0.467-1.292-0.734-1.292-0.734L68.29,101.559z"></path>                       
                        
                        <ellipse class="right-eye" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.3992 15.699)" fill="#FFFFFF" cx="109.983" cy="107.439" rx="9.661" ry="8.517"></ellipse>                     
                        
                        <ellipse class="right-eyeball" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.0728 15.5171)" fill="#1E1E1E" cx="108.849" cy="104.968" rx="4.333" ry="4.238"></ellipse>

                        <path class="right-eyebrows" fill="#1E1E1E" d="M97.595,97.325c0,0,0.046,0.017,0.131,0.034c0.082,0.019,0.219,0.037,0.369,0.081
                                c0.298,0.085,0.786,0.168,1.308,0.285c0.534,0.109,1.15,0.228,1.797,0.321c0.643,0.099,1.324,0.162,1.975,0.177
                                c0.643,0.029,1.271-0.035,1.798-0.139c0.525-0.086,0.962-0.274,1.308-0.442c0.175-0.09,0.335-0.18,0.481-0.242
                                c0.162-0.117,0.297-0.166,0.464-0.255c0.308-0.123,0.687-0.276,1.143-0.411c0.465-0.161,1.013-0.287,1.641-0.482
                                c0.302-0.115,0.63-0.168,0.979-0.285c0.341-0.12,0.683-0.188,1.06-0.303c0.372-0.103,0.723-0.235,1.122-0.303
                                c0.392-0.101,0.754-0.24,1.16-0.317c0.406-0.073,0.781-0.193,1.182-0.286c0.405-0.083,0.783-0.188,1.184-0.255
                                c0.787-0.154,1.538-0.316,2.261-0.414c0.728-0.093,1.369-0.203,1.946-0.252c0.559-0.067,1.07-0.065,1.391-0.093
                                c0.333-0.016,0.531-0.009,0.531-0.009l0.605,0.523c0,0-0.32,0.391-0.88,1.075c-0.285,0.338-0.609,0.769-1.029,1.221
                                c-0.415,0.457-0.865,0.992-1.409,1.526c-0.558,0.521-1.116,1.132-1.792,1.695c-0.332,0.289-0.672,0.585-1.021,0.888
                                c-0.37,0.279-0.748,0.566-1.133,0.855c-0.789,0.556-1.622,1.114-2.53,1.591c-0.894,0.5-1.864,0.914-2.866,1.254
                                c-1.015,0.301-2.067,0.523-3.129,0.555c-1.056,0.063-2.113-0.053-3.092-0.311c-0.985-0.242-1.889-0.648-2.666-1.135
                                c-0.78-0.482-1.467-1.01-2.031-1.561c-1.148-1.087-1.854-2.196-2.318-2.969c-0.457-0.774-0.658-1.273-0.658-1.273
                                L97.595,97.325z"></path>

                        <path class="mouth" fill="#1E1E1E" d="M78.64,122.741c0,0,0.521-0.338,1.492-0.803c0.97-0.469,2.397-1.064,4.192-1.561
                                c1.792-0.48,3.963-0.875,6.32-0.809c1.177,0.008,2.394,0.145,3.617,0.371c1.223,0.23,2.442,0.588,3.629,1.041
                                c0.597,0.215,1.167,0.496,1.75,0.746c0.554,0.305,1.129,0.572,1.666,0.895c1.085,0.629,2.084,1.357,3,2.117
                                c0.904,0.777,1.692,1.613,2.399,2.438c0.668,0.852,1.316,1.643,1.803,2.449c0.527,0.777,0.952,1.523,1.296,2.201
                                c0.359,0.668,0.648,1.26,0.842,1.771c0.428,1,0.636,1.582,0.636,1.582l-0.176,0.096c0,0-0.41-0.471-1.063-1.316
                                c-0.325-0.422-0.738-0.922-1.213-1.486c-0.231-0.287-0.478-0.59-0.736-0.91c-0.272-0.309-0.56-0.631-0.858-0.969
                                c-0.572-0.691-1.271-1.365-1.958-2.115c-0.375-0.344-0.749-0.707-1.127-1.08c-0.386-0.365-0.799-0.713-1.207-1.084
                                c-0.813-0.74-1.71-1.436-2.644-2.113c-0.468-0.34-0.973-0.627-1.466-0.943c-0.519-0.266-1.027-0.564-1.563-0.803
                                c-1.069-0.486-2.181-0.887-3.307-1.172c-1.127-0.281-2.262-0.482-3.374-0.557c-1.111-0.102-2.194-0.078-3.221-0.021
                                c-1.029,0.049-1.996,0.201-2.886,0.355c-1.778,0.336-3.226,0.805-4.215,1.188c-0.994,0.379-1.527,0.666-1.527,0.666
                                L78.64,122.741z"></path>                        

                    </g>

                    <g class="spots">
                        <g class="top-spots" opacity="0.9">

                                    <path fill="#1E1E1E" d="M89.372,78.952c2.58,0,2.58-4,0-4S86.792,78.952,89.372,78.952L89.372,78.952z"></path>

                                    <path fill="#1E1E1E" d="M96.038,72.619c2.579,0,2.579-4,0-4C93.458,68.619,93.458,72.619,96.038,72.619L96.038,72.619z"></path>
                            
                                    <path fill="#1E1E1E" d="M107.371,79.952c2.579,0,2.579-4,0-4S104.792,79.952,107.371,79.952L107.371,79.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M102.871,71.286c1.29,0,1.29-2,0-2S101.581,71.286,102.871,71.286L102.871,71.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M119.038,76.452c0.645,0,0.645-1,0-1S118.394,76.452,119.038,76.452L119.038,76.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M116.205,81.286c0.645,0,0.645-1,0-1S115.561,81.286,116.205,81.286L116.205,81.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M82.038,83.286c0.645,0,0.645-1,0-1S81.393,83.286,82.038,83.286L82.038,83.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M70.205,83.619c0.645,0,0.645-1,0-1S69.56,83.619,70.205,83.619L70.205,83.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M82.205,73.619c0.645,0,0.645-1,0-1S81.56,73.619,82.205,73.619L82.205,73.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M75.372,76.286c0.645,0,0.645-1,0-1S74.727,76.286,75.372,76.286L75.372,76.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M89.372,67.286c0.645,0,0.645-1,0-1S88.727,67.286,89.372,67.286L89.372,67.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M87.705,71.619c0.645,0,0.645-1,0-1S87.06,71.619,87.705,71.619L87.705,71.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M73.705,87.619c1.935,0,1.935-3,0-3S71.77,87.619,73.705,87.619L73.705,87.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M74.872,92.952c0.645,0,0.645-1,0-1S74.227,92.952,74.872,92.952L74.872,92.952z"></path>
                                    <path fill="#1E1E1E" d="M92.038,90.452c0.645,0,0.645-1,0-1S91.393,90.452,92.038,90.452L92.038,90.452z"></path>

                                    <path fill="#1E1E1E" d="M85.705,88.119c0.645,0,0.645-1,0-1S85.06,88.119,85.705,88.119L85.705,88.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M85.705,89.786c2.58,0,2.58-4,0-4S83.125,89.786,85.705,89.786L85.705,89.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M97.704,82.786c3.225,0,3.225-5,0-5C94.48,77.786,94.48,82.786,97.704,82.786L97.704,82.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M97.704,82.786c3.225,0,3.225-5,0-5C94.48,77.786,94.48,82.786,97.704,82.786L97.704,82.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M97.704,83.119c3.225,0,3.225-5,0-5C94.48,78.119,94.48,83.119,97.704,83.119L97.704,83.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M97.704,83.119c3.225,0,3.225-5,0-5C94.48,78.119,94.48,83.119,97.704,83.119L97.704,83.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M101.205,88.119c1.29,0,1.29-2,0-2S99.915,88.119,101.205,88.119L101.205,88.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M108.705,86.619c1.29,0,1.29-2,0-2S107.415,86.619,108.705,86.619L108.705,86.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M103.371,94.286c0.645,0,0.645-1,0-1S102.727,94.286,103.371,94.286L103.371,94.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M113.371,90.119c0.645,0,0.645-1,0-1S112.727,90.119,113.371,90.119L113.371,90.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M114.371,68.286c0.645,0,0.645-1,0-1S113.727,68.286,114.371,68.286L114.371,68.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M104.038,66.119c0.645,0,0.645-1,0-1S103.394,66.119,104.038,66.119L104.038,66.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M124.371,76.286c2.579,0,2.579-4,0-4S121.792,76.286,124.371,76.286L124.371,76.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M124.371,76.286c2.579,0,2.579-4,0-4S121.792,76.286,124.371,76.286L124.371,76.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M113.038,74.952c0.645,0,0.645-1,0-1S112.394,74.952,113.038,74.952L113.038,74.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M110.205,70.452c0.645,0,0.645-1,0-1S109.561,70.452,110.205,70.452L110.205,70.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M100.705,76.452c0.645,0,0.645-1,0-1S100.061,76.452,100.705,76.452L100.705,76.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M96.038,63.619c0.646,0,0.646-1,0-1C95.393,62.619,95.393,63.619,96.038,63.619L96.038,63.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M92.038,73.619c0.645,0,0.645-1,0-1S91.393,73.619,92.038,73.619L92.038,73.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M89.872,84.452c0.645,0,0.645-1,0-1S89.227,84.452,89.872,84.452L89.872,84.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M82.372,78.286c0.645,0,0.645-1,0-1S81.727,78.286,82.372,78.286L82.372,78.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M75.372,80.619c0.645,0,0.645-1,0-1S74.727,80.619,75.372,80.619L75.372,80.619z"></path>
                                
                                    <path fill="#1E1E1E" d="M78.538,83.952c0.645,0,0.645-1,0-1S77.893,83.952,78.538,83.952L78.538,83.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M83.038,92.452c0.645,0,0.645-1,0-1S82.393,92.452,83.038,92.452L83.038,92.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M88.372,95.286c0.645,0,0.645-1,0-1S87.727,95.286,88.372,95.286L88.372,95.286z"></path>
                                
                                    <path fill="#1E1E1E" d="M96.538,94.453c0.646,0,0.646-1,0-1S95.893,94.453,96.538,94.453L96.538,94.453z"></path>
                                
                                    <path fill="#1E1E1E" d="M95.038,86.786c0.646,0,0.646-1,0-1C94.393,85.786,94.393,86.786,95.038,86.786L95.038,86.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M120.205,88.452c1.935,0,1.935-3,0-3S118.271,88.452,120.205,88.452L120.205,88.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M126.872,84.452c1.935,0,1.935-3,0-3S124.938,84.452,126.872,84.452L126.872,84.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M129.205,87.786c0.645,0,0.645-1,0-1S128.561,87.786,129.205,87.786L129.205,87.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M129.872,93.12c0.645,0,0.645-1,0-1S129.228,93.12,129.872,93.12L129.872,93.12z"></path>
                                
                                    <path fill="#1E1E1E" d="M133.538,91.786c0.645,0,0.645-1,0-1S132.894,91.786,133.538,91.786L133.538,91.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M69.538,96.786c0.645,0,0.645-1,0-1S68.893,96.786,69.538,96.786L69.538,96.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M57.872,103.118c0.645,0,0.645-1,0-1S57.227,103.118,57.872,103.118L57.872,103.118z"></path>
                                
                                    <path fill="#1E1E1E" d="M61.205,98.119c1.935,0,1.935-3,0-3S59.271,98.119,61.205,98.119L61.205,98.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M61.538,87.952c2.58,0,2.58-4,0-4S58.958,87.952,61.538,87.952L61.538,87.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M65.872,92.452c0.645,0,0.645-1,0-1S65.227,92.452,65.872,92.452L65.872,92.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M66.538,84.452c0.645,0,0.645-1,0-1S65.893,84.452,66.538,84.452L66.538,84.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M67.872,77.119c0.645,0,0.645-1,0-1S67.227,77.119,67.872,77.119L67.872,77.119z"></path>
                                
                                    <path fill="#1E1E1E" d="M76.538,71.786c0.645,0,0.645-1,0-1S75.893,71.786,76.538,71.786L76.538,71.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M82.205,66.786c0.645,0,0.645-1,0-1S81.56,66.786,82.205,66.786L82.205,66.786z"></path>
                            
                                    <path fill="#1E1E1E" d="M82.205,66.786c0.645,0,0.645-1,0-1S81.56,66.786,82.205,66.786L82.205,66.786z"></path>
                                
                                    <path fill="#1E1E1E" d="M138.205,94.453c0.645,0,0.645-1,0-1S137.561,94.453,138.205,94.453L138.205,94.453z"></path>
                                
                        </g>
                        <g class="down-spots" opacity="0.3">
                            
                                    <path fill="#1E1E1E" d="M64.788,121.952c2.58,0,2.58-4,0-4S62.208,121.952,64.788,121.952L64.788,121.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M67.288,132.702c2.58,0,2.58-4,0-4S64.708,132.702,67.288,132.702L67.288,132.702z"></path>
                                
                                    <path fill="#1E1E1E" d="M83.288,140.452c2.58,0,2.58-4,0-4S80.708,140.452,83.288,140.452L83.288,140.452z"></path>

                                    <path fill="#1E1E1E" d="M92.038,138.452c2.58,0,2.58-4,0-4S89.458,138.452,92.038,138.452L92.038,138.452z"></path>
                            
                                    <path fill="#1E1E1E" d="M95.538,144.702c2.58,0,2.58-4,0-4C92.958,140.702,92.958,144.702,95.538,144.702L95.538,144.702z"></path>

                                    <path fill="#1E1E1E" d="M113.788,142.702c2.579,0,2.579-4,0-4S111.209,142.702,113.788,142.702L113.788,142.702z"></path>

                                    <path fill="#1E1E1E" d="M117.038,134.452c2.579,0,2.579-4,0-4S114.459,134.452,117.038,134.452L117.038,134.452z"></path>

                                    <path fill="#1E1E1E" d="M127.788,125.202c2.579,0,2.579-4,0-4S125.209,125.202,127.788,125.202L127.788,125.202z"></path>

                                    <path fill="#1E1E1E" d="M127.288,134.952c2.579,0,2.579-4,0-4S124.709,134.952,127.288,134.952L127.288,134.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M136.538,112.952c2.579,0,2.579-4,0-4S133.959,112.952,136.538,112.952L136.538,112.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M125.538,113.952c2.579,0,2.579-4,0-4S122.959,113.952,125.538,113.952L125.538,113.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M102.288,134.452c1.29,0,1.29-2,0-2S100.998,134.452,102.288,134.452L102.288,134.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M102.288,139.452c0.645,0,0.645-1,0-1S101.644,139.452,102.288,139.452L102.288,139.452z"></path>
                                
                                    <path fill="#1E1E1E" d="M88.788,143.202c0.645,0,0.645-1,0-1S88.143,143.202,88.788,143.202L88.788,143.202z"></path>

                                    <path fill="#1E1E1E" d="M107.038,145.202c0.645,0,0.645-1,0-1S106.394,145.202,107.038,145.202L107.038,145.202z"></path>
                                
                                    <path fill="#1E1E1E" d="M105.288,135.452c0.645,0,0.645-1,0-1S104.644,135.452,105.288,135.452L105.288,135.452z"></path>
                            
                                    <path fill="#1E1E1E" d="M119.288,138.952c0.645,0,0.645-1,0-1S118.644,138.952,119.288,138.952L119.288,138.952z"></path>

                                    <path fill="#1E1E1E" d="M122.788,128.702c0.645,0,0.645-1,0-1S122.144,128.702,122.788,128.702L122.788,128.702z"></path>

                                    <path fill="#1E1E1E" d="M118.288,122.952c0.645,0,0.645-1,0-1S117.644,122.952,118.288,122.952L118.288,122.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M130.288,117.702c0.645,0,0.645-1,0-1S129.644,117.702,130.288,117.702L130.288,117.702z"></path>

                                    <path fill="#1E1E1E" d="M134.038,122.702c0.645,0,0.645-1,0-1S133.394,122.702,134.038,122.702L134.038,122.702z"></path>
                                
                                    <path fill="#1E1E1E" d="M136.288,117.952c0.645,0,0.645-1,0-1S135.644,117.952,136.288,117.952L136.288,117.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M77.788,133.952c0.645,0,0.645-1,0-1S77.143,133.952,77.788,133.952L77.788,133.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M71.788,136.202c0.645,0,0.645-1,0-1S71.143,136.202,71.788,136.202L71.788,136.202z"></path>
                                
                                    <path fill="#1E1E1E" d="M74.538,129.952c1.29,0,1.29-2,0-2S73.249,129.952,74.538,129.952L74.538,129.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M70.788,125.202c1.29,0,1.29-2,0-2S69.499,125.202,70.788,125.202L70.788,125.202z"></path>
                                
                                    <path fill="#1E1E1E" d="M88.288,131.702c1.29,0,1.29-2,0-2S86.999,131.702,88.288,131.702L88.288,131.702z"></path>

                                    <path fill="#1E1E1E" d="M95.038,132.452c1.935,0,1.935-3,0-3S93.104,132.452,95.038,132.452L95.038,132.452z"></path>

                                    <path fill="#1E1E1E" d="M59.538,114.952c1.29,0,1.29-2,0-2S58.249,114.952,59.538,114.952L59.538,114.952z"></path>
                                
                                    <path fill="#1E1E1E" d="M60.538,122.202c0.645,0,0.645-1,0-1S59.893,122.202,60.538,122.202L60.538,122.202z"></path>

                                    <path fill="#1E1E1E" d="M64.288,125.952c0.645,0,0.645-1,0-1S63.643,125.952,64.288,125.952L64.288,125.952z"></path>
                                
                        </g>
                    </g>

                </g>
            
        </g>
    </svg>

    <div class="shadow"></div>
</body></html>

Ca vous donnera une vilaine bestiole comme ceci :



Modifié par zoulouman le 23/10/2020 15:43
Publicité
Dreamer
 Posté le 23/10/2020 à 15:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Et en plus, il bouge !! top !!

zoulouman
 Posté le 23/10/2020 à 15:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Ou alors en plus simple :

<!doctype html>
<html lang="fr">
<head>

    <meta charset="UTF-8">
    <title>Covid-19</title>

</head>

<body>
<svg id="covid-19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">	<style>#covid-19 { 			width: 220px; 			height: 220px; 			animation-name: float;			animation-duration: 1s;			animation-direction: alternate;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		.shadow {			width: 100px;		  height: 10px;		  background: #1c1c1c;		    		  border-radius: 70%;		  opacity: 1;		  filter: blur(3px);		  animation-name: animate-shadow;			animation-duration: 1s;			animation-direction: alternate;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		g.evelope {			animation-name: rotate;			transform-origin: 100px 105px;			animation-duration: 2s;			animation-direction: alternate;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		ellipse.left-eyeball,		ellipse.right-eyeball {			animation-name: moveEyeBalls;			transform-origin: 50% 50%;			animation-duration: 3s;			animation-direction: normal;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		.left-eyebrows,		.right-eyebrows {			animation-name: moveEyebrows;			transform-origin: 50% 50%;			animation-duration: 1s;			animation-direction: alternate;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		.mouth {			animation-name: moveMouth;			transform-origin: 50% 50%;			animation-duration: 2s;			animation-direction: alternate;			animation-iteration-count: infinite;			animation-timing-function: ease-in-out;		}		@keyframes moveMouth {						0% {				transform: rotate(0deg);			} 100% {				transform: rotate(12deg);			}		}		@keyframes moveEyebrows {						0% {				transform: translateY(0px);			} 100% {				transform: translateY(-1px);			}		}		@keyframes moveEyeBalls {						0% {				transform: translateX(0px);			} 25% {				transform: translateX(2px);			} 50%{				transform: translateX(-2px);			} 75%{				transform: translateX(-2px);			} 100% {				transform: translateX(0px);			}		}		@keyframes float {						0% {				transform: translateY(0px);			} 100% {				transform: translateY(20px);			}		}		@keyframes animate-shadow {						0% {				transform: scale(1);			} 100% {				transform: scale(1.2);			}		}		@keyframes rotate {						0% {				transform: rotate(0deg);			} 50% {				transform: rotate(4deg);			} 100% {				transform: rotate(0deg);			}					}</style>		<g id="body">							<g class="evelope">					<g>													<rect x="103.956" y="57.628" transform="matrix(-0.2015 0.9795 -0.9795 -0.2015 186.9409 -34.9744)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175"/>													<ellipse transform="matrix(0.9784 0.2068 -0.2068 0.9784 13.3685 -21.4106)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="109.074" cy="53.226" rx="3.557" ry="1.779"/>					</g>					<g>													<rect x="120.357" y="64.516" transform="matrix(-0.6423 0.7665 -0.7665 -0.6423 254.1387 12.601)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.543" height="2.175"/>													<ellipse transform="matrix(0.7629 0.6465 -0.6465 0.7629 70.0389 -68.1447)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="127.921" cy="61.411" rx="3.557" ry="1.778"/>					</g>					<g>													<rect x="134.108" y="77.591" transform="matrix(-0.8209 0.5711 -0.5711 -0.8209 295.9926 64.5149)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175"/>													<ellipse transform="matrix(0.5666 0.824 -0.824 0.5666 124.1331 -84.7547)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="142.637" cy="75.628" rx="3.558" ry="1.779"/>					</g>					<g>													<rect x="140.875" y="97.239" transform="matrix(-0.9835 0.1808 -0.1808 -0.9835 304.683 168.8848)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.541" height="2.175"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M150.863,101.02c-0.967,0.17-2.029-1.256-2.374-3.192							c-0.346-1.935,0.16-3.643,1.125-3.814c0.97-0.174,2.032,1.256,2.377,3.191C152.335,99.138,151.829,100.848,150.863,101.02z"/>					</g>					<g>													<rect x="139.409" y="117.607" transform="matrix(-0.958 -0.2867 0.2867 -0.958 246.3248 273.4525)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M147.492,123.921c-0.938-0.287-1.235-2.041-0.662-3.922							s1.8-3.172,2.737-2.885c0.942,0.285,1.239,2.043,0.665,3.924C149.659,122.917,148.431,124.208,147.492,123.921z"/>					</g>					<g>													<rect x="129.26" y="135.677" transform="matrix(-0.8199 -0.5726 0.5726 -0.8199 163.7922 325.0609)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.175"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M135.486,143.081c-0.8-0.568-0.533-2.326,0.602-3.932							c1.134-1.605,2.703-2.447,3.504-1.881c0.805,0.566,0.536,2.328-0.6,3.934C137.859,142.806,136.288,143.646,135.486,143.081z"/>					</g>					<g>													<rect x="109.059" y="148.468" transform="matrix(-0.4482 -0.8939 0.8939 -0.4482 29.7178 317.4522)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M111.98,156.278c-0.432-0.881,0.64-2.299,2.402-3.17							c1.761-0.873,3.542-0.865,3.977,0.014c0.438,0.883-0.638,2.303-2.401,3.174C114.198,157.167,112.417,157.157,111.98,156.278z"/>					</g>					<g>													<rect x="87.73" y="149.962" transform="matrix(0.062 -0.9981 0.9981 0.062 -64.927 233.0152)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.542" height="2.174"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M87.387,156.435c0.07-0.98,1.708-1.666,3.67-1.533							c1.96,0.131,3.496,1.033,3.431,2.012c-0.066,0.982-1.71,1.67-3.672,1.535C88.856,158.317,87.322,157.413,87.387,156.435z"/>					</g>					<g>													<rect x="69.332" y="143.727" transform="matrix(0.6362 -0.7716 0.7716 0.6362 -85.1344 109.094)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M66.61,146.757c0.631-0.75,2.361-0.346,3.871,0.914							c1.509,1.258,2.223,2.891,1.596,3.645c-0.63,0.756-2.365,0.348-3.875-0.914C66.694,149.146,65.983,147.513,66.61,146.757z"/>					</g>					<g>													<rect x="55.152" y="129.772" transform="matrix(0.8659 -0.5001 0.5001 0.8659 -57.5493 47.0135)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.173"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M52.162,130.407c0.854-0.482,2.333,0.502,3.306,2.211							c0.973,1.705,1.071,3.484,0.219,3.971c-0.854,0.486-2.337-0.502-3.31-2.211C51.404,132.671,51.31,130.896,52.162,130.407z"/>					</g>					<g>													<rect x="48.102" y="110.994" transform="matrix(0.9957 -0.0924 0.0924 0.9957 -10.1365 5.2739)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.173"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M45.919,108.843c0.978-0.082,1.91,1.432,2.079,3.391							c0.171,1.957-0.484,3.613-1.461,3.699c-0.979,0.086-1.913-1.434-2.082-3.393C44.285,110.583,44.941,108.931,45.919,108.843z"/>					</g>					<g>													<rect x="49.077" y="89.789" transform="matrix(0.9512 0.3087 -0.3087 0.9512 30.6372 -11.8766)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.174"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M48.66,85.549c0.93,0.312,1.188,2.07,0.568,3.936							c-0.617,1.865-1.873,3.129-2.804,2.82c-0.934-0.309-1.191-2.072-0.571-3.938C46.47,86.501,47.727,85.244,48.66,85.549z"/>					</g>					<g>													<rect x="61.05" y="70.169" transform="matrix(0.7939 0.608 -0.608 0.7939 56.6806 -24.7286)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.544" height="2.175"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M62.648,64.837c0.772,0.604,0.429,2.348-0.776,3.9							c-1.203,1.553-2.809,2.325-3.583,1.725c-0.777-0.603-0.432-2.351,0.774-3.904C60.266,65.006,61.87,64.238,62.648,64.837z"/>					</g>					<g>													<rect x="78.954" y="59.388" transform="matrix(0.3117 0.9502 -0.9502 0.3117 114.4062 -36.9789)" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" width="7.545" height="2.176"/>						<path fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" d="M84.56,53.952c0.296,0.936-0.973,2.18-2.844,2.78							c-1.87,0.602-3.631,0.331-3.932-0.602c-0.301-0.937,0.973-2.184,2.845-2.783C82.5,52.746,84.257,53.017,84.56,53.952z"/>					</g>				</g>				<g class="head">										<ellipse class="circle" fill="#FF5555" stroke="#1E1E1E" stroke-miterlimit="10" cx="98.358" cy="104.591" rx="43.131" ry="42.906"/>										<g class="face">						<ellipse class="left-eye" fill="#FFFFFF" cx="87.792" cy="109.901" rx="7.745" ry="6.936"/>						<ellipse class="left-eyeball" fill="#1E1E1E" cx="87.759" cy="108.753" rx="3.092" ry="2.938"/>						<path class="left-eyebrows" fill="#1E1E1E" d="M68.29,101.559c0,0,0.179-0.059,0.516-0.17c0.321-0.084,0.815-0.262,1.388-0.393								c0.582-0.15,1.263-0.295,2.018-0.434c0.754-0.139,1.574-0.25,2.439-0.35c0.86-0.086,1.762-0.145,2.679-0.176								c0.913-0.016,1.846-0.021,2.764,0.033c0.468,0.004,0.914,0.051,1.371,0.094c0.455,0.021,0.905,0.063,1.345,0.121								c0.874,0.094,1.732,0.24,2.516,0.357c0.805,0.152,1.502,0.273,2.156,0.449c0.151,0.031,0.292,0.045,0.441,0.088								c0.151,0.051,0.299,0.102,0.411,0.127l0.375,0.115c0.104,0.025,0.195,0.08,0.301,0.125c0.25,0.123,0.303,0.141,0.515,0.298								c0.091,0.1,0.279,0.223,0.378,0.342c0.293,0.277,0.605,0.457,1.13,0.49c0.249-0.012,0.479-0.086,0.781-0.148								c0.27-0.111,0.504-0.264,0.793-0.406c0.526-0.324,0.986-0.747,1.425-1.106c0.371-0.387,0.757-0.725,0.98-0.965								c0.257-0.248,0.394-0.378,0.394-0.378l0.799-0.031c0,0,0.018,0.552,0.047,1.517c-0.036,0.482-0.055,1.081-0.178,1.759								c-0.08,0.338-0.156,0.701-0.257,1.082c-0.15,0.367-0.308,0.756-0.5,1.15c-0.458,0.748-1.039,1.564-1.9,2.133								c-0.397,0.338-0.883,0.529-1.353,0.785c-0.493,0.172-1,0.391-1.53,0.475c-1.055,0.266-2.151,0.293-3.252,0.307								c-1.095-0.043-2.204-0.127-3.285-0.318c-2.167-0.383-4.262-0.99-6.182-1.654c-1.923-0.66-3.653-1.432-5.126-2.1								c-1.473-0.672-2.651-1.33-3.481-1.777c-0.822-0.467-1.292-0.734-1.292-0.734L68.29,101.559z"/>																		<ellipse class="right-eye" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.3992 15.699)" fill="#FFFFFF" cx="109.983" cy="107.439" rx="9.661" ry="8.517"/>																		<ellipse class="right-eyeball" transform="matrix(0.991 -0.1339 0.1339 0.991 -13.0728 15.5171)" fill="#1E1E1E" cx="108.849" cy="104.968" rx="4.333" ry="4.238"/>						<path class="right-eyebrows" fill="#1E1E1E" d="M97.595,97.325c0,0,0.046,0.017,0.131,0.034c0.082,0.019,0.219,0.037,0.369,0.081								c0.298,0.085,0.786,0.168,1.308,0.285c0.534,0.109,1.15,0.228,1.797,0.321c0.643,0.099,1.324,0.162,1.975,0.177								c0.643,0.029,1.271-0.035,1.798-0.139c0.525-0.086,0.962-0.274,1.308-0.442c0.175-0.09,0.335-0.18,0.481-0.242								c0.162-0.117,0.297-0.166,0.464-0.255c0.308-0.123,0.687-0.276,1.143-0.411c0.465-0.161,1.013-0.287,1.641-0.482								c0.302-0.115,0.63-0.168,0.979-0.285c0.341-0.12,0.683-0.188,1.06-0.303c0.372-0.103,0.723-0.235,1.122-0.303								c0.392-0.101,0.754-0.24,1.16-0.317c0.406-0.073,0.781-0.193,1.182-0.286c0.405-0.083,0.783-0.188,1.184-0.255								c0.787-0.154,1.538-0.316,2.261-0.414c0.728-0.093,1.369-0.203,1.946-0.252c0.559-0.067,1.07-0.065,1.391-0.093								c0.333-0.016,0.531-0.009,0.531-0.009l0.605,0.523c0,0-0.32,0.391-0.88,1.075c-0.285,0.338-0.609,0.769-1.029,1.221								c-0.415,0.457-0.865,0.992-1.409,1.526c-0.558,0.521-1.116,1.132-1.792,1.695c-0.332,0.289-0.672,0.585-1.021,0.888								c-0.37,0.279-0.748,0.566-1.133,0.855c-0.789,0.556-1.622,1.114-2.53,1.591c-0.894,0.5-1.864,0.914-2.866,1.254								c-1.015,0.301-2.067,0.523-3.129,0.555c-1.056,0.063-2.113-0.053-3.092-0.311c-0.985-0.242-1.889-0.648-2.666-1.135								c-0.78-0.482-1.467-1.01-2.031-1.561c-1.148-1.087-1.854-2.196-2.318-2.969c-0.457-0.774-0.658-1.273-0.658-1.273								L97.595,97.325z"/>						<path class="mouth" fill="#1E1E1E" d="M78.64,122.741c0,0,0.521-0.338,1.492-0.803c0.97-0.469,2.397-1.064,4.192-1.561								c1.792-0.48,3.963-0.875,6.32-0.809c1.177,0.008,2.394,0.145,3.617,0.371c1.223,0.23,2.442,0.588,3.629,1.041								c0.597,0.215,1.167,0.496,1.75,0.746c0.554,0.305,1.129,0.572,1.666,0.895c1.085,0.629,2.084,1.357,3,2.117								c0.904,0.777,1.692,1.613,2.399,2.438c0.668,0.852,1.316,1.643,1.803,2.449c0.527,0.777,0.952,1.523,1.296,2.201								c0.359,0.668,0.648,1.26,0.842,1.771c0.428,1,0.636,1.582,0.636,1.582l-0.176,0.096c0,0-0.41-0.471-1.063-1.316								c-0.325-0.422-0.738-0.922-1.213-1.486c-0.231-0.287-0.478-0.59-0.736-0.91c-0.272-0.309-0.56-0.631-0.858-0.969								c-0.572-0.691-1.271-1.365-1.958-2.115c-0.375-0.344-0.749-0.707-1.127-1.08c-0.386-0.365-0.799-0.713-1.207-1.084								c-0.813-0.74-1.71-1.436-2.644-2.113c-0.468-0.34-0.973-0.627-1.466-0.943c-0.519-0.266-1.027-0.564-1.563-0.803								c-1.069-0.486-2.181-0.887-3.307-1.172c-1.127-0.281-2.262-0.482-3.374-0.557c-1.111-0.102-2.194-0.078-3.221-0.021								c-1.029,0.049-1.996,0.201-2.886,0.355c-1.778,0.336-3.226,0.805-4.215,1.188c-0.994,0.379-1.527,0.666-1.527,0.666								L78.64,122.741z"/>											</g>					<g class="spots">						<g class="top-spots" opacity="0.9">									<path fill="#1E1E1E" d="M89.372,78.952c2.58,0,2.58-4,0-4S86.792,78.952,89.372,78.952L89.372,78.952z"/>									<path fill="#1E1E1E" d="M96.038,72.619c2.579,0,2.579-4,0-4C93.458,68.619,93.458,72.619,96.038,72.619L96.038,72.619z"/>																<path fill="#1E1E1E" d="M107.371,79.952c2.579,0,2.579-4,0-4S104.792,79.952,107.371,79.952L107.371,79.952z"/>																	<path fill="#1E1E1E" d="M102.871,71.286c1.29,0,1.29-2,0-2S101.581,71.286,102.871,71.286L102.871,71.286z"/>																	<path fill="#1E1E1E" d="M119.038,76.452c0.645,0,0.645-1,0-1S118.394,76.452,119.038,76.452L119.038,76.452z"/>																	<path fill="#1E1E1E" d="M116.205,81.286c0.645,0,0.645-1,0-1S115.561,81.286,116.205,81.286L116.205,81.286z"/>																	<path fill="#1E1E1E" d="M82.038,83.286c0.645,0,0.645-1,0-1S81.393,83.286,82.038,83.286L82.038,83.286z"/>																	<path fill="#1E1E1E" d="M70.205,83.619c0.645,0,0.645-1,0-1S69.56,83.619,70.205,83.619L70.205,83.619z"/>																	<path fill="#1E1E1E" d="M82.205,73.619c0.645,0,0.645-1,0-1S81.56,73.619,82.205,73.619L82.205,73.619z"/>																	<path fill="#1E1E1E" d="M75.372,76.286c0.645,0,0.645-1,0-1S74.727,76.286,75.372,76.286L75.372,76.286z"/>																	<path fill="#1E1E1E" d="M89.372,67.286c0.645,0,0.645-1,0-1S88.727,67.286,89.372,67.286L89.372,67.286z"/>																	<path fill="#1E1E1E" d="M87.705,71.619c0.645,0,0.645-1,0-1S87.06,71.619,87.705,71.619L87.705,71.619z"/>																	<path fill="#1E1E1E" d="M73.705,87.619c1.935,0,1.935-3,0-3S71.77,87.619,73.705,87.619L73.705,87.619z"/>																	<path fill="#1E1E1E" d="M74.872,92.952c0.645,0,0.645-1,0-1S74.227,92.952,74.872,92.952L74.872,92.952z"/>									<path fill="#1E1E1E" d="M92.038,90.452c0.645,0,0.645-1,0-1S91.393,90.452,92.038,90.452L92.038,90.452z"/>									<path fill="#1E1E1E" d="M85.705,88.119c0.645,0,0.645-1,0-1S85.06,88.119,85.705,88.119L85.705,88.119z"/>																	<path fill="#1E1E1E" d="M85.705,89.786c2.58,0,2.58-4,0-4S83.125,89.786,85.705,89.786L85.705,89.786z"/>																	<path fill="#1E1E1E" d="M97.704,82.786c3.225,0,3.225-5,0-5C94.48,77.786,94.48,82.786,97.704,82.786L97.704,82.786z"/>																	<path fill="#1E1E1E" d="M97.704,82.786c3.225,0,3.225-5,0-5C94.48,77.786,94.48,82.786,97.704,82.786L97.704,82.786z"/>																	<path fill="#1E1E1E" d="M97.704,83.119c3.225,0,3.225-5,0-5C94.48,78.119,94.48,83.119,97.704,83.119L97.704,83.119z"/>																	<path fill="#1E1E1E" d="M97.704,83.119c3.225,0,3.225-5,0-5C94.48,78.119,94.48,83.119,97.704,83.119L97.704,83.119z"/>																	<path fill="#1E1E1E" d="M101.205,88.119c1.29,0,1.29-2,0-2S99.915,88.119,101.205,88.119L101.205,88.119z"/>																	<path fill="#1E1E1E" d="M108.705,86.619c1.29,0,1.29-2,0-2S107.415,86.619,108.705,86.619L108.705,86.619z"/>																	<path fill="#1E1E1E" d="M103.371,94.286c0.645,0,0.645-1,0-1S102.727,94.286,103.371,94.286L103.371,94.286z"/>																	<path fill="#1E1E1E" d="M113.371,90.119c0.645,0,0.645-1,0-1S112.727,90.119,113.371,90.119L113.371,90.119z"/>																	<path fill="#1E1E1E" d="M114.371,68.286c0.645,0,0.645-1,0-1S113.727,68.286,114.371,68.286L114.371,68.286z"/>																	<path fill="#1E1E1E" d="M104.038,66.119c0.645,0,0.645-1,0-1S103.394,66.119,104.038,66.119L104.038,66.119z"/>																	<path fill="#1E1E1E" d="M124.371,76.286c2.579,0,2.579-4,0-4S121.792,76.286,124.371,76.286L124.371,76.286z"/>																	<path fill="#1E1E1E" d="M124.371,76.286c2.579,0,2.579-4,0-4S121.792,76.286,124.371,76.286L124.371,76.286z"/>																	<path fill="#1E1E1E" d="M113.038,74.952c0.645,0,0.645-1,0-1S112.394,74.952,113.038,74.952L113.038,74.952z"/>																	<path fill="#1E1E1E" d="M110.205,70.452c0.645,0,0.645-1,0-1S109.561,70.452,110.205,70.452L110.205,70.452z"/>																	<path fill="#1E1E1E" d="M100.705,76.452c0.645,0,0.645-1,0-1S100.061,76.452,100.705,76.452L100.705,76.452z"/>																	<path fill="#1E1E1E" d="M96.038,63.619c0.646,0,0.646-1,0-1C95.393,62.619,95.393,63.619,96.038,63.619L96.038,63.619z"/>																	<path fill="#1E1E1E" d="M92.038,73.619c0.645,0,0.645-1,0-1S91.393,73.619,92.038,73.619L92.038,73.619z"/>																	<path fill="#1E1E1E" d="M89.872,84.452c0.645,0,0.645-1,0-1S89.227,84.452,89.872,84.452L89.872,84.452z"/>																	<path fill="#1E1E1E" d="M82.372,78.286c0.645,0,0.645-1,0-1S81.727,78.286,82.372,78.286L82.372,78.286z"/>																	<path fill="#1E1E1E" d="M75.372,80.619c0.645,0,0.645-1,0-1S74.727,80.619,75.372,80.619L75.372,80.619z"/>																	<path fill="#1E1E1E" d="M78.538,83.952c0.645,0,0.645-1,0-1S77.893,83.952,78.538,83.952L78.538,83.952z"/>																	<path fill="#1E1E1E" d="M83.038,92.452c0.645,0,0.645-1,0-1S82.393,92.452,83.038,92.452L83.038,92.452z"/>																	<path fill="#1E1E1E" d="M88.372,95.286c0.645,0,0.645-1,0-1S87.727,95.286,88.372,95.286L88.372,95.286z"/>																	<path fill="#1E1E1E" d="M96.538,94.453c0.646,0,0.646-1,0-1S95.893,94.453,96.538,94.453L96.538,94.453z"/>																	<path fill="#1E1E1E" d="M95.038,86.786c0.646,0,0.646-1,0-1C94.393,85.786,94.393,86.786,95.038,86.786L95.038,86.786z"/>																	<path fill="#1E1E1E" d="M120.205,88.452c1.935,0,1.935-3,0-3S118.271,88.452,120.205,88.452L120.205,88.452z"/>																	<path fill="#1E1E1E" d="M126.872,84.452c1.935,0,1.935-3,0-3S124.938,84.452,126.872,84.452L126.872,84.452z"/>																	<path fill="#1E1E1E" d="M129.205,87.786c0.645,0,0.645-1,0-1S128.561,87.786,129.205,87.786L129.205,87.786z"/>																	<path fill="#1E1E1E" d="M129.872,93.12c0.645,0,0.645-1,0-1S129.228,93.12,129.872,93.12L129.872,93.12z"/>																	<path fill="#1E1E1E" d="M133.538,91.786c0.645,0,0.645-1,0-1S132.894,91.786,133.538,91.786L133.538,91.786z"/>																	<path fill="#1E1E1E" d="M69.538,96.786c0.645,0,0.645-1,0-1S68.893,96.786,69.538,96.786L69.538,96.786z"/>																	<path fill="#1E1E1E" d="M57.872,103.118c0.645,0,0.645-1,0-1S57.227,103.118,57.872,103.118L57.872,103.118z"/>																	<path fill="#1E1E1E" d="M61.205,98.119c1.935,0,1.935-3,0-3S59.271,98.119,61.205,98.119L61.205,98.119z"/>																	<path fill="#1E1E1E" d="M61.538,87.952c2.58,0,2.58-4,0-4S58.958,87.952,61.538,87.952L61.538,87.952z"/>																	<path fill="#1E1E1E" d="M65.872,92.452c0.645,0,0.645-1,0-1S65.227,92.452,65.872,92.452L65.872,92.452z"/>																	<path fill="#1E1E1E" d="M66.538,84.452c0.645,0,0.645-1,0-1S65.893,84.452,66.538,84.452L66.538,84.452z"/>																	<path fill="#1E1E1E" d="M67.872,77.119c0.645,0,0.645-1,0-1S67.227,77.119,67.872,77.119L67.872,77.119z"/>																	<path fill="#1E1E1E" d="M76.538,71.786c0.645,0,0.645-1,0-1S75.893,71.786,76.538,71.786L76.538,71.786z"/>																	<path fill="#1E1E1E" d="M82.205,66.786c0.645,0,0.645-1,0-1S81.56,66.786,82.205,66.786L82.205,66.786z"/>																<path fill="#1E1E1E" d="M82.205,66.786c0.645,0,0.645-1,0-1S81.56,66.786,82.205,66.786L82.205,66.786z"/>																	<path fill="#1E1E1E" d="M138.205,94.453c0.645,0,0.645-1,0-1S137.561,94.453,138.205,94.453L138.205,94.453z"/>														</g>						<g class="down-spots" opacity="0.3">																<path fill="#1E1E1E" d="M64.788,121.952c2.58,0,2.58-4,0-4S62.208,121.952,64.788,121.952L64.788,121.952z"/>																	<path fill="#1E1E1E" d="M67.288,132.702c2.58,0,2.58-4,0-4S64.708,132.702,67.288,132.702L67.288,132.702z"/>																	<path fill="#1E1E1E" d="M83.288,140.452c2.58,0,2.58-4,0-4S80.708,140.452,83.288,140.452L83.288,140.452z"/>									<path fill="#1E1E1E" d="M92.038,138.452c2.58,0,2.58-4,0-4S89.458,138.452,92.038,138.452L92.038,138.452z"/>																<path fill="#1E1E1E" d="M95.538,144.702c2.58,0,2.58-4,0-4C92.958,140.702,92.958,144.702,95.538,144.702L95.538,144.702z"/>									<path fill="#1E1E1E" d="M113.788,142.702c2.579,0,2.579-4,0-4S111.209,142.702,113.788,142.702L113.788,142.702z"/>									<path fill="#1E1E1E" d="M117.038,134.452c2.579,0,2.579-4,0-4S114.459,134.452,117.038,134.452L117.038,134.452z"/>									<path fill="#1E1E1E" d="M127.788,125.202c2.579,0,2.579-4,0-4S125.209,125.202,127.788,125.202L127.788,125.202z"/>									<path fill="#1E1E1E" d="M127.288,134.952c2.579,0,2.579-4,0-4S124.709,134.952,127.288,134.952L127.288,134.952z"/>																	<path fill="#1E1E1E" d="M136.538,112.952c2.579,0,2.579-4,0-4S133.959,112.952,136.538,112.952L136.538,112.952z"/>																	<path fill="#1E1E1E" d="M125.538,113.952c2.579,0,2.579-4,0-4S122.959,113.952,125.538,113.952L125.538,113.952z"/>																	<path fill="#1E1E1E" d="M102.288,134.452c1.29,0,1.29-2,0-2S100.998,134.452,102.288,134.452L102.288,134.452z"/>																	<path fill="#1E1E1E" d="M102.288,139.452c0.645,0,0.645-1,0-1S101.644,139.452,102.288,139.452L102.288,139.452z"/>																	<path fill="#1E1E1E" d="M88.788,143.202c0.645,0,0.645-1,0-1S88.143,143.202,88.788,143.202L88.788,143.202z"/>									<path fill="#1E1E1E" d="M107.038,145.202c0.645,0,0.645-1,0-1S106.394,145.202,107.038,145.202L107.038,145.202z"/>																	<path fill="#1E1E1E" d="M105.288,135.452c0.645,0,0.645-1,0-1S104.644,135.452,105.288,135.452L105.288,135.452z"/>																<path fill="#1E1E1E" d="M119.288,138.952c0.645,0,0.645-1,0-1S118.644,138.952,119.288,138.952L119.288,138.952z"/>									<path fill="#1E1E1E" d="M122.788,128.702c0.645,0,0.645-1,0-1S122.144,128.702,122.788,128.702L122.788,128.702z"/>									<path fill="#1E1E1E" d="M118.288,122.952c0.645,0,0.645-1,0-1S117.644,122.952,118.288,122.952L118.288,122.952z"/>																	<path fill="#1E1E1E" d="M130.288,117.702c0.645,0,0.645-1,0-1S129.644,117.702,130.288,117.702L130.288,117.702z"/>									<path fill="#1E1E1E" d="M134.038,122.702c0.645,0,0.645-1,0-1S133.394,122.702,134.038,122.702L134.038,122.702z"/>																	<path fill="#1E1E1E" d="M136.288,117.952c0.645,0,0.645-1,0-1S135.644,117.952,136.288,117.952L136.288,117.952z"/>																	<path fill="#1E1E1E" d="M77.788,133.952c0.645,0,0.645-1,0-1S77.143,133.952,77.788,133.952L77.788,133.952z"/>																	<path fill="#1E1E1E" d="M71.788,136.202c0.645,0,0.645-1,0-1S71.143,136.202,71.788,136.202L71.788,136.202z"/>																	<path fill="#1E1E1E" d="M74.538,129.952c1.29,0,1.29-2,0-2S73.249,129.952,74.538,129.952L74.538,129.952z"/>																	<path fill="#1E1E1E" d="M70.788,125.202c1.29,0,1.29-2,0-2S69.499,125.202,70.788,125.202L70.788,125.202z"/>																	<path fill="#1E1E1E" d="M88.288,131.702c1.29,0,1.29-2,0-2S86.999,131.702,88.288,131.702L88.288,131.702z"/>									<path fill="#1E1E1E" d="M95.038,132.452c1.935,0,1.935-3,0-3S93.104,132.452,95.038,132.452L95.038,132.452z"/>									<path fill="#1E1E1E" d="M59.538,114.952c1.29,0,1.29-2,0-2S58.249,114.952,59.538,114.952L59.538,114.952z"/>																	<path fill="#1E1E1E" d="M60.538,122.202c0.645,0,0.645-1,0-1S59.893,122.202,60.538,122.202L60.538,122.202z"/>									<path fill="#1E1E1E" d="M64.288,125.952c0.645,0,0.645-1,0-1S63.643,125.952,64.288,125.952L64.288,125.952z"/>														</g>					</g>				</g>					</g>	</svg>	<div class="shadow"></div></body></html>
</body>
</html>

Et vous obtiendrez ceci : (toujours en mouvement)



Modifié par zoulouman le 23/10/2020 15:59
Dreamer
 Posté le 23/10/2020 à 18:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je préfère le premier .....

zoulouman
 Posté le 23/10/2020 à 18:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

L'avantage du second, c'est que tu le places où tu veux avec les couleurs que tu veux sur une de tes pages, tu l'emportes à la maison.

Le premier est livré "à manger sur place".

Jean-Pierre
 Posté le 23/10/2020 à 19:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Bravo tonton Zouzou !

C'est de toi ?

En attendant ça tire pas mal sur le CPU ce truc en suspension

Licette et JP

zoulouman
 Posté le 23/10/2020 à 21:28 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Non, c'est pas de moi.
J'ai juste arrangé le truc pour que ça tienne sur un seul fichier HTML.
Celui qui a fait ça est un véritable virtuose ! Je suis jaloux !

Jean-Pierre
 Posté le 23/10/2020 à 21:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je pense que c'est fait à l'aide de l'IA, car humainement presque impossible.

J'avais posté l'autre fois un topic illustrant la puissance incroyables du CSS, permettant entre autre de reproduire des oeuvres picturales.

JP (Licette est avec le marchant de sable)

zoulouman
 Posté le 23/10/2020 à 21:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Non, c'est pas de l'IA.
C'est du boulot de passionné qui a le temps.

Effectivement, aujourd'hui CSS est d'une puissance incroyable !
On lui fait faire ce que l'on veut. Il faut connaitre, c'est tout.

A côté d'un boulot comme ça, vos problèmes de responsive c'est des niaiseries !

Publicité
Jean-Pierre
 Posté le 23/10/2020 à 22:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Là tonton Zouzou, je demande un joker !

Faut avoir le temps oui mais à regarder plus attentivement le code, j'ai quelques doutes...

Ou alors si pas de l'IA, au moins un programme d'assistance idoine

zoulouman
 Posté le 23/10/2020 à 22:48 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bah oui, tu utilises un utilitaire qui va bien pour créer le gabarit SVG.
Mais c'est pas l'utilitaire qui va faire le reste.

cebe
 Posté le 24/10/2020 à 09:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour,

Ces petits trucs jolis et qui ne servent à rien... j'adore ! Je l'ai même mis dans ma page d'accueil...

Mais si cela déplaît pour des raisons de droits d'auteur, je suis prêt à l'enlever

Bonne fin de semaine à vous tous,

zoulouman
 Posté le 24/10/2020 à 09:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

On se demande ce que ça fout là sur ta page, mais pourquoi pas ?

Non, y a pas de souci de droit d'auteur. C'est du code du domaine public.

cebe
 Posté le 24/10/2020 à 09:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

zoulouman a écrit :

On se demande ce que ça fout là sur ta page, mais pourquoi pas ?

Non, y a pas de souci de droit d'auteur. C'est du code du domaine public.

Merci pour ta réponse : parfait si c'est du domaine public.

Quant à mettre ça sur ma page, bof ! faut bien utiliser ce que des neurones ont conçu ! Ça me rappelle les gadgets que nous fabriquions en bon vieux Basic. Cela ne sert à rien, sauf à utiliser des balises, montrer la maîtrise que l'on a. Et j'ai bien aimé ta première phrase, qui résume tout à fait la situation ! Bonne journée

Dreamer
 Posté le 24/10/2020 à 11:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

cebe a écrit :

Bonjour,

Ces petits trucs jolis et qui ne servent à rien... j'adore ! Je l'ai même mis dans ma page d'accueil...

Mais si cela déplaît pour des raisons de droits d'auteur, je suis prêt à l'enlever

Bonne fin de semaine à vous tous,

Tu peux y ajouter la liste des gestes barrière, ce serait peut-être plus cohérant !!

zoulouman
 Posté le 24/10/2020 à 11:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Exact !
Rien n'empêche de faire un lien avec la bestiole.

cebe
 Posté le 24/10/2020 à 11:58 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Pour les barrières, pas de souci, je me protège...

Publicité
Jean-Pierre
 Posté le 24/10/2020 à 12:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

cebe a écrit :

Bonjour,

Ces petits trucs jolis et qui ne servent à rien... j'adore ! Je l'ai même mis dans ma page d'accueil...

Oui c'est zoli.. mais as-tu remarqué le pompage in the CPU ?

zoulouman
 Posté le 24/10/2020 à 12:52 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Ca pompe pas tant que ça...
Qu'est-ce que tu as comme machine ? Si c'est une antiquité sous XP, c'est possible.

Pourtant, j'ai une antiquité aussi mais ça va tranquille (Intel Core I5 x4 3.20GHz, 8GB DDR3, WIN7 PRO)



Modifié par zoulouman le 24/10/2020 12:54
Jean-Pierre
 Posté le 24/10/2020 à 13:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Arrête de me pomper le CPU

Config Vista



Modifié par Jean-Pierre le 24/10/2020 13:32
zoulouman
 Posté le 24/10/2020 à 16:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Jette ta machine, y a que ça à faire.
Sur la mienne c'est à peine visible.

En plus, Vista est une sombre m#### !

Dreamer
 Posté le 24/10/2020 à 16:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Jean-Pierre a écrit :
cebe a écrit :

Bonjour,

Ces petits trucs jolis et qui ne servent à rien... j'adore ! Je l'ai même mis dans ma page d'accueil...

Oui c'est zoli.. mais as-tu remarqué le pompage in the CPU ?

CPU : Chère Péripatéticienne Universelle ??

cebe
 Posté le 24/10/2020 à 17:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

En fait, il y a un sursaut de CPU jusqu'à environ 17% à l'ouverture de ma page (celle où il y a ce bidule), idem lorsque j'ouvre le fichier html sur le disque dur. Ensuite, il y a une stabilisation aux alentours de 1/12 %. Cela est-ce dû au i7 ? à win 7 ?

Comme quoi, le moindre petit virus nous entraîne dans des digressions fantastiques !

Jean-Pierre
 Posté le 24/10/2020 à 17:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

zoulouman a écrit :

Jette ta machine, y a que ça à faire.
Sur la mienne c'est à peine visible.

En plus, Vista est une sombre m#### !

Tonton Zouzou, depuis un certain temps je pense migrer vers Windows 10 mais... ... !!!

J'avais lu que MS conserve TOUTES les données issues de ces nouvelles machine au MOINS 10 ans

Je n'ai rien à cacher, mais pas une raison de les montrer (comme dis ma voisine sur autres choses ).

Tandis que Vista lui est limité en "bavages".

De plus Vista est bien plus stable de Win98se, ma précédente bécane, na !

Jean-Pierre
 Posté le 24/10/2020 à 17:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

cebe a écrit :

En fait, il y a un sursaut de CPU jusqu'à environ 17% à l'ouverture de ma page (celle où il y a ce bidule), idem lorsque j'ouvre le fichier html sur le disque dur. Ensuite, il y a une stabilisation aux alentours de 1/12 %. Cela est-ce dû au i7 ? à win 7 ?

Comme quoi, le moindre petit virus nous entraîne dans des digressions fantastiques !

Cebe

Cela est simplement du à la puissance de ton ou tes CPU.

Licette et JP

cebe
 Posté le 24/10/2020 à 18:05 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Jean-Pierre a écrit :

Cebe

Cela est simplement du à la puissance de ton ou tes CPU.

Licette et JP

Bof, c'est un vieux Dell qui va sur ses vuit ans, fier de son win7 quasiment d'origine. Suis pas près d'en changer ! Apparemment c'était une bonne affaire à faire en 2013 (13 = porte-bonheur ? ). Salut Licette, n'oublie pas une bavouille à JP !

Publicité
Pages : [1] 2 ... Fin
Page 1 sur 2 [Fin]

Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !


Les bons plans du moment PC Astuces

Tous les Bons Plans
96,99 €Disque dur externe portable Seagate Expansion 5 To USB 3.0 à 96,99 €
Valable jusqu'au 01 Décembre

Amazon fait une promotion sur le disque dur externe portable Seagate Expansion d'une capacité de 5 To à 96,99 € livré alors qu'on le trouve ailleurs à partir de 120 €. Ce disque dur externe portable au format 2,5 pouces dispose d'une interface USB 3.0 compatible USB 2.0. Une excellente affaire pour ce disque dur qui offre des débits de 115 Mo/s. Il n'est pas soudé et est donc démontable si vous souhaitez le réutiliser ailleurs (console, NAS, PC).


> Voir l'offre
85,90 €Routeur TP-Link Archer MR600 4G / WiFi à 85,90 €
Valable jusqu'au 03 Décembre

Amazon fait une vente flash sur le routeur TP-Link Archer MR600 4G / WiFi qui passe à 85,90 € livré gratuitement alors qu'on le trouve ailleurs à partir de 118 €. Si vous êtes à proximité d'une zone blanche ADSL qui vous empêche de profiter d'une connexion Internet de qualité, ce routeur vous permettra d'accéder à Internet via un abonnement 4G. Mettez la carte SIM 4G dans le routeur et tous vos appareils pourront accéder à Internet rapidement via le WiFi AC 1200 Mbps ou Ethernet.


> Voir l'offre
119 €SSD externe portable Samsung T5 1 To à 119 €
Valable jusqu'au 03 Décembre

Amazon fait une promotion sur le SSD externe portable Samsung T5 1 To qui passe à 119 € livré gratuitement alors qu'on trouve le SSD à 149 € ailleurs. Le disque SSD Samsung T5 portable est plus de deux fois plus petit que la taille de votre smartphone et fournit jusqu'à 5 fois la vitesse d'un disque dur portable. Apprenez à travailler en quelques secondes, transférez de grandes bibliothèques de vidéos et de photos à des vitesses pouvant atteindre 550 Mo/s. Vous ne craindrez pas de l'emporter partout avec vous grâce à sa conception robuste et résistante avec un coeur de SSD résistant aux chocs. Grâce à son interface USB-C, vous pouvez le brancher sur votre ordinateur, mais également sur un smartphone ou une tablette. Un câble USB-C vers USB-A (prise USB classique) est fourni.


> Voir l'offre

Sujets relatifs
petite erreur de CSS [ Résolu]
Bootstrap et effets de bords en mes class CSS
Billet de blog illustré d'images cliquable et de carte ou page web ?
cadrer des images HTML & CSS
icone de navigation/css
Background deux images CSS
probleme de défilement d'images
Soucis de CSS pour un tableau.
Problème de CSS (ou pas)
Problème feuille de style .css
Plus de sujets relatifs à Petite leçon de CSS et d''images vectorielles (SVG)
 > Tous les forums > Forum Forum des Webmasters