ФИРМЕННЫЙ ЗНАК РАЗРАБОТЧИКА // ИНТЕРАКТИВНЫЙ 3D-ШИЛЬД

Логотипы WEBLITH
для футера сайтов.

Два компактных ненавязчивых логотипа (38 px по высоте) для размещения в подвале разработанных студией проектов — под светлый и под тёмный футер. Голова Монолита плавно поворачивается вслед за курсором мыши, а клик открывает weblith.ru в новой вкладке (target="_blank").

38 pxкомпактная высота плашки

3D + SVGголова следит за курсором

_blankпереход на weblith.ru

ВАРИАНТ 01 // LIGHT FOOTER

Под светлый футер

LIGHT THEME

Подвигайте мышкой — голова поворачивается за курсором

Способ 1. Короткий код в 2 строки (рекомендуется)

<a href="https://weblith.ru" target="_blank" rel="noopener" data-weblith-badge="light">Разработка сайта — WEBLITH</a>
<script src="https://weblith.ru/assets/brand/weblith-badge.js" async></script>

Способ 2. Полностью автономный HTML + SVG + JS

<!-- WEBLITH — Интерактивный логотип разработчика (ВАРИАНТ ПОД СВЕТЛЫЙ ФУТЕР) -->
<a href="https://weblith.ru" target="_blank" rel="noopener" class="wl-cb wl-cb--light" aria-label="Разработка сайта — веб-студия WEBLITH" title="Разработка сайта — инженерная веб-студия WEBLITH">
  <span class="wl-cb__stage">
    <span class="wl-cb__rig">
      <svg class="wl-cb__svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <g data-wl-part="back">
          <path d="M18 14 C7 17, 6 33, 14 40" stroke="#9A9B95" stroke-width="2.4" stroke-linecap="round" fill="none"/>
          <path d="M46 14 C57 17, 58 33, 50 40" stroke="#7A7C76" stroke-width="2.4" stroke-linecap="round" fill="none"/>
          <polygon points="12,26 16,24 17,44 11,42" fill="#5D605B"/>
          <polygon points="52,26 48,24 47,44 53,42" fill="#484B47"/>
        </g>
        <g data-wl-part="cranium">
          <polygon points="19,12 45,12 50,24 48,47 39,55 25,55 16,47 14,24" fill="#DCDCD6" stroke="#161917" stroke-width="1.8" stroke-linejoin="round"/>
          <polygon points="32,12 45,12 50,24 48,47 39,55 32,55" fill="#B5B6AF" opacity="0.78"/>
          <polygon points="19,12 45,12 48,21 16,21" fill="#EAEAE4"/>
        </g>
        <g data-wl-part="mouse">
          <path d="M22,13 C22,5.5 42,5.5 42,13 L44,17 L20,17 Z" fill="#E4E4DE" stroke="#161917" stroke-width="1.6" stroke-linejoin="round"/>
          <line x1="32" y1="6.5" x2="32" y2="15" stroke="#161917" stroke-width="1.3"/>
          <rect x="30.4" y="8.2" width="3.2" height="5.2" rx="1.5" fill="#5CE63C" stroke="#161917" stroke-width="0.9"/>
        </g>
        <g data-wl-part="face">
          <polygon points="17,24 28,25 27,30 16,29" fill="#161917"/>
          <polygon points="47,24 36,25 37,30 48,29" fill="#161917"/>
          <g data-wl-part="eyes">
            <rect x="19.5" y="26.3" width="5.5" height="1.9" fill="#5CE63C"/>
            <rect x="39.0" y="26.3" width="5.5" height="1.9" fill="#5CE63C"/>
          </g>
          <path d="M20,35 L17.5,37.2 L20,39.4 M22.2,35 L24.7,37.2 L22.2,39.4" stroke="#5CE63C" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M40.5,34.5 L39,36.8 L40.5,39.5 M43.8,34.5 L45.3,36.8 L43.8,39.5" stroke="#5CE63C" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M24,46.5 L32,45.2 L40,46.5 L36,48.6 L28,48.6 Z" fill="#161917"/>
        </g>
        <g data-wl-part="nose">
          <polygon points="32,22 28.2,40.5 32,42.5 35.8,40.5" fill="#F2F2EC" stroke="#161917" stroke-width="1.4" stroke-linejoin="round"/>
          <polygon points="32,22 32,42.5 35.8,40.5" fill="#A9ABA4"/>
        </g>
        <g data-wl-part="grass">
          <path d="M12,58 L15,49 L19,55 L22,48 L26,56 L32,51 L38,56 L42,48 L45,55 L49,49 L52,58 Z" fill="#5CE63C" stroke="#161917" stroke-width="1.2" stroke-linejoin="round"/>
          <rect x="11" y="56.5" width="42" height="4.5" fill="#2A7B1B"/>
        </g>
      </svg>
    </span>
  </span>
  <span class="wl-cb__meta">
    <span class="wl-cb__kicker">Разработка сайта</span>
    <span class="wl-cb__brand">
      <span>WEBLITH</span>
      <span class="wl-cb__dot"></span>
      <svg class="wl-cb__arrow" viewBox="0 0 12 12" fill="none" aria-hidden="true">
        <path d="M2 10L10 2M4 2H10V8" stroke="currentColor" stroke-width="1.7" stroke-linecap="square"/>
      </svg>
    </span>
  </span>
