svg logo test1

Logo Test

Epitrochoid curve from GeoGebra

$x(t) = \frac{3}{5}\cos(\frac{\pi}{6} + t) + \frac{9}{10}\cos(\frac{\pi}{6} - 2t)$, $t \in [0, 2\pi]$

$y(t) = \frac{3}{5}\sin(\frac{\pi}{6} + t) + \frac{9}{10}\sin(\frac{\pi}{6} - 2t)$

This is an epitrochoid — a curve traced by a point attached to a circle rolling around another circle.

The animation shows a green dot tracing the curve path.

Code

<svg width="220" height="220" viewBox="35 25 130 130" xmlns="http://www.w3.org/2000/svg">
    <!-- Big circle c: center O=(100,80), radius 36 -->
    <circle id="bigCircle" cx="100" cy="80" r="36"
            style="fill: none; stroke: rgba(0,128,0,0.3); stroke-width: 1;"/>
    <!-- Path for S (small circle center): hidden -->
    <path id="pathD"
          d="M 120.8,68 A 24,24 0 1,0 79.2,92 A 24,24 0 1,0 120.8,68"
          style="fill: none; stroke: none;"/>
    <!-- Epitrochoid curve (locus of C) - 3 cusps -->
    <path id="epitrochoid"
          d="M 152.0,50.0 L 153.5,53.9 L 153.8,58.3 L 153.0,63.0 L 150.9,67.9
             L 147.6,72.7 L 143.2,77.2 L 137.7,81.4 L 131.3,85.0 L 124.2,88.0
             L 116.5,90.2 L 108.3,91.5 L 100.0,92.0 L 91.7,91.5 L 83.5,90.2
             L 75.8,88.0 L 68.7,85.0 L 62.3,81.4 L 56.8,77.2 L 52.4,72.7
             L 49.1,67.9 L 47.0,63.0 L 46.2,58.3 L 46.5,53.9 L 48.0,50.0
             L 50.7,46.7 L 54.3,44.2 L 58.8,42.6 L 64.1,42.0 L 69.8,42.5
             L 76.0,44.0 L 82.3,46.6 L 88.7,50.3 L 94.8,55.0 L 100.6,60.6
             L 105.8,67.0 L 110.4,74.0 L 114.2,81.5 L 117.1,89.2 L 119.0,97.0
             L 120.0,104.6 L 120.1,112.0 L 119.2,118.8 L 117.4,124.9 L 114.9,130.1
             L 111.8,134.4 L 108.1,137.5 L 104.2,139.4 L 100.0,140.0 L 95.8,139.4
             L 91.9,137.5 L 88.2,134.4 L 85.1,130.1 L 82.6,124.9 L 80.8,118.8
             L 79.9,112.0 L 80.0,104.6 L 81.0,97.0 L 82.9,89.2 L 85.8,81.5
             L 89.6,74.0 L 94.2,67.0 L 99.4,60.6 L 105.2,55.0 L 111.3,50.3
             L 117.7,46.6 L 124.0,44.0 L 130.2,42.5 L 135.9,42.0 L 141.2,42.6
             L 145.7,44.2 L 149.3,46.7 Z"
          style="fill: none; stroke: #34516e; stroke-width: 1.5;"/>

    <!-- Small circle e: center S moves along pathD -->
    <g id="smallCircleGroup">
        <circle id="smallCircle" cx="0" cy="0" r="12"
                style="fill: none; stroke: rgba(0,128,0,0.5); stroke-width: 1;"/>
        <circle id="centerS" cx="0" cy="0" r="1.5" style="fill: rgba(0,128,0,0.5);"/>
        <animateMotion
            dur="20s"
            repeatCount="1"
            fill="freeze">
            <mpath href="#pathD"/>
        </animateMotion>
    </g>
    <!-- Arm: follows pathD, rotates around its origin -->
    <g id="armGroup">
        <g>
            <line x1="0" y1="0" x2="36" y2="0" style="stroke: rgba(0,128,0,0.5); stroke-width: 1;"/>
            <circle id="tracingPoint" cx="36" cy="0" r="1.5" style="fill: rgba(0,128,0,0.5);"/>
            <animateTransform
                attributeName="transform"
                type="rotate"
                from="-30" to="690"
                dur="20s"
                repeatCount="1"
                fill="freeze"/>
       </g>
       <animateMotion
            dur="20s"
            repeatCount="1"
            fill="freeze">
            <mpath href="#pathD"/>
        </animateMotion>
    </g>
