create-definedmotion 0.1.4 → 0.3.0

package/template/src/main/rendering.ts

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import { spawnSync } from 'child_process'
+import { fileURLToPath } from 'url'
 
 export interface AudioInScene {
   audioPath: string
@@ -136,28 +137,42 @@ export function renderVideo(options: RenderOptions): Promise<string> {
     }
   })
 }
-/*
-function generateFFmpegAudioCommand(
-  options: RenderOptions,
-  outputFolder: string,
-  id: string
-): string {
-  const inputs: string[] = []
-  const filterChains: string[] = []
-  const amixInputs: string[] = []
-
-  options.renderingAudioGather.forEach((audio, index) => {
-    const startTime = audio.atFrame / options.fps
-    inputs.push(`-i ./src/renderer${audio.audioPath}`)
-    filterChains.push(`[${index}:a]asetpts=PTS+${startTime}/TB,volume=${audio.volume}[a${index}]`)
-    amixInputs.push(`[a${index}]`)
-  })
 
-  const amixFilter = `${amixInputs.join('')}amix=inputs=${amixInputs.length}:duration=longest[aout]`
-  const filterComplex = [...filterChains, amixFilter].join('; ')
 
-  return `ffmpeg ${inputs.join(' ')} -filter_complex "${filterComplex}" -map "[aout]" -c:a libmp3lame -q:a 2 ${outputFolder}/${id}.mp3`
-}*/
+function toFsPath(p: string): string {
+  if (!p) throw new Error('empty path')
+
+    // Handle Vite dev absolute path
+  if (p.startsWith('/@fs/')) {
+    // Keep the leading slash before "Users"
+    return decodeURIComponent(p.slice(4))  // results in "/Users/…"
+    // Alternatively:
+    // return decodeURIComponent(p.replace(/^\/@fs/, ''))
+  }
+
+  // 2) file:// URL
+  try {
+    const u = new URL(p)
+    if (u.protocol === 'file:') return fileURLToPath(u)
+  } catch {/* not a URL */}
+
+  // 3) already absolute on disk
+  if (path.isAbsolute(p)) return p
+
+  // 4) fallback: try typical asset roots
+  const cleaned = p.replace(/^\/?assets\//, '') // allow "assets/foo.mp3" or "/assets/foo.mp3"
+  const guesses = [
+    path.join(process.cwd(), 'src', 'renderer', 'assets', cleaned),     // dev
+    path.join(process.resourcesPath, 'assets', cleaned),                 // prod packaged
+    path.join(process.cwd(), cleaned)                                    // last resort
+  ]
+  for (const g of guesses) {
+    if (fs.existsSync(g)) return g
+  }
+
+  // final fallback: return as-is (FFmpeg will error, but at least we see the attempted path)
+  return p
+}
 
 function buildAudioMixCommand(renderOptions: RenderOptions, outputFolder: string, id: string) {
   const { fps, renderingAudioGather } = renderOptions
@@ -166,7 +181,9 @@ function buildAudioMixCommand(renderOptions: RenderOptions, outputFolder: string
   let inputIndexes: string[] = []
 
   renderingAudioGather.forEach((audio, index) => {
-    inputs.push(`-i ./src/renderer${audio.audioPath}`)
+     // Prefer an already-provided absolute fsPath (if you later add it); else normalize here
+    const inputPath = (audio as any).fsPath ?? toFsPath(audio.audioPath)
+    inputs.push(`-i "${inputPath}"`)
     const delayMs = Math.floor((audio.atFrame / fps) * 1000)
     // adelay syntax: "adelay=delay_in_ms|delay_in_ms"
     filters.push(`[${index}:a]adelay=${delayMs}|${delayMs},volume=${audio.volume}[a${index}]`)

package/template/src/preload/index.ts

@@ -2,8 +2,22 @@ import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 import { RenderOptions } from '../main/rendering'
 
+
+// ---- NEW helpers for event subscription
+function onDisplayHzChanged(cb: (hz: number) => void) {
+  const channel = 'display-hz-changed'
+  const listener = (_: unknown, hz: number) => cb(hz)
+  ipcRenderer.on(channel, listener)
+  // return an unsubscribe fn
+  return () => ipcRenderer.removeListener(channel, listener)
+}
+
 const customAPI = {
-  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options)
+  startVideoRender: (options: RenderOptions) => ipcRenderer.invoke('start-video-render', options),
+
+  getDisplayHz: (): Promise<number> => ipcRenderer.invoke('get-display-hz'),
+
+  onDisplayHzChanged
 }
 
 // Custom APIs for renderer

package/template/src/renderer/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>Electron</title>
+    <title>DefinedMotion</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!--  <meta
       http-equiv="Content-Security-Policy"

package/template/src/renderer/src/App.svelte

@@ -2,16 +2,45 @@
   import './app.css'
   import { generateID, setStateInScene, updateStateInUrl } from './lib/general/helpers'
   import { onDestroy, onMount } from 'svelte'
-  import { setGlobalContainerRef, type AnimatedScene } from './lib/scene/sceneClass'
+  import { hotreloadNameLookup, screenFPS, setGlobalContainerRef, type AnimatedScene } from './lib/scene/sceneClass'
   import { loadFonts } from './lib/rendering/objects2d'
-  import { entryScene } from '../../entry'
+  import { animationFPSDivider, entryScene, renderSkip } from '../../entry'
   import { callAllDestroyFunctions } from './lib/general/onDestory'
+  import rotateIcon from "./application_assets/360.svg"
+  import moveIcon from "./application_assets/move.svg"
+  
+
+  let frameValueElement: HTMLParagraphElement
+  let timeValueElement: HTMLParagraphElement
+  let sliderElement: HTMLInputElement
+
+  const TEXT_FRAME_MS_LIMIT = 0.90*1000 / 30;  // A little lower to avoid skipping frames when timing is unfourtunate
+  const SLIDER_FRAME_MS_LIMIT = 0.90*1000 / 60; // A little lower to avoid skipping frames when timing is unfourtunate
+
+  let lastTextUpdate  = 0;
+  let lastSliderUpdate = 0;
+
+  let screenRefreshRate = $state(0) 
+  let isRendering = $state(false) 
+
+  let isScrubbing = false
+  let wasPlayingBeforeScrub = false
+
+
+  function formatMs(ms: number) {
+    const sign = ms < 0 ? '-' : ''
+    ms = Math.abs(ms)
+    const minutes = Math.floor(ms / 60000)
+    const seconds = Math.floor((ms % 60000) / 1000)
+    const millis  = Math.floor(ms % 1000)
+    return `${sign}${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}.${String(millis).padStart(3,'0')}`
+  }
 
-  //const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
 
   const animationWindowID = generateID()
 
   let scene: AnimatedScene
+  let hasInitScene = $state(false)
 
   let isPlayingStateVar = $state(false)
 
@@ -25,29 +54,70 @@
       const frame = Math.round((sliderValue / maxSliderValue) * (scene.totalSceneTicks - 1))
       if (frame !== lastSetFrame) {
         await scene.jumpToFrameAtIndex(frame)
+        updateUIImmediate();
         lastSetFrame = frame
       }
     }
   }
 
+function updateSliderOnly() {
+  if (!scene || !sliderElement) return
+  if (isScrubbing) return            // <-- single guard
+  const denom = Math.max(1, (scene.totalSceneTicks - 1))
+  ;(sliderElement as any).value = (scene.sceneRenderTick / denom) * maxSliderValue
+}
+
+function updateTextsOnly() {
+  if (!scene) return;
+  if (frameValueElement) frameValueElement.textContent = `Frame: ${scene.sceneRenderTick}`;
+  if (timeValueElement)  timeValueElement.textContent  = `Time: ${formatMs(scene.getCurrentTimeMs())}`;
+}
+
+function updateUIImmediate() {
+  updateSliderOnly();
+  updateTextsOnly();
+}
+
+
+  function maybeUpdateUI() {
+  const now = performance.now();
+
+  // ~60 Hz slider
+  if (now - lastSliderUpdate >= SLIDER_FRAME_MS_LIMIT) {
+    lastSliderUpdate = now;
+    updateSliderOnly();
+  }
+
+  // ~30 Hz texts
+  if (now - lastTextUpdate >= TEXT_FRAME_MS_LIMIT) {
+    lastTextUpdate = now;
+    updateTextsOnly();
+  }
+}
+
   onMount(async () => {
     if (!entryScene) return
     await loadFonts()
     const animationWindow = document.getElementById(animationWindowID)
-    const sliderElement = document.getElementById('playerSliderID')
+    
     if (!animationWindow || !sliderElement) return
 
     setGlobalContainerRef(animationWindow)
 
     scene = entryScene()
+    hasInitScene = true
 
     scene.playEffectFunction = () => {
-      ;(sliderElement as any).value =
-        (scene.sceneRenderTick / (scene.totalSceneTicks - 1)) * maxSliderValue
+     maybeUpdateUI();
     }
-    const currentWidth = animationWindow.clientWidth
-    animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
-
+    scene.renderingEventFunction = (isStart) => {
+      isRendering = isStart
+       if (!isStart) {
+        // render just finished; force UI to reflect the reset frame
+        updateUIImmediate()
+      }
+    }
+   
     setStateInScene(scene)
     lastSetFrame = scene.sceneRenderTick
 
@@ -55,11 +125,9 @@
       updateStateInUrl(scene.sceneRenderTick)
     }, 500)
 
-    // Add listener to handle window resize events
-    window.addEventListener('resize', () => {
-      const currentWidth = animationWindow.clientWidth
-      animationWindow.style.height = `${currentWidth / scene.getAspectRatio()}px`
-    })
+  
+
+   screenRefreshRate = screenFPS
 
     // ipcRenderer.send('resize-window', { width: 1000, height: 1000 })
   })
