<div class="grid">
<div class="rocket_container">
<svg version="1.1" class="rocket" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 466.3 464.1">
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FF4000;" d="M258.5,334.7c0,0,12.8,37.9,27.2,69.7
c14.5,31.8,40,47.3,43.4,47.3c3.4,0,6.8-18.1,6-28.4s-24.7-31,16.2,1.7c40.9,32.7,69.8,46.5,67.3,35.3
c4.3-27.5-43.4-85.2-12.8-74.9c30.6,10.3,82.6,34.4,50.2-3.4c-32.4-37.9-65.6-55.1-37.5-54.2c28.1,0.9,55.3,13.8,41.7-11.2
c-13.6-25-79.2-63.8-107.3-80.1C330.9,247.7,287.5,277,258.5,334.7L258.5,334.7z" />
<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFF33;fill-opacity:0.696;" d="M271.2,313.6c0,0,9.3,44.9,19.5,58.5
c10.2,13.6,12.7,11.9,15.3-6.8s-15.3-37.3,15.3-17c30.5,20.4,56.8,45.8,41.5,14.4c-15.3-31.4-19.5-39,1.7-28s41.5,19.5,16.1-11
c-19.5-22,19.5-28,26.3-30.5c16.1,2.5-68.7-44.9-77.2-44.9C320.4,250,274.6,306.9,271.2,313.6L271.2,313.6z" />
<g>
<g>
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#0600FF;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="M5,5
c78.9,1.7,278.1,33.9,354.4,229.8c-26.3,5.1-90.7,67.8-100.9,102.6C64.4,238.2,9.2,81.3,5,5L5,5z" />
<g>
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#7F0000;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="
M150.8,266.2c0,0,3.4,86.5,3.4,87.3s104.3,48.3,110.2,50.9l-5.1-67.8C250.1,337.4,167,284,150.8,266.2L150.8,266.2z" />
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#7F0000;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="
M291.9,125.3c0,0,85.5,3.8,86.4,3.8c0.8,0,45.8,105.4,48.2,111.4l-67.7-6.8C349.7,200.7,311.9,145.2,291.9,125.3L291.9,125.3z" />
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#7F0000;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="
M222.5,184.1c0,0,14.3,34.1,16.7,39.7c3,3.7,77.6,64.7,83.1,68.1l-3.2-21.7C311.1,262.5,242.3,202.1,222.5,184.1L222.5,184.1z" />
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#7F0000;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="
M219.8,183.3l-16.8,24.3l20.6,35.7l85.8,67.7l12.4-18.5l-82-69.2L219.8,183.3L219.8,183.3z" />
</g>
</g>
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#BFBFBF;stroke:#000000;stroke-width:12.5;stroke-linejoin:round;"
d="
M111.8,105.1c-28.8,39,30.5,87.3,58.5,52.6C204.3,115.2,145.8,74.5,111.8,105.1z" />
<path
style="fill-rule:evenodd;clip-rule:evenodd;fill:#AEFFFF;stroke:#000000;stroke-width:10;stroke-linejoin:round;"
d="
M119.5,109.3c21.2-20.3,70.4,4.2,48.3,40.7C143.2,181.4,93.2,141.5,119.5,109.3z" />
</g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;fill-opacity:0.75;" d="M135.6,108.4c-6.9,4.7-24.9,19.6-10.2,37.4
C138.1,149.1,155.9,110.1,135.6,108.4z" />
</g>
</g>
</svg>
</div>
<svg role="svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 75.9 61.2"
style="enable-background:new 0 0 75.9 61.2;" xml:space="preserve">
<text class="visually-hidden" font-size="0" class="color">Color changing chameleon on a branch</text>
<defs>
<lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%" x3="100%" y3="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0,1);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,192,0,1);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(32,185,27,1);stop-opacity:1" />
</lineargradient>
</defs>
<path style="fill:#795F4A;" d="M68.5,22.1c-3.9,0-8.4,0.2-11.8,1c-3.5,0.9-6.7,2.7-9.6,4.1c-4.3,2-8.4,4.5-12.4,6.8
C22.9,40.8,0.5,55.3,0.5,55.3l2.1,3.2c0,0,22.5-14.6,34.1-21.2c4-2.3,8.1-4.7,12.1-6.6c3.1-1.5,6.2-3.1,8.9-3.8
c2.7-0.7,7.2-0.9,10.9-0.9c3.7,0,6.7,0.1,6.7,0.1l0.2-3.8C75.5,22.3,72.4,22.1,68.5,22.1L68.5,22.1z" />
<path style="fill:#010600;"
d="M68.5,21.6c-3.9,0-8.5,0.2-11.9,1.1c-3.5,0.9-6.8,2.7-9.7,4.1c-4.3,2-8.4,4.5-12.4,6.8
C22.7,40.4,0.2,54.9,0.2,54.9c-0.2,0.1-0.3,0.4-0.1,0.7l2.1,3.2c0.1,0.2,0.4,0.3,0.7,0.1c0,0,22.5-14.6,34.1-21.2
c4-2.3,8.1-4.7,12.1-6.6c3.1-1.5,6.2-3.1,8.8-3.8c2.6-0.6,7.1-0.9,10.8-0.9c3.7,0,6.7,0.1,6.7,0.1c0.3,0,0.5-0.2,0.5-0.4l0.2-3.8
c0-0.3-0.2-0.5-0.4-0.5C75.5,21.8,72.4,21.6,68.5,21.6L68.5,21.6z M68.5,22.6c3.6,0,6.1,0.1,6.4,0.1l-0.2,2.8
c-0.4,0-2.8-0.2-6.3-0.1c-3.7,0-8.3,0.3-11,0.9c-2.8,0.7-5.9,2.4-9,3.8c-4.1,1.9-8.1,4.3-12.1,6.7c-11.4,6.6-33,20.5-33.7,21
l-1.5-2.4C1.8,55,23.4,41.1,35,34.4c4-2.3,8.1-4.8,12.3-6.8c3-1.4,6.2-3.2,9.5-4C60.1,22.8,64.7,22.6,68.5,22.6L68.5,22.6z" />
<path class="color" style="stroke:#000000;stroke-width:0.4;stroke-miterlimit:10;" d="M42.3,0.5l0.5,2c0,0-2.7-1.8-6.2-1.6
c-3.4,0.1-6.4,1-8.1,1.7c-2.8,1.1-7.4,3.6-10.7,6.7c-3.5,3.4-6.4,7.4-7.9,12c-1.4,4.4-1.2,10.7-0.7,13.9
c2.1,12.7,7.5,22.4,13.6,24.9c9.5,4,19.3-6.9,12.4-13.8c-3-3-7.4-3.1-9.6-0.2c-1.5,2.1-1.6,2.1-1-1.7c0.3-2.1,0.6-5.3,0.6-7.1l0-3.3
l3.6,3.5c2.8,2.7,4.4,3.5,6.9,3.5c4,0,7.5-2.3,7.5-4.8c0-1.6,0.3-1.7,1.8-0.9c2.5,1.3,3.5,1.2,5.2-0.5c2.2-2.2,1.9-5.1-0.4-5.1
c-2.4,0-2.4-0.7,0.2-2.9l2.1-1.8l-4.7-0.1c-5.3-0.1-5-0.3,7.6-3.2c11.8-2.8,11.4-2.5,11.3-6.4c-0.1-4.4-2.6-7.7-6.3-9.6
C55,3,42.3,0.5,42.3,0.5L42.3,0.5z M36.5,28.3c0.7,0,1.1,0.1,1.5,0.4c0.7,0.7,0.6,1-0.3,1c-0.7,0-2,0.6-2.9,1.4
c-1.2,1.1-1.8,1.1-2.7,0.3c-0.9-0.9-0.4-1.4,1.9-2.4C35,28.6,35.8,28.3,36.5,28.3L36.5,28.3z M40.1,31.4c0.6,0,1.1,0.1,1.6,0.3
c1.8,0.9,1.7,1-0.5,2.2c-2.8,1.6-4.7,1.7-4.7,0.3C36.6,32.7,38.4,31.5,40.1,31.4L40.1,31.4z" />
<path style="fill:#FFFFFF;"
d="M58.8,12c1-0.6,1.7-2.5,0.2-4.6c-1.7-2.4-5.4-1.2-5.4,1.7C53.7,12.5,56.6,13.3,58.8,12L58.8,12z" />
<circle class="eyeball" cx="57" cy="10" r="1.2" />
<path d="M22.9,60c-6-2.5-11.5-12.3-13.6-24.9c-0.5-3.1-0.8-9.5,0.7-13.9c1.5-4.5,4.3-8.6,7.9-12c3.2-3.1,7.9-5.6,10.7-6.7
c1.7-0.7,4.7-1.5,8.1-1.7c3.4-0.1,6.2,1.6,6.2,1.6l-0.5-2C42.3,0.5,55,3,60,5.6c3.7,1.9,6.2,5.2,6.3,9.6c0.1,3.9,0.5,3.6-11.3,6.4
c-12.6,3-12.9,3.1-7.6,3.2l4.7,0.1l-2.1,1.8c-2.6,2.2-2.7,2.9-0.2,2.9c2.3,0,2.6,3,0.4,5.1c-1.7,1.7-2.7,1.8-5.2,0.5
c-1.5-0.8-1.8-0.7-1.8,0.9c0,2.6-3.5,4.8-7.5,4.8c-2.5,0-4.1-0.8-6.9-3.5L25.3,34l0,3.3c0,1.8-0.3,5-0.6,7.1c-0.6,3.7-0.5,3.7,1,1.7
c2.2-2.9,6.6-2.8,9.6,0.2C42.2,53.1,32.4,64,22.9,60L22.9,60z M34.1,56.7c3.9-3.6,2.9-9.2-1.9-11c-4.5-1.7-8.3,2.5-6,6.7
c1.4,2.5,5.2,2.2,5.2-0.4c0-1-0.6-2-1.4-2.2c-1.3-0.3-1.3-0.3,0,0.6c1.2,0.9,1.2,1-0.2,1c-0.9,0-1.7-0.6-1.7-1.4
c0-2.4,1.9-2.6,4.1-0.6c1.7,1.6,0.4,5.6-3,5.7c-2.8,0.1-3.7-0.8-5.2-4c-1.5-3.1-1.6-4.4-0.7-9.2c0.6-3.1,0.7-7.1,0.4-8.9
c-0.8-4,0.5-4.3,2.7-0.5c2.3,3.8,7,7.7,9.5,7.6c2,0,5.4-2,5.4-3.2c0-0.3-1.3-0.6-2.8-0.6c-2.3,0-2.8-0.4-2.8-2c0-1.6-0.3-1.8-1.2-1
c-1,0.8-2.3-0.1-5.9-3.7c-6.4-6.5-8-6.3-8,0.9c0,5.7-0.7,8.9-1.8,8.2c-0.3-0.2-0.4-3.5-0.1-7.3c0.5-6.9,1.4-7.3,2.8-7.9
c1.4-0.6,4.1,1,5.7,2.8c2.6,2.7,2.7,2.8,6.3,1.4l2.6-1l-3.6-3.7c-2.7-2.8-3.4-4.1-2.9-5.6c0.8-2.5,2.7-3.5,8.3-4.2
c6.4-0.8,5.6,0.8-0.9,1.8c-8,1.3-7.8,3,1.6,12c4.3,4.1,8.5,7.3,9.5,7.3c2.5,0,2.4-1.7-0.2-3.8c-1.9-1.5-2-1.9-0.7-3.4
c1.3-1.6,1.2-1.6-0.9-1.1c-2.3,0.6-7.9-2.2-10.5-5.4c-1.8-2.1-1.3-2.4,5.2-3.2c3.7-0.4,4.9-1,5.1-2.8c0.2-1.2-0.2-3.4-0.6-4.9
c-0.6-1.6-1.3-3.3-1.9-4.3c-1.9-3.2-8.5-4.1-14.2-1.8c-2.2,0.9-6.6,3-10,6.2c-3.4,3.2-5.7,6.2-7.2,10c-1.4,3.6-1.9,7.7-1.5,11.6
c0.5,4.2,1.3,9,2.8,13.3c1.5,4.3,3.5,8.2,5.8,10.5c3.1,3.2,4.7,3.9,7.5,4.1C29.4,59.7,32.2,58.5,34.1,56.7L34.1,56.7z M41.3,34
c2.2-1.2,2.2-1.3,0.5-2.2c-2-1.1-5.1,0.5-5.1,2.5C36.6,35.7,38.4,35.6,41.3,34L41.3,34z M37.6,29.7c0.9,0,1-0.3,0.3-1
C37.3,28,36,28.1,34,29c-2.3,1-2.7,1.5-1.9,2.4c0.9,0.9,1.5,0.8,2.7-0.3C35.6,30.3,36.9,29.7,37.6,29.7L37.6,29.7z M43.9,18.6
c-0.2-0.2-1.9,0-3.8,0.3c-3.4,0.5-3.5,0.6-1.9,2.4C39.8,23,39.8,23,42,21C43.2,19.9,44.1,18.8,43.9,18.6z M53.2,20.6
c12.1-2.7,13-3.2,4.9-2.9c-8.8,0.4-7.6-1.1,1.7-1.9l5.8-0.5c0,0-1.2-3.7-2.1-4.9c-0.9-1.1-2.8-2.1-2.8-2.1s0.5,1.1,0.4,1.9
c-0.2,1.2-0.8,3.1-3.8,3.4c-3.9,0.4-5.6-3.2-4.5-5.8c0.5-1.2,1.5-1.9,2-2.2c0,0-0.3-0.3-2.4-1c-3-1-7.8-2-7.8-2l3.1,7.9
c0,0,1.7,4.9-1.7,8.5C42.4,22.8,43.1,22.9,53.2,20.6L53.2,20.6z M58.8,12c1-0.6,1.7-2.5,0.2-4.6c-1.7-2.4-5.4-1.2-5.4,1.7
C53.7,12.5,56.6,13.3,58.8,12L58.8,12z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve"
xmlns:xml="http://www.w3.org/XML/1998/namespace" class="svg-defs">
<defs>
<pattern id="image" width="1" height="1" viewbox="0 0 100 100" preserveaspectratio="none">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/pattern_141.gif" width="100" height="100"
preserveaspectratio="none"></image>
</pattern>
<g id="shape-butterfly-1">
<path class="path" fill="" clip-rule="evenodd" d="M8.65,2.85c0.934-0.2,2.15-0.333,3.65-0.4c1.534-0.1,2.667-0.083,3.4,0.05
c1.533,0.267,3.45,0.767,5.75,1.5c2.466,0.8,4.35,1.617,5.65,2.45c2.066,1.2,3.883,2.383,5.45,3.55c2.567,2.1,4.35,3.8,5.35,5.1
l2.1,2.5c0.933,1.167,1.517,1.983,1.75,2.45c0.333,0.767,1.083,2.117,2.25,4.05c0.233,0.467,0.717,1.683,1.45,3.65
c0.733,2.067,1.2,3.45,1.4,4.15c0.467,1.733,0.917,3.767,1.35,6.1l0.4,3.85l-0.25-3.4c-0.6-5.967-1.267-10.25-2-12.85
c-0.733-2.434-2.167-5.467-4.3-9.1c-0.966-1.667-1.566-3-1.8-4c-0.233-0.933-0.1-1.267,0.4-1c1.3,0.733,2.917,3.867,4.85,9.4
c1.667,4.7,2.85,11.2,3.55,19.5c0.567,6.934,0.667,11.917,0.3,14.95l0.2,0.05c0.231,0,0.348-0.05,0.35-0.15v0.05l0.1,0.05v27.4
c-0.032-0.018-0.065-0.035-0.1-0.05v-0.05c-0.7,0.267-0.983,0.117-0.85-0.45c0.067-0.333,0.017-0.817-0.15-1.45
c-0.2-0.6-0.316-0.983-0.35-1.15l-0.5-1.65c-0.533-2.967-0.833-5.034-0.9-6.2c-0.1-1.533-0.133-2.4-0.1-2.6
c0-0.933,0.167-1.667,0.5-2.2c0.567-0.9,0.684-1.75,0.35-2.55c-0.167-0.367-0.367-0.6-0.6-0.7c-0.333-0.133-0.517,0.283-0.55,1.25
c-0.033,1.533-0.167,2.9-0.4,4.1c-0.1,2.3-0.267,3.684-0.5,4.15c-0.333,0.667-1.25,2.95-2.75,6.85c-1.167,2.8-2.233,4.817-3.2,6.05
c-0.9,1.2-1.583,2.1-2.05,2.7c-0.8,1-1.434,1.667-1.9,2c-2.067,1.333-3.633,2.067-4.7,2.2c-3.033,0.267-4.95,0.317-5.75,0.15
c-0.8-0.167-1.383-0.217-1.75-0.15c-0.533,0.1-1.033,0.45-1.5,1.05c-0.5,0.667-1.217,1.284-2.15,1.85
c-0.934,0.567-1.85,0.934-2.75,1.1c-2.467,0.433-4.45,0.25-5.95-0.55c-0.7-0.4-1.467-1.15-2.3-2.25c-0.6-0.867-1.033-1.567-1.3-2.1
c-0.267-0.667-0.483-1.483-0.65-2.45c-0.3-1.467-0.383-2.717-0.25-3.75c0.267-1.9,0.45-3.05,0.55-3.45
c0.233-1.233,0.566-2.333,1-3.3C9.25,77.45,9.767,76.4,10,76c0.667-1.233,1.55-2.583,2.65-4.05c1.1-1.434,2.184-2.583,3.25-3.45
c0.367-0.3,1.15-0.867,2.35-1.7c0.767-0.566,1.917-1.25,3.45-2.05c1.733-0.933,3.267-1.633,4.6-2.1
c2.133-0.733,4.534-1.467,7.2-2.2c0.467-0.1,1.517-0.3,3.15-0.6c0.967-0.233,0.4-0.4-1.7-0.5c-2.434-0.1-4.534-0.3-6.3-0.6
c-1.566-0.267-3.383-0.7-5.45-1.3c-2.8-0.8-4.467-1.317-5-1.55c-1.567-0.667-3.2-1.75-4.9-3.25c-1.733-1.533-3-3.1-3.8-4.7
c-0.533-1.067-0.967-2.434-1.3-4.1c-0.233-1.067-0.3-2.133-0.2-3.2c0.133-0.833,0.183-1.3,0.15-1.4v-0.6
c-2.467-3.233-3.983-5.433-4.55-6.6c-0.533-1.033-0.883-1.833-1.05-2.4c-0.3-0.867-0.466-1.85-0.5-2.95
c-0.033-2.367,0.034-4.117,0.2-5.25c0.3-1.034,0.483-1.8,0.55-2.3c0.167-0.867,0.034-1.533-0.4-2c-0.6-0.7-1.133-1.517-1.6-2.45
c-0.566-1.133-0.833-2.117-0.8-2.95c0.033-1.333,0.167-2.367,0.4-3.1c0.367-1.267,1.05-2.267,2.05-3
C4.417,4.25,6.483,3.317,8.65,2.85z" />
</g>
</defs>
</svg>
<div class="butterfly_container">
<var class="rotate3d">
<var class="translate3d">
<var class="translate3d-1">
<figure class="butterfly">
<svg class="wing left" viewbox="0 0 50 100">
<use class="left" xlink:href="#shape-butterfly-1"></use>
</svg>
<svg class="wing right" viewbox="0 0 50 100">
<use class="left" xlink:href="#shape-butterfly-1"></use>
</svg>
</figure>
</var>
</var>
</var>
</div>
</div>/* CSS + animation for Chameleon */
.color {
animation: col 25s linear infinite;
}
@keyframes col {
0%,
100% {
fill: #ff0000;
/* red */
}
33% {
fill: #ffc000;
/* gold */
}
66% {
fill: #20b91b;
/* green */
}
}
.eyeball {
animation: eye 20s linear infinite alternate;
}
@keyframes eye {
0%,
100% {
transform: translate(0, 0);
}
20% {
transform: translate(1px, -1px);
}
40% {
transform: translate(-1px, -1px);
}
60% {
transform: translate(1px, 0);
}
80% {
transform: translate(0, -1px);
}
}
/* CSS + animation for dark mode theme */
.rocket {
position: absolute;
z-index: -1;
animation: rock 20s infinite;
height: 125px;
width: 125px;
}
@keyframes rock {
0% {
right: 0;
top: 25%;
opacity: 0;
transform: scale(0.1) rotate(-50deg);
}
25% {
opacity: 1;
}
50% {
transform: scale(1) rotate(-55deg);
opacity: 1;
}
70% {
transform: scale(0.1) rotate(-60deg);
}
100% {
right: 90%;
top: 80%;
opacity: 0;
}
}
@media (prefers-color-scheme: dark) {
html {
background: #000000;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c3/Spruce-knob-night-sky-1_ForestWander.jpg");
background-size: cover;
}
.rocket_container {
width: 100%;
}
.rocket {
display: block;
}
.butterfly {
display: none;
}
}
/* Butterfly in the sky */
.butterfly_container {
position: absolute;
left: 50%;
top: 30%;
transform-origin: 100% 100%;
transform-style: preserve-3d;
animation: rotatingY 10s linear infinite;
var {
position: absolute;
left: 50%;
top: 30%;
width: 100px;
height: 100px;
margin-left: -100px / 2;
margin-top: -100px / 2;
transform-style: preserve-3d;
&.rotate3d {
transform: rotate3d(1, 0.5, 0, 70deg);
}
&.translate3d {
transform: translate3d(-500px, 0px, 0px);
}
&.translate3d-1 {
animation: fluttering 20s ease-in-out infinite;
}
}
figure.butterfly {
position: absolute;
left: 50%;
top: 30%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
transform-style: preserve-3d;
.wing {
position: absolute;
width: 50px;
height: 100px;
transform-style: preserve-3d;
transform-origin: 50% 50%;
&.right {
transform-origin: 50px 0px;
animation: right-wing-flap 0.75s ease-in-out infinite;
}
&.left {
transform-origin: 50px 50px;
animation: left-wing-flap 0.75s ease-in-out infinite;
}
use {
display: block;
fill: url(#image);
stroke: #000000;
stroke-width: 10px;
}
}
}
}
.svg-defs {
position: absolute;
top: 0;
}
@keyframes rotating {
0% {
transform: rotate3d(0, 0, 0, 0deg);
}
100% {
transform: rotate3d(0, 1, 0, 720deg);
}
}
@keyframes rotatingY {
100% {
transform: rotateY(-360deg);
}
}
@keyframes fluttering {
0%,
25%,
50%,
75%,
100% {
transform: translate3d(0, 0, 0);
}
10%,
60% {
transform: translate3d(0, 150px, 0);
}
30%,
80% {
transform: translate3d(0, 50px, 0);
}
}
@keyframes left-wing-flap {
0% {
transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
}
50% {
transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
}
100% {
transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
}
}
@keyframes right-wing-flap {
0% {
transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
}
50% {
transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
}
100% {
transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
}
}
/* CSS + animation for default / light mode theme */
@media (prefers-color-scheme: light) {
html {
background: #4a885c;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/bb/Beech_and_ferns_in_Gullmarsskogen.jpg");
background-size: cover;
}
.rocket {
display: none;
}
.butterfly {
display: block;
}
}
/* CSS + animation changes for prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.eyeball,
.color {
animation: none;
}
.rocket,
.butterfly,
.butterfly_container,
.butterfly_container var.translate3d-1,
.butterfly_container figure.butterfly .wing.left,
.butterfly_container figure.butterfly .wing.right,
.butterfly_container var.rotate3d {
animation: none !important;
top: 30%;
right: 21%;
transform: none;
}
.butterfly_container figure.butterfly .wing.right {
transform-origin: 50px 0px;
transform: scaleX(-1);
}
.rocket {
right: 15%;
top: 30%;
transform: rotate(-50deg);
}
.color {
fill: url(#grad1);
}
}
/* misc styles */
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
color: red;
}
.grid {
display: grid;
max-width: 500px;
margin: 0 auto;
padding: 4rem 2rem;
}
html {
height: 100%;
max-height: 100%;
overflow-y: hidden;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.