Develop Reference

How do I set my SVG icons' background to be transparent?

Update:
My interpretation of the problem was incorrect. Rather than the background turning black, the stroke was being scaled incorrectly. It just appeared to have a black background. I have reported the bug to Bugzilla
Original Question:
I have a Firefox extension that has a browser action and a context menu item with custom icons (the same icon). I have been using PNG images for the icons, but I want to switch to SVG icons. The only problem with SVG icons is that Firefox fills in the background with black, rather than keeping it transparent. I have checked the icon's transparency by opening it with several apps, all of which naturally give the SVG a transparent background. Why does Firefox not recognize its transparency when I use it as an extension's context menu item's icon or a browser action's icon?
Here is a snippet with proof that the icon is transparent:
body {
background-color: red;
animation-name: changeColors;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changeColors {
from {
background-color: red;
}
to {
background-color: green;
}
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketchjs="https://sketch.io/dtd/" sketchjs:metadata="eyJuYW1lIjoiRHJhd2luZyIsInN1cmZhY2UiOnsiaXNQYWludCI6dHJ1ZSwibWV0aG9kIjoiZmlsbCIsImJsZW5kIjoibm9ybWFsIiwiZW5hYmxlZCI6dHJ1ZSwib3BhY2l0eSI6MSwidHlwZSI6InBhdHRlcm4iLCJwYXR0ZXJuIjp7InR5cGUiOiJwYXR0ZXJuIiwicmVmbGVjdCI6Im5vLXJlZmxlY3QiLCJyZXBlYXQiOiJyZXBlYXQiLCJzbW9vdGhpbmciOmZhbHNlLCJzcmMiOiJ0cmFuc3BhcmVudExpZ2h0Iiwic3giOjEsInN5IjoxLCJ4MCI6MC41LCJ4MSI6MSwieTAiOjAuNSwieTEiOjF9LCJpc0ZpbGwiOnRydWV9LCJjbGlwUGF0aCI6eyJlbmFibGVkIjp0cnVlLCJzdHlsZSI6eyJzdHJva2VTdHlsZSI6ImJsYWNrIiwibGluZVdpZHRoIjoxfX0sImRlc2NyaXB0aW9uIjoiTWFkZSB3aXRoIFNrZXRjaHBhZCIsIm1ldGFkYXRhIjp7fSwiZXhwb3J0RFBJIjo3MiwiZXhwb3J0Rm9ybWF0IjoicG5nIiwiZXhwb3J0UXVhbGl0eSI6MC45NSwidW5pdHMiOiJweCIsIndpZHRoIjoxMjgsImhlaWdodCI6MTI4LCJwYWdlcyI6W3sid2lkdGgiOjEyOCwiaGVpZ2h0IjoxMjh9XSwidXVpZCI6Ijg4OWIxNzZlLWJlOTEtNGNlYS1hZTRjLWY5MGVhNWI0YzFiYiJ9" width="128" height="128" viewBox="0 0 128 128">
<path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.7; stroke-width: 15; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.0804830483049923,10.000000000200153,10.332170735958027)"/>
<path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.6666666666666667; stroke-width: 20; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.0804830483049923,10.000000000200153,10.000000000199847)"/>
<path style="fill: #999999; mix-blend-mode: source-over; fill-opacity: 1;" sketchjs:tool="path" d="M0 75.09 C75.48 68.13 71.72 0 71.72 0 71.72 0 105.68 98.51 1.17 75.85 " transform="matrix(0.8743546320957299,0,0,0.8743546320957296,40.281708922438206,37.527195340009996)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.249 0 L15.848 7.294 23.898 8.464 18.073 14.141 19.448 22.158 12.249 18.373 5.049 22.158 6.424 14.141 0.599 8.464 8.649 7.294 z" transform="matrix(0.697355799061732,-0.13642022494671896,0.13642022494671896,0.697355799061732,41.265182438537245,79.6845481140266)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M9.084 0 L11.754 5.41 17.724 6.277 13.404 10.488 14.424 16.434 9.084 13.626 3.745 16.434 4.764 10.488 0.445 6.277 6.414 5.41 z" transform="matrix(0.9902159962126372,0.13954311464423616,-0.13954311464423616,0.9902159962126372,20.83972994628792,35.244013452720175)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.182 0 L15.762 7.254 23.768 8.418 17.975 14.064 19.343 22.038 12.182 18.273 5.022 22.038 6.389 14.064 0.596 8.418 8.602 7.254 z" transform="matrix(0.9975510002532796,0.06994284733753305,-0.06994284733753305,0.9975510002532796,77.22221836207314,21.377447387233143)"/>
</svg>
Here are screenshots of the icon not being transparent:
I am also changing the icon using browser.browserAction.setIcon() in the background page, but that shouldn't affect anything.

