<svg class="desktop-img" xmlns="http://www.w3.org/2000/svg" width="821.334" height="509.375" viewBox="0 0 821.334 509.375" preserveAspectRatio="true" version="1.1">
<path id="Path_244" class="path" data-name="Path 244" d="M-15596.515,315.963s-64.138,86.644-155.208,86.033-153.659-47.666-263.047-49.682-212.582,34.27-284.648,148.329-38.8,246.323-38.8,246.323" transform="translate(16375.888 -274.001)" fill="none" stroke="#ef404a" stroke-linecap="round" stroke-linejoin="round" stroke-width="60" ></path>
</svg>
Want animate this curve while scrolling
Related
<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100"></polygon>
</svg>
Is it possible to put a border on only the right-side of this shape without using JavaScript?
Use an appropriate stroke-dasharray
<svg width="600px" height="600px" fill="blue" viewBox="0 0 101 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" stroke="red" pathLength="100" stroke-dasharray="0 15.4 34.6 100"></polygon>
</svg>
Maybe a shadow would do?
<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" style="filter: drop-shadow(1px 0px 0px black)"></polygon>
</svg>
I am new to svg and have a question, how to make svg element to get bigger?
How can i control it?
player container
here is my code:
<div class="player-container">
<svg width="100%" height="100%" viewBox="0 0 97 97" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
opacity="0.153808594">
<g id="Car-concept" transform="translate(-193.000000, -733.000000)" fill="#8E95D7">
<g id="Group-10" transform="translate(127.000000, 596.000000)">
<g id="Group-14" transform="translate(66.000000, 137.000000)">
<circle id="Oval" cx="48.5" cy="48.5" r="48.5"></circle>
</g>
</g>
</g>
</g>
</svg>
<svg class="moving-outline" width="100%" height="100%" viewBox="0 0 453 453" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#646DBE" stroke-width="10" />
</svg>
<h3 class="time-display">45%</h3>
</div>
I have svg:
<svg _ngcontent-c23="" xmlns="http://www.w3.org/2000/svg">
<symbol id="edeb4def-6ea8-3f8a-809d-40ca8ce3bddb" viewBox="0 0 200 200">
<g fill="none" fill-rule="evenodd" id="Chelsea" stroke="none" stroke-width="1" >
<path d="M119,3 L81,3 L81,3.78138753 C81,6.6620789 99.9873181,18 99.9873181,18 C99.9873181,18 119,6.6620789 119,3.78138753 L119,3 Z" fill="#D31818" id="inside-neck"></path>
</g>
</symbol>
</svg>
It doesn't work in my app and online svg viewers (exp1, exp2)
If I change <symbol> tag to <g>, it works.
I am very new to SVG and I am having some trouble with my SVG polyline. I am trying to round the top of the arrow below with stroke-linecap="round" and stroke-linejoin="round" but it doesn't seem to work.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 44.5" enable-background="new 0 0 23.7 44.5" xml:space="preserve">
<polygon points="22.3,44.5 23.7,43.1 2.8,22.3 23.7,1.4 22.3,0 0,22.3 " stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Am I doing anything wrong?
You haven't specified a stroke so no stroke is drawn (try stroke="red") . The polygon is actually visible because it is filled that way. What you really want are two lines stroked. Something like this...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
<polyline points="23,43.8 3.5,22.3 22.3,3 " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke="black" fill="none"/>
</svg>
Hi is there any way to design the below picture with SVG or any other way?
Please find the SVG Code for the circle with head
<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="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
<path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>
Head
Based on the head angle in the example 332° the circle should rotate
Red Arc
Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180.
Please help me to design :-)
Try this i used rect and circle instead of path
svg{
background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
<rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
<circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
<circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
<text x="36" y="55" fill="white" font-size="5">Check</text>
</svg>