cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg
     width="100"
     height="100"
     viewBox="0 0 100 100">
  <defs>
    <clipPath id="clip-left">
      <path
            d="m 9.8494661,6.817 -4.79e-4,85.859 62.9510129,0 -43.505576,-85.859 z" />
    </clipPath>
    <clipPath id="clip-right">
      <path
            d="m 90.914,6.817 0,85.859 -18.114,0 -43.505576,-85.859 z" />
    </clipPath>
  </defs>
  <g id="text1" clip-path="url(#clip-left)">
    <path
          d="m 29.801276,20.809628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 41.68526,26.059628 c 0,1.05 -0.75,1.8 -1.65,1.8 -0.9,0 -1.65,-0.75 -1.65,-1.8 0,-1.05 0.75,-1.8 1.65,-1.8 0.9,0 1.65,0.75 1.65,1.8 z m 4.2,0 c 0,-3.075 -2.4,-5.475 -5.85,-5.475 -3.45,0 -5.85,2.4 -5.85,5.475 0,3.075 2.4,5.475 5.85,5.475 3.45,0 5.85,-2.4 5.85,-5.475 z" />
    <path
          d="m 46.596589,20.809628 2.925,10.5 5.1,0 2.925,-10.5 -4.35,0 -1.125,6.15 -1.125,-6.15 -4.35,0 z" />
    <path
          d="m 62.496589,27.559628 3.9,0 0,-3 -3.9,0 0,-0.75 4.2,0 0,-3 -8.1,0 0,10.5 8.4,0 0,-3 -4.5,0 0,-0.75 z" />
    <path
          d="m 34.601276,32.059628 -3.45,0 -1.125,5.775 -0.825,-5.775 -4.05,0 2.25,10.5 4.35,0 1.125,-5.325 1.125,5.325 4.35,0 2.25,-10.5 -4.05,0 -0.825,5.775 -1.125,-5.775 z" />
    <path
          d="m 45.562995,32.059628 -3.9,0 0,10.5 3.9,0 0,-10.5 z" />
    <path
          d="m 51.275885,32.059628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 60.445807,32.059628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 25.301276,43.309628 0,3.45 2.85,0 0,7.05 3.9,0 0,-7.05 2.85,0 0,-3.45 -9.6,0 z" />
    <path
          d="m 39.996589,50.059628 3.9,0 0,-3 -3.9,0 0,-0.75 4.2,0 0,-3 -8.1,0 0,10.5 8.4,0 0,-3 -4.5,0 0,-0.75 z" />
    <path
          d="m 53.277448,43.309628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 67.745417,53.809628 -2.55,-4.05 c 0,0 1.35,-0.75 1.35,-2.925 0,-2.175 -1.5,-3.675 -4.8,-3.675 -2.25,0 -4.35,0.15 -4.35,0.15 l 0,10.5 3.9,0 0,-3.45 0.15,0 1.8,3.45 4.5,0 z m -6.45,-6.15 0,-1.65 0.45,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.45,0 z" />
    <path
          d="m 31.001276,61.534628 c -0.675,0 -1.2,-0.525 -1.2,-1.35 l 0,-5.625 -3.9,0 0,5.625 c 0,3 2.1,5.1 5.1,5.1 3,0 5.1,-2.1 5.1,-5.1 l 0,-5.625 -3.9,0 0,5.625 c 0,0.825 -0.525,1.35 -1.2,1.35 z" />
    <path
          d="m 41.137995,62.209628 c -1.5,0 -2.55,-0.975 -2.55,-0.975 l -1.425,2.25 c 0,0 1.35,1.8 4.65,1.8 2.625,0 4.275,-1.65 4.275,-3.375 0,-3.3 -4.05,-3.3 -4.05,-4.05 0,-0.225 0.225,-0.45 0.6,-0.45 1.05,0 1.95,0.825 1.95,0.825 l 1.425,-2.25 c 0,0 -1.35,-1.65 -4.05,-1.65 -2.625,0 -4.275,1.65 -4.275,3.375 0,3.3 4.05,3.3 4.05,4.05 0,0.225 -0.225,0.45 -0.6,0.45 z" />
    <path
          d="m 33.326276,65.809628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 41.944245,65.659628 c -2.4,0 -4.5,0.15 -4.5,0.15 l 0,10.5 3.9,0 0,-3.375 c 0,0 0.75,0.075 1.35,0.075 2.55,0 4.05,-1.5 4.05,-3.675 0,-2.175 -1.5,-3.675 -4.8,-3.675 z m -0.6,4.5 0,-1.65 0.6,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.6,0 z" />
    <path
          d="m 54.595807,65.809628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 69.063776,76.309628 -2.55,-4.05 c 0,0 1.35,-0.75 1.35,-2.925 0,-2.175 -1.5,-3.675 -4.8,-3.675 -2.25,0 -4.35,0.15 -4.35,0.15 l 0,10.5 3.9,0 0,-3.45 0.15,0 1.8,3.45 4.5,0 z m -6.45,-6.15 0,-1.65 0.45,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.45,0 z" />
    <path
          d="m 68.777839,65.809628 0,3.45 2.85,0 0,7.05 3.9,0 0,-7.05 2.85,0 0,-3.45 -9.6,0 z" />
  </g>
  <g id="text2" clip-path="url(#clip-right)">
    <path
          d="m 29.801276,20.809628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 41.68526,26.059628 c 0,1.05 -0.75,1.8 -1.65,1.8 -0.9,0 -1.65,-0.75 -1.65,-1.8 0,-1.05 0.75,-1.8 1.65,-1.8 0.9,0 1.65,0.75 1.65,1.8 z m 4.2,0 c 0,-3.075 -2.4,-5.475 -5.85,-5.475 -3.45,0 -5.85,2.4 -5.85,5.475 0,3.075 2.4,5.475 5.85,5.475 3.45,0 5.85,-2.4 5.85,-5.475 z" />
    <path
          d="m 46.596589,20.809628 2.925,10.5 5.1,0 2.925,-10.5 -4.35,0 -1.125,6.15 -1.125,-6.15 -4.35,0 z" />
    <path
          d="m 62.496589,27.559628 3.9,0 0,-3 -3.9,0 0,-0.75 4.2,0 0,-3 -8.1,0 0,10.5 8.4,0 0,-3 -4.5,0 0,-0.75 z" />
    <path
          d="m 34.601276,32.059628 -3.45,0 -1.125,5.775 -0.825,-5.775 -4.05,0 2.25,10.5 4.35,0 1.125,-5.325 1.125,5.325 4.35,0 2.25,-10.5 -4.05,0 -0.825,5.775 -1.125,-5.775 z" />
    <path
          d="m 45.562995,32.059628 -3.9,0 0,10.5 3.9,0 0,-10.5 z" />
    <path

          d="m 51.275885,32.059628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 60.445807,32.059628 -3.9,0 0,10.5 7.95,0 0,-3.45 -4.05,0 0,-7.05 z" />
    <path
          d="m 25.301276,43.309628 0,3.45 2.85,0 0,7.05 3.9,0 0,-7.05 2.85,0 0,-3.45 -9.6,0 z" />
    <path
          d="m 39.996589,50.059628 3.9,0 0,-3 -3.9,0 0,-0.75 4.2,0 0,-3 -8.1,0 0,10.5 8.4,0 0,-3 -4.5,0 0,-0.75 z" />
    <path
          d="m 53.277448,43.309628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 67.745417,53.809628 -2.55,-4.05 c 0,0 1.35,-0.75 1.35,-2.925 0,-2.175 -1.5,-3.675 -4.8,-3.675 -2.25,0 -4.35,0.15 -4.35,0.15 l 0,10.5 3.9,0 0,-3.45 0.15,0 1.8,3.45 4.5,0 z m -6.45,-6.15 0,-1.65 0.45,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.45,0 z" />
    <path
          d="m 31.001276,61.534628 c -0.675,0 -1.2,-0.525 -1.2,-1.35 l 0,-5.625 -3.9,0 0,5.625 c 0,3 2.1,5.1 5.1,5.1 3,0 5.1,-2.1 5.1,-5.1 l 0,-5.625 -3.9,0 0,5.625 c 0,0.825 -0.525,1.35 -1.2,1.35 z" />
    <path
          d="m 41.137995,62.209628 c -1.5,0 -2.55,-0.975 -2.55,-0.975 l -1.425,2.25 c 0,0 1.35,1.8 4.65,1.8 2.625,0 4.275,-1.65 4.275,-3.375 0,-3.3 -4.05,-3.3 -4.05,-4.05 0,-0.225 0.225,-0.45 0.6,-0.45 1.05,0 1.95,0.825 1.95,0.825 l 1.425,-2.25 c 0,0 -1.35,-1.65 -4.05,-1.65 -2.625,0 -4.275,1.65 -4.275,3.375 0,3.3 4.05,3.3 4.05,4.05 0,0.225 -0.225,0.45 -0.6,0.45 z" />
    <path
          d="m 33.326276,65.809628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 41.944245,65.659628 c -2.4,0 -4.5,0.15 -4.5,0.15 l 0,10.5 3.9,0 0,-3.375 c 0,0 0.75,0.075 1.35,0.075 2.55,0 4.05,-1.5 4.05,-3.675 0,-2.175 -1.5,-3.675 -4.8,-3.675 z m -0.6,4.5 0,-1.65 0.6,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.6,0 z" />
    <path
          d="m 54.595807,65.809628 -5.1,0 -3.075,10.5 4.35,0 0.3,-1.5 1.95,0 0.3,1.5 4.35,0 c 0,0 -3.06,-10.44 -3.075,-10.5 z m -3.075,6.6 0.525,-2.7 0.525,2.7 -1.05,0 z" />
    <path
          d="m 69.063776,76.309628 -2.55,-4.05 c 0,0 1.35,-0.75 1.35,-2.925 0,-2.175 -1.5,-3.675 -4.8,-3.675 -2.25,0 -4.35,0.15 -4.35,0.15 l 0,10.5 3.9,0 0,-3.45 0.15,0 1.8,3.45 4.5,0 z m -6.45,-6.15 0,-1.65 0.45,0 c 0.525,0 0.9,0.375 0.9,0.825 0,0.45 -0.375,0.825 -0.9,0.825 l -0.45,0 z" />
    <path
          d="m 68.777839,65.809628 0,3.45 2.85,0 0,7.05 3.9,0 0,-7.05 2.85,0 0,-3.45 -9.6,0 z" />
  </g>
</svg>

            
          
!
            
              body {
  margin: 0;
}

svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: absolute;
  width: 100vmin;
}

#text1 {
  animation: TextLeft 3s both infinite alternate;
}

#text2 {
  animation: TextRight 3s both infinite alternate;
}

@keyframes TextLeft {
  0% { transform: none; }
  20% { transform: none; }
  80% { transform: translateX(-0.5vmin) translateY(-1vmin); }
  100% { transform: translateX(-0.5vmin) translateY(-1vmin); }
}

@keyframes TextRight {
  0% { transform: none; }
  20% { transform: none; }
  80% { transform: translateX(0.5vmin) translateY(1vmin); }
  100% { transform: translateX(0.5vmin) translateY(1vmin); }
}

            
          
!
999px
Loading ..................

Console