Update:
Turns out I misunderstood the idea of a "non-scaling-stroke." The stroke was just being scaled up and I misunderstood the stroke for an opaque background.
Original Answer:
I've found the culprit: vector-effect: non-scaling-stroke; in the style. While it's a nice effect, it isn't important enough to create an opaque background. I wonder why Firefox gives the icon an opaque background when that effect is included... Perhaps we will be able to use later if Mozilla wants to fix it.

Here is a snippet with proof that the icon is transparent
But, this is not true..
You have the solid fills and "fill-opacity: 1" everywhere..
fill-opacity should be 0 for a transparency!
Or fill should be none.

Hover functionality not working on svg path

I'm trying to get a :hover functionality on my svg path. In short, I want my path to fill with red when hovered over.
my CSS has:
.node_hover {
/* fill-opacity: 1;
fill: crimson;
transition: 0.3s; */
fill-opacity: 0;
}
.node_hover:hover {
fill-opacity: 1;
fill: black;
transition: 0.3s;
}
and my svg is
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g className = "node_hover">
<path id="Imported Path .... />
</g>
</svg>
However nothing happens upon hover. I tried giving the className to my path itself but that doesn't work. either.
Any help would be appreciated.

I think the issue is a typo. className should be class
.node_hover {
fill: black;
transition: 0.3s;
}
.node_hover:hover {
fill: red;
transition: 0.3s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g class = "node_hover">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>

How can I make this seamless SVG rock texture sparkle

I have rocks in this image:
.rock {
width: 100%;
height: 200vh;
}
.rock:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(rock.svg);
background-size: 384px;
background-repeat: repeat;
-webkit-mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
mask-image: linear-gradient(transparent 0%, #fff 10%, #fff 90%, transparent 100%);
/*box-shadow: inset 0 0 0 2px black;*/
}
And the SVG looks like this essentially:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
...
<path d="M61.639,162.195c0.483-0.863,0.887-1.493,1.114-1.659l-0.859,0.215C61.757,161.203,61.694,161.695,61.639,162.195z"/>
<path d="M62.753,160.536l0.141-0.035C62.86,160.477,62.812,160.493,62.753,160.536z"/>
<path d="M53.959,179.342c-2.256,3.034-3.331,7.56-4.521,10.83C50.734,186.206,53.188,183.417,53.959,179.342z"/>
<path d="M53.959,179.342c0.363-0.488,0.754-0.942,1.184-1.342l-1,0.25C54.104,178.631,54.027,178.984,53.959,179.342z"/>
<path d="M159.644,110l2-4c-2.467,3.473-4.598,7.94-5.592,11.998C157.587,115.744,158.907,112.613,159.644,110z"/>
<path d="M117.162,179.287c0.024-0.063,0.059-0.096,0.09-0.138c-0.964-0.864-1.931-1.724-2.905-2.571
C115.11,177.611,116.044,178.677,117.162,179.287z"/>
<path d="M117.894,178.75c-0.193,0.177-0.464,0.158-0.642,0.398c1.052,0.944,2.1,1.896,3.142,2.852L117.894,178.75z"/>
<path d="M182.939,156.556c-0.409,0.524-0.674,1.081-0.725,1.665c0.221,0.015,0.454-0.017,0.692-0.066
c2.024-0.429,4.557-3.049,5.555-5.277C186.501,153.797,184.119,155.045,182.939,156.556z"/>
<path d="M188.894,151.25c-0.012,0.482-0.17,1.041-0.432,1.627c0.984-0.461,1.866-0.842,2.432-1.127L188.894,151.25z"/>
</g>
</svg>
I am using it in HTML like this:
<div class='rock'></div>
The question is, how can I instead dig into the SVG and animate each rock individually and separately, so that each one appears to fade in and out at random, sparkling.

per #zero298, you can't do this if you use the SVG as a background image, so you'll have to embed it directly in the page. That said, if you embed it directly, it's possible:
First, add an individual id or class to each rock path (I suggest randomly adding five classes; let's call them fast, mediumfast, medium, mediumslow, slow. Then, create a simple keyframes animation in CSS - something like this:
#keyframes fadeInOut {
start {
opacity: 1;
}
end {
opacity: 0.8; // Modify this value to change how extreme the fading is
}
}
Now you need to apply the animation to the rocks. To make it 'twinkle', I'd use a couple of different animation durations so they don't all fade out together. All of them will share some of the same properties, like so:
#yourSVGId path {
animation: fadeInOut 1s ease infinite alternate;
}
.fast {
animation-duration: 0.3s;
}
.mediumfast {
animation-duration: 0.5s;
}
.medium {
animation-duration: 0.7s;
}
.mediumslow {
animation-duration: 0.9s;
}
.slow {
animation-duration: 1.1s;
}

