Generate Large Upward Pointing Triangle From Existing Code Using SVG - javascript

I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangle, basic the inverse. Does any one know how to tweak this code to accomplish that?
Your help is greatly appreciated.
Best Regards...
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>

You can easily do that understanding the line commands in an SVG path.
What we have here:
<path d="M0 0 L50 100 L100 0 Z"></path>
Says:
Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.
So, to invert the triangle, you just need:
<path d="M0 100 L50 0 L100 100 Z"></path>
Which basicaly says:
Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.
Check the demo:
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>

You could just draw it upside down using a transform.
translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
scale inverts it in the y direction
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>

Related

Click only through holes in svg mask: case with intersecting holes

I have svg mask which determines holes in rectangular. Behind svg mask I have some clickable elements and I would like to pass events to them, but only through holes.
I've already asked this question here and got an answer, which worked perfectly for me until I've run into a case with intersecting rectangulars
Click only through holes in svg mask
Is there any simple solution to got area around rectangulars clipped out but not area in intersections? It would be perfect to have something like globalCompositeOperation='destination-out' and I've started to think of how to use canvas instead of svg for my problem, but pointer-events which I use for svg are not yet designed to work correct with canvas as far as I know.
button, svg {
position:absolute;
width:400px;
height:400px
}
button {
background: #0000ff;
cursor: pointer;
}
button:hover {
background: #008800;
}
svg {
pointer-events: none;
}
.over {
fill: #000;
clip-path: url(#clip);
pointer-events: painted;
}
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip" clip-rule="evenodd">
<path d="M 20 20 h 360 v 360 h -360 z
M 90 100 v 240 h 140 v -240 z
M 200 290 v 80 h 80 v -80 z" />
</clipPath>
</defs>
<rect y="0" x="0" height="400" width="400" class="over" />
</svg>
In my view, this is a problem of convenience. You would like to be able to use separate paths and treat them the same way whether they interact or not. Unfortunately, because of some limitations in the system, I do not think it is possible to achieve this convenience. However, your quetion itself is easy to answer.
First, a word about what is going on in your example. Your clipPath has a large "outer" path that is drawn clockwise (right, down, left, up). Then you have two "inner" paths drawn counterclockwise (down, right, up, left). The clip works according to what is considered inside and outside the path. The problem is that the intersection is considered outside (see link).
The straightforward solution is to use a single path for every shape, even if it is not a simple rectangle:
button, svg {
position:absolute;
width:400px;
height:400px
}
button {
background: #0000ff;
cursor: pointer;
}
button:hover {
background: #008800;
}
svg {
pointer-events: none;
}
.over {
fill: #000;
clip-path: url(#clip);
pointer-events: painted;
}
<button></button>
<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400">
<defs>
<clipPath id="clip" clip-rule="evenodd">
<path d="M 20 20 h 360 v 360 h -360 z
M 90 100 v 240 h 110 v 30 h 80 v -80 h -50 v -190 z" />
</clipPath>
</defs>
<rect y="0" x="0" height="400" width="400" class="over" />
</svg>

Alignment of textPath in SVG for a pie graph

I am trying to make a pie chart using SVG. The chart comes out fine but I am not able to add a text(values in pie) to it. Tried using textpath but the aligment is an issue. I do not want to use a library because my use case has several of these simple pie on a single screen.
Please find the svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<g transform="rotate(-90 50 50)"><path d="M 50,50 l 49,0 a49,49 0 0,0 -18.010176595826515,-37.95564312955508 z" fill="#c3fcb4" id="textPath0"></path><path d="M 50,50 l 30.989823404173485,-37.95564312955508 a49,49 0 1,0 18.010176595826515,37.95564312955509 z" fill="#ffb7b3" id="textPath1"></path></g><text><textPath href="#textPath0">11</textPath></text><text><textPath href="#textPath1">67</textPath></text></svg>
I have improved your code and make it a little bit easier so that you can add more percentage ratio to Svg pie chart
svg {
width: 200px;
border-radius: 50%;
background: #c3fcb4;
transform: rotate(-90deg);
}
svg text {
transform: rotate(90deg);
font-size:5px;
}
circle {
fill: none;
stroke-width: 32;
r: 16;
cx: 16;
cy: 16;
}
circle.first {
stroke: #ffb7b3;
}
le.second {
stroke: #ffeb3b;
}
circle.third {
stroke: purple;
}
<svg viewBox="0 0 32 32">
<circle class='second' stroke-dasharray="36 100"></circle>
<circle class='first' stroke-dasharray="86 100"></circle>
<text x="10" y="-24" fill="#000">11</text>
<text x="5" y="-11" fill="#000">67</text>
</svg>

How to get an svg to follow a path?

I am trying to get an svg to follow a path. But the svg circle just stays in one place and does not follow the path.
.LineSvg {
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
<circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >
<animateMotion
dur="2.2s"
/>
<mpath xlinkHref="#wire"></mpath>
<animateMotion />
</circle>
</svg>
It should start at the beginning of the path (line) and move to the top of the line.
There are a number of syntactical errors in the markup that prevent animation. When these are fixed the animation takes place off the screen because the path's transform is ignored by the mpath element.
The syntax is fixed below and I've adjusted the viewBox so the animation is visible.
I've removed the non-functional transform on the path element.
I've also added a fill="freeze" otherwise the circle disappears at the end as the path's displacement is so large.
Finally I've made the circle bigger so you can still see it in the larger viewBox.
.LineSvg{
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
<circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >
<animateMotion
dur="2.2s" fill="freeze"
>
<mpath xlink:href="#wire"></mpath>
</animateMotion>
</circle>
</svg>

Generate Inner Shadow Effect On An SVG "Path" Element / Two Sides Of A Triangle

I am using an SVG/Path to generate a large upward pointing triangle...see the related link below for some background info.
Background Info
What I am trying to do is add an inset, blurred shadow (simiar to box-shadow) on two sides of the triangle (top-left and top-right), but not the base of the triangle. Also trying to taper the shadow so that it does not touch the base of the triangle. The following link is screenshot with a rough, but not exact, idea of what I am looking to do.
Shadow Example
Here is the code I have so far:
svg#bigTriangleColor {
pointer-events: none; background: red;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #EEEEEE;
stroke: #EEEEEE;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
Thanks in advance, any help is greatly apprecizted...
Add a grey shape behind the triangle to represent the shadow. Then blur it.
<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
<polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>

How to draw a curved svg path

How would I (if possible) draw a black border that goes along only the inside of this svg. I have tried stroke and added stroke-width, but this wraps the entire svg. Is there a way to stop the stroke at a certain point?
div{
width: 300px;
margin: 0 auto;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000"><path stroke-width="4" stroke="#0f0f0f" d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path> </svg>
</div>
If I understand correctly you want to put a stroke only on the top curved part.
for this, you could add another path but only include the curve:
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
You can then style this with fill none and stroke style.
Full svg code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="none" height="45px" class="engle-curve curve-position-top" style="fill:#ff0000">
<path d="M0 0 C50 100 50 100 100 0 L100 100 0 100"></path>
<path id='curvestroke' d="M0 0 C50 100 50 100 100 0"></path>
</svg>
</div>
css:
div{
width: 300px;
margin: 0 auto;
}
#curvestroke{
fill: none;
stroke: black;
stroke-width:4px;
}
example fiddle

Categories