× 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
99,99 €Disque dur externe portable Western Digital Elements USB 3.0 5 To à 99,99 €
Valable jusqu'au 02 Décembre

La Fnac propose actuellement le disque dur externe portable Western Digital Elements USB 3.0 5 To à 99,99 €. On le trouve habituellement à partir de 119 €. Ce disque dur qui tient dans la main est silencieux, ne chauffe pas et dispose d'une connectique USB 3.0 qui vous offrira des transferts rapides. Il est compatible USB 2.0. Si vous préférez, il est également disponible chez Darty au même prix et Amazon semble également s'être aligné sur le prix. Une très bonne affaire.


> Voir l'offre
3,19 €Jeu PC Among Us à 3,19 €
Valable jusqu'au 30 Novembre

Steam fait une promotion sur le jeu dont tout le monde parle : Among Us qui passe à 3,19 € sur PC. Jouez de 4 à 10 personnes en ligne ou en local. Préparez votre vaisseau au départ mais attention, un ou plusieurs joueurs sont des imposteurs et feront tout pour tuer tout le monde. Notez que s'il n'offre pas le même confort de jeu en mobilité, il est gratuit sous iOS et Android.


> Voir l'offre
Gratuit3 mois d'abonnement à Amazon Music Unlimited gratuits
Valable jusqu'au 15 Janvier

Amazon vous permet d'essayer son service de streaming musical pendant 3 mois gratuitement. Avec Amazon Music Unlimited, accédez à plus de 50 millions de titres, sans publicité et en illimité sur tous vos appareils : smartphone, tablette, PC/Mac, Fire, Alexa. Vous avez même la possibilité de télécharger vos playlists pour des écoutes hors connexion. A la fin de ces 3 mois, vous pourrez basculer vers l'offre payante à 9,99 € / mois ou bien arrêter sans frais le service. A noter l'existence d'une offre famille à 14,99 € / mois qui permet jusqu'à 6 utilisateurs d'écouter leur musique à tout moment et sur leurs appareils préférés. Vous pouvez annuler l'abonnement à tout moment. L'offre se termine ce soir. Ne tardez pas !


> 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