You won't be able to refer to individual rocks within the SVG if you use the SVG as a background-image. The image is considered one single entity and CSS cannot affect elements within it. Consider my related answer here: :hover not working on svg when svg is in external file.
I would suggest embedding the SVG into the HTML so that you can interact with it as a first class entity. From there you have a lot of different ways to affect your SVG including direct manipulation or using CSS animations or transitions. Consider the example below that uses CSS transitions.
function rand(floor, ceil) {
return Math.floor(Math.random() * (ceil - floor) + floor);
}
setInterval(() => {
const circles = document.querySelectorAll("#rocky circle");
const circle = circles[rand(0, circles.length)];
circle.classList.toggle("animate");
}, 500);
#rocky circle {
opacity: 0;
transition: opacity 400ms ease;
}
#rocky circle.animate {
opacity: 1;
}
<div id="rocky">
<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" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g>
<circle cx="50" cy="50" r="10"/>
<circle cx="100" cy="50" r="10"/>
<circle cx="150" cy="50" r="10"/>
<circle cx="50" cy="100" r="10"/>
<circle cx="100" cy="100" r="10"/>
<circle cx="150" cy="100" r="10"/>
<circle cx="50" cy="150" r="10"/>
<circle cx="100" cy="150" r="10"/>
<circle cx="150" cy="150" r="10"/>
</g>
</svg>
</div>
If you want to achieve a repeating texture, you'll have to refer to the background as a separate entity (i.e. not in the DOM). That way the browser will be able to treat it as a texture and be able to repeat it. Otherwise, you'll have to manually tile and repeat the elements within the DOM.
Consider the example below which borrows a little bit of CSS from Ian's answer so that we use CSS animations. Transitions won't work since they won't repeat:
const svg = `
<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" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<style>
#keyframes fadeInOut {
from {
opacity: 1;
}
to {
opacity: 0.5;
}
}
circle.animated {
animation: fadeInOut 1s ease infinite alternate;
}
circle.animated.fast {
animation-duration: 0.3s;
}
circle.animated.medium {
animation-duration: 0.7s;
}
circle.animated.slow {
animation-duration: 1.1s;
}
</style>
<g>
<circle class="animated fast" cx="0" cy="0" r="10"/>
<circle class="animated medium" cx="50" cy="0" r="10"/>
<circle class="animated fast" cx="100" cy="0" r="10"/>
<circle class="animated medium" cx="0" cy="50" r="10"/>
<circle class="animated slow" cx="50" cy="50" r="10"/>
<circle class="animated medium" cx="100" cy="50" r="10"/>
<circle class="animated fast" cx="0" cy="100" r="10"/>
<circle class="animated medium" cx="50" cy="100" r="10"/>
<circle class="animated fast" cx="100" cy="100" r="10"/>
</g>
</svg>
`.replace(/\r?\n/g, "");
const rocky = document.getElementById("rocky");
rocky.style.background = `url('data:image/svg+xml;utf8,${svg}')`;
#rocky {
width: 500px;
height: 500px;
}
<div id="rocky"></div>