</svg>

Explanation

1. The SVG Element and viewBox

<svg width="220" height="220" viewBox="35 25 130 130">

The viewBox has 4 values: min-x min-y width height

min-x = 35 — start viewing from x=35
min-y = 25 — start viewing from y=25
width = 130 — show 130 units horizontally
height = 130 — show 130 units vertically

This crops the visible area to show only the region from (35,25) to (165,155), removing empty space around the curve. The epitrochoid extends from approximately x=46 to x=154 and y=42 to y=140.

The width="220" height="220" sets the display size on screen. The 130×130 viewBox area is scaled to fit 220×220 pixels (scale factor ≈ 1.69).

2. The Big Circle (bigCircle)

<circle id="bigCircle" cx="100" cy="80" r="36"/>

This is the outer reference circle with:

Center O = (100, 80) — corresponds to GeoGebra point (0, 0.5) scaled by 40 and shifted to SVG center
Radius = 36 — corresponds to 0.9 in GeoGebra × scale factor 40

3. The Hidden Path (pathD)

<path id="pathD" d="M 120.8,68 A 24,24 0 1,0 79.2,92 A 24,24 0 1,0 120.8,68"/>

This is the circular path along which the small circle's center S moves. It's hidden (stroke: none) but used by animateMotion.

Radius = 24 — corresponds to 0.6 in GeoGebra × 40
Start point (120.8, 68) — at angle π/6 (30°) from center O
Arc command A: A rx,ry rotation large-arc-flag sweep-flag x,y
sweep-flag = 0 — clockwise direction in SVG coordinates

4. The Epitrochoid Path

<path id="epitrochoid" d="M 152.0,50.0 L 153.5,53.9 ... Z"/>

This is the 3-cusped curve generated by the parametric equations. The points were calculated using:

for t from 0 to 2π:
    S_angle = π/6 + t           // small circle center angle
    Sx = 0.6 × cos(S_angle)     // S position
    Sy = 0.6 × sin(S_angle)
    
    arm_angle = π/6 - 2t        // arm rotates -2t
    Cx = Sx + 0.9 × cos(arm_angle)  // tracing point C
    Cy = Sy + 0.9 × sin(arm_angle)
    
    svgX = 100 + 40 × Cx        // convert to SVG coords
    svgY = 80 - 40 × Cy         // Y is inverted in SVG

Path commands: M = moveto, L = lineto, Z = close path.

5. The Small Circle Group (smallCircleGroup)

<g id="smallCircleGroup">
    <circle cx="0" cy="0" r="12"/>
    <circle cx="0" cy="0" r="1.5"/>
    <animateMotion dur="20s">
        <mpath href="#pathD"/>
    </animateMotion>
</g>

A group containing:

Small circle (r=12) — the rolling circle
Center dot (r=1.5) — marks the center S
animateMotion — moves the entire group along pathD over 20 seconds
mpath — references the hidden circular path

The circles are defined at origin (0,0) because animateMotion translates the group to the path position.

6. The Arm Group (armGroup)

<g id="armGroup">
    <g>
        <line x1="0" y1="0" x2="36" y2="0"/>
        <circle cx="36" cy="0" r="1.5"/>
        <animateTransform type="rotate" from="-30" to="690"/>
    </g>
    <animateMotion><mpath href="#pathD"/></animateMotion>
</g>

This is the key to the animation:

Inner group — contains the arm (line) and tracing point (circle)
animateTransform rotate — rotates the arm from -30° to 690° (total 720° = 2 full rotations)
Outer animateMotion — moves the arm along pathD (same as small circle)

The rotation values:

from="-30" — initial angle (π/6 = 30° in math, but -30° in SVG due to Y-axis inversion)
to="690" — final angle = -30° + 720° (the arm rotates 2× as fast as the path motion, in opposite direction)

7. Coordinate System Conversion

GeoGebra uses standard math coordinates (Y up), SVG uses screen coordinates (Y down):

GeoGebra → SVG:
    svgX = 100 + scale × geoX
    svgY = 80 - scale × geoY    // minus because Y is inverted
    
Where:
    scale = 40
    SVG center = (100, 80) corresponds to GeoGebra O = (0, 0.5)

8. Animation Synchronization

Both smallCircleGroup and armGroup have the same dur="20s" to stay synchronized. The arm's rotation (-2t in the formula) means it rotates twice for each orbit around the path.