@@ -68,23 +136,67 @@
     clearInterval(urlUpdaterInterval)
     callAllDestroyFunctions()
   })
+
+  function fmt(n: number) {
+  return Number(n).toPrecision(7);
+}
+
+function cameraPositionCode() {
+  const p = scene.camera.position;
+  return `scene.camera.position.set(
+  ${fmt(p.x)}, 
+  ${fmt(p.y)}, 
+  ${fmt(p.z)}
+);`;
+}
+
+function cameraRotationCode() {
+  const q = scene.camera.quaternion;
+  return `scene.camera.quaternion.set(
+  ${fmt(q.x)}, 
+  ${fmt(q.y)}, 
+  ${fmt(q.z)}, 
+  ${fmt(q.w)}
+);`;
+}
+
+export async function copyToClipboard(text: string): Promise<void> {
+  await navigator.clipboard.writeText(text);
+}
 </script>
 
-<div class=" flex flex-col p-4">
-  <div id={animationWindowID} class="w-full"></div>
-  <div class="flex justify-between mt-2 font-bold text-sm">
+<div class=" flex flex-col p-2">
+  <div id={animationWindowID} class="w-full rounded-sm overflow-clip"></div>
+  {#if isRendering}
+ <p class="text-[17px] self-center p-6 pb-1">Do <strong>not save</strong> code during rendering</p>
+   <p class="text-xs self-center pt-0 p-2">The viewer might hot reload and affect the result</p>
+  {/if}
+  
+  <div class="flex justify-between mt-2 font-bold text-sm items-center">
+
+ 
+
     <button
-      onclick={() => {
-        if (scene.isPlaying) {
-          scene.pause()
-          isPlayingStateVar = false
-        } else {
-          scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
-          isPlayingStateVar = true
-        }
-      }}>{isPlayingStateVar ? 'Pause' : 'Play'}</button
-    >
+    class="w-[70px] text-xs cursor-pointer bg-black/5 rounded-full p-1 hover:bg-black/10 transition"
+          onclick={() => {
+            if (scene.isPlaying) {
+              scene.pause()
+              updateUIImmediate();
+              isPlayingStateVar = false
+            } else {
+              scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
+              isPlayingStateVar = true
+            }
+          }}>{isPlayingStateVar ? 'Pause' : 'Play'}</button
+        >
+    
+
+    <div class="flex ">
+    <p bind:this={frameValueElement} class="font-normal text-[0.7rem] leading-none mr-2 w-[83px]">Frame:</p>
+      <p bind:this={timeValueElement} class="font-normal text-[0.7rem] leading-none w-[93px] ">Time:</p>
+      </div>
     <button
+    class="w-[70px] text-xs cursor-pointer bg-black/5 rounded-full  p-1 hover:bg-black/10 transition"
       onclick={() => {
         scene.render()
       }}>Render</button
@@ -92,16 +204,77 @@
   </div>
   <div class="w-full px-0 mx-0">
     <input
+      bind:this={sliderElement}
       type="range"
       min="0"
       max={maxSliderValue}
-      oninput={(e: any) => handleSliderChange(Number(e.target.value))}
+
       class="w-full focus:outline-none"
-      id="playerSliderID"
+      onpointerdown={() => {
+        if (!scene) return
+        isScrubbing = true
+        wasPlayingBeforeScrub = scene.isPlaying
+        if (scene.isPlaying) {
+          scene.pause()                // silences audio and stops RAF
+          isPlayingStateVar = false
+        }
+      }}
+      oninput={(e: any) => {
+        // while scrubbing: jump visuals quietly; when not scrubbing, behaves like before
+        const v = Number(e.target.value)
+        handleSliderChange(v)
+      }}
+      onpointerup={(e: any) => {
+        if (!scene) return
+        isScrubbing = false
+        const v = Number((e.target as HTMLInputElement).value)
+        // ensure we’re at the dropped frame
+        handleSliderChange(v)
+        if (wasPlayingBeforeScrub) {
+          // resume cleanly from here
+          scene.playSequenceOfAnimation(scene.sceneRenderTick, scene.totalSceneTicks - 1)
+          isPlayingStateVar = true
+        }
+      }}
     />
   </div>
+
+  <div class="h-4"></div>
+  {#if hasInitScene && scene}
+ 
+  <p class="font-bold text-sm">Helpers</p>
+  <div class="h-2"></div>
+  <div class="flex flex-wrap gap-2">
+    <button onclick={() => copyToClipboard(cameraPositionCode())} class="text-[0.65rem] font-medium cursor-pointer  bg-black/5 rounded-full p-1 pl-4 pr-4 hover:bg-black/10 transition active:bg-blue-200 active:border-blue-200" >
+        <div class="flex gap-1 items-center">
+
+        <p>Copy camera <strong>position</strong></p>
+      <img src={moveIcon} alt="Rotation icon" class="w-[15px]"/></div>
+    </button>
+    <button onclick={() => copyToClipboard(cameraRotationCode())} class="text-[0.65rem] font-medium cursor-pointer  bg-black/5 rounded-full p-1 pl-4 pr-4 hover:bg-black/10 transition active:bg-blue-200 active:border-blue-200" >
+        <div class="flex gap-1 items-center">
+
+        <p>Copy camera <strong>rotation</strong></p>
+      <img src={rotateIcon} alt="Rotation icon" class="w-[15px]"/></div>
+    </button>
+  </div>
+
+   <div class="h-6"></div>
+  <p class="font-bold text-sm">Details</p>
+  <div class="h-2"></div>
+  <p class="text-xs">Animation playback FPS: <strong>{(screenRefreshRate/animationFPSDivider).toFixed(2)}</strong> Hz, rendered video FPS: <strong>{(screenRefreshRate/animationFPSDivider/renderSkip).toFixed(2)}</strong> Hz</p>
+<div class="h-2"></div>
+ <p class="text-[0.7rem] opacity-50">Hot reload mode: <strong>{hotreloadNameLookup(scene.hotReloadSetting)}</strong></p>
+  <p class="text-[0.7rem] opacity-50">Screen refresh rate: <strong>{screenRefreshRate.toFixed(2)}</strong> Hz</p>
+  <p class="text-[0.7rem] opacity-50">Animation FPS divider <strong>{animationFPSDivider}</strong></p>
+  <p class="text-[0.7rem] opacity-50">Render skip constant <strong>{renderSkip}</strong></p>
+  {/if}
+
+ 
+  <!--
   <p id="cameraPositionTextID" class="mt-2 text-xs"></p>
   <p id="cameraRotationTextID" class="mt-2 text-xs"></p>
+  -->
 </div>
 
 <style>
@@ -121,10 +294,20 @@
   /* Thumb style for Chrome */
   input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 16px;
+    width: 10px;
     height: 16px;
-    border-radius: 50%;
-    background: #3b82f6;
+    border-radius: 5px;
+    background: #c2c2c2;
+    border: 2px solid #616161;
     margin-top: -6px; /* Center the thumb on the track */
+    cursor: pointer;
+     transition: all 0.1s ease;
+
+    /* Larger hitbox using box-shadow trick */
+    box-shadow: 0 0 0 8px transparent;
+  }
+
+  input[type='range']::-webkit-slider-thumb:hover {
+    background: #616161;
   }
 </style>

package/template/src/renderer/src/application_assets/360.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2455 5107 c-370 -95 -662 -590 -820 -1392 -21 -104 -39 -192 -41
+-193 -1 -2 -62 -15 -136 -28 -679 -125 -1176 -363 -1363 -654 -70 -109 -89
+-169 -89 -290 0 -90 4 -115 27 -173 89 -229 331 -423 714 -576 302 -120 714
+-212 1141 -257 94 -10 172 -21 172 -25 0 -4 -20 -23 -44 -42 -56 -46 -80 -96
+-73 -153 11 -105 124 -166 214 -116 18 9 99 81 181 160 l150 142 149 0 c144 0
+407 13 527 26 l59 6 -7 -38 c-103 -575 -330 -1064 -545 -1173 -68 -35 -120
+-37 -185 -8 -106 49 -198 155 -303 352 -53 100 -63 112 -106 133 -63 32 -118
+24 -168 -27 -53 -53 -59 -101 -23 -183 130 -292 329 -508 531 -574 86 -28 238
+-26 318 6 261 101 470 384 631 854 51 150 123 432 150 589 16 93 21 108 39
+112 11 2 72 14 135 25 323 59 642 161 878 279 272 137 445 299 519 488 23 58
+27 83 27 173 -1 87 -5 116 -25 170 -99 262 -398 477 -889 640 -100 33 -134 40
+-167 35 -84 -12 -145 -105 -123 -186 17 -60 63 -93 190 -134 282 -93 488 -202
+611 -325 74 -74 103 -129 103 -200 1 -178 -261 -375 -689 -518 -186 -62 -527
+-143 -542 -129 -3 3 0 70 6 149 50 611 2 1310 -125 1838 -31 129 -66 257 -81
+296 -3 9 16 5 59 -12 80 -32 148 -35 186 -7 87 64 96 170 20 240 -12 11 -112
+55 -222 96 -109 42 -199 77 -201 79 -1 2 -21 37 -45 78 -124 217 -280 368
+-445 430 -73 27 -207 35 -280 17z m216 -317 c81 -42 194 -172 257 -296 l21
+-42 -75 -173 c-41 -96 -79 -190 -85 -209 -24 -80 35 -170 120 -185 33 -5 51
+-2 89 17 40 19 52 33 78 87 17 35 34 60 36 55 12 -19 78 -296 102 -424 30
+-157 60 -384 77 -590 24 -272 15 -846 -18 -1127 l-6 -51 -46 -6 c-119 -16
+-295 -27 -501 -32 l-225 -5 -139 161 c-143 167 -172 190 -238 190 -34 0 -93
+-30 -115 -59 -7 -9 -17 -33 -23 -53 -16 -55 2 -107 56 -167 53 -59 59 -56 -97
+-41 -804 81 -1465 332 -1610 611 -31 60 -31 138 0 198 76 147 315 297 658 415
+132 45 360 104 496 129 l79 15 -6 -47 c-14 -107 -26 -360 -26 -552 0 -197 1
+-207 23 -239 36 -54 71 -74 127 -74 54 0 87 18 124 68 20 26 21 46 27 294 7
+268 26 561 39 581 15 26 509 56 787 49 161 -5 187 -3 222 13 53 23 81 70 81
+132 0 85 -42 131 -137 149 -69 13 -606 5 -787 -12 -65 -6 -120 -9 -122 -7 -6
+6 53 282 87 399 131 466 310 766 504 845 40 17 114 9 166 -17z"/>
+</g>
+</svg>

package/template/src/renderer/src/application_assets/move.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2485 4781 c-16 -10 -166 -155 -332 -322 -254 -257 -303 -310 -312
+-344 -35 -134 112 -245 234 -177 11 6 88 79 170 161 l150 151 5 -554 c5 -540
+6 -555 26 -582 39 -53 71 -69 134 -69 63 0 95 16 134 69 20 27 21 42 26 582
+l5 554 150 -151 c83 -82 159 -155 170 -161 64 -36 140 -25 191 26 30 30 57 94
+49 119 -2 7 -6 26 -10 42 -5 22 -89 113 -313 338 -169 170 -319 315 -334 323
+-38 20 -107 18 -143 -5z"/>
+<path d="M1035 3285 c-5 -2 -23 -6 -40 -10 -22 -5 -113 -89 -338 -313 -170
+-169 -315 -319 -323 -334 -18 -35 -18 -101 0 -136 8 -15 153 -165 323 -334
+225 -224 316 -308 338 -313 17 -4 35 -8 42 -10 25 -8 89 19 119 49 51 51 62
+127 26 191 -6 11 -79 88 -161 170 l-151 150 554 5 c540 5 555 6 582 26 53 39
+69 71 69 134 0 63 -16 95 -69 134 -27 20 -42 21 -582 26 l-554 5 151 150 c82
+83 155 159 161 170 55 98 0 213 -112 238 -14 3 -29 4 -35 2z"/>
+<path d="M4030 3278 c-96 -27 -142 -143 -92 -233 6 -11 79 -87 161 -170 l151
+-150 -554 -5 c-540 -5 -555 -6 -582 -26 -53 -39 -69 -71 -69 -134 0 -63 16
+-95 69 -134 27 -21 40 -21 584 -24 l556 -2 -161 -163 c-130 -131 -163 -170
+-172 -202 -14 -54 2 -110 43 -151 30 -30 94 -57 119 -49 7 2 26 6 42 10 22 5
+113 89 338 313 170 169 315 319 323 334 8 15 14 45 14 68 0 23 -6 53 -14 68
+-8 15 -153 165 -323 334 -224 223 -316 308 -338 313 -16 4 -37 8 -45 10 -8 2
+-31 -1 -50 -7z"/>
+<path d="M2495 2066 c-37 -17 -70 -52 -84 -89 -7 -19 -11 -211 -11 -570 l0
+-541 -162 161 c-114 112 -172 163 -193 168 -16 4 -35 8 -41 10 -26 8 -94 -19
+-122 -48 -29 -31 -55 -96 -47 -120 2 -7 6 -25 10 -42 5 -22 89 -113 313 -338
+169 -170 319 -315 334 -323 35 -18 101 -18 136 0 15 8 165 153 334 323 224
+225 308 316 313 338 4 17 8 35 10 42 8 25 -19 89 -49 119 -51 51 -127 62 -191
+26 -11 -6 -87 -79 -170 -161 l-150 -151 -5 554 c-5 540 -6 555 -26 582 -11 15
+-32 37 -46 47 -34 25 -113 32 -153 13z"/>
+</g>
+</svg>