info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-08-24 01:03:25 +02:00
Code Issues Releases Wiki Activity

catmull

Browse Source
This commit is contained in:
Pomax
2016-01-08 16:14:11 -08:00
parent b4910017ac
commit 2ee641554c
8 changed files with 1641 additions and 1940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2731
article.js
View File

File diff suppressed because it is too large Load Diff

397
data/catmullconv.jsx
View File

@@ -1,397 +0,0 @@
<p>Taking an excursion to different splines, the other common design curve is the
<a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom
spline</a>. Now, a Catmull-Rom spline is a form of cubic Hermite spline, and as it so happens
the cubic Bézier curve is also a cubic Hermite spline, so maybe... maybe we can convert one
into the other, and back, with some simple substitutions?</p>
<p>Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve,
except the first and last, which makes sense if you read the "natural language" description
for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point
P<sub>x</sub>, has a tangent along the line P<sub>x-1</sub> to P<sub>x+1</sub>. The curve
runs from points P<sub>2</sub> to P<sub>n-1</sub>, and has a "tension" that determines
how fast the curve passes through each point. The lower the tension, the faster the curve
goes through each point, and the bigger its local tangent is.</p>
<!-- interactive Catmull Rom curve example goes here -->
<p>I'll be showing the conversion to and from Catmull-Rom curves for the tension that the
Processing language uses for its Catmull-Rom algorithm.</p>
<p>We start with showing the Catmull-Rom matrix form:</p>
<p>\[
CatmullRom(t) =
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 0 & 1 & 0 \\
-3 & 3 & -2 & -1 \\
2 & -2 & 1 & 1
\end{bmatrix}
\cdot
\begin{bmatrix}
V_1 \\ V_2 \\ V'_1 \\ V'_2
\end{bmatrix}
\]
</p>
<p>However, there's something funny going on here: the coordinate column matrix looks weird.
The reason is that Catmull-Rom curves are actually curve segments that are described by two
points, and two tangents; the curve leaves a point V1 (if we have four coordinates instead,
this is coordinate 2), arriving at a point V2 (coordinate 3), with the curve departing V1
with a tangent vector V'1 (equal to the tangent from coordinate 1 to coordinate 3) and
arriving at V2 with tangent vector V'2 (equal to the tangent from coordinate 2 to coordinate
4). So if we want to express this as a matrix form based on four coordinates, we get this
representation instead:</p>
<p>\[
\begin{bmatrix}
V_1 \\ V_2 \\ V'_1 \\ V'_2
\end{bmatrix}
=
T
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
=
\begin{bmatrix}
P_2 \\ P_3 \\ \frac{P_3 - P_1}{2} \\ \frac{P_4 - P_2}{2}
\end{bmatrix}
\ \Rightarrow \
T
=
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
0 & 0 & 2 & 0 \\
-1 & 0 & 1 & 0 \\
0 & -1 & 0 & 1
\end{bmatrix}
\]</p>
<div class="note">
<h2>Where did that 2 come from?</h2>
<p>Catmull-Rom splines are based on the concept of tension: the higher the tensions,
the shorter the tangents at the departure and arrival points. The basic Catmull-Rom
curve arrives and departs with tangents equal to half the distance between the two
adjacent points, so that's where that 2 came from.</p>
<p>However, the "real" matrix is this:</p>
<p>\[
T
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
=
\begin{bmatrix}
P_2 \\ P_3 \\ \frac{P_3 - P_1}{2 \cdot τ} \\ \frac{P_4 - P_2}{2 \cdot τ}
\end{bmatrix}
\Rightarrow \
T
=
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
0 & 0 & 2 & 0 \\
-τ & 0 & τ & 0 \\
0 & -τ & 0 & τ
\end{bmatrix}
\]</p>
<p>This bakes in the tension factor τ explicitly.</p>
</div>
<p>Plugging this into the "two coordinates and two tangent vectors" matrix form,
we get:</p>
<p>\[
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 0 & 1 & 0 \\
-3 & 3 & -2 & -1 \\
2 & -2 & 1 & 1
\end{bmatrix}
\cdot
\begin{bmatrix}
V_1 \\ V_2 \\ V'_1 \\ V'_2
\end{bmatrix}
\]</p>
<p>\[
=
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 0 & 1 & 0 \\
-3 & 3 & -2 & -1 \\
2 & -2 & 1 & 1
\end{bmatrix}
\cdot
\left (
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
0 & 0 & 2 & 0 \\
-τ & 0 & τ & 0 \\
0 & -τ & 0 & τ
\end{bmatrix}
\right )
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
\]</p>
<p>\[
=
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
-τ & 0 & τ & 0 \\
2τ & τ-6 & -2(τ-3) & -τ \\
-τ & 4-τ & τ-4 & τ
\end{bmatrix}
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
\]</p>
<p>So let's find out which transformation matrix we need in order to convert from Catmull-Rom to Bézier:</p>
<p>\[
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
-τ & 0 & τ & 0 \\
2τ & τ-6 & -2(τ-3) & -τ \\
-τ & 4-τ & τ-4 & τ
\end{bmatrix}
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
=
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\cdot
A
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
\]</p>
<p>The difference is somewhere in the actual hermite matrix, since the <em>t</em> and coordinate
values are identical, so let's solve that matrix equasion:</p>
<p>\[
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
-τ & 0 & τ & 0 \\
2τ & τ-6 & -2(τ-3) & -τ \\
-τ & 4-τ & τ-4 & τ
\end{bmatrix}
=
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\cdot
A
\]</p>
<p>We left-multiply both sides by the inverse of the Bézier matrix, to get rid of the
Bézier matrix on the right side of the equals sign:</p>
<p>\[
{
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
}^{-1}
\cdot
\frac{1}{2}
\cdot
\begin{bmatrix}
0 & 2 & 0 & 0 \\
-τ & 0 & τ & 0 \\
2τ & τ-6 & -2(τ-3) & -τ \\
-τ & 4-τ & τ-4 & τ
\end{bmatrix}
=
{
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
}^{-1}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\cdot
A
\ =\
I \cdot A
\ =\
A
\]
</p>
<p>Which gives us:</p>
<p>\[
\frac{1}{6}
\cdot
\begin{bmatrix}
0 & 6 & 0 & 0 \\
-τ & 6 & τ & 0 \\
0 & τ & 0 & -τ \\
0 & 0 & 6 & 0
\end{bmatrix}
=
A
\]</p>
<p>Multiplying this <strong><em>A</em></strong> with our coordinates
will give us a proper Bézier matrix expression again:<p>
<p>\[
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\cdot
\frac{1}{6}
\cdot
\begin{bmatrix}
0 & 6 & 0 & 0 \\
-τ & 6 & τ & 0 \\
0 & τ & 0 & -τ \\
0 & 0 & 6 & 0
\end{bmatrix}
\cdot
\begin{bmatrix}
P_1 \\ P_2 \\ P_3 \\ P_4
\end{bmatrix}
\]</p>
<p>\[
=
\begin{bmatrix}
1 & t & t^2 & t^3
\end{bmatrix}
\cdot
\begin{bmatrix}
1 & 0 & 0 & 0 \\
-3 & 3 & 0 & 0 \\
3 & -6 & 3 & 0 \\
-1 & 3 & -3 & 1
\end{bmatrix}
\cdot
\begin{bmatrix}
P_2 \\
P_2 + \frac{P_3-P_1}{6 \cdot τ} \\
P_3 - \frac{P_4-P_2}{6 \cdot τ} \\
P_3
\end{bmatrix}
\]</p>
<p>So a Catmull-Rom to Bézier conversion, based on coordinates, requires turning
the Catmull-Rom coordinates on the left into the Bézier coordinates on the right
(with τ being our tension factor):</p>
<p>\[
\begin{bmatrix}
P_1 \\
P_2 \\
P_3 \\
P_4
\end{bmatrix}_{CatmullRom}
\Rightarrow
\begin{bmatrix}
P_2 \\
P_2 + \frac{P_3-P_1}{6 \cdot τ} \\
P_3 - \frac{P_4-P_2}{6 \cdot τ} \\
P_3
\end{bmatrix}_{Bézier}
\]</p>
<p>And the other way around, a Bézier to Catmull-Rom conversion requires turning
the Bézier coordinates on the left this time into the Catmull-Rom coordinates
on the right. Note that there is no tension this time, because Bézier curves
don't have any. Converting from Bézier to Catmull-Rom is simply a default-tension
Catmull-Rom curve:</p>
<p>\[
\begin{bmatrix}
P_1 \\
P_2 \\
P_3 \\
P_4
\end{bmatrix}_{Bézier}
\Rightarrow
\begin{bmatrix}
P_4 + 6 \cdot (P_1 - P_2) \\
P_1 \\
P_4 \\
P_1 + 6 \cdot (P_4 - P_3)
\end{bmatrix}_{CatmullRom}
\]</p>
<p>Done. We can now draw the curves we want using either Bézier curves or Catmull-Rom
splines, the choice mostly being which drawing algorithms we have natively available,

