Nude test animation-1

In this example below you will see how to do a Nude test animation-1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MikeLorenzo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MikeLorenzo ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Nude test animation-1</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <svg width="290px" height="364px" viewBox="55 37 290 364" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <ellipse id="path-1" cx="145" cy="100" rx="60" ry="76"></ellipse>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0.945098039   0 0 0 0 0.725490196   0 0 0 0 0.568627451  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
        </filter>
        <ellipse id="path-3" cx="60" cy="60" rx="60" ry="60"></ellipse>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0.890864158   0 0 0 0 0.507757803   0 0 0 0 0.23240011  0 0 0 0.369168931 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
        </filter>
        <circle id="path-5" cx="18.5" cy="18.5" r="8.5"></circle>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
            <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <ellipse id="path-7" cx="60" cy="60" rx="60" ry="60"></ellipse>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
            <feOffset dx="0" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
            <feColorMatrix values="0 0 0 0 0.890864158   0 0 0 0 0.507757803   0 0 0 0 0.23240011  0 0 0 0.369168931 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
        </filter>
        <circle id="path-9" cx="18.5" cy="18.5" r="8.5"></circle>
        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
            <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
    </defs>
  <!--  cappello dietro -->
    <g id="ragazza-1" stroke="none" stroke-width="1" fill="none" fill-rule="nonzero" transform="translate(55.000000, 37.000000)">
        <path d="M146,1 C131,-2 107.052579,1.08274644 82,20 C56.947421,38.9172536 66,73 72,98 C78,123 83.6713442,145.413723 82,160 C80.3286558,174.586277 75,200 53,209 C31,218 20,203 20,203 C20,203 28,225 36,230 C44,235 60,237 84,231 C108,225 123,219 146,219 C169,219 211,230 221,230 C231,230 261,236 276,215 C247,228 212,198.136132 212,172 C212,151 231.064602,132.106189 233,102 C234.935398,71.8938114 236.03341,54.5501143 221,32 C212.03341,18.5501143 192,12 192,12 C192,12 182,6 169,9 C158.021087,11.5335954 161,4 146,1 Z" id="capello-dietro" fill="#915300"></path>
      
       <!-- braccio destro --> 
      <path d="M0,241.497547 C0,220.788223 16.7847682,204 37.5,204 L37.5,204 C58.2106781,204 75,220.794793 75,241.502284 L75,363.043553 L37.5,363 L0,362.916852 L0,241.497547 Z" id="braccio-destro" fill="#FADAC3"></path> 
      
      <!-- brascio sinistro -->  <path d="M215,241.497547 C215,220.788223 231.784768,204 252.5,204 L252.5,204 C273.210678,204 290,220.794793 290,241.502284 L290,363.043553 L252.5,363 L215,362.916852 L215,241.497547 Z" id="brascio sinistro" fill="#FADAC3"></path> 
      
      <!-- collo -->
        <rect id="collo" fill="#FADAC3" x="119" y="133" width="52" height="68"></rect>
      
      <!-- faccia -->
      <g id="faccia">
            <use fill="#FADAC3" fill-rule="nonzero" xlink:href="#path-1"></use>
            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
        </g>
     
      <!-- corpo -->
        <path d="M145,363 C204.378733,363 263.301603,362.698749 263.301603,362.698749 C263.301603,362.698749 265,349.73422 265,341 C265,292.967716 280.615829,213.073331 232.93194,210.039542 C194.087272,207.56813 173.353946,189 145,189 C116.671471,189 84.3357747,208.351276 52.6528786,208.351276 C5.32955922,208.351276 25,292.935521 25,341 C25,349.940687 26.7784934,363.108496 26.7784934,363.108496 C26.7784934,363.108496 85.7842672,363 145,363 Z" id="corpo" fill="#FADAC3"></path>
      
      <!-- capello-1 -->  
      <path d="M136,17.342783 C123.701904,13.8290414 110,17.342783 101,26.342783 C93.0170343,34.3257487 93,40.2304557 93,58.2304557 C93,71.2126999 103,77.342783 99,86.342783 C94.4153883,96.6581594 86,100.342783 86,100.342783 C86,100.342783 94,100.342783 107,96.342783 C120,92.342783 126,89.342783 128,72.342783 C129.165007,62.4402213 120,57.342783 130,50.342783 C140,43.342783 152,44.342783 152,34.342783 C152,24.342783 144.701904,19.8290414 136,17.342783 Z" id="capello-1" fill="#925200"></path>
      
       <!-- capello-2 --> 
      <path d="M195,17.342783 C182.701904,13.8290414 169,17.342783 160,26.342783 C152.017034,34.3257487 152,40.2304557 152,58.2304557 C152,71.2126999 162,77.342783 158,86.342783 C153.415388,96.6581594 145,100.342783 145,100.342783 C145,100.342783 153,100.342783 166,96.342783 C179,92.342783 185,89.342783 187,72.342783 C188.165007,62.4402213 179,57.342783 189,50.342783 C199,43.342783 211,44.342783 211,34.342783 C211,24.342783 203.701904,19.8290414 195,17.342783 Z" id="capello-2" fill="#915300" transform="translate(178.000000, 58.171392) scale(-1, 1) translate(-178.000000, -58.171392) "></path> 
           
         
      <!-- bocca piccola -->
       <path d="M126.799652,139 C126.799652,139 131.611709,133 138,133 C144.388291,133 144.861938,136.667883 144.861938,136.667883 C144.861938,136.667883 145,133 152,133 C159,133 162.924225,139 162.924225,139 C162.924225,139 157.215998,148.312737 145,148.312737 C132.784002,148.312737 126.799652,139 126.799652,139 Z" id="bocca" fill="#FF6F6F"></path>
        
      <!-- bocca aperta -->
      <path d="M126.799652,139 C126.799652,139 131.611709,129 138,129 C144.388291,129 144.861938,132.667883 144.861938,132.667883 C144.861938,132.667883 145,129 152,129 C159,129 162.924225,139 162.924225,139 C162.924225,139 157.215998,153.312737 145,153.312737 C132.784002,153.312737 126.799652,139 126.799652,139 Z" id="bocca-aperta" fill="#FF6F6F"></path>
       
      <!-- bucco bocca -->
      <ellipse id="bb" fill="#5E1919" cx="145" cy="140" rx="8" ry="4"></ellipse>
    </g>