</a>
<style>
.wl-cb{display:inline-flex;align-items:center;gap:9px;height:38px;padding:4px 11px 4px 5px;text-decoration:none!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1;box-sizing:border-box;user-select:none;vertical-align:middle;transition:all .22s ease}
.wl-cb--light{background:#F6F6F3;border:1px solid rgba(22,25,23,.22);color:#161917;box-shadow:0 2px 8px rgba(22,25,23,.08)}
.wl-cb--light:hover{background:#FFF;border-color:#161917;transform:translateY(-1px);box-shadow:3px 3px 0 #5CE63C}
.wl-cb__stage{width:28px;height:28px;flex:0 0 28px;background:#161917;border:1px solid #161917;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:180px}
.wl-cb__rig{width:26px;height:26px;display:block;transform-style:preserve-3d;will-change:transform}
.wl-cb__svg{width:100%;height:100%;display:block;overflow:visible}
.wl-cb__meta{display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left}
.wl-cb__kicker{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#525854;white-space:nowrap}
.wl-cb--light .wl-cb__brand{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#161917;white-space:nowrap}
.wl-cb__dot{width:5px;height:5px;background:#5CE63C;display:inline-block;box-shadow:0 0 6px rgba(92,230,60,.65)}
.wl-cb__arrow{width:10px;height:10px;color:#525854;transition:transform .2s ease,color .2s ease}
.wl-cb:hover .wl-cb__arrow{transform:translate(1.5px,-1.5px);color:#161917}
</style>
<script>
(function(){if(window.__wlCbInit)return;window.__wlCbInit=1;var px=0,py=0,moved=0,last=0;window.addEventListener('pointermove',function(e){px=e.clientX;py=e.clientY;moved=1;last=performance.now()},{passive:true});var states=[];function step(now){var badges=document.querySelectorAll('.wl-cb');for(var i=0;i<badges.length;i++){var b=badges[i];if(!b.__wlSt){b.__wlSt={cx:0,cy:0,stage:b.querySelector('.wl-cb__stage'),rig:b.querySelector('.wl-cb__rig'),back:b.querySelector('[data-wl-part="back"]'),cranium:b.querySelector('[data-wl-part="cranium"]'),mouse:b.querySelector('[data-wl-part="mouse"]'),face:b.querySelector('[data-wl-part="face"]'),eyes:b.querySelector('[data-wl-part="eyes"]'),nose:b.querySelector('[data-wl-part="nose"]'),grass:b.querySelector('[data-wl-part="grass"]')};states.push(b.__wlSt)}var s=b.__wlSt,tx=0,ty=0;if(moved&&now-last<6000){var r=s.stage.getBoundingClientRect();tx=Math.max(-1,Math.min(1,(px-(r.left+r.width*.5))/Math.max(260,window.innerWidth*.42)));ty=Math.max(-1,Math.min(1,(py-(r.top+r.height*.5))/Math.max(220,window.innerHeight*.42)))}else{var t=now*.0014+i;tx=Math.sin(t)*.42;ty=Math.cos(t*.75)*.24}s.cx+=(tx-s.cx)*.14;s.cy+=(ty-s.cy)*.14;var nx=s.cx,ny=s.cy;s.rig.style.transform='rotateY('+(nx*20).toFixed(2)+'deg) rotateX('+(-ny*15).toFixed(2)+'deg) rotateZ('+(nx*2.5).toFixed(2)+'deg)';if(s.back)s.back.setAttribute('transform','translate('+(-nx*3).toFixed(2)+' '+(-ny*1.8).toFixed(2)+')');if(s.cranium)s.cranium.setAttribute('transform','translate('+(nx*1.3).toFixed(2)+' '+(ny*.9).toFixed(2)+')');if(s.mouse)s.mouse.setAttribute('transform','translate('+(nx*3.2).toFixed(2)+' '+(ny*2.1).toFixed(2)+') rotate('+(nx*5).toFixed(2)+' 32 12)');if(s.face)s.face.setAttribute('transform','translate('+(nx*4.4).toFixed(2)+' '+(ny*2.8).toFixed(2)+')');if(s.eyes)s.eyes.setAttribute('transform','translate('+(nx*1.5).toFixed(2)+' '+(ny*.9).toFixed(2)+')');if(s.nose)s.nose.setAttribute('transform','translate('+(nx*6).toFixed(2)+' '+(ny*3.4).toFixed(2)+')');if(s.grass)s.grass.setAttribute('transform','translate('+(nx*.7).toFixed(2)+' 0)')}requestAnimationFrame(step)}requestAnimationFrame(step)})();
</script>

Скачать weblith-badge-light.html Скачать weblith-badge-light.svg

ВАРИАНТ 02 // DARK FOOTER

Под тёмный футер

DARK THEME

Подвигайте мышкой — голова поворачивается за курсором

Способ 1. Короткий код в 2 строки (рекомендуется)

<a href="https://weblith.ru" target="_blank" rel="noopener" data-weblith-badge="dark">Разработка сайта — WEBLITH</a>
<script src="https://weblith.ru/assets/brand/weblith-badge.js" async></script>

Способ 2. Полностью автономный HTML + SVG + JS

<!-- WEBLITH — Интерактивный логотип разработчика (ВАРИАНТ ПОД ТЁМНЫЙ ФУТЕР) -->
<a href="https://weblith.ru" target="_blank" rel="noopener" class="wl-cb wl-cb--dark" aria-label="Разработка сайта — веб-студия WEBLITH" title="Разработка сайта — инженерная веб-студия WEBLITH">
  <span class="wl-cb__stage">
    <span class="wl-cb__rig">
      <svg class="wl-cb__svg" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <g data-wl-part="back">
          <path d="M18 14 C7 17, 6 33, 14 40" stroke="#9A9B95" stroke-width="2.4" stroke-linecap="round" fill="none"/>
          <path d="M46 14 C57 17, 58 33, 50 40" stroke="#7A7C76" stroke-width="2.4" stroke-linecap="round" fill="none"/>
          <polygon points="12,26 16,24 17,44 11,42" fill="#5D605B"/>
          <polygon points="52,26 48,24 47,44 53,42" fill="#484B47"/>
        </g>
        <g data-wl-part="cranium">
          <polygon points="19,12 45,12 50,24 48,47 39,55 25,55 16,47 14,24" fill="#DCDCD6" stroke="#161917" stroke-width="1.8" stroke-linejoin="round"/>
          <polygon points="32,12 45,12 50,24 48,47 39,55 32,55" fill="#B5B6AF" opacity="0.78"/>
          <polygon points="19,12 45,12 48,21 16,21" fill="#EAEAE4"/>
        </g>
        <g data-wl-part="mouse">
          <path d="M22,13 C22,5.5 42,5.5 42,13 L44,17 L20,17 Z" fill="#E4E4DE" stroke="#161917" stroke-width="1.6" stroke-linejoin="round"/>
          <line x1="32" y1="6.5" x2="32" y2="15" stroke="#161917" stroke-width="1.3"/>
          <rect x="30.4" y="8.2" width="3.2" height="5.2" rx="1.5" fill="#5CE63C" stroke="#161917" stroke-width="0.9"/>
        </g>
        <g data-wl-part="face">
          <polygon points="17,24 28,25 27,30 16,29" fill="#161917"/>
          <polygon points="47,24 36,25 37,30 48,29" fill="#161917"/>
          <g data-wl-part="eyes">
            <rect x="19.5" y="26.3" width="5.5" height="1.9" fill="#5CE63C"/>
            <rect x="39.0" y="26.3" width="5.5" height="1.9" fill="#5CE63C"/>
          </g>
          <path d="M20,35 L17.5,37.2 L20,39.4 M22.2,35 L24.7,37.2 L22.2,39.4" stroke="#5CE63C" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M40.5,34.5 L39,36.8 L40.5,39.5 M43.8,34.5 L45.3,36.8 L43.8,39.5" stroke="#5CE63C" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M24,46.5 L32,45.2 L40,46.5 L36,48.6 L28,48.6 Z" fill="#161917"/>
        </g>
        <g data-wl-part="nose">
          <polygon points="32,22 28.2,40.5 32,42.5 35.8,40.5" fill="#F2F2EC" stroke="#161917" stroke-width="1.4" stroke-linejoin="round"/>
          <polygon points="32,22 32,42.5 35.8,40.5" fill="#A9ABA4"/>
        </g>
        <g data-wl-part="grass">
          <path d="M12,58 L15,49 L19,55 L22,48 L26,56 L32,51 L38,56 L42,48 L45,55 L49,49 L52,58 Z" fill="#5CE63C" stroke="#161917" stroke-width="1.2" stroke-linejoin="round"/>
          <rect x="11" y="56.5" width="42" height="4.5" fill="#2A7B1B"/>
        </g>
      </svg>
    </span>
  </span>
  <span class="wl-cb__meta">
    <span class="wl-cb__kicker">Разработка сайта</span>
    <span class="wl-cb__brand">
      <span>WEBLITH</span>
      <span class="wl-cb__dot"></span>
      <svg class="wl-cb__arrow" viewBox="0 0 12 12" fill="none" aria-hidden="true">
        <path d="M2 10L10 2M4 2H10V8" stroke="currentColor" stroke-width="1.7" stroke-linecap="square"/>
      </svg>
    </span>
  </span>
</a>
<style>
.wl-cb{display:inline-flex;align-items:center;gap:9px;height:38px;padding:4px 11px 4px 5px;text-decoration:none!important;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1;box-sizing:border-box;user-select:none;vertical-align:middle;transition:all .22s ease}
.wl-cb--dark{background:#161917;border:1px solid rgba(246,246,243,.22);color:#F6F6F3;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.wl-cb--dark:hover{background:#1E2320;border-color:#5CE63C;transform:translateY(-1px);box-shadow:3px 3px 0 #5CE63C}
.wl-cb__stage{width:28px;height:28px;flex:0 0 28px;background:#0E100F;border:1px solid rgba(246,246,243,.18);display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:180px}
.wl-cb__rig{width:26px;height:26px;display:block;transform-style:preserve-3d;will-change:transform}
.wl-cb__svg{width:100%;height:100%;display:block;overflow:visible}
.wl-cb__meta{display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:left}
.wl-cb--dark .wl-cb__kicker{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(246,246,243,.68);white-space:nowrap}
.wl-cb--dark .wl-cb__brand{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#F6F6F3;white-space:nowrap}
.wl-cb__dot{width:5px;height:5px;background:#5CE63C;display:inline-block;box-shadow:0 0 6px rgba(92,230,60,.65)}
.wl-cb--dark .wl-cb__arrow{width:10px;height:10px;color:rgba(246,246,243,.68);transition:transform .2s ease,color .2s ease}
.wl-cb--dark:hover .wl-cb__arrow{transform:translate(1.5px,-1.5px);color:#5CE63C}
</style>
<script>
(function(){if(window.__wlCbInit)return;window.__wlCbInit=1;var px=0,py=0,moved=0,last=0;window.addEventListener('pointermove',function(e){px=e.clientX;py=e.clientY;moved=1;last=performance.now()},{passive:true});var states=[];function step(now){var badges=document.querySelectorAll('.wl-cb');for(var i=0;i<badges.length;i++){var b=badges[i];if(!b.__wlSt){b.__wlSt={cx:0,cy:0,stage:b.querySelector('.wl-cb__stage'),rig:b.querySelector('.wl-cb__rig'),back:b.querySelector('[data-wl-part="back"]'),cranium:b.querySelector('[data-wl-part="cranium"]'),mouse:b.querySelector('[data-wl-part="mouse"]'),face:b.querySelector('[data-wl-part="face"]'),eyes:b.querySelector('[data-wl-part="eyes"]'),nose:b.querySelector('[data-wl-part="nose"]'),grass:b.querySelector('[data-wl-part="grass"]')};states.push(b.__wlSt)}var s=b.__wlSt,tx=0,ty=0;if(moved&&now-last<6000){var r=s.stage.getBoundingClientRect();tx=Math.max(-1,Math.min(1,(px-(r.left+r.width*.5))/Math.max(260,window.innerWidth*.42)));ty=Math.max(-1,Math.min(1,(py-(r.top+r.height*.5))/Math.max(220,window.innerHeight*.42)))}else{var t=now*.0014+i;tx=Math.sin(t)*.42;ty=Math.cos(t*.75)*.24}s.cx+=(tx-s.cx)*.14;s.cy+=(ty-s.cy)*.14;var nx=s.cx,ny=s.cy;s.rig.style.transform='rotateY('+(nx*20).toFixed(2)+'deg) rotateX('+(-ny*15).toFixed(2)+'deg) rotateZ('+(nx*2.5).toFixed(2)+'deg)';if(s.back)s.back.setAttribute('transform','translate('+(-nx*3).toFixed(2)+' '+(-ny*1.8).toFixed(2)+')');if(s.cranium)s.cranium.setAttribute('transform','translate('+(nx*1.3).toFixed(2)+' '+(ny*.9).toFixed(2)+')');if(s.mouse)s.mouse.setAttribute('transform','translate('+(nx*3.2).toFixed(2)+' '+(ny*2.1).toFixed(2)+') rotate('+(nx*5).toFixed(2)+' 32 12)');if(s.face)s.face.setAttribute('transform','translate('+(nx*4.4).toFixed(2)+' '+(ny*2.8).toFixed(2)+')');if(s.eyes)s.eyes.setAttribute('transform','translate('+(nx*1.5).toFixed(2)+' '+(ny*.9).toFixed(2)+')');if(s.nose)s.nose.setAttribute('transform','translate('+(nx*6).toFixed(2)+' '+(ny*3.4).toFixed(2)+')');if(s.grass)s.grass.setAttribute('transform','translate('+(nx*.7).toFixed(2)+' 0)')}requestAnimationFrame(step)}requestAnimationFrame(step)})();
</script>

Скачать weblith-badge-dark.html Скачать weblith-badge-dark.svg

Логотипы WEBLITHдля футера сайтов.

Под светлый футер

Под тёмный футер

Логотипы WEBLITH
для футера сайтов.