150
data/catmullmoulding.jsx
View File

@@ -1,150 +0,0 @@
<p>Now, if Catmull-Rom curves go through points, can't we just use those to do curve fitting, instead?
As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the
previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous
section we came up with a single curve that goes through three points. There was a decent amount of
maths and computation involved, and the end result was four coordinates that described a single curve.</p>
<p>Using Catmull-Rom curves, we need virtually no computation, but we're going to end up with two curves
that together describe a single curvature from point 1 through point 2 to point 3. Rather than three points,
we end up needing eight points, describing not one but two curves.</p>
<p>Much like for Bézier curves, we'll have to "clamp" some free parameters, but there are some default values
we can pick that lead to æsthetic curves.
<p>In the following graphic, we see our three points to draw a curvature through on the left, with a
triangle that connects them shown. In the second panel, we see some of our options: In order to
draw the Catmull-Rom curves we want, we need to determine a "virtual" starting point and end point,
so that at points p1 and p3 we have tangents based on the points before and after them. The naive
choice would be to simply mirror p2 over p1 and p3, which are the lines that flare out from the
triangle. However, if we follow those, the curve would be very weird: heading towards and away from
p2 at p1 and p3 respectively, but parallel to the line p1-p3 at point p2.</p>
<p>Another option would be to make sure our curve always departs from p1 and arrives at p3 perpendicular
to the line p1-p3. To achieve this, we project P2 onto the line P1--P3. How we do this is freeform, so
for this example let's project it based on "half the incidence angle":</p>
<textarea class="sketch-code" data-sketch-preset="threepanel" data-sketch-title="Catmull-Rom curve fitting">
Point p1, p2, p3;
float f = 1.0,
ratio = 0,
st = -0.5,
TAU = 2*PI;
void setupCurve() {
p1 = new Point(90, 265);
p2 = new Point(95, 125);
p3 = new Point(195, 80);
Point[] pts = {p1, p2,p3};
BezierCurve c = new BezierCurve(pts);
curves.add(c);
}
float[] angle123(Point p, Point o1, Point o2) {
float a1 = (atan2(o1.y-p.y, o1.x-p.x) + TAU) % TAU;
float a2 = (atan2(o2.y-p.y, o2.x-p.x) + TAU) % TAU;
return new float[] { a1, a2, abs(a2-a1) };
}
void drawCurve(BezierCurve curve) {
Point[] pts = curve.points;
p1 = pts[0];
p2 = pts[1];
p3 = pts[2];
curve.drawPoints();
stroke(0);
line(dim,0,dim,dim);
nextPanel();
// visualise the angles
Point[] points = {null, p1, p2, p3, null};
float[] angles = {0,
angle123(p1,p2,p3),
angle123(p2,p3,p1),
angle123(p3,p1,p2),
0};
stroke(127);
fill(0,20);
float start, end;
boolean flip;
Point m2;
start = angles[2][0] < angles[2][1] ? angles[2][0] : angles[2][1],
end = start + angles[2][2];
flip = angles[2][2] > PI;
if(flip) { float _tmp = start; start = end; end = _tmp + TAU; }
arc(points[2].x, points[2].y, 40, 40, start, end);
float phi = start + (end-start)/2;
m2 = new Point(100 * cos(phi) + p2.x, 100 * sin(phi) + p2.y);
stroke(128);
fill(0,5);
triangle(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
m2 = lli(new Points[]{p2, m2, p1, p3});
float dx = m2.x - p2.x,
dy = m2.y - p2.y;
Point m = new Point( p2.x + dx + f*dx, p2.y + dy + f*dy);
Point p0 = new Point( p1.x - f*(p2.x-p1.x), p1.y - f*(p2.y-p1.y));
Point p4 = new Point( p3.x + f*(p3.x-p2.x), p3.y + f*(p3.y-p2.y));
line(p2.x, p2.y, m.x, m.y);
float x0 = ratio * p0.x + (1-ratio) * m.x,
y0 = ratio * p0.y + (1-ratio) * m.y,
x4 = ratio * p4.x + (1-ratio) * m.x,
y4 = ratio * p4.y + (1-ratio) * m.y;
stroke(200);
line(x0, y0, p1.x, p1.y);
line(p3.x, p3.y, x4, y4);
stroke(0);
line(dim,0,dim,dim);
fill(0,0,200);
m.draw("virtual p0 / p4\n");
curve.drawPoints();
nextPanel();
curve.drawPoints();
stroke(0,0,100);
noFill();
beginShape();
curveTightness(st);
curveVertex( x0, y0);
curveVertex(p1.x, p1.y);
curveVertex(p2.x, p2.y);
curveVertex(p3.x, p3.y);
curveVertex( x4, y4);
endShape();
}
Point lli(Point[] pts) {
float x1=pts[0].x, y1=pts[0].y,
x2=pts[1].x, y2=pts[1].y,
x3=pts[2].x,y3=pts[2].y,
x4=pts[3].x,y4=pts[3].y,
nx=(x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4),
ny=(x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4),
d=(x1-x2)*(y3-y4)-(y1-y2)*(x3-x4);
if(d==0) { return null; }
return new Point(nx/d, ny/d);
}
</textarea>
<p>In the right panel, we see the Catmull-Rom curvature, consisting of two curves (one from p1 to p2, one
from p2 to p3, using the same virtual start as end point, where the grey lines meet), with several
tweakable parameters fixed: the curve tension has been chosen, the tangent at p1 has been chosen,
and the tangent at p3 has been chosen. Changing any of these three values will yield a different curve,
and the art of curve fitting is, again, in finding appropriate values to make a decent looking curve.</p>
<p>Now, can we no convert this to a Bézier curve? Short answer no. Longer answer: no, but we can convert this
to <strong>two</strong> Bézier curves, since our curvature consists of two Catmull-Rom curves. Do we need to? Sometimes we do, but we already know how to convert between the two forms, so that's not all too problematic.</p>

42
data/pointcurves.jsx
View File

@@ -1,42 +0,0 @@
<p>Given the preceding section on curve moulding, we can also generate quadratic and cubic
curves from any three points. However, unlike circle-fitting, which requires only three points,
Bézier curve fitting requires three points, as well as a tangent and <i>t</i> value. We can
come up with "default" values, where the <i>t</i> value for our middle point is simply 0.5,
and the tangent is identical to the baseline for quadratic curves, or half the baseline for
cubic curves.</p>
<p>Using these "default" values for curve creation, we can already get fairly respectable
curves; Click three times on each of the following sketches to set up the points
that should be used to form a quadratic and cubic curve, respectively</p>
<textarea class="sketch-code" data-sketch-preset="generate" data-sketch-title="Fitting a quadratic Bézier curve">
void setupCurve() { span(); }
void drawCurve(BezierCurve curve) {
recordPoint(mouseX,mouseY);
if(p1!=null) { p1.draw(); }
if(p2!=null) { p2.draw(); }
if(p3!=null) { p3.draw(); }
if(p1!=null && p2!=null && p3!=null) {
BezierCurve c = comp.generateCurve(2, p1, p2, p3);
c.draw();
}
}</textarea>
<textarea class="sketch-code" data-sketch-preset="generate" data-sketch-title="Fitting a cubic Bézier curve">
void setupCurve() { span(); }
void drawCurve(BezierCurve curve) {
recordPoint(mouseX,mouseY);
if(p1!=null) { p1.draw(); }
if(p2!=null) { p2.draw(); }
if(p3!=null) { p3.draw(); }
if(p1!=null && p2!=null && p3!=null) {
BezierCurve c = comp.generateCurve(3, p1, p2, p3);
c.draw();
}
}</textarea>
<p>(There are many ways to determine a combination of <i>t</i> and tangent values that lead
to a more "aesthetic" curve, but this will be left as an exercise, since there are too many,
and aesthetics are a personal choice)</p>

63
images/latex/3607174eca6cb8780f98cc902e2b6eab50237b3e.svg
View File

@@ -1,63 +0,0 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="26.167ex" height="6ex" style="vertical-align: -2.333ex; margin-left: 0ex; margin-right: 0ex; margin-bottom: 1px; margin-top: 1px;" viewBox="0 -1531.3 11230.6 2556.3" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45F" d="M436 377c0 -36 -28 -59 -55 -59s-38 19 -38 35c0 26 22 50 52 55c0 0 -16 12 -42 12c-43 0 -72 -26 -80 -33c-24 -22 -52 -69 -56 -82l-32 -130c-4 -18 -38 -154 -40 -158c-7 -20 -25 -28 -37 -28c-15 0 -29 9 -29 27c0 5 6 28 9 43l58 231c13 52 16 63 16 84 c0 38 -14 46 -31 46c-36 0 -56 -48 -73 -119c-6 -22 -7 -23 -17 -23c0 0 -12 0 -12 10c0 3 13 63 31 97c9 18 28 57 74 57c47 0 83 -32 91 -77c19 28 63 77 128 77c51 0 83 -30 83 -65Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D44E" d="M498 143c0 0 -13 -63 -30 -99c-16 -32 -39 -55 -74 -55c-48 0 -83 33 -91 75c-60 -71 -110 -75 -130 -75c-78 0 -133 66 -133 160c0 146 124 293 241 293c45 0 74 -27 92 -64c3 22 18 44 42 44c17 0 29 -10 29 -27c0 -4 0 -6 -7 -34l-36 -140l-22 -90 c-11 -44 -13 -52 -13 -74c0 -20 3 -46 30 -46c41 0 59 59 76 124c3 14 4 18 14 18c3 0 12 0 12 -10zM361 332c0 6 -14 88 -79 88c-40 0 -85 -37 -116 -96c-23 -46 -55 -169 -55 -219c0 -39 14 -94 64 -94c28 0 69 16 113 71c15 17 15 19 20 37l50 196c1 5 3 11 3 17Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D461" d="M330 420c0 -20 -10 -20 -30 -20h-94l-74 -295c-4 -17 -6 -24 -6 -48c0 -33 10 -46 31 -46c34 0 87 24 130 128c5 11 6 14 15 14c4 0 12 0 12 -10c0 -8 -57 -154 -159 -154c-54 0 -92 38 -92 92c0 18 4 35 76 319h-88c-20 0 -28 0 -28 12c0 19 10 19 30 19h94l39 159 c9 35 37 36 40 36c17 0 29 -10 29 -27c0 -6 -5 -26 -41 -168h88c18 0 28 0 28 -11Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D456" d="M284 625c0 -30 -30 -53 -53 -53c-24 0 -38 17 -38 36c0 27 27 53 54 53c23 0 37 -16 37 -36zM293 143c0 -9 -37 -154 -131 -154c-48 0 -82 35 -82 82c0 21 13 54 23 80c16 43 61 159 69 185c4 10 11 31 11 52c0 32 -17 32 -25 32c-34 0 -74 -30 -101 -124 c-5 -16 -6 -18 -16 -18c0 0 -12 0 -12 10c0 9 38 154 132 154c50 0 82 -37 82 -82c0 -19 -5 -33 -13 -53c-10 -27 -10 -29 -22 -58l-39 -105c-23 -61 -29 -75 -29 -100c0 -23 7 -33 24 -33c51 0 84 61 102 124c5 15 5 18 15 18c3 0 12 0 12 -10Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45C" d="M469 273c0 -146 -135 -284 -268 -284c-93 0 -160 70 -160 169c0 142 134 284 268 284c90 0 160 -65 160 -169zM396 312c0 60 -30 108 -88 108c-28 0 -85 -15 -135 -92c-32 -51 -58 -159 -58 -208c0 -78 44 -109 87 -109c46 0 101 34 136 92c38 65 58 170 58 209Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-28" d="M332 -238c0 -5 -5 -10 -10 -10c-2 0 -4 1 -6 2c-110 83 -215 283 -215 454v84c0 171 105 371 215 454c2 1 4 2 6 2c5 0 10 -5 10 -10c0 -3 -2 -6 -4 -8c-104 -78 -173 -278 -173 -438v-84c0 -160 69 -360 173 -438c2 -2 4 -5 4 -8Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-29" d="M288 208c0 -171 -105 -371 -215 -454c-2 -1 -4 -2 -6 -2c-5 0 -10 5 -10 10c0 3 2 6 4 8c104 78 173 278 173 438v84c0 160 -69 360 -173 438c-2 2 -4 5 -4 8c0 5 5 10 10 10c2 0 4 -1 6 -2c110 -83 215 -283 215 -454v-84Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-32" d="M449 174l-28 -174h-371c0 24 0 26 11 37l192 214c55 62 105 141 105 221c0 82 -43 163 -134 163c-58 0 -112 -37 -135 -102c3 1 5 1 13 1c35 0 53 -26 53 -52c0 -41 -35 -53 -52 -53c-3 0 -53 0 -53 56c0 89 74 181 187 181c122 0 212 -80 212 -194 c0 -100 -60 -154 -216 -292l-106 -103h180c22 0 88 0 95 8c10 15 17 59 22 89h25Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-3D" d="M722 347c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20zM722 153c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-7C" d="M159 -230c0 -11 -9 -20 -20 -20s-20 9 -20 20v960c0 11 9 20 20 20s20 -9 20 -20v-960Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2212" d="M722 250c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2B" d="M722 250c0 -11 -9 -20 -20 -20h-293v-293c0 -11 -9 -20 -20 -20s-20 9 -20 20v293h-293c-11 0 -20 9 -20 20s9 20 20 20h293v293c0 11 9 20 20 20s20 -9 20 -20v-293h293c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-31" d="M419 0c-35 3 -122 3 -162 3s-127 0 -162 -3v31h32c90 0 93 12 93 48v518c-52 -26 -111 -26 -131 -26v31c32 0 120 0 182 64c23 0 23 -2 23 -26v-561c0 -37 3 -48 93 -48h32v-31Z"></path>
<path stroke-width="10" id="E1-LATINMODERNSIZE5-7C" d="M172 -969c0 -18 -15 -32 -33 -32s-32 14 -32 32v2438c0 18 14 32 32 32s33 -14 33 -32v-2438Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D45F" x="0" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D44E" x="456" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="990" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D456" x="1356" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D45C" x="1706" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-28" x="2196" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="2590" y="0"></use>
<g transform="translate(2956,0)">
<use xlink:href="#E1-LATINMODERNMAIN-29" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-32" x="557" y="-213"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-3D" x="4084" y="0"></use>
<g transform="translate(5145,0)">
<use xlink:href="#E1-LATINMODERNSIZE5-7C"></use>
<g transform="translate(283,0)">
<g transform="translate(120,0)">
<rect stroke="none" width="5278" height="60" x="0" y="220"></rect>
<g transform="translate(926,676)">
<use xlink:href="#E1-LATINMODERNMAIN-32" x="0" y="0"></use>
<g transform="translate(505,0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-32" x="517" y="513"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="1550" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-32" x="2555" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="3060" y="0"></use>
</g>
<g transform="translate(60,-787)">
<use xlink:href="#E1-LATINMODERNMAIN-32" x="0" y="0"></use>
<g transform="translate(505,0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-32" x="517" y="408"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="1550" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-32" x="2555" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="3060" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2B" x="3648" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-31" x="4653" y="0"></use>
</g>
</g>
</g>
<use xlink:href="#E1-LATINMODERNSIZE5-7C" x="5801" y="0"></use>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

70
images/latex/462bb8410d6ca4437b8f47450ce72683c61a673e.svg
View File

@@ -1,70 +0,0 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="35.5ex" height="5.333ex" style="vertical-align: -1.667ex; margin-left: 0ex; margin-right: 0ex; margin-bottom: 1px; margin-top: 1px;" viewBox="0 -1589.3 15265.1 2314.7" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D434" d="M721 20c0 -20 -12 -20 -18 -20c-25 0 -88 3 -113 3c-41 0 -84 -3 -125 -3c0 0 -14 0 -14 11c0 20 10 20 24 20c20 0 72 3 72 33c0 10 -14 146 -16 167h-251c-68 -116 -69 -116 -76 -128c-8 -14 -14 -25 -14 -37c0 -25 24 -33 47 -35c7 0 16 -1 16 -12 c0 -19 -13 -19 -19 -19c-32 0 -67 3 -100 3c-28 0 -59 -3 -86 -3c-8 0 -13 5 -13 11c0 19 9 19 21 20c44 3 83 17 123 84l348 584c6 10 10 17 26 17c17 0 17 -4 19 -24l61 -625c3 -29 3 -36 65 -36c13 0 23 0 23 -11zM528 262l-32 330l-197 -330h229Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2032" d="M251 710c0 -7 -2 -14 -6 -19l-158 -261h-27l120 297c4 11 18 21 33 21c21 0 38 -17 38 -38Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-3D" d="M722 347c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20zM722 153c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D435" d="M756 545c0 -95 -105 -169 -209 -188c97 -11 155 -69 155 -141c0 -98 -118 -216 -276 -216h-357c-18 0 -27 0 -27 11c0 20 10 20 27 20c79 0 81 8 91 47l134 537c3 12 4 15 4 19c0 13 -9 14 -27 16c-17 2 -38 2 -38 2c-19 0 -28 0 -28 11c0 20 10 20 29 20h336 c120 0 186 -64 186 -138zM665 549c0 44 -21 103 -109 103h-129c-43 0 -45 -3 -54 -38l-62 -248h146c122 0 208 95 208 183zM609 227c0 43 -19 117 -115 117h-189l-69 -279c-5 -18 -5 -20 -5 -23c0 -8 3 -9 13 -10c6 -1 8 -1 22 -1h136c118 0 207 97 207 196Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2B" d="M722 250c0 -11 -9 -20 -20 -20h-293v-293c0 -11 -9 -20 -20 -20s-20 9 -20 20v293h-293c-11 0 -20 9 -20 20s9 20 20 20h293v293c0 11 9 20 20 20s20 -9 20 -20v-293h293c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2212" d="M722 250c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D436" d="M760 695l-63 -255c-5 -18 -5 -20 -18 -20c-4 0 -15 0 -15 10s3 11 3 51c0 116 -59 193 -161 193c-89 0 -183 -50 -244 -121c-100 -117 -121 -279 -121 -336c0 -156 106 -208 196 -208c52 0 115 17 184 73c69 58 92 129 101 158c2 8 7 10 13 10c0 0 12 0 12 -10 c0 -3 -17 -94 -110 -176c-53 -46 -129 -86 -216 -86c-153 0 -271 109 -271 274c0 232 225 453 448 453c111 0 157 -75 166 -89l70 77c11 11 12 12 15 12c9 0 11 -7 11 -10Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45F" d="M436 377c0 -36 -28 -59 -55 -59s-38 19 -38 35c0 26 22 50 52 55c0 0 -16 12 -42 12c-43 0 -72 -26 -80 -33c-24 -22 -52 -69 -56 -82l-32 -130c-4 -18 -38 -154 -40 -158c-7 -20 -25 -28 -37 -28c-15 0 -29 9 -29 27c0 5 6 28 9 43l58 231c13 52 16 63 16 84 c0 38 -14 46 -31 46c-36 0 -56 -48 -73 -119c-6 -22 -7 -23 -17 -23c0 0 -12 0 -12 10c0 3 13 63 31 97c9 18 28 57 74 57c47 0 83 -32 91 -77c19 28 63 77 128 77c51 0 83 -30 83 -65Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D44E" d="M498 143c0 0 -13 -63 -30 -99c-16 -32 -39 -55 -74 -55c-48 0 -83 33 -91 75c-60 -71 -110 -75 -130 -75c-78 0 -133 66 -133 160c0 146 124 293 241 293c45 0 74 -27 92 -64c3 22 18 44 42 44c17 0 29 -10 29 -27c0 -4 0 -6 -7 -34l-36 -140l-22 -90 c-11 -44 -13 -52 -13 -74c0 -20 3 -46 30 -46c41 0 59 59 76 124c3 14 4 18 14 18c3 0 12 0 12 -10zM361 332c0 6 -14 88 -79 88c-40 0 -85 -37 -116 -96c-23 -46 -55 -169 -55 -219c0 -39 14 -94 64 -94c28 0 69 16 113 71c15 17 15 19 20 37l50 196c1 5 3 11 3 17Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D461" d="M330 420c0 -20 -10 -20 -30 -20h-94l-74 -295c-4 -17 -6 -24 -6 -48c0 -33 10 -46 31 -46c34 0 87 24 130 128c5 11 6 14 15 14c4 0 12 0 12 -10c0 -8 -57 -154 -159 -154c-54 0 -92 38 -92 92c0 18 4 35 76 319h-88c-20 0 -28 0 -28 12c0 19 10 19 30 19h94l39 159 c9 35 37 36 40 36c17 0 29 -10 29 -27c0 -6 -5 -26 -41 -168h88c18 0 28 0 28 -11Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D456" d="M284 625c0 -30 -30 -53 -53 -53c-24 0 -38 17 -38 36c0 27 27 53 54 53c23 0 37 -16 37 -36zM293 143c0 -9 -37 -154 -131 -154c-48 0 -82 35 -82 82c0 21 13 54 23 80c16 43 61 159 69 185c4 10 11 31 11 52c0 32 -17 32 -25 32c-34 0 -74 -30 -101 -124 c-5 -16 -6 -18 -16 -18c0 0 -12 0 -12 10c0 9 38 154 132 154c50 0 82 -37 82 -82c0 -19 -5 -33 -13 -53c-10 -27 -10 -29 -22 -58l-39 -105c-23 -61 -29 -75 -29 -100c0 -23 7 -33 24 -33c51 0 84 61 102 124c5 15 5 18 15 18c3 0 12 0 12 -10Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45C" d="M469 273c0 -146 -135 -284 -268 -284c-93 0 -160 70 -160 169c0 142 134 284 268 284c90 0 160 -65 160 -169zM396 312c0 60 -30 108 -88 108c-28 0 -85 -15 -135 -92c-32 -51 -58 -159 -58 -208c0 -78 44 -109 87 -109c46 0 101 34 136 92c38 65 58 170 58 209Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D434" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-2032" x="1067" y="583"></use>
<use xlink:href="#E1-LATINMODERNMAIN-3D" x="1356" y="0"></use>
<g transform="translate(2417,0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D435" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-2032" x="1080" y="583"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-2B" x="3726" y="0"></use>
<g transform="translate(4509,0)">
<g transform="translate(342,0)">
<rect stroke="none" width="3199" height="60" x="0" y="220"></rect>
<g transform="translate(60,676)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D435" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-2032" x="1080" y="513"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="1309" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D436" x="2314" y="0"></use>
</g>
<g transform="translate(501,-691)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D45F" x="0" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D44E" x="456" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="990" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D456" x="1356" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D45C" x="1706" y="0"></use>
</g>
</g>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-3D" x="8449" y="0"></use>
<g transform="translate(9510,0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D435" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-2032" x="1080" y="583"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="10820" y="0"></use>
<g transform="translate(11603,0)">
<g transform="translate(342,0)">
<rect stroke="none" width="3199" height="60" x="0" y="220"></rect>
<g transform="translate(60,676)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D436" x="0" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="987" y="0"></use>
<g transform="translate(1992,0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D435" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-2032" x="1080" y="513"></use>
</g>
</g>
<g transform="translate(501,-691)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D45F" x="0" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D44E" x="456" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="990" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D456" x="1356" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D45C" x="1706" y="0"></use>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

69
images/latex/7f5e48e56c0a0fb80040fdc84a9713c62eb2c416.svg
View File

@@ -1,69 +0,0 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="30.667ex" height="6.167ex" style="vertical-align: -2.5ex; margin-left: 0ex; margin-right: 0ex; margin-bottom: 1px; margin-top: 1px;" viewBox="0 -1632.2 13198.2 2690.5" xmlns="http://www.w3.org/2000/svg">
<defs>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45F" d="M436 377c0 -36 -28 -59 -55 -59s-38 19 -38 35c0 26 22 50 52 55c0 0 -16 12 -42 12c-43 0 -72 -26 -80 -33c-24 -22 -52 -69 -56 -82l-32 -130c-4 -18 -38 -154 -40 -158c-7 -20 -25 -28 -37 -28c-15 0 -29 9 -29 27c0 5 6 28 9 43l58 231c13 52 16 63 16 84 c0 38 -14 46 -31 46c-36 0 -56 -48 -73 -119c-6 -22 -7 -23 -17 -23c0 0 -12 0 -12 10c0 3 13 63 31 97c9 18 28 57 74 57c47 0 83 -32 91 -77c19 28 63 77 128 77c51 0 83 -30 83 -65Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D44E" d="M498 143c0 0 -13 -63 -30 -99c-16 -32 -39 -55 -74 -55c-48 0 -83 33 -91 75c-60 -71 -110 -75 -130 -75c-78 0 -133 66 -133 160c0 146 124 293 241 293c45 0 74 -27 92 -64c3 22 18 44 42 44c17 0 29 -10 29 -27c0 -4 0 -6 -7 -34l-36 -140l-22 -90 c-11 -44 -13 -52 -13 -74c0 -20 3 -46 30 -46c41 0 59 59 76 124c3 14 4 18 14 18c3 0 12 0 12 -10zM361 332c0 6 -14 88 -79 88c-40 0 -85 -37 -116 -96c-23 -46 -55 -169 -55 -219c0 -39 14 -94 64 -94c28 0 69 16 113 71c15 17 15 19 20 37l50 196c1 5 3 11 3 17Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D461" d="M330 420c0 -20 -10 -20 -30 -20h-94l-74 -295c-4 -17 -6 -24 -6 -48c0 -33 10 -46 31 -46c34 0 87 24 130 128c5 11 6 14 15 14c4 0 12 0 12 -10c0 -8 -57 -154 -159 -154c-54 0 -92 38 -92 92c0 18 4 35 76 319h-88c-20 0 -28 0 -28 12c0 19 10 19 30 19h94l39 159 c9 35 37 36 40 36c17 0 29 -10 29 -27c0 -6 -5 -26 -41 -168h88c18 0 28 0 28 -11Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D456" d="M284 625c0 -30 -30 -53 -53 -53c-24 0 -38 17 -38 36c0 27 27 53 54 53c23 0 37 -16 37 -36zM293 143c0 -9 -37 -154 -131 -154c-48 0 -82 35 -82 82c0 21 13 54 23 80c16 43 61 159 69 185c4 10 11 31 11 52c0 32 -17 32 -25 32c-34 0 -74 -30 -101 -124 c-5 -16 -6 -18 -16 -18c0 0 -12 0 -12 10c0 9 38 154 132 154c50 0 82 -37 82 -82c0 -19 -5 -33 -13 -53c-10 -27 -10 -29 -22 -58l-39 -105c-23 -61 -29 -75 -29 -100c0 -23 7 -33 24 -33c51 0 84 61 102 124c5 15 5 18 15 18c3 0 12 0 12 -10Z"></path>
<path stroke-width="10" id="E1-LATINMODERNNORMAL-1D45C" d="M469 273c0 -146 -135 -284 -268 -284c-93 0 -160 70 -160 169c0 142 134 284 268 284c90 0 160 -65 160 -169zM396 312c0 60 -30 108 -88 108c-28 0 -85 -15 -135 -92c-32 -51 -58 -159 -58 -208c0 -78 44 -109 87 -109c46 0 101 34 136 92c38 65 58 170 58 209Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-28" d="M332 -238c0 -5 -5 -10 -10 -10c-2 0 -4 1 -6 2c-110 83 -215 283 -215 454v84c0 171 105 371 215 454c2 1 4 2 6 2c5 0 10 -5 10 -10c0 -3 -2 -6 -4 -8c-104 -78 -173 -278 -173 -438v-84c0 -160 69 -360 173 -438c2 -2 4 -5 4 -8Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-29" d="M288 208c0 -171 -105 -371 -215 -454c-2 -1 -4 -2 -6 -2c-5 0 -10 5 -10 10c0 3 2 6 4 8c104 78 173 278 173 438v84c0 160 -69 360 -173 438c-2 2 -4 5 -4 8c0 5 5 10 10 10c2 0 4 -1 6 -2c110 -83 215 -283 215 -454v-84Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-33" d="M457 171c0 -102 -91 -193 -213 -193c-109 0 -202 66 -202 157c0 44 32 58 56 58c29 0 56 -20 56 -56c0 -38 -31 -60 -66 -55c35 -59 110 -76 153 -76c44 0 113 29 113 165c0 98 -37 166 -119 166h-44c-17 0 -24 0 -24 11c0 10 7 11 15 12c7 0 31 2 39 3c25 1 59 4 89 52 c26 44 28 102 28 114c0 90 -55 112 -96 112c-36 0 -102 -13 -133 -62c15 0 62 0 62 -50c0 -29 -20 -51 -51 -51c-29 0 -51 19 -51 52c0 76 76 136 177 136c96 0 184 -56 184 -138c0 -79 -58 -149 -140 -176c104 -21 167 -99 167 -181Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-3D" d="M722 347c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20zM722 153c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-7C" d="M159 -230c0 -11 -9 -20 -20 -20s-20 9 -20 20v960c0 11 9 20 20 20s20 -9 20 -20v-960Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2B" d="M722 250c0 -11 -9 -20 -20 -20h-293v-293c0 -11 -9 -20 -20 -20s-20 9 -20 20v293h-293c-11 0 -20 9 -20 20s9 20 20 20h293v293c0 11 9 20 20 20s20 -9 20 -20v-293h293c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-31" d="M419 0c-35 3 -122 3 -162 3s-127 0 -162 -3v31h32c90 0 93 12 93 48v518c-52 -26 -111 -26 -131 -26v31c32 0 120 0 182 64c23 0 23 -2 23 -26v-561c0 -37 3 -48 93 -48h32v-31Z"></path>
<path stroke-width="10" id="E1-LATINMODERNMAIN-2212" d="M722 250c0 -11 -9 -20 -20 -20h-626c-11 0 -20 9 -20 20s9 20 20 20h626c11 0 20 -9 20 -20Z"></path>
<path stroke-width="10" id="E1-LATINMODERNSIZE5-7C" d="M172 -969c0 -18 -15 -32 -33 -32s-32 14 -32 32v2438c0 18 14 32 32 32s33 -14 33 -32v-2438Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D45F" x="0" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D44E" x="456" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="990" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D456" x="1356" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D45C" x="1706" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-28" x="2196" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="2590" y="0"></use>
<g transform="translate(2956,0)">
<use xlink:href="#E1-LATINMODERNMAIN-29" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-33" x="557" y="-213"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-3D" x="4084" y="0"></use>
<g transform="translate(5145,0)">
<use xlink:href="#E1-LATINMODERNSIZE5-7C"></use>
<g transform="translate(283,0)">
<g transform="translate(120,0)">
<rect stroke="none" width="7246" height="60" x="0" y="220"></rect>
<g transform="translate(60,777)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-33" x="517" y="513"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2B" x="1045" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-28" x="2050" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-31" x="2444" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="3171" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="4176" y="0"></use>
<g transform="translate(4542,0)">
<use xlink:href="#E1-LATINMODERNMAIN-29" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-33" x="557" y="513"></use>
</g>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="5616" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-31" x="6621" y="0"></use>
</g>
<g transform="translate(926,-787)">
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-33" x="517" y="408"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2B" x="1045" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-28" x="2050" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-31" x="2444" y="0"></use>
<use xlink:href="#E1-LATINMODERNMAIN-2212" x="3171" y="0"></use>
<use xlink:href="#E1-LATINMODERNNORMAL-1D461" x="4176" y="0"></use>
<g transform="translate(4542,0)">
<use xlink:href="#E1-LATINMODERNMAIN-29" x="0" y="0"></use>
<use transform="scale(0.707)" xlink:href="#E1-LATINMODERNMAIN-33" x="557" y="408"></use>
</g>
</g>
</g>
</g>
<use xlink:href="#E1-LATINMODERNSIZE5-7C" x="7769" y="0"></use>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

59
stylesheets/sketch.less
View File

@@ -1,59 +0,0 @@
canvas.loading-sketch {
background: url('../images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.sketch-code {
display: inline-block;
unicode-bidi: embed;
font-family: monospace;
white-space: pre;
border: 1px solid black;
min-height: 300px;
}
.sketch {
display: inline-block;
border: 1px solid #DDD;
padding: 5px;
font-style: italic;
font-size: 80%;
background: rgb(250,250,204);
}
.sketch canvas {
margin: auto;
border: 1px solid black;
height: 300px;
}
.sketch canvas:focus {
outline: 1px solid rgba(0,0,0,0);
}
.sketch img {
margin: auto;
border: 1px solid black;
}
.labeled-image p:before {
content: "Image " attr(data-img-label) ". ";
}
.labeled-image p {
margin: 0;
}
.sketch canvas[data-preset=simple],
.sketch canvas[data-preset=poly],
.sketch canvas[data-preset=ratios],
.sketch canvas[data-preset=clipping],
.sketch canvas[data-preset=abc],
.sketch canvas[data-preset=moulding],
.sketch canvas[data-preset=generate]
{ width: 300px; }
.sketch canvas[data-preset=twopanel]
{ width: 600px; }
.sketch canvas[data-preset=shapes],
.sketch canvas[data-preset=threepanel]
{ width: 900px; }
.sketch-title span { color: rgb(0,0,200); cursor: pointer; }