How to add Codepen code my website?

handyandmarvelous · August 23, 2023

On 8/19/2023 at 1:40 AM, tuanphan said:

add

font-family to this code

.button {
  --offset: 10px;
  --border-size: 2px;
  display: block;
  position: relative;
  padding: 1.5em 3em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: #e55743;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  transition: background 0.8s ease;
font-family: 'orpheus-pro' !important;
}

Thank you!

Would you be able to assist with converting this Codepen so that I can use the animation use on my Squarespace site?

https://codepen.io/handyandmarvelous/pen/PMGWKo/9bae05fbcc597facf42983e3d6404bd2

tuanphan · August 24, 2023

On 8/23/2023 at 12:47 PM, handyandmarvelous said:

Thank you!

Would you be able to assist with converting this Codepen so that I can use the animation use on my Squarespace site?

https://codepen.io/handyandmarvelous/pen/PMGWKo/9bae05fbcc597facf42983e3d6404bd2

Try Code Block with this code

<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 -200 595 638.81" filter="url(#white-glow)">
  <defs>
     <filter id="white-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
          <feFlood result="flood" flood-color="#fff" flood-opacity="1"></feFlood>
          <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
          <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
          <feGaussianBlur in="dilated" result="blurred" stdDeviation="4"></feGaussianBlur>
          <feMerge>
              <feMergeNode in="blurred"></feMergeNode>
              <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
      </filter>
    <filter id="erode">
        <feMorphology operator="erode" radius="1"></feMorphology>
    </filter>    
    <filter id="fancy-goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
    <filter id="fancy-goo0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
    </filter>
     <filter id="fancy-goo2">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo"  operator="atop"/>
    </filter>
     <filter id="fancy-goo3">
      <feGaussianBlur in="SourceGraphic" stdDeviation=".7" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
    <style>
      .cls-1 {
        fill: none;
        stroke: url(#linear-gradient);
      }

      .cls-2 {
        fill: none;
        stroke: url(#linear-gradient-2);
      }

      .cls-3 {
        fill: none;
        stroke: url(#linear-gradient-3);
      }

      .cls-4 {
        fill: none;
        stroke: url(#linear-gradient-4);
      }

      .cls-5 {
        fill: none;
        stroke: url(#linear-gradient-5);
      }

      .cls-6 {
        fill: url(#linear-gradient-6);
      }

      .cls-7 {
        font-size: 147px;
        fill: #957ecc;
        font-family: MANIFESTO, MANIFESTO;
      }

      .cls-8 {
        fill: url(#linear-gradient-14);
      }

      .cls-9 {
        fill: url(#linear-gradient-15);
      }

      .cls-10 {
        fill: url(#linear-gradient-16);
      }

      .cls-11 {
        fill: url(#linear-gradient-20);
      }
    </style>
    <linearGradient id="linear-gradient" x1="137.97" y1="433.17" x2="137.97" y2="261.19" gradientUnits="userSpaceOnUse">
      <stop offset="0.12" stop-color="#fff" stop-opacity="0"/>
      <stop offset="0.16" stop-color="#f6eff8" stop-opacity="0.16"/>
      <stop offset="0.23" stop-color="#ebdcef" stop-opacity="0.36"/>
      <stop offset="0.29" stop-color="#e1cbe7" stop-opacity="0.53"/>
      <stop offset="0.36" stop-color="#d8bde0" stop-opacity="0.68"/>
      <stop offset="0.44" stop-color="#d2b2db" stop-opacity="0.8"/>
      <stop offset="0.53" stop-color="#cca9d7" stop-opacity="0.89"/>
      <stop offset="0.63" stop-color="#c9a3d4" stop-opacity="0.95"/>
      <stop offset="0.76" stop-color="#c79fd2" stop-opacity="0.99"/>
      <stop offset="1" stop-color="#c69ed2"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="138" y1="308.8" x2="138" y2="238.12" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#dbc0e3"/>
      <stop offset="0.15" stop-color="#d2b1dc"/>
      <stop offset="0.42" stop-color="#c79fd2"/>
      <stop offset="0.69" stop-color="#c095cd"/>
      <stop offset="1" stop-color="#be91cb"/>
    </linearGradient>
    <linearGradient id="linear-gradient-3" x1="137.97" y1="279.68" x2="137.97" y2="98.33" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#c69ed2"/>
      <stop offset="1" stop-color="#885094"/>
    </linearGradient>
    <linearGradient id="linear-gradient-4" x1="138.87" y1="93.43" x2="138.87" y2="2.67" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f89549"/>
      <stop offset="0.16" stop-color="#faae65"/>
      <stop offset="0.36" stop-color="#fcc57e"/>
      <stop offset="0.56" stop-color="#fdd591"/>
      <stop offset="0.76" stop-color="#fedf9b"/>
      <stop offset="1" stop-color="#fee29f"/>
    </linearGradient>
    <linearGradient id="linear-gradient-5" x1="139.65" y1="69.61" x2="139.65" y2="28.66" xlink:href="#linear-gradient-4"/>
    <linearGradient id="linear-gradient-6" x1="406.51" y1="362.67" x2="406.51" y2="301.23" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#c9bde4"/>
      <stop offset="0.1" stop-color="#bfb1db"/>
      <stop offset="0.5" stop-color="#9784ba"/>
      <stop offset="0.82" stop-color="#7f68a5"/>
      <stop offset="1" stop-color="#765e9d"/>
    </linearGradient>
    <linearGradient id="linear-gradient-14" x1="137.97" y1="409.23" x2="137.97" y2="301.7" xlink:href="#linear-gradient-6"/>
    <linearGradient id="linear-gradient-15" x1="147.15" y1="302.63" x2="147.15" y2="257.78" xlink:href="#linear-gradient-6"/>
    <linearGradient id="linear-gradient-16" x1="303.92" y1="242.91" x2="303.92" y2="181.47" xlink:href="#linear-gradient-6"/>
    <linearGradient id="linear-gradient-20" x1="137.97" y1="242.91" x2="137.97" y2="136.85" xlink:href="#linear-gradient-6"/>
    
    <clippath id="clipPalm">
      <path d="M4.06,265a44.14,44.14,0,0,1,14.87,1.48c1.21.33,2.46.71,3.62,1.1s2.32.78,3.51,1.24a31,31,0,0,1,7,3.68,33.33,33.33,0,0,1,10.27,12.24c.31.59.58,1.2.85,1.81s.5,1.19.74,1.83a33.3,33.3,0,0,1,1.2,3.8c.33,1.25.6,2.43.88,3.64s.54,2.48.75,3.74c.44,2.51.73,5,1.05,7.34L50,314.09c.41,2.38.78,4.78,1.22,7.14s.92,4.69,1.44,7c1,4.67,2.25,9.3,3.5,14s2.51,9.29,4,13.82,3.14,8.95,5,13.4a109.12,109.12,0,0,0,6,12.77,103.32,103.32,0,0,0,7.54,11.88A73,73,0,0,0,88,404.4a74.54,74.54,0,0,0,11,8.38,100.59,100.59,0,0,0,12.42,6.48,71.76,71.76,0,0,0,13,4.51,54.56,54.56,0,0,0,6.69,1.09,59.85,59.85,0,0,0,6.86.3,59.65,59.65,0,0,0,6.86-.3,54.4,54.4,0,0,0,6.7-1.08,73.7,73.7,0,0,0,13-4.51A101.18,101.18,0,0,0,177,412.79a74.81,74.81,0,0,0,20.32-18.64,104.33,104.33,0,0,0,7.54-11.89,110.81,110.81,0,0,0,6-12.77c1.85-4.45,3.51-8.86,5-13.4s2.76-9.14,4-13.82,2.47-9.33,3.5-14c.52-2.34,1-4.68,1.44-7s.81-4.75,1.21-7.13l1.13-7.16c.32-2.37.61-4.83,1-7.34.22-1.25.47-2.5.75-3.74s.55-2.38.88-3.63a33.3,33.3,0,0,1,1.2-3.8c.24-.65.48-1.23.74-1.84s.53-1.21.84-1.8a33.4,33.4,0,0,1,10.26-12.24,30.61,30.61,0,0,1,7-3.68c1.19-.47,2.36-.85,3.51-1.25s2.41-.77,3.62-1.1A44.14,44.14,0,0,1,271.89,265l0,.25a90.38,90.38,0,0,0-13.41,5.22c-1.07.52-2.06,1.07-3.13,1.65l-3.16,1.7A29.6,29.6,0,0,0,239,287.92l-.68,1.5c-.22.51-.44,1.05-.63,1.54-.39,1-.7,2-1,3.14s-.62,2.27-.92,3.42-.57,2.25-.8,3.38c-.49,2.26-.86,4.62-1.28,7l-1.31,7.21c-.84,4.79-1.61,9.66-2.64,14.48s-2.2,9.61-3.39,14.31-2.44,9.5-3.91,14.22-3.18,9.43-5,14a115.56,115.56,0,0,1-6.25,13.62,109.68,109.68,0,0,1-7.91,12.8A81,81,0,0,1,193.16,410a82.68,82.68,0,0,1-12,9.38,103.77,103.77,0,0,1-13.35,7.09,79.94,79.94,0,0,1-14.45,5.05,61.71,61.71,0,0,1-7.67,1.29,69,69,0,0,1-7.69.38,66.38,66.38,0,0,1-7.68-.38,62.14,62.14,0,0,1-7.68-1.28,80.24,80.24,0,0,1-14.45-5.06,103.77,103.77,0,0,1-13.35-7.08,82,82,0,0,1-12-9.38,81.17,81.17,0,0,1-10.09-11.43,109.56,109.56,0,0,1-7.91-12.79,117.42,117.42,0,0,1-6.26-13.63c-1.82-4.54-3.54-9.25-5-14s-2.73-9.5-3.92-14.22-2.39-9.48-3.39-14.31-1.8-9.7-2.64-14.49L42.26,308c-.41-2.43-.78-4.79-1.27-7.05-.23-1.13-.51-2.25-.8-3.37s-.6-2.34-.92-3.43-.63-2.12-1-3.13c-.18-.49-.41-1-.63-1.54l-.68-1.5a31.58,31.58,0,0,0-7.74-10.35,31.06,31.06,0,0,0-5.47-3.72l-3.15-1.7c-1.07-.58-2.06-1.13-3.13-1.65A90.38,90.38,0,0,0,4,265.29Z" transform="translate(-3.94 -5.73)"/>
    </clippath>
  <clippath id="clipFingers">
    <path d="M3.94,265.06A42.84,42.84,0,0,1,20,251.7a48.08,48.08,0,0,1,10.17-3.48A47.38,47.38,0,0,1,41,247a41.24,41.24,0,0,1,16.19,3.43,35.94,35.94,0,0,1,5,2.74,37.84,37.84,0,0,1,8.2,7.59c.58.69,1.18,1.49,1.68,2.17L73.56,265l1.51,2.15.76,1.1.38.57.19.29.11.16c.06.1-.12-.16,0,0,.49.69,1,1.36,1.41,1.93a7.33,7.33,0,0,0,1.3,1.31c.11.08.23.17.35.24l.19.12s.13.08,0,0a1.24,1.24,0,0,0-.24-.11l-.08,0h.06s0,0-.11.07-.11.11-.07,0a3.07,3.07,0,0,0,.3-1.42c0-.76.11-1.42.13-2.27l.13-5.09q.13-10.24.11-20.55c0-13.73-.16-27.46-.26-41.19s-.26-27.46-.23-41.2l0-20.61c0-.86,0-1.72,0-2.63a28.58,28.58,0,0,1,.29-2.92,19.28,19.28,0,0,1,.69-2.89c.17-.47.3-.95.49-1.41l.64-1.35a8.37,8.37,0,0,1,.74-1.3c.27-.42.52-.85.82-1.24a20.67,20.67,0,0,1,1.94-2.23,18.85,18.85,0,0,1,4.67-3.41,21.27,21.27,0,0,1,5.32-2,19.08,19.08,0,0,1,2.84-.44,14.47,14.47,0,0,1,1.48,0c.49,0,1,.1,1.42.14s.94.1,1.41.19l1.38.35.68.18.66.27,1.31.53a17.84,17.84,0,0,1,4.54,3.24,21.76,21.76,0,0,1,3.33,4.29,29.35,29.35,0,0,1,2.22,4.84,22.23,22.23,0,0,1,.73,2.57l.12.65a2.3,2.3,0,0,0,.13.44.68.68,0,0,0,.19.26l.09.06h0l-.17,0a1.12,1.12,0,0,0,.21-.55c.05-.32,0-.76.06-1.2,0-.86,0-1.71,0-2.57,0-3.44-.16-6.88-.34-10.33,0-.88-.13-1.69-.09-2.64l0-1.39c0-.46.1-.93.16-1.39a19.65,19.65,0,0,1,.55-2.79,25.06,25.06,0,0,1,1-2.71,21.81,21.81,0,0,1,3.06-5c.31-.39.65-.73,1-1.1a11.46,11.46,0,0,1,1-1l1.11-1c.39-.3.79-.59,1.19-.88a20.68,20.68,0,0,1,5.33-2.74,19.34,19.34,0,0,1,6.16-1.1,20.56,20.56,0,0,1,11.48,3.84c.41.29.81.58,1.2.88l1.11,1a13,13,0,0,1,1.06,1c.33.37.68.72,1,1.1a22,22,0,0,1,3.07,5c.22.43.34.91.52,1.35a13,13,0,0,1,.46,1.37,22.59,22.59,0,0,1,.56,2.79c0,.47.14.93.16,1.39l0,1.4c0,1-.06,1.76-.1,2.64-.18,3.45-.38,6.89-.39,10.33,0,.86,0,1.72,0,2.58,0,.43,0,.87.06,1.19a1,1,0,0,0,.23.58c.08,0-.19,0-.15,0h0a.3.3,0,0,0,.1-.07.72.72,0,0,0,.19-.27,1.42,1.42,0,0,0,.13-.44l.12-.65a21.68,21.68,0,0,1,.73-2.57,29.35,29.35,0,0,1,2.22-4.84,21,21,0,0,1,3.32-4.29,17.53,17.53,0,0,1,4.52-3.25l1.31-.54.67-.27.68-.18,1.38-.35c.46-.1.93-.13,1.4-.2s.93-.14,1.43-.14a12.1,12.1,0,0,1,1.48,0,17.8,17.8,0,0,1,2.85.43,20.15,20.15,0,0,1,5.34,2,18.94,18.94,0,0,1,4.68,3.42,19.71,19.71,0,0,1,2,2.23c.3.4.55.83.83,1.25a9.27,9.27,0,0,1,.74,1.3l.64,1.36c.19.46.33.94.49,1.41a18.28,18.28,0,0,1,.7,2.9c.19,1,.19,1.95.29,2.93s0,1.77,0,2.64v20.6c0,13.74-.2,27.47-.29,41.2s-.29,27.46-.31,41.19c0,6.86,0,13.72.1,20.55l.12,5.09c0,.85.09,1.51.13,2.28a3.21,3.21,0,0,0,.3,1.43c0,.07,0,0-.06,0s-.13,0-.1,0h.07s.06,0-.07,0l-.23.1c-.12.06,0,0,0,0l.19-.11.35-.25a7.44,7.44,0,0,0,1.31-1.32c.45-.56.92-1.23,1.41-1.93.12-.17-.06.1,0,0l.1-.16.19-.3.39-.57.75-1.09,1.52-2.15L204,263c.5-.68,1.1-1.48,1.67-2.17a38.22,38.22,0,0,1,8.2-7.57,34.75,34.75,0,0,1,5-2.73A41.43,41.43,0,0,1,235,247.05a47.86,47.86,0,0,1,10.77,1.23,48.37,48.37,0,0,1,10.16,3.48A42.6,42.6,0,0,1,272,265.08l-.18.17A47.75,47.75,0,0,0,254.58,255a46.64,46.64,0,0,0-9.63-2.14,44.28,44.28,0,0,0-9.74-.25,35.6,35.6,0,0,0-9.28,2,34.52,34.52,0,0,0-8.4,4.11,37.74,37.74,0,0,0-7,6.22c-.55.61-1,1.16-1.55,1.85l-1.59,2-1.55,2-.74,1-.78,1.09c-.52.69-1.06,1.41-1.7,2.17a14.36,14.36,0,0,1-2.38,2.26c-.23.17-.47.33-.71.48l-.36.22-.26.14a4.73,4.73,0,0,1-.53.23,6,6,0,0,1-1.33.28,6.22,6.22,0,0,1-1.22,0,5.57,5.57,0,0,1-2.5-.89,5.67,5.67,0,0,1-1.77-1.92,7.72,7.72,0,0,1-.76-1.92,8.3,8.3,0,0,1-.18-.86c0-.24,0-.48-.08-.73-.06-.94-.17-2-.19-2.86l-.13-5.21q-.15-10.35-.14-20.65c0-13.75-.06-27.49,0-41.23s.14-27.48.37-41.21l.37-20.6c0-.85,0-1.71,0-2.52s0-1.48-.13-2.19a13.84,13.84,0,0,0-.42-2.13c-.11-.34-.19-.69-.31-1s-.28-.66-.41-1a5.79,5.79,0,0,0-.47-1c-.18-.31-.33-.64-.52-.94a14.83,14.83,0,0,0-1.33-1.74,19.36,19.36,0,0,0-1.56-1.58,18.61,18.61,0,0,0-5.91-3.41,14.5,14.5,0,0,0-2.19-.59,9.58,9.58,0,0,0-2.23-.15c-.38,0-.78,0-1.16,0l-1.14.17-.58.08-.55.16-1.12.31a15.08,15.08,0,0,0-4.08,2.32,19.89,19.89,0,0,0-5.67,7.93,21.56,21.56,0,0,0-.81,2.34l-.15.61a3.6,3.6,0,0,1-.28.77,2,2,0,0,1-.62.71,1.58,1.58,0,0,1-.47.23,1.07,1.07,0,0,1-.27.06A1.14,1.14,0,0,1,158,138a1.46,1.46,0,0,1-.76-.78,3.32,3.32,0,0,1-.22-.8c-.06-.52,0-.95,0-1.37,0-.86,0-1.71-.07-2.57-.12-3.43-.43-6.85-.73-10.27a19.62,19.62,0,0,0-.29-2.51l-.21-1.17c-.09-.38-.23-.75-.34-1.13a13.6,13.6,0,0,0-2.16-4.05,16.71,16.71,0,0,0-3.25-3.1,21.33,21.33,0,0,0-3.87-2.16,22.32,22.32,0,0,0-8.07-1.9,21.88,21.88,0,0,0-8.08,1.86,20.69,20.69,0,0,0-3.87,2.15,16.87,16.87,0,0,0-3.27,3.11,13.53,13.53,0,0,0-2.16,4.06c-.11.38-.26.75-.35,1.13l-.21,1.18a24.06,24.06,0,0,0-.28,2.51c-.29,3.41-.57,6.84-.68,10.27,0,.85,0,1.71,0,2.57a13.78,13.78,0,0,1,0,1.38,2.88,2.88,0,0,1-.21.8,1.52,1.52,0,0,1-.78.79,1.06,1.06,0,0,1-.48.07,1.7,1.7,0,0,1-.28-.06,2,2,0,0,1-.48-.24,2,2,0,0,1-.62-.72,3.09,3.09,0,0,1-.29-.78l-.15-.6a18.66,18.66,0,0,0-.81-2.35,20.06,20.06,0,0,0-5.64-7.93,15.08,15.08,0,0,0-4.08-2.32l-1.12-.32-.55-.17-.58-.08-1.14-.17c-.38,0-.78,0-1.16,0a9.07,9.07,0,0,0-2.23.14,16,16,0,0,0-2.21.57A17.39,17.39,0,0,0,92,125a20.45,20.45,0,0,0-1.81,1.37A19.61,19.61,0,0,0,88.66,128a14.83,14.83,0,0,0-1.33,1.74c-.2.3-.35.64-.53.95a5.79,5.79,0,0,0-.47,1l-.42,1c-.12.34-.2.7-.3,1a12.68,12.68,0,0,0-.43,2.14c-.13.71-.08,1.47-.14,2.2s0,1.67,0,2.52l.35,20.6c.28,13.73.33,27.47.43,41.21s.06,27.48.05,41.23c0,6.87,0,13.75-.13,20.65l-.13,5.21c0,.86-.12,1.92-.19,2.87a6,6,0,0,1-.07.73,8.3,8.3,0,0,1-.18.86,8,8,0,0,1-.76,1.92,5.77,5.77,0,0,1-1.78,1.94,5.7,5.7,0,0,1-2.52.9,7.11,7.11,0,0,1-1.22,0,5.54,5.54,0,0,1-1.34-.28,4.74,4.74,0,0,1-.54-.23l-.26-.14-.36-.22-.72-.48a14.36,14.36,0,0,1-2.38-2.26c-.65-.77-1.19-1.48-1.71-2.17l-.78-1.1-.74-1-1.55-2-1.59-2c-.54-.68-1-1.23-1.55-1.84a37.52,37.52,0,0,0-7-6.2A34.63,34.63,0,0,0,50,254.65a35.85,35.85,0,0,0-9.27-2,44.82,44.82,0,0,0-9.73.24A47.09,47.09,0,0,0,21.39,255,47.75,47.75,0,0,0,4.13,265.23Z" transform="translate(-3.94 -5.73)"/>
  </clippath>
  <clippath id="clipFlame">
    <path d="M141.73,5.85c-.13,0-.34.31-.48.5s-.3.41-.44.63c-.28.43-.55.86-.81,1.31-.52.88-1,1.79-1.5,2.7q-1.42,2.74-2.61,5.58a43.81,43.81,0,0,0-2,5.78,14.56,14.56,0,0,0-.56,5.81A16.36,16.36,0,0,0,134,31c.29.93.66,1.91,1,3a18.14,18.14,0,0,1,.59,3.26c.11,1.09.16,2.15.17,3.25a24.87,24.87,0,0,1-.89,6.56,32.31,32.31,0,0,1-2.41,6.12c-1.1,2-2.3,3.69-3.37,5.41a39.77,39.77,0,0,0-2.76,5.1,16.7,16.7,0,0,0-1.35,5.17,22.89,22.89,0,0,0,0,2.76c.06.93.13,1.86.27,2.76a16.31,16.31,0,0,0,4.41,9.32,11.72,11.72,0,0,0,8.89,3.51,12.64,12.64,0,0,0,8.81-4.11,20.85,20.85,0,0,0,4.88-9.52,39.51,39.51,0,0,0,.93-11.48,43.87,43.87,0,0,0-2.43-11.46,51.42,51.42,0,0,0-5.11-10.81c-2.21-3.41-4.69-6.77-6.8-10.43a30.46,30.46,0,0,1-1.45-2.85,11.35,11.35,0,0,1-1-3.17,22.17,22.17,0,0,1,.26-6.36,23.62,23.62,0,0,1,2-6,26.82,26.82,0,0,1,1.54-2.72c.28-.44.57-.87.86-1.29l.44-.64.21-.32A2.05,2.05,0,0,0,141.73,5.85Zm0-.12c.15.11,0,.2,0,.26l-.09.18-.19.34-.39.67c-.27.44-.53.89-.77,1.34a27,27,0,0,0-1.32,2.77,23,23,0,0,0-1.54,5.88,20,20,0,0,0,.22,6,16.62,16.62,0,0,0,2.63,5.21c2.3,3.34,5,6.41,7.6,9.73a54.38,54.38,0,0,1,6.45,11A46.82,46.82,0,0,1,158,61.64a42.28,42.28,0,0,1-.38,13.17,25.89,25.89,0,0,1-6,12.44,18.8,18.8,0,0,1-13,6.17,17.81,17.81,0,0,1-7.31-1.31A18.07,18.07,0,0,1,125.22,88a21.75,21.75,0,0,1-5.68-12.84,28.39,28.39,0,0,1,.1-6.83,21.82,21.82,0,0,1,2.1-6.68A40.72,40.72,0,0,1,125.23,56c1.24-1.71,2.57-3.34,3.54-4.88a30.24,30.24,0,0,0,2.6-5.18,21.23,21.23,0,0,0,1.29-5.6,29,29,0,0,0,.12-2.95,17,17,0,0,0-.26-2.86c-.18-1-.46-1.93-.69-3a19.7,19.7,0,0,1-.42-3.23,16.33,16.33,0,0,1,1.12-6.39A50.11,50.11,0,0,1,135,16.17c.93-1.86,2-3.67,3-5.44.54-.89,1.1-1.76,1.69-2.62.29-.42.59-.85.9-1.26.16-.21.32-.41.49-.61l.27-.29C141.51,5.88,141.54,5.74,141.77,5.73Z" transform="translate(-3.94 -5.73)"/>
    <path d="M139,68.62a2.13,2.13,0,0,1-.52-.94c0-.24-.1-.49-.12-.71a3.49,3.49,0,0,1,0-1.25c0-.4.06-.8.13-1.18s.19-.74.27-1.12a29.1,29.1,0,0,0,.95-4.62,45.88,45.88,0,0,0,.11-9.74,77.35,77.35,0,0,0-1.48-9.87c-.69-3.27-1.52-6.54-2.51-9.76l.05,0a84.8,84.8,0,0,1,6.58,19.27,49.11,49.11,0,0,1,1,10.4c0,.88-.07,1.77-.16,2.67a24.76,24.76,0,0,1-.4,2.68,8.36,8.36,0,0,1-1,2.54,4.49,4.49,0,0,1-1,1.07,5.55,5.55,0,0,1-.63.45,1.58,1.58,0,0,1-1,.23Z" transform="translate(-3.94 -5.73)"/>
  </clippath>
  <clippath id="clipEye">
    <path d="M118.56,256.25a20.48,20.48,0,0,0-1.91,1.16l-1.85,1.16c-1.23.78-2.46,1.58-3.66,2.42a75.28,75.28,0,0,0-6.91,5.31,51,51,0,0,0-10.86,13l-.17-3.05h0a80.37,80.37,0,0,0,19.29,19.13,51.79,51.79,0,0,0,12.11,6.17A41.35,41.35,0,0,0,138,303.87a42,42,0,0,0,13.36-2.32,52.78,52.78,0,0,0,12.1-6.19,80.51,80.51,0,0,0,19.3-19.11h0l-.18,3.1A52.7,52.7,0,0,0,171.6,266.2a81.07,81.07,0,0,0-14.54-9.95h0a14.87,14.87,0,0,1,4,2.2,21.55,21.55,0,0,1,3.35,3.13A23.67,23.67,0,0,1,169,269.7a24.4,24.4,0,0,1,1.2,9.52,25.21,25.21,0,0,1-2.51,9.32,29,29,0,0,1-13,12.89,39.07,39.07,0,0,1-33.78.12,28.35,28.35,0,0,1-12.93-13,25.32,25.32,0,0,1-1.29-18.78,23.8,23.8,0,0,1,4.54-8.15,20.66,20.66,0,0,1,3.32-3.16A14.73,14.73,0,0,1,118.56,256.25Zm0,0a61.81,61.81,0,0,0-4.4,15.33,40.33,40.33,0,0,0-.31,7.16,32,32,0,0,0,4.22,13.8,24.91,24.91,0,0,0,4.89,5.95,21.69,21.69,0,0,0,6.86,4,24.18,24.18,0,0,0,8,1.37,23.3,23.3,0,0,0,8-1.45,21.62,21.62,0,0,0,3.62-1.76,22.57,22.57,0,0,0,3.2-2.36,28.13,28.13,0,0,0,7.93-12.72,31,31,0,0,0,1.31-6.95,38.25,38.25,0,0,0-.31-7.13,61.68,61.68,0,0,0-4.52-15.28h0a81.62,81.62,0,0,1,16.07,7.93,56.3,56.3,0,0,1,13.61,12.3l1.11,1.41-1.29,1.69h0c-6.74,6.59-13.85,12.85-21.93,17.69a61.58,61.58,0,0,1-12.79,5.85,45,45,0,0,1-27.76,0,60.14,60.14,0,0,1-12.79-5.86c-8.07-4.85-15.17-11.12-21.87-17.74h0l-1.27-1.66,1.1-1.39a54.92,54.92,0,0,1,13.47-12.2,79.73,79.73,0,0,1,7.78-4.39c1.33-.66,2.67-1.29,4-1.9l2-.9C117.29,256.8,118,256.56,118.56,256.25Z" transform="translate(-3.94 -5.73)"/>
  </clippath>
  </defs>
  <title>Flame Hamsa Rework 9 (hamsa HANDY MARVELOUS left)</title>
  <g id="logoFull">
    <g id="logoHamsaOnly">
      <g clip-path="url(#clipPalm)" id="groupPalm">
        <path class="strokePath cls-1 palm" d="M4.05,265.17a58.35,58.35,0,0,1,17,4.5c4.48,1.94,8.15,3.42,12,7a34,34,0,0,1,8.25,12.25,49.58,49.58,0,0,1,2.25,7.5,107.41,107.41,0,0,1,2,11s.48,3.18,2.25,13.25c1.52,8.67,3.22,15.26,4.5,20.25a209.27,209.27,0,0,0,8.75,28,122.44,122.44,0,0,0,7,15.25C71.3,390,76,398.31,84.8,406.67a84.67,84.67,0,0,0,24,15.75,71.6,71.6,0,0,0,17.25,5.75,63.19,63.19,0,0,0,11.93,1,63.09,63.09,0,0,0,11.92-1,71.6,71.6,0,0,0,17.25-5.75,84.81,84.81,0,0,0,24-15.75c8.81-8.36,13.49-16.64,16.75-22.5a123.91,123.91,0,0,0,7-15.25,210.74,210.74,0,0,0,8.75-28c1.28-5,3-11.58,4.5-20.25,1.76-10.07,2.25-13.25,2.25-13.25a107.41,107.41,0,0,1,2-11,49.58,49.58,0,0,1,2.25-7.5,34,34,0,0,1,8.25-12.25c3.85-3.58,7.51-5.06,12-7a58.28,58.28,0,0,1,17-4.5" transform="translate(-4.04 -5.78)"/>
      </g>
      <g clip-path="url(#clipFingers)" id="groupFingers">
        <path class="strokePath cls-3 fingers" d="M4,265.15a45.43,45.43,0,0,1,12.1-9.63,46.65,46.65,0,0,1,14.62-5,41.9,41.9,0,0,1,20.38,1.13,34.44,34.44,0,0,1,11.12,5.75,41.54,41.54,0,0,1,6.88,7C73,269.36,74,271,74,271c1.6,2.19,2.57,3.49,4.38,4.5a3,3,0,0,0,2.5-.12c1.24-.7,1.52-2.38,1.62-3,1.14-6.94-.26-131.11-.25-134.25.06-12.75,11.63-17.72,17.39-17.67,12.36.1,16.35,12.74,16.86,15.54.25,1.38,1.13,1.37,1.13,1.37s.74,0,.74-1.71c0-6.5.1-10.86.26-15.41.4-11.78,11.76-18.07,19.38-18s18.89,6.31,19.29,18c.16,4.55.24,8.91.26,15.41,0,1.66.74,1.71.74,1.71s.88,0,1.13-1.37c.51-2.8,4.5-15.44,16.86-15.54,5.76,0,17.32,4.92,17.39,17.67,0,3.14-1.39,127.32-.25,134.25.1.62.38,2.3,1.62,3a3,3,0,0,0,2.5.12c1.81-1,2.78-2.31,4.38-4.5,0,0,1.05-1.66,4.87-6.62a41.12,41.12,0,0,1,6.88-7,34.44,34.44,0,0,1,11.12-5.75,41.9,41.9,0,0,1,20.38-1.13,46.65,46.65,0,0,1,14.62,5,45.43,45.43,0,0,1,12.1,9.63" transform="translate(-4.04 -5.78)"/>
      </g>
      <g clip-path="url(#clipFlame)" id="groupFlame">
        <path class="strokePath cls-4 flame" d="M141.75,5.79c-.68-.24-9.85,14.67-9.42,21.88.27,4.52,1.65,5.48,1.84,10a25,25,0,0,1-3.4,14.15c-2.18,4.07-8.05,9.93-8.57,17.39-1,13.46,7,21.12,15.8,21.12,9.46,0,18.83-8.91,17.62-27.5-.57-8.79-5-18.09-8.29-23S137.6,27.56,137,23.17C135.58,12.74,142.32,6,141.75,5.79Z" transform="translate(-4.04 -5.78)"/>
        <path class="strokePath cls-5 flame2" d="M139.13,68.67c.08-.18.79-1.75,1-2.38,3.7-10.35.27-25.1-4.26-36.87" transform="translate(-4.04 -5.78)"/>
      </g>
      <g clip-path="url(#clipEye)" id="groupEye">
        <path class="strokePath cls-2 eye" d="M118.56,256.25c-12.45,6.3-20.63,12.05-27.25,21.67,33.25,38.5,65.1,32.55,93.33,0-7-10.18-16.88-16.77-27.58-21.67a30,30,0,0,1,9.06,21c0,13.38-11.31,27.36-28.35,27.33a27.58,27.58,0,0,1-28.13-27.33A30.28,30.28,0,0,1,118.56,256.25Z" transform="translate(-4.04 -5.78)"/>
      </g>
    </g>
      <g id="M">
        <path class="cls-8 M" d="M137.91,367.45Q150,351.09,186.36,301.7V409.23h-6.59v-87l-41.86,56.85q-13.83-18.94-41.73-56.85v87H89.59V301.7Z" transform="translate(-3.94 -5.73)"/>
      </g>
      <g id="amp">
        <path class="cls-9 ampersand" d="M171.77,299c-7.09,6.43-15.45,3.16-21.16-1.4-1-.81-2.84-2.37-4.94-4.21a15.93,15.93,0,0,1-7,2.73c-7.58,1-15.88-3.08-16.13-10.66a10,10,0,0,1,5.23-9.47,11.83,11.83,0,0,1-2-6c-.18-5.05,3.08-8.65,8.8-8.6a10.33,10.33,0,0,1,7.92,3.4l-.61,5.44h-.46c-.17-4.62-2.9-7.4-6.58-7.42s-6.08,2.85-5.94,6.83,2.83,7.11,7.63,11.48c1,.87,6.3,5.7,10.47,9.39,8-7.75,10.27-24.09-5-32.44l.22-.29c15.81,6.8,14.74,24.91,5.82,33.65l2.9,2.51c5.58,4.7,12.51,8.78,20.58,4.65Zm-33.16-4.32a13.51,13.51,0,0,0,6-2.23c-3.91-3.43-8.36-7.42-10-9a45.54,45.54,0,0,1-6-6.36,10.14,10.14,0,0,0-2.71,7.61c.2,5.86,6,10.66,12.78,9.94Z" transform="translate(-3.94 -5.73)"/>
      </g>
        <g id="H">
      <path class="cls-11 H" d="M102.47,136.85V213h71V136.85h7.88V242.91h-7.88V220.39h-71v22.52H94.6V136.85Z" transform="translate(-3.94 -5.73)"/>
    </g>
  </g>
    <g id="ANDY">
      <path class="cls-10 A-NDY" d="M233.25,181.47Q241,202,256.3,242.91h-4.18l-4.92-13H219.31q-1.65,4.35-4.92,13H210.2L231.12,187c.17-.38.41-1,.74-1.8S232.65,183.16,233.25,181.47ZM220.87,225.6h24.77q-4.09-11-12.39-33Q229.16,203.61,220.87,225.6Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-10 A-N-DY" d="M302,231.09V181.47h4.18v61.44q-13.95-16.5-41.92-49.47v49.47h-4.18V181.47Q274.06,198,302,231.09Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-10 AN-D-Y" d="M326.28,181.47a29.52,29.52,0,0,1,8.53,1.23,28.54,28.54,0,0,1,7.63,3.36,30.59,30.59,0,0,1,10.5,11,30.5,30.5,0,0,1,0,30.27,30.59,30.59,0,0,1-10.5,11,28.89,28.89,0,0,1-7.63,3.37,29.52,29.52,0,0,1-8.53,1.23H310.86V181.47h15.42Zm0,57.25a25.88,25.88,0,0,0,7.38-1.06,27.47,27.47,0,0,0,6.57-3,26,26,0,0,0,9.1-9.43,25.54,25.54,0,0,0,3.45-13.12,26,26,0,0,0-1.07-7.39,25.19,25.19,0,0,0-2.87-6.56,26.76,26.76,0,0,0-9.52-9.11,25.44,25.44,0,0,0-13-3.44H315v53.07h11.24Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-10 AND-Y" d="M374.58,220.76q4.67-9.84,18.7-39.29h4.35q-5.25,11.07-20.92,44.13v17.31h-4.27V225.6q-7-14.68-20.91-44.13h4.34Q362.11,194.6,374.58,220.76Z" transform="translate(-3.94 -11.73)"/>
  </g>
  <g id="ARVELOUS">
      <path class="cls-6 A-RVELOUS" d="M249.25,301.23q7.71,20.5,23.05,61.44h-4.18l-4.92-13.05H235.31q-1.65,4.35-4.92,13.05H226.2l20.92-55.87c.17-.38.41-1,.74-1.8S248.65,302.92,249.25,301.23Zm-12.38,44.13h24.77q-4.09-11-12.39-33Q245.16,323.38,236.87,345.36Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 A-R-VELOUS" d="M322.21,323.29a20.94,20.94,0,0,1-.9,6.15,21.45,21.45,0,0,1-2.38,5.5,22.69,22.69,0,0,1-7.87,7.55,21.61,21.61,0,0,1-10.91,2.87h-1q2.55,5.82,7.71,17.31H302.2q-2.55-5.75-7.8-17.31H280.29v17.31h-4.18V301.23h24a22.76,22.76,0,0,1,6.15.82,23.47,23.47,0,0,1,5.49,2.46,22.61,22.61,0,0,1,7.55,7.87A21.59,21.59,0,0,1,322.21,323.29Zm-41.92,17.88h19.86a17.22,17.22,0,0,0,12.63-5.25A17,17,0,0,0,318,323.29a17.92,17.92,0,0,0-17.88-17.88H280.29v35.76Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 AR-V-ELOUS" d="M343.19,351.51q4.76-12.56,18.87-50.28h4.18q-5.75,15.33-23.05,61.44-7.71-20.51-23.05-61.44h4.18Q330.64,318,343.19,351.51Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 ARV-E-LOUS" d="M416.07,301.23v4.18H374.23v39.95H393.1v4.26H374.23v8.86h41.92v4.19h-46.1V301.23Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 ARVE-L-OUS" d="M424.14,301.23v57.25h26.58v4.19H420V301.23Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 ARVEL-O-US" d="M474.36,301.23a29.59,29.59,0,0,1,8.54,1.23,28.62,28.62,0,0,1,7.62,3.36,30.59,30.59,0,0,1,10.5,11,29.42,29.42,0,0,1,4,15.09,29.89,29.89,0,0,1-1.23,8.62,28.68,28.68,0,0,1-3.36,7.63,30.84,30.84,0,0,1-11,10.5,30.5,30.5,0,0,1-30.27,0,30.68,30.68,0,0,1-11-10.5,29,29,0,0,1-3.37-7.63,29.89,29.89,0,0,1-1.23-8.62,29.57,29.57,0,0,1,1.23-8.53,29.18,29.18,0,0,1,3.37-7.63,30.68,30.68,0,0,1,11-10.5A29.64,29.64,0,0,1,474.36,301.23Zm0,57.25a26,26,0,0,0,7.39-1.06,27.22,27.22,0,0,0,6.56-3,26,26,0,0,0,9.11-9.43,25.64,25.64,0,0,0,3.44-13.13,26,26,0,0,0-1.07-7.38,24.86,24.86,0,0,0-2.87-6.56,26.73,26.73,0,0,0-9.51-9.11A26.3,26.3,0,0,0,467,306.48a24.54,24.54,0,0,0-6.64,2.87,26.65,26.65,0,0,0-9.11,9.51,26.38,26.38,0,0,0-2.38,20.43,25,25,0,0,0,2.87,6.64,26.85,26.85,0,0,0,9.44,9.11A26.05,26.05,0,0,0,474.36,358.48Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 ARVELO-U-S" d="M551.53,301.23h4.26v38.39a22.33,22.33,0,0,1-.9,6.39,22.79,22.79,0,0,1-10.75,13.62,22.9,22.9,0,0,1-22.8,0A22.9,22.9,0,0,1,510.59,346a22.33,22.33,0,0,1-.9-6.39V301.23h4.18v38.39a18.86,18.86,0,0,0,.74,5.25,17,17,0,0,0,2.14,4.67,18.66,18.66,0,0,0,6.72,6.48,18,18,0,0,0,9.27,2.46,18.4,18.4,0,0,0,5.25-.74,17.3,17.3,0,0,0,4.68-2.13,18.66,18.66,0,0,0,6.48-6.72,18,18,0,0,0,2.46-9.27Q551.61,326.81,551.53,301.23Z" transform="translate(-3.94 -11.73)"/>
      <path class="cls-6 ARVELOU-S" d="M561.39,307.62a10.48,10.48,0,0,1,6.07-5.57,10.64,10.64,0,0,1,3.69-.66,10.15,10.15,0,0,1,4.43,1.07l-1.31,2.87-.41,1a6.37,6.37,0,0,0-5-.24,6.24,6.24,0,0,0-3.61,3.36,6.46,6.46,0,0,0,3.12,8.61l4.27,1.81,1.47.57a24,24,0,0,1,5.17,3.36,22.69,22.69,0,0,1,3.94,4.6,21.75,21.75,0,0,1,3.52,10.33q.09,1,.09,1.89a22.12,22.12,0,0,1-2.05,9.19,21.66,21.66,0,0,1-7.22,8.69,22,22,0,0,1-10.17,3.94,21.21,21.21,0,0,1-2.63.16,18.31,18.31,0,0,1-3.45-.32,19.54,19.54,0,0,1-5.9-1.81l1.31-2.79.49-1a17.09,17.09,0,0,0,13.62.57A17.46,17.46,0,0,0,581,348a17.84,17.84,0,0,0-8.69-23.7L568,322.47l-1.48-.57a10.85,10.85,0,0,1-5.16-14.28Z" transform="translate(-3.94 -11.73)"/>
  </g>
</svg>
</div>
<style>
  div#container {
  perspective: 50px;
  transform-style: preserve-3d;
  pointer-events: none
}

svg {
  max-height: 95vh;
}

.cls-1, .cls-2, .cls-4, .cls-6 {
  stroke-width: 8px
}

.cls-3, .cls-5  {
  stroke-width: 7px;
}

.palm {
  stroke-dasharray: 470;
  stroke-dashoffset: 0;
  animation: palmStrokeAnimation 5s ease-in-out both
}

.fingers  {
  stroke-dasharray: 660;
  stroke-dashoffset: 0;
  animation: fingerStrokeAnimation 5s ease-in-out both
}

.flame  {
  stroke-dasharray: 195;
  stroke-dashoffset: 0;
  animation: flameStrokeAnimation 5s ease-in-out both
}

.eye  {
  stroke-dasharray: 325;
  stroke-dashoffset: 0;  
  animation: eyeStrokeAnimation 5s ease-in-out  both
}

.ampersand, .H, .M  {
  animation: fadeIn 2s ease-in-out 3.5s both;
}

#logoFull {
  transform: translateX(160.97px);
  animation: slideLeft 1.3s ease-in-out 5s both;
}

#ARVELOUS, #ANDY {
  transform: translateY(-6.73px)
}

.A-RVELOUS  {
  opacity: 0;


}

.A-R-VELOUS {
  opacity: 0;

}

.AR-V-ELOUS {
  opacity: 0;

}

.ARV-E-LOUS {
  opacity: 0;

}

.ARVE-L-OUS {
  opacity: 0;

}

.ARVEL-O-US {
  opacity: 0;

}

.ARVELO-U-S {
  opacity: 0;

}

.ARVELOU-S  {
  opacity: 0;

}

.A-NDY {
  opacity: 0;

}

.A-N-DY {
  opacity: 0;

}

.AN-D-Y {
  opacity: 0;

}

.AND-Y {
  opacity: 0;

}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  var HM = anime.timeline({autoplay: true, loop: true})  
HM

.add({
  targets: '.strokePath',
  strokeWidth: [1,1],
  strokeDashoffset: [
    anime.setDashoffset, 0
  ],
  easing: 'easeInOutSine',
  duration: 2500,
 })
.add ({
  targets: '.strokePath',
  strokeWidth: [1, 8],
  duration: 2500,
  easing: 'linear'
})
.add ({
  targets: '.H, .M, .ampersand',
  opacity: [0,1],
  duration: 2000,
  easing: 'easeInQuint',
  offset: '-=1500'
})
.add({
  targets: '#groupPalm, #groupFingers, #groupFlame, #groupEye, #H, #amp, #M',
      opacity: {
    value: [1, 0],
    duration: 1700,
    easing: 'easeInOutQuad'
  },
   rotateY: function () {return [0, anime.random(-540,540)];},
  rotateX: function () {return [0, anime.random(-100,100)];},
  rotateZ: function () {return [0, anime.random(-100,100)];},
  translateZ: function () {return [0, anime.random(-2000,2000)];},
  skewY: function () {return [0, anime.random(-200,200)];},
  duration: 1700,
    delay: function(el, i) { return i * 90},
  easing: 'easeInCubic',
  offset: '+=1100'
})

.add ({
  targets: '#logoFull',
  translateX: [160.97,0],
  easing: 'easeInOutSine',
  duration: 1
})
.add({
  targets: '#groupPalm, #groupFingers, #groupFlame, #groupEye, #H, #amp, #M',
      opacity: {
    value: [0, 1],
    duration: 1100,
    easing: 'easeOutQuad'
  },
   rotateY: function () {return [anime.random(-270,270), 0];},
  rotateX: function () {return [anime.random(-100,100), 0];},
  rotateZ: function () {return [anime.random(-20,20), 0];},
  translateZ: function () {return [anime.random(-2000,2000), 0];},
  skewY: function () {return [anime.random(-200,200), 0];},
  duration: 1500,
    delay: function(el, i) { return i * 90},
  easing: 'easeOutCubic',
  offset: '+=1100'
})

.add ({
  targets: '.A-NDY, .A-N-DY, .AN-D-Y, .AND-Y, .A-RVELOUS, .A-R-VELOUS, .AR-V-ELOUS, .ARV-E-LOUS, .ARVE-L-OUS, .ARVEL-O-US, .ARVELO-U-S, .ARVELOU-S',
  opacity: {
    value: [0, 1],
    duration: 4000,
    easing: 'easeInSine',
  },
  rotateY: function () {return [anime.random(-540,540), 0];},
  rotateX: function () {return [anime.random(-200,200), 0];},
  rotateZ: function () {return [anime.random(-360,360), 0];},
  translateZ: function () {return [anime.random(-2000,2000), 0];},
  skewY: function () {return [anime.random(-200,200), 0];},
  duration: 5000,
    delay: function(el, i) { return i * 90},
  easing: 'easeInOutQuad',
  offset: '-=1800'
})
.add({
  targets: ['svg', 'feFlood', 'feGaussianBlur'],
  stdDeviation: [0, 4],
  floodOpacity: [0, .5],
  duration: 1000,
  easing: 'easeInOutQuad',
  offset: '+=400'
})
.add({
  targets: ['#logoFull', '#ARVELOUS', '#ANDY', 'feFlood', 'feGaussianBlur'],
  floodOpacity: [.5, 0],
  stdDeviation: [4, 0],
  duration: 2000,
  easing: 'easeInOutSine'  
})
.add({
  targets: '.A-NDY, .A-N-DY, .AN-D-Y, .AND-Y, .A-RVELOUS, .A-R-VELOUS, .AR-V-ELOUS, .ARV-E-LOUS, .ARVE-L-OUS, .ARVELO-U-S, .ARVELOU-S',

    opacity: {
    value: [1, 0],
    duration: 5000,
    easing: 'easeOutQuad'
  },
  rotateY: function () {return [0, anime.random(-540,540)];},
  rotateX: function () {return [0, anime.random(-200,200)];},
  rotateZ: function () {return [0, anime.random(-200,200)];},
  translateZ: function () {return [0, anime.random(-2000,2000)];},
  skewY: function () {return [0, anime.random(-200,200)];},
  duration: 5000,
    delay: function(el, i) { return i * 90},
  easing: 'easeInOutQuad',
  offset: '+=5000'
})
.add({
  targets: '.ARVEL-O-US',
  rotateX: 720,
  rotateY: {
    value: 2160,
    duration: 3000,
    easing: 'easeInOutCirc'},
  translateX: -6750,
  translateY: -4700,
  scale: 14.8,
  duration: 3000,
  easing: 'easeInQuint',
  opacity: 0,
  offset: '-=4000'
})
.add({
  targets: '#groupPalm, #groupFingers, #groupFlame, #groupEye, #H, #amp, #M',
      opacity: {
    value: [1, 0],
    duration: 5000,
    easing: 'easeOutQuad'
  },
   rotateY: function () {return [0, anime.random(-540,540)];},
  rotateX: function () {return [0, anime.random(-200,200)];},
  rotateZ: function () {return [0, anime.random(-200,200)];},
  translateZ: function () {return [0, anime.random(-2000,2000)];},
  skewY: function () {return [0, anime.random(-200,200)];},
  duration: 5000,
    delay: function(el, i) { return i * 90},
  easing: 'easeInOutQuad',
  offset: '-=4500'
})
.add({
  targets: 'div',
  backgroundColor: '#fff',
  duration: 1500,
  offset: '-=3600',
  easing: 'easeInCirc'
})
.add({
  targets: '*',
  opacity: 0,
  duration: 2100
});


var mediaQueryList = window.matchMedia("(orientation: portrait)" || "(min-aspect-ratio: 3/4)");

if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
  var shape = document.getElementsByTagName("svg")[0];
  shape.setAttribute("viewBox", "0 -200 595 1100");
};
</script>

handyandmarvelous · August 30, 2023

On 8/19/2023 at 1:40 AM, tuanphan said:

add

font-family to this code

.button {
  --offset: 10px;
  --border-size: 2px;
  display: block;
  position: relative;
  padding: 1.5em 3em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: #e55743;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  transition: background 0.8s ease;
font-family: 'orpheus-pro' !important;
}

Thank you so very much!

Is there code to change the color of the text within the button on hover?

https://brianthomaslawblueprint.squarespace.com/

Password: Strat3gy

I'm currently using this markdown block:

<button class="button">
   Areas of Practice
   <div class="button__horizontal"></div>
   <div class="button__vertical"></div>
</button>
<style>
.button {
--offset: 7px;
--border-size: 1.5px;
display: block;
position: relative;
padding: .5em 1em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
color: #000000;
text-transform: uppercase;
letter-spacing: .1em;
outline: none;
cursor: pointer;
font-weight: normal;
font-family: orpheus pro !;
border-radius: 0;
box-shadow: inset 0 0 0 var(--border-size) currentcolor;
transition: background 0.8s ease;
}
.button:hover {
background: #997799;
}
.button__horizontal, .button__vertical {
position: absolute;
top: var(--horizontal-offset, 0);
right: var(--vertical-offset, 0);
bottom: var(--horizontal-offset, 0);
left: var(--vertical-offset, 0);
transition: transform 0.8s ease;
will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
content: "";
position: absolute;
border: inherit;
}
.button__horizontal {
--vertical-offset: calc(var(--offset) * -1);
border-top: var(--border-size) solid currentcolor;
border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
top: calc(var(--vertical-offset) - var(--border-size));
bottom: calc(var(--vertical-offset) - var(--border-size));
left: calc(var(--vertical-offset) * -1);
right: calc(var(--vertical-offset) * -1);
}
.button:hover .button__horizontal {
transform: scaleX(0);
}
.button__vertical {
--horizontal-offset: calc(var(--offset) * -1);
border-left: var(--border-size) solid currentcolor;
border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
top: calc(var(--horizontal-offset) * -1);
bottom: calc(var(--horizontal-offset) * -1);
left: calc(var(--horizontal-offset) - var(--border-size));
right: calc(var(--horizontal-offset) - var(--border-size));
}
.button:hover .button__vertical {
transform: scaleY(0);
}
</style>

tuanphan · August 30, 2023

45 minutes ago, handyandmarvelous said:

Thank you so very much!

Is there code to change the color of the text within the button on hover?

https://brianthomaslawblueprint.squarespace.com/

Password: Strat3gy

I'm currently using this markdown block:

<button class="button">
   Areas of Practice
   <div class="button__horizontal"></div>
   <div class="button__vertical"></div>
</button>
<style>
.button {
--offset: 7px;
--border-size: 1.5px;
display: block;
position: relative;
padding: .5em 1em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
color: #000000;
text-transform: uppercase;
letter-spacing: .1em;
outline: none;
cursor: pointer;
font-weight: normal;
font-family: orpheus pro !;
border-radius: 0;
box-shadow: inset 0 0 0 var(--border-size) currentcolor;
transition: background 0.8s ease;
}
.button:hover {
background: #997799;
}
.button__horizontal, .button__vertical {
position: absolute;
top: var(--horizontal-offset, 0);
right: var(--vertical-offset, 0);
bottom: var(--horizontal-offset, 0);
left: var(--vertical-offset, 0);
transition: transform 0.8s ease;
will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
content: "";
position: absolute;
border: inherit;
}
.button__horizontal {
--vertical-offset: calc(var(--offset) * -1);
border-top: var(--border-size) solid currentcolor;
border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
top: calc(var(--vertical-offset) - var(--border-size));
bottom: calc(var(--vertical-offset) - var(--border-size));
left: calc(var(--vertical-offset) * -1);
right: calc(var(--vertical-offset) * -1);
}
.button:hover .button__horizontal {
transform: scaleX(0);
}
.button__vertical {
--horizontal-offset: calc(var(--offset) * -1);
border-left: var(--border-size) solid currentcolor;
border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
top: calc(var(--horizontal-offset) * -1);
bottom: calc(var(--horizontal-offset) * -1);
left: calc(var(--horizontal-offset) - var(--border-size));
right: calc(var(--horizontal-offset) - var(--border-size));
}
.button:hover .button__vertical {
transform: scaleY(0);
}
</style>

Which color you want to change to?

handyandmarvelous · August 30, 2023

25 minutes ago, tuanphan said:

Which color you want to change to?

#c8a47e

handyandmarvelous · August 30, 2023

2 minutes ago, handyandmarvelous said:

#c8a47e

Also, is there a page on beaverhero.com where I can leave a tip?

tuanphan · September 3, 2023

On 8/30/2023 at 12:05 PM, handyandmarvelous said:

#c8a47e

Add this under </style>

<style>
  button.button:hover:first-line {
    color: #c8a47e;
}
</style>

You can use this link

handyandmarvelous · September 4, 2023

@tuanphan #c8a47e

Also, is there a page on your website where I can leave a tip? You are always so helpful with everyone in the forum. You're very appreciated.

tuanphan · September 4, 2023

12 minutes ago, handyandmarvelous said:

@tuanphan #c8a47e

Also, is there a page on your website where I can leave a tip? You are always so helpful with everyone in the forum. You're very appreciated.

The code/url doesn't work?

handyandmarvelous · September 4, 2023

@tuanphan Thank you. Can I delay the color change by a second or ease it in?

handyandmarvelous · September 4, 2023

@tuanphan the link worked just fine. Thank you!

tuanphan · September 5, 2023

On 9/4/2023 at 9:43 AM, handyandmarvelous said:

@tuanphan Thank you. Can I delay the color change by a second or ease it in?

Thank you.

Try this new code

<style>
  button.button:hover:first-line {
    color: #c8a47e;
    transition: all 0.5s ease;
}
  button.button, button.button:first-line {
  	transition: all 0.5s ease;
  }
</style>

handyandmarvelous · September 7, 2023

On 9/5/2023 at 3:35 AM, tuanphan said:

Thank you.

Try this new code

<style>
  button.button:hover:first-line {
    color: #c8a47e;
    transition: all 0.5s ease;
}
  button.button, button.button:first-line {
  	transition: all 0.5s ease;
  }
</style>

@tuanphan Unfortunately that didn't work.

FTWSGEM · March 12

Hi Tuanphan,

Can you kindly assist with this codepen too please? https://codepen.io/tin-fung-hk/pen/PoRWVRg

Thank you

tuanphan · March 14

On 3/13/2024 at 2:42 AM, FTWSGEM said:

Hi Tuanphan,

Can you kindly assist with this codepen too please? https://codepen.io/tin-fung-hk/pen/PoRWVRg

Thank you

The code looks complex. Do you have another simpler code?

FTWSGEM · March 14

9 hours ago, tuanphan said:

The code looks complex. Do you have another simpler code?

No, sorry. I just want a small black dot as a cursor, do you know another code to achieve that?

How to add Codepen code my website?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources