A Pen by Manfred Kempener

undefined

from https://github.com/jakearchibald/svgomg/issues/89

Thumbnail
This awesome code was written by mikeK, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mikeK ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Manfred Kempener</title>
  
  
  
  
  
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" class="uil-ellipsis" preserveAspectRatio="xMidYMid" viewBox="0 0 100 100">
  <circle cx="16" cy="50" r="15" fill="#403d3d">
    <animate id="anir11"  attributeName="r" begin="0s;anir14.end" dur="0.375s" from="0" to="15"/>
    <animate id="anir12"  attributeName="r" begin="anir11.end" dur="1.875s" from="15" to="15"/>
    <animate id="anir13"  attributeName="r" begin="anir12.end" dur="0.375s" from="15" to="0"/>
    <animate id="anir14" fill="freeze" attributeName="r" begin="anir13.end" dur="0.375s" from="0" to="0"/>
    <animate id="anix11" fill="freeze" attributeName="cx" begin="0s;anix18.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix12" fill="freeze" attributeName="cx" begin="anix11.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix13" fill="freeze" attributeName="cx" begin="anix12.end" dur="0.375s" from="16" to="50"/>
    <animate id="anix14" fill="freeze" attributeName="cx" begin="anix13.end" dur="0.375s" from="50" to="50"/>
    <animate id="anix15" fill="freeze" attributeName="cx" begin="anix14.end" dur="0.375s" from="50" to="84"/>
    <animate id="anix16" fill="freeze" attributeName="cx" begin="anix15.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix17" fill="freeze" attributeName="cx" begin="anix16.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix18" fill="freeze" attributeName="cx" begin="anix17.end" dur="0.375s" from="84" to="16"/>
  </circle>
  <circle cx="50" cy="50" r="15" fill="#808a80">
    <animate id="anir21" fill="freeze" attributeName="r" begin="0s;anir25.end" dur="1.5s" from="15" to="15"/>
    <animate id="anir22" fill="freeze" attributeName="r" begin="anir21.end" dur="0.375s" from="15" to="0"/>
    <animate id="anir23" fill="freeze" attributeName="r" begin="anir22.end" dur="0.375s" from="0" to="0"/>
    <animate id="anir24" fill="freeze" attributeName="r" begin="anir23.end" dur="0.375s" from="0" to="15"/>
    <animate id="anir25" fill="freeze" attributeName="r" begin="anir24.end" dur="0.375s" from="15" to="15"/>
    <animate id="anix21" fill="freeze" attributeName="cx" begin="0s;anix28.end" dur="0.375s" from="16" to="50"/>
    <animate id="anix22" fill="freeze" attributeName="cx" begin="anix21.end" dur="0.375s" from="50" to="50"/>
    <animate id="anix23" fill="freeze" attributeName="cx" begin="anix22.end" dur="0.375s" from="50" to="84"/>
    <animate id="anix24" fill="freeze" attributeName="cx" begin="anix23.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix25" fill="freeze" attributeName="cx" begin="anix24.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix26" fill="freeze" attributeName="cx" begin="anix25.end" dur="0.375s" from="84" to="16"/>
    <animate id="anix27" fill="freeze" attributeName="cx" begin="anix26.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix28" fill="freeze" attributeName="cx" begin="anix27.end" dur="0.375s" from="16" to="16"/>
  </circle>
  <circle cx="84" cy="50" r="15" fill="#403d3d">
    <animate id="anir31" fill="freeze" attributeName="r" begin="0s;anir35.end" dur="0.75s" from="15" to="15"/>
    <animate id="anir32" fill="freeze" attributeName="r" begin="anir31.end" dur="0.375s" from="15" to="0"/>
    <animate id="anir33" fill="freeze" attributeName="r" begin="anir32.end" dur="0.375s" from="0" to="0"/>
    <animate id="anir34" fill="freeze" attributeName="r" begin="anir33.end" dur="0.375s" from="0" to="15"/>
    <animate id="anir35" fill="freeze" attributeName="r" begin="anir34.end" dur="1.125s" from="15" to="15"/>
    <animate id="anix31" fill="freeze" attributeName="cx" begin="0s;anix38.end" dur="0.375s" from="50" to="84"/>
    <animate id="anix32" fill="freeze" attributeName="cx" begin="anix31.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix33" fill="freeze" attributeName="cx" begin="anix32.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix34" fill="freeze" attributeName="cx" begin="anix33.end" dur="0.375s" from="84" to="16"/>
    <animate id="anix35" fill="freeze" attributeName="cx" begin="anix34.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix36" fill="freeze" attributeName="cx" begin="anix35.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix37" fill="freeze" attributeName="cx" begin="anix36.end" dur="0.375s" from="16" to="50"/>
    <animate id="anix38" fill="freeze" attributeName="cx" begin="anix37.end" dur="0.375s" from="50" to="50"/>
  </circle>
  <circle cx="84" cy="50" r="15" fill="#808a80">
    <animate id="anir41" fill="freeze" attributeName="r" begin="0s;anir44.end" dur="0.375s" from="15" to="0"/>
    <animate id="anir42" fill="freeze" attributeName="r" begin="anir41.end" dur="0.375s" from="0" to="0"/>
    <animate id="anir43" fill="freeze" attributeName="r" begin="anir42.end" dur="0.375s" from="0" to="15"/>
    <animate id="anir44" fill="freeze" attributeName="r" begin="anir43.end" dur="1.875s" from="15" to="15"/>
    <animate id="anix41" fill="freeze" attributeName="cx" begin="0s;anix48.end" dur="0.375s" from="84" to="84"/>
    <animate id="anix42" fill="freeze" attributeName="cx" begin="anix41.end" dur="0.375s" from="84" to="16"/>
    <animate id="anix43" fill="freeze" attributeName="cx" begin="anix42.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix44" fill="freeze" attributeName="cx" begin="anix43.end" dur="0.375s" from="16" to="16"/>
    <animate id="anix45" fill="freeze" attributeName="cx" begin="anix44.end" dur="0.375s" from="16" to="50"/>
    <animate id="anix46" fill="freeze" attributeName="cx" begin="anix45.end" dur="0.375s" from="50" to="50"/>
    <animate id="anix47" fill="freeze" attributeName="cx" begin="anix46.end" dur="0.375s" from="50" to="84"/>
    <animate id="anix48" fill="freeze" attributeName="cx" begin="anix47.end" dur="0.375s" from="84" to="84"/>
  </circle>
</svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/a-pen-by-manfred-kempener-BrOeOp */
// https://github.com/jakearchibald/svgomg/issues/89

Comments