</svg>
<svg class="t1g" width="300px" height="300px" viewbox="400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- seno destro -->
     <g id="teta destra" transform="translate(0, 0)">
           <g id="t-1">
               <use fill="#FADAC3" fill-rule="nonzero" xlink:href="#path-3"></use>
               <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
           </g> 
           <g id="Pezon1-Grup" transform="translate(42.000000, 60.000000)">
               <circle id="aureola-pezon-1" fill="#FF6F6F" cx="18.5" cy="18.5" r="18.5"></circle>
               <g id="pezon-1">
                   <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
                   <use fill="#FF8585" fill-rule="evenodd" xlink:href="#path-5"></use> 
               </g>
           </g>
       </g>
</svg>

<svg class="t2g" width="300px" height="300px" viewbox="400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <!-- seno sinistro -->  
     <g id="t2g" transform="translate(0,0)">
           <g id="t-2">
               <use fill="#FADAC3" fill-rule="nonzero" xlink:href="#path-7"></use>
               <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
           </g>
           <g id="Pezon2-Grup" transform="translate(42.000000, 60.000000)">
               <circle id="aureola-pezon-2" fill="#FF6F6F" cx="18.5" cy="18.5" r="18.5"></circle>
               <g id="pezon-2">
                   <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
                   <use fill="#FF8585" fill-rule="evenodd" xlink:href="#path-9"></use>
               </g>
           </g>
       </g>
</svg>
<div class="text">
  Override the mouse over the breast. <br>
  Work in progress... 
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/MikeLorenzo/nude-test-animation-1-jBrvgE */
body {
  background-color: #D46A6A;
}

.text {
  text-align: center;
  border-style: 4px solid red;
  position: absolute;
  top: 450px;
  right: 0px;
  left: 0px;
  margin: auto;
}

/* Z-index */
#capello-dietro {
  z-index: 0;
}

#braccio-destro {
  z-index: 0;
}

#braccio-sinistro {
  z-index: 0;
}

#collo {
  z-index: 0;
}

#faccia {
  z-index: 1;
}

#corpo {
  z-index: 1;
}

#capello1 {
  z-index: 2;
}

#capello2 {
  z-index: 2;
}

#t1g {
  z-index: 5;
}

#t2g {
  z-index: 5;
}

#bocca {
  z-index: 2;
}

#bocca-aperta {
  z-index: 3;
}

#bb {
  z-index: 4;
}

svg {
  position: absolute;
  top: 50px;
  right: 0px;
  left: 0px;
  margin: auto;
}

svg.t1g {
  position: absolute;
  top: 290px;
  right: 0px;
  left: 65px;
  margin: auto;
}

svg.t2g {
  position: absolute;
  top: 290px;
  right: 0px;
  left: 290px;
  margin: auto;
}

/* bocca aperta */
ellipse#bb {
  opacity: 0.0;
}

path#bocca-aperta {
  opacity: 0.0;
}

/* hover */
svg.t1g:hover {
  position: absolute;
  z-index: 10;
  -webkit-animation: t1g 2s infinite;
          animation: t1g 2s infinite;
}

@-webkit-keyframes t1g {
  from {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes t1g {
  from {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
svg.t2g:hover {
  position: absolute;
  z-index: 10;
  -webkit-animation: t2g 2s infinite;
          animation: t2g 2s infinite;
}

@-webkit-keyframes t2g {
  from {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes t2g {
  from {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: translate(15, 15);
            transform: translate(15, 15);
    -ms-transform-origin: 20% 20%;
    -webkit-transform-origin: 20% 20%;
    transform: 20% 20%;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

Comments