Chrissi | Freaky Posts - Answer Overflow

Chrissi | Freaky

Explore posts from servers

•Created by Chrissi | Freaky on 10/22/2024 in #help

Angular on Deno 2.0

In the blog post announcing Deno 2.0, it is mentioned that Deno can be used with Angular. However, I am having difficulty setting up a new Angular project using Deno. My current approach, deno run -A npm:@angular/cli@latest ng new test, does not seem to work, and I am unsure how to proceed.

2 replies

DDeno

•Created by Chrissi | Freaky on 10/19/2024 in #help

Why Are Permissions Enabled Globally and Not Per Dependency?

I've been trying out Deno and built a small project. One thing heard about Deno was the control over what a package can do on your system. However, after going through the docs and experimenting, I noticed that permissions can only be enabled globally for the project. Is there a way to allow specific permissions, like file system access, for just one package? It feels a bit confusing because in my small project, I already need to allow three permissions, and I’m tempted to just use the -A flag for convenience. Could someone clarify this for me?

7 replies

KPCKevin Powell - Community

•Created by Chrissi | Freaky on 9/23/2024 in #front-end

Cover SVG Path with a pattern to create Brushstroke effect

Hey there! I wanted to make a follow-up question to my old question. I want to create an animated text marker highlight effect. I got the animation, but now the "brush" pattern is missing. I only have one straight line. I found this https://blog.tentaclelabs.com/posts/2022/04/draw-a-pattern-along-a-path-using-svg and wanted to follow it (since I don't know any better way. If anybody has a better idea to do this, I would love to hear it). I got this https://codepen.io/FreakeyPlays/pen/BagXXzm without the JavaScript. But my "Marker"/"Pattern" is way too small. How is it possible to make the marker bigger? I thought I could control it using stroke width, but that does not work. Another idea I had was to draw the path on a tablet using a brush stroke already and try to animate it. But I don't have a tablet right now and can't test if the SVG will have a path with the brush pattern. Has anyone ever tried this?

3 replies

KPCKevin Powell - Community

•Created by Chrissi | Freaky on 9/20/2024 in #front-end

Textmarker Highlight Effect (Stretch SVG over width of a span element)

Hey there! I want to make an animated text marker highlighter effect for headings on my website. I made some SVG's that I can animate using stroke-dashoffset, but if I have more than one short word, the SVG only centers in the text but does not grow in width. I tried setting width/height and some other attributes, but when it grows in width, the height grows to preserve the aspect ratio and overflows to the bottom of the span. Can anybody tell me how I can make the SVG "fill"/"stretch" in the width of the container? (Any other improvements of my code are appreciated too.) Here is my code so far:

.highlight {
  position: relative;
  display: inline-block;
}

.highlight svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.highlight svg path {
  stroke-dasharray: 4013;
  stroke-dashoffset: 0;

  animation: markerEffect var(--duration) ease-in-out 1s;
  animation-iteration-count: 1;
}

@keyframes markerEffect {
  from {
    stroke-dashoffset: 4013;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.highlight {
  position: relative;
  display: inline-block;
}

.highlight svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.highlight svg path {
  stroke-dasharray: 4013;
  stroke-dashoffset: 0;

  animation: markerEffect var(--duration) ease-in-out 1s;
  animation-iteration-count: 1;
}

@keyframes markerEffect {
  from {
    stroke-dashoffset: 4013;
  }
  to {
    stroke-dashoffset: 0;
  }
}

    <h1>
      Hello
      <span class="highlight" style="--duration: 1000">
        World this is a text
        <svg
          viewBox="0 0 1640 664"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m114 233c0 0 1367.2 1.1 1396.7 58.9 29.5 57.7-1321.6 123.9-1296.5 161 25 37.1 1293.5 12.9 1293.5 12.9"
            stroke="#C8D20A"
            stroke-width="150"
            stroke-linecap="round"
            />
        </svg>
      </span>
      , from John Doe.
    </h1>

    <h1>
      Hello
      <span class="highlight" style="--duration: 1000">
        World this is a text
        <svg
          viewBox="0 0 1640 664"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="m114 233c0 0 1367.2 1.1 1396.7 58.9 29.5 57.7-1321.6 123.9-1296.5 161 25 37.1 1293.5 12.9 1293.5 12.9"
            stroke="#C8D20A"
            stroke-width="150"
            stroke-linecap="round"
            />
        </svg>
      </span>
      , from John Doe.
    </h1>

12 replies

Gaming

Programming