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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<html>
  <body>
    <center>
      <h1>A tribute to Keith Haring</h1>
      <p>Animation sequence of an untitled printing from 1989.<br>Reproduction with SVG created in Affinity Designer.</p>
      <svg width="20%" height="20%" viewBox="0 0 600 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">
        <g id="backlayer">
            <g id="Background">
                <path d="M28.593,632.637C28.593,632.637 210.353,613.263 326.206,629.316C407.942,640.642 568.436,631.901 568.436,631.901L564.511,778.732C564.511,778.732 388.93,776.758 299.82,776.124C161.525,775.141 27.886,778.758 27.886,778.758L28.593,632.637Z" style="fill:rgb(168,0,239);stroke-width:16px;stroke:black;"/>
                <path d="M28.567,635.954L25.275,313.292L19.349,22.896C19.349,22.896 176.7,17.298 297.209,25.53C390.381,31.895 577.703,20.921 577.703,20.921C577.703,20.921 571.263,218.89 569.776,317.876C568.24,420.157 568.485,634.609 568.485,634.609C568.485,634.609 363.343,630.932 260.386,621.389C170.564,613.064 28.567,635.954 28.567,635.954Z" style="fill:rgb(82,255,134);stroke-width:16px;stroke:black;"/>
          <g id="shead1" visibility="hidden">
              <path d="M164.864,74.987L190.543,94.082" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M247.168,46.649L251.777,67.06" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M312.935,68.328L326.103,43.308" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="7.5s"></set>
          </g>
          <g id="shead2" visibility="hidden">
              <path d="M198.444,40.749L214.246,74.329" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M288.65,45.332L286.016,64.378" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M334.005,80.18L353.099,57.135" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="7.55s"></set>
          </g>
          <g id="sbodyr1" visibility="hidden">
              <path d="M413.675,212.526L426.795,165.167" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M453.791,258.665L498.565,219.159" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M498.565,297.539L550.581,282.395" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M516.343,356.14L548.606,375.234" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="5.1s"></set>
          </g>
          <g id="sbodyr2" visibility="hidden">
              <path d="M430.087,234.303L450.499,211.258" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M474.861,279.103L514.367,254.082" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M509.1,325.193L542.68,324.535" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M504.462,384.452L527.508,406.839" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="6.1s"></set>
          </g>
          <g id="slegsr" visibility="hidden">
              <path d="M493.951,454.27C530.165,514.188 499.877,595.175 499.877,595.175" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M468.272,480.607C488.025,527.356 477.49,564.887 477.49,564.887" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M535.432,474.681C555.211,531.307 539.383,568.838 539.383,568.838" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="7.1s"></set>
          </g>
          <g id="slegsl" visibility="hidden">
              <path d="M90.329,496.41C97.621,564.229 162.757,592.175 162.757,592.175" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M70.597,538.55C85.082,592.541 128.831,603.002 128.831,603.002" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M57.428,569.496C64.012,603.735 87.058,607.685 87.058,607.685" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="7.1s"></set>
          </g>
          <g id="sbodyl1" visibility="hidden">
              <path d="M132.49,363.406L106.811,385.134" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M120.033,311.991L89.72,322.526" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="5.1s"></set>
          </g>
          <g id="sbodyl2" visibility="hidden">
              <path d="M129.856,339.043L68.621,366.698" style="fill:none;stroke-width:16px;stroke:black;"/>
              <path d="M125.934,277.752L60.062,291.579" style="fill:none;stroke-width:16px;stroke:black;"/>
              <set attributeName="visibility" to="visible" begin="6.1s"></set>
          </g>

                <path d="M55.453,658.303L77.181,656.327" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M79.815,674.764L116.029,673.447" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M128.539,693.858L149.609,693.2" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M77.181,713.611L94.252,712.295" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M123.881,724.146L155.486,728.097" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M92.935,756.41L127.173,753.118" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M179.19,752.459L206.186,754.434" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M254.252,758.385L282.564,759.702" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M169.972,658.303L189.066,658.303" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M173.264,678.714L194.334,678.714" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M45.527,745.216L74.498,743.899" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M394.498,753.118L430.712,753.089" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M459.025,758.328L478.12,757.012" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M492.605,736.551L518.284,739.185" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M512.989,756.963L534.087,755.646" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M516.309,710.872L529.478,708.897" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M493.236,687.168L509.697,687.168" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M535.376,672.683L547.227,672.024" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M476.775,652.271L497.186,652.271" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M113.318,645.715L135.046,644.398" style="fill:none;stroke-width:16px;stroke:black;"/>
                <path d="M73.812,694.44C62.532,695.165 48.857,698.252 46.157,697.073" style="fill:none;stroke-width:16px;stroke:black;"/>
            </g>
        </g>
        <g id="redin" transform="matrix(1,0,0,1,26,144)">
            <path d="M268.256,207.225C335.46,197.349 383.906,193.436 388.092,215.456C390.725,229.31 394.531,249.699 278.84,264.46C180.277,277.036 164.167,266.82 165.54,247.719C167.197,224.668 208.932,215.944 268.256,207.225Z" style="fill:rgb(253,0,5);stroke-width:16px;stroke:black;"/>
        <animateTransform id="aniredin"
             attributeName="transform" type="translate"
             begin="6s" dur="0.1"
             from="26,144" to="26,37"
             fill="freeze" />
        </g>
        <g id="yfigure" transform="matrix(0.944871,0,0,0.944871,37.2037,9.98292)">
            <g id="ybody" transform="matrix(1,0,0,1,0,2)">
                <path d="M281.98,479.795C281.98,479.795 239.094,734.241 210.869,674.526C191.752,634.081 172.022,510.604 172.022,510.604L214.229,495.998L221.173,425.786C221.173,425.786 191.188,426.439 189.403,404.077C187.586,381.32 245.143,390.141 245.143,390.141L245.533,418.553L246.584,596.388L266.006,407.859L267.289,389.51C267.289,389.51 322.45,380.798 326.045,404.237C328.821,422.341 317.869,424.045 317.869,424.045L298.138,430.646L306.979,474.487L400.471,448.822L281.98,479.795Z" style="fill:rgb(253,244,0);stroke-width:16.93px;stroke:black;">
            <animate id="aniybody1" begin="7s" attributeName="d" dur="0.25" to="M281.98,479.795C281.98,479.795 239.094,558.556 210.869,498.841C191.752,458.395 172.022,334.918 172.022,334.918L215.622,300.103L211.966,101.297C211.966,101.297 170.471,104.156 170.239,77.944C170.032,54.531 243.527,55.699 243.527,55.699L251.107,178.758L255.643,297.359L261.101,178.486L270.077,50.064C270.077,50.064 332.918,47.041 337.891,65.488C347.448,100.937 299.751,90.871 299.751,90.871L309.958,277.957L343.215,320.405L400.471,448.822L281.98,479.795Z" fill="freeze"/>
            <animate id="aniybody2" begin="7.25s" attributeName="d" dur="0.5" to="M281.98,479.795C281.98,479.795 239.094,396.629 210.869,336.914C191.752,296.468 172.022,172.992 172.022,172.992L105.52,148.629L95.643,211.839C95.643,211.839 123.245,245.052 83.133,253.321C60.774,257.93 58.112,228.959 58.112,228.959L70.622,90L255.643,135.432L400.499,70.247L497.948,157.819C497.948,157.819 493.997,192.716 470.293,192.058C446.59,191.399 455.149,163.087 455.149,163.087L399.182,121.605L343.215,158.478L400.471,448.822L281.98,479.795Z" fill="freeze"/>
              </path>
            </g>
            <g id="yhead" transform="matrix(1,0,0,1,0,294.22)">
              <path d="M225.355,184.157C169.388,142.096 211.486,80.934 256.301,80.782C293.003,80.658 342.557,110.491 301.075,176.914" style="fill:rgb(253,244,0);stroke-width:16.93px;stroke:black;">
            <animateTransform id="aniyhead"
                 attributeName="transform" type="translate"
                 begin="7" dur="0.75"
                 from="0,0" to="0,-294.22"
                 fill="freeze" />
              </path>
          </g>
        </g>
        <g id="frontlayer">
            <g id="redout" transform="matrix(0.997495,-0.10256,0.117688,1.14463,-41.8991,-27.281)">
                <ellipse cx="316.152" cy="366.744" rx="167.572" ry="47.407" style="fill:rgb(253,0,5);stroke-width:14.83px;stroke:black;"/>
            </g>
            <g id="redmid" transform="matrix(1,0,0,1,18,74)">
                <path d="M285.521,280.952C356.346,271.876 433.098,236.556 432.338,286.983C431.934,313.793 365.282,332.297 292.764,337.024C222.067,341.633 154.798,338.58 149.239,303.444C144.825,275.548 197.803,292.192 285.521,280.952Z" style="fill:rgb(255,0,0);stroke-width:16px;stroke:black;visibility:hidden;">
                  <set attributeName="visibility" to="visible" begin="5s"/>
                </path>
                <animateTransform id="aniredmid"
                     attributeName="transform" type="translate"
                     begin="5" dur="0.1"
                     from="18,74" to="18,27"
                     fill="freeze" />
            </g>
            <g transform="matrix(1,0,0,1,20,37)">
                <g transform="matrix(1,0,0,1,6,114)">
                    <path id="yin" d="M388.825,242.647L389.433,241.321L386.686,314.807L370.549,401.822L215.877,416.79L165.931,252.608L166.625,252.522C168.62,268.434 188.905,275.935 278.84,264.46C370.93,252.71 387.305,255.394 388.825,242.647Z" style="fill:rgb(253,244,0);stroke-width:16px;stroke:black;visibility:hidden;">
                      <set attributeName="visibility" to="visible" begin="6s"/>
              <animate id="aniyin" begin="6s" attributeName="d" dur="0.1" to="M388.825,224.647L389.433,223.321L411.686,346.807L370.549,401.822L215.877,416.79L165.931,252.608L166.625,252.522C168.62,268.434 188.905,275.935 278.84,264.46C370.93,252.71 387.305,237.394 388.825,224.647Z" fill="freeze"/>

                    </path>
            <animateTransform
                 attributeName="transform" type="translate"
                 begin="6s" dur="0.1"
                 from="6,114" to="6,0"
                 fill="freeze" />
                </g>
                <g id="ymid" transform="matrix(1,0,0,1,-2,-9)">
                    <path d="M432.342,336.545L440.946,347.944L407.955,394.918L320.923,447.692L188.038,429.815L149.897,357.318L150.132,357.296C159.893,388.8 224.742,391.459 292.764,387.024C365.282,382.297 431.934,363.793 432.338,336.983C432.34,336.836 432.342,336.69 432.342,336.545Z" style="fill:rgb(253,244,0);stroke-width:16px;stroke:black;visibility:hidden;">
                   <set attributeName="visibility" to="visible" begin="5s"/>
              <animate id="aniymid" begin="5s" attributeName="d" dur="0.1" to="M432.342,286.545L440.946,347.944L407.955,394.918L320.923,447.692L188.038,429.815L149.897,307.318L150.132,307.296C159.893,338.8 224.742,341.459 292.764,337.024C365.282,332.297 431.934,313.793 432.338,286.983C432.34,286.836 432.342,286.69 432.342,286.545Z" fill="freeze"/>
            </path>
                </g>
            </g>
            <g>
                <path id="yout" d="M324.201,685.873C355.197,695.481 400.854,698.617 384.182,730.09C360.45,774.892 187.281,726.168 187.281,726.168L244.565,619.501C244.565,619.501 182.014,605.674 156.335,533.905C130.656,462.135 148.434,376.123 148.434,376.123L150.38,382.863C157.698,408.919 232.89,422.526 322.168,413.347C407.677,404.555 476.281,377.927 483.558,351.971C481.937,369.512 476.62,400.804 459.244,426.579C433.565,464.671 405.252,489.692 405.252,489.692L445.417,551.61L397.981,661.597C397.981,661.597 478.785,656.016 475.676,689.91C472.413,725.494 440.121,723.545 440.121,723.545L388.104,722.886C388.104,722.886 398.639,698.55 325.553,686.039C325.1,685.962 324.645,685.933 324.201,685.873C315.353,683.13 307.699,679.859 303.032,675.252C297.837,668.147 297.421,658.194 299.973,646.942C306.244,622.979 325.485,592.126 340.344,570.682C350.489,556.61 358.475,547.084 358.475,547.084L357.945,546.622C358.732,545.61 359.162,545.07 359.162,545.07L297.269,493.712L357.945,546.622C355.27,550.065 348.46,558.97 340.344,570.682C325.317,591.525 305.551,622.339 299.973,646.942C297.937,654.719 297.267,661.77 298.557,667.539C299.215,670.484 300.774,673.024 303.032,675.252C307.012,680.696 313.797,684.468 324.201,685.873ZM483.052,345.337C482.734,343.034 482.902,340.821 481.588,338.706L483.264,338.349C483.264,338.349 483.298,340.919 483.052,345.337Z" style="fill:rgb(253,244,0);stroke-width:16px;stroke:black;"/>
            </g>
        </g>
      </svg>
    </center>
  </body>
</html>
            
          
!
            
              body{
  background-color:#0BA2FF;
  font-family: 'Raleway', sans-serif;
}
h1{
  color:#000;
  font-size: 2.5em;
  font-weight: 100;
  text-align: center;
  line-height: 1em;
}
p{
  color: #fff;
}
            
          
!
999px
Loading ..................

Console