Using a circle SVG, how to animate a dashed progress bar to show a certain percentage?

I currently have an SVG with three circle elements.
Circle 1: Grey border (bottom layer)
Circle 2: Red Dashed border (mid layer)
Circle 3: Blue border (top layer)
I am able to animate the Circle 3 (Blue) to show 40%.
Unfortunately though, Circle 2 (Red) is around the entire circle (100%) instead of 80%.
So my questions are...
Can Circle 2 be animated the same as Circle 3 and occupy only 80%? Or is it not possible because of stroke-dasharray: 0.2em (line 93 in the CSS)?
In the css (line 81 and line 87), I have vector-effect: non-scaling-stroke commented out. I would like to uncomment those two lines but unfortunately the progress circular bar doesn't look correct. Any possible way to make the stroke not responsive while having the desired animation/look?
Any help is appreciated!
Here's the Codepen: https://codepen.io/anon/pen/oaVrpE
P.S.
I'm able to do the animation by adding the "active" class to the circle elements. That class gets added by the buttons. Finally, the "active" class calls the keyframe names in the CSS.
Snippet of the HTML and CSS codes but please do check out the codepen above.
HTML
<svg id="categoryIcon" data-name="category icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" width="100%" height="100%" class="catIcon userIcon">
<circle class="filler-loader fill-line" cx="48" cy="48" r="47" />
<circle class="filler-loader path path-dashed" cx="48" cy="48" r="47" />
<circle class="filler-loader path path-progress" cx="48" cy="48" r="47" />
<path d="M1536 1399q0 109-62.5 187t-150.5 78H469q-88 0-150.5-78T256 1399q0-85 8.5-160.5t31.5-152 58.5-131 94-89T583 832q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" transform="translate(26, 25), scale(0.025)"/>
</svg>
CSS
svg.catIcon {
overflow: visible;
display: inline-block;
position: absolute;
top: 0;
left: 0;
.filler-loader {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.fill-line {
fill: #fff;
stroke: #e3e3e3;
stroke-width: 8px;
// vector-effect: non-scaling-stroke;
}
.path {
fill: none;
stroke-width: 8px;
// vector-effect: non-scaling-stroke;
stroke-dasharray: $dashOffset;
stroke-dashoffset: $dashOffset;
&-dashed {
&.active {
stroke-dasharray: 0.2em;
stroke: red;
}
}
&-progress {
&.active {
stroke: blue;
}
}
}
&.userIcon {
.path-dashed {
&.active {
animation: circProgress80 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
clip-path: url("#circleMask");
}
}
.path-progress {
&.active {
animation: circProgress40 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
}
}
}
}

How can achieve an invisible pencil effect with SVG text? [duplicate]

I am trying to animate a text that I created and saved as SVG. So far, I've only been able to animate the stroke, but that's not what I am trying to achieve. How can I implement animation like the two examples, below?
http://codepen.io/se7ensky/pen/waoMyx
https://codepen.io/munkholm/pen/EaZJQE
Here is what I have so far:
.test {
width: 300px
/* margin:0 auto; */
}
.l1 {
animation: dash 15s 1;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation-fill-mode: forwards;
/*fill: none;*/
}
.l2 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 20s linear forwards;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 1s;
}
.l3 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 2.5s;
/* Chrome, Safari, Opera */
animation-delay: 2.5s;
}
.l4 {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 25s linear forwards;
-webkit-animation-delay: 4.5s;
/* Chrome, Safari, Opera */
animation-delay: 4.5s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg class="test" 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 30.1 21.8" style="enable-background:new 0 0 30.1 21.8;" xml:space="preserve">
<g>
<path class="text l1" d="M16.5,9.2c-0.2-0.2-0.2-1,0.1-1.5c0.1-0.1,0.2-0.3,0.3-0.4c-1.6,0-3.2-0.3-4.7-0.1C10.8,7.3,9.5,8,9.3,8.9
c-0.1,0.6,0.5,0.8,0.7,1c0.1,0.1,0,0.2-0.1,0.1C9.5,10,8.7,9.4,9,8.7c0,0,0-0.1,0-0.2c0.3-1.2,1.7-1.8,3.3-1.9
c1.8-0.1,3.9,0.4,4.8,0.4c0.2-0.2,0.4-0.4,0.5-0.4c0.3-0.1,0.6,0.1,0.3,0.4c-0.1,0.1-0.4,0.3-0.6,0.5c-0.4,0.4-0.8,1-0.5,1.5
C16.8,9.2,16.7,9.3,16.5,9.2z M12.1,12.8c0.1,0.1-0.1,0.3-0.1,0.3c-0.2,0.3-0.5,0.8-0.8,0.8c-0.1,0-0.5-0.1-0.5-0.1
c-0.1-0.8,1.5-3.5,1.9-4.2c0.2-0.3,0.1-0.4,0.1-0.5c0.1-0.4,0.9-1.4,1.5-1.4c0.2,0,0.8,0.2,0.7,0.5c0,0-0.1-0.1-0.2-0.1
c-1.1,0-2.9,3.6-3.4,4.7c-0.3,0.7,0.1,0.6,0.4,0.3C11.8,13,12,12.8,12.1,12.8z" fill="red" stroke="#000" stroke-miterlimit="10" stroke-width="0.5" />
<path class="text l2" d="M14.4,12.3c-0.2,0-0.3-0.2-0.1-0.2c0.4,0,1.1-0.4,1.5-0.8c0.2-0.2,0.6-0.5,0.5-0.8c0-0.3-0.4-0.2-0.6-0.1
c-0.7,0.3-1.7,1.3-2,2.2c-0.3,1,0.6,1,1.4,0.7c0.9-0.4,1.7-1,2.1-1.7c0-0.1,0.1-0.1,0.1,0c0.1,0,0.1,0.1,0,0.1
c-0.5,0.8-1.2,1.5-2.1,1.8c-1.2,0.5-2.8,0-2.1-1.5c0.4-0.8,2.2-2.4,3.1-2.1c0.5,0.2,0.4,0.8,0.2,1.1C16.1,11.8,15,12.2,14.4,12.3z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"
/>
<path class="text l3" d="M17.3,13.6c-0.2,0.2-0.1,0.5,0.4,0.4c0.6-0.2,1.5-0.9,1.5-1.6c0-0.3-0.7-0.6-0.9-0.7c-0.2-0.1-0.3-0.3-0.4-0.4
c-0.1,0.2-0.3,0.5-0.5,0.8c-0.1,0.1-0.3,0-0.2-0.1c0.3-0.5,0.6-0.9,0.6-1.1c0.1-0.9,1.7-1.7,2.6-1.7c0.5,0,1,0.3,0.7,0.8
c-0.1,0.2-0.2,0.3-0.4,0.4c-0.1,0-0.2,0-0.1-0.2c0.2-0.2,0.3-0.6,0-0.6c-0.4,0-1,0.2-1.3,0.4c-0.4,0.2-0.7,0.4-1,0.9
c-0.3,0.3-0.2,0.6,0.1,0.8c0.8,0.5,1.8,0.8,0.9,1.8c-0.4,0.5-1.1,0.7-1.7,0.9c-0.2,0-0.7,0.1-0.9-0.1c-0.1-0.1,0-0.3,0.2-0.5
c0.1-0.1,0.3-0.3,0.6-0.3c0.1,0,0.1,0.1,0,0.1C17.5,13.4,17.3,13.5,17.3,13.6z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
<path class="text l4" d="M23.6,10.2c-0.2,0.1-0.8,0.1-1.4,0.2c-0.2,0.3-0.3,0.5-0.3,0.6c-0.4,0.7-0.7,1.4-0.7,1.7c-0.1,0.5,0.2,0.8,0.6,0.6
c0.4-0.2,1.3-1,1.8-1.7c0.1-0.1,0.2,0,0.1,0.1c-0.2,0.4-1,1.2-1.6,1.6c-0.4,0.3-1.3,0.6-1.5-0.1c-0.1-0.3,0.1-0.9,0.4-1.5
c-0.1,0.1-0.2,0.3-0.5,0.6c-0.1,0.1-0.2,0-0.1-0.2c0.4-0.5,0.7-1,0.9-1.2c0,0,0.1-0.2,0.3-0.5c-0.1,0-0.2,0-0.3,0
c-0.1,0-0.2-0.1-0.2-0.3c0.1-0.2,0.4-0.2,0.6-0.2c0,0,0,0,0,0l0.6-1.1c0.3-0.5,0.3-0.6,0.5-0.7c0.2,0,0.4,0,0.5,0.1
c0.1,0.1,0,0.4-0.1,0.5C23.2,9,23.1,9,23,9.1l-0.6,1l0.2,0c0.4,0,0.7-0.1,1.1-0.1C23.9,10,24.1,10.1,23.6,10.2z" fill="none" stroke="#000" stroke-miterlimit="5" stroke-width="0.5"/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
View on CodePen

How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.
So the standard dash animation technique works as follows. You take a standard line:
<svg>
<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Then you add a dash pattern to it and animate it's position (stroke-dashoffset).
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>
Finally to get the fancy variable stroke width of the Se7ensky example, you clip that line with the outline of your logo.
So let's pretend this simple path below represents your logo:
<svg>
<path stroke="black" stroke-width="1" fill="lightgrey"
d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</svg>
We turn that into a clipPath element and use it to trim our animated stroke to the shape of our logo:
.pen {
stroke-dasharray: 280 280;
stroke-dashoffset: 280;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
#keyframes draw {
from {
stroke-dashoffset: 280;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<clipPath id="logo">
<path d="M 40,50
C 110,55 195,60, 265,55
C 290,55 290,85 265,85
C 195,85 110,85 40,100
C 0,100 0,50 40,50 Z"/>
</clipPath>
<path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>
So to replicate their example, you'll need to add a continuous path (or paths if you want) to your SVG that represents the path that a pen would take if it were writing the letters in your logo.
Then animate that path using the dashoffset technique while clipping it with your original logo.
Update
Here's a final demo with a more realistic letter shape:
// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");
chk.addEventListener("input", function(evt) {
if (evt.target.checked) {
penpath.classList.add("clipped");
} else {
penpath.classList.remove("clipped");
}
});
.pen {
fill: none;
stroke: red;
stroke-width: 18;
stroke-linecap: round;
stroke-dasharray: 206 206;
stroke-dashoffset: 206;
animation-duration: 2s;
animation-name: draw;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.clipped {
clip-path: url(#logo);
}
#keyframes draw {
from {
stroke-dashoffset: 206;
}
to {
stroke-dashoffset: 0;
}
}
<svg>
<defs>
<clipPath id="logo">
<path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
</clipPath>
</defs>
<path id="penpath" d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen clipped"/>
</svg>
<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>

The example looks like a combination of svg paths and delayed animations.
This blog post by CSS-Tricks explains it pretty well (Note that the svg must have strokes for this to work):
https://css-tricks.com/svg-line-animation-works/
Here's a guide on stroke-dashoffset (used on the example) that might be useful:
https://css-tricks.com/almanac/properties/s/stroke-dashoffset/