SHARE
TWEET

Untitled

a guest May 21st, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <link rel="stylesheet" href="style-logo.css" />
  5.     </head>
  6.     <body>
  7.         <div class="container">
  8.                 <svg>
  9.                     <defs>  
  10.                         <linearGradient id="logo-gradient" x1="0%" y1="50%" x2="100%" y2="50%" >
  11.                             <stop offset="0%" stop-color="#ff0000">
  12.                                 <animate attributeName="stop-color" values="#ff0000; #ffbaba; ff0000" dur="2s" repeatCount="indefinite"></animate>
  13.                             </stop>
  14.                
  15.                             <stop offset="100%" stop-color="#ff0000">
  16.                                 <animate attributeName="stop-color" values="#ffbaba; #ff0000; ffbaba" dur="2s" repeatCount="indefinite"></animate>
  17.                             </stop>
  18.                         </linearGradient>
  19.                         </defs>
  20.                         <g
  21.                         inkscape:label="Layer 1"
  22.                         inkscape:groupmode="layer"
  23.                         id="layer1"
  24.                         transform="translate(0,0)">
  25.                        <ellipse
  26.                           style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.82638693;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
  27.                           id="path3806"
  28.                           cx="77.870033"
  29.                           cy="67.606384"
  30.                           rx="50.098793"
  31.                           ry="57.289078" />
  32.                        <path
  33.                        id="glasses"
  34.                           style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.16916132;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
  35.                           d="m 29.528823,40.540189 c 33.035764,4.256146 65.162154,4.256146 96.858617,0 9.19171,7.532604 14.05936,27.19135 0,45.190761 -31.696463,-14.72295 -63.822853,-14.72295 -96.858617,0 -13.693536,-17.999411 -8.8259,-36.566004 0,-45.190761 z"
  36.                           />
  37.                           <defs>  
  38.                                 <linearGradient id="binary-gradient" x1="0%" y1="50%" x2="100%" y2="50%" >
  39.                                     <stop offset="0%" stop-color="#ffffff">
  40.                                         <animate attributeName="stop-color" values="none; #ffffff; none" dur="2s" repeatCount="indefinite"></animate>
  41.                                     </stop>
  42.                        
  43.                                     <stop offset="100%" stop-color="#000000">
  44.                                         <animate attributeName="stop-color" values="#ffffff; none; ffffff" dur="2s" repeatCount="indefinite"></animate>
  45.                                     </stop>
  46.                                 </linearGradient>
  47.                                 </defs>
  48.                           <text
  49.        xml:space="preserve"
  50.        style="font-size:12px;line-height:1.25;letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458332"
  51.        x="34"
  52.        y="60"
  53.        id="text4646"><tspan
  54.          id="binary"
  55.          x="32"
  56.          y="64"
  57.          style="stroke-width:0.46458332">10011010010101</tspan></text>
  58.                      </g>
  59.                 </svg>
  60.         </div>
  61.        
  62.     </body>
  63. </html>
  64.  
  65.  
  66.  
  67. svg {
  68.     width: 150px;
  69.     height: 150px;
  70. }
  71. .container {
  72.     height: 100vh;
  73.     width: 100vw;
  74.     display: flex;
  75.     align-items: center;
  76.     justify-content: center;
  77. }
  78.  
  79. ellipse {
  80.     opacity: 10;
  81.     stroke-dasharray: 355 !important;
  82.     animation: stroke-circle .35s linear;
  83. }
  84. #binary {
  85.     font-family: Arial, Helvetica, sans-serif;
  86.     fill: url('#binary-gradient');
  87. }
  88. #glasses {
  89.     fill: url('#logo-gradient') !important;
  90.     animation: hide, fill;
  91.     animation-duration: 0.35s, .25s;
  92.     animation-delay: 0s, 0.35s;
  93. }
  94. @keyframes hide {
  95.     from {
  96.         fill-opacity: 0;
  97.     }
  98.     to {
  99.         fill-opacity: 0;
  100.     }
  101. }
  102. @keyframes stroke-circle {
  103.     from {
  104.         stroke-dashoffset: 355;
  105.     }
  106.     to {
  107.         stroke-dashoffset: 0;
  108.     }
  109. }
  110. @keyframes fill {
  111.     from { fill-opacity: 0;}
  112.     to { fill-opacity: 1;}
  113. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top