templates/areas/work-process/view.html.twig line 1

Open in your IDE?
  1.   <!-- Work Process Flow Six Part -->
            <div class="section workflowsix-wrapper section-padding d-none">
                <div class="container">
                    <div class="row">
                        <div class="col-xxl-12">
                            <ul class="workprocess-sixflows">
                                <li data-name="Discover" data-percent="97%" class="top"> 
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/discover.png" alt="">
                                    </div>
                                </li>
                                <li data-name="Discover" data-percent="97%" class="bottom">
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/define.png" alt="">
                                    </div>
                                </li>
                                <li data-name="Design" data-percent="97%" class="top">
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/design.png" alt="">
                                    </div>
                                </li>
                                <li data-name="Develop" data-percent="97%" class="bottom">
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/develop.png" alt="">
                                    </div>
                                </li>
                                <li data-name="Dispatch" data-percent="97%" class="top">
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/dispatch.png" alt="">
                                    </div>
                                </li>
                                <li data-name="Dissect" data-percent="97%" class="bottom">
                                    <svg viewBox="-10 -10 220 220">
                                        <g fill="none" stroke-width="20" transform="translate(100,100)">
                                        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
                                        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
                                        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
                                        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
                                        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
                                        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
                                        </g>
                                    </svg> 
                                    <svg viewBox="-10 -10 220 220">
                                        <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
                                    </svg>
                                    <div class="icon-wrapper">
                                        <img src="assets/images/icons/dissect.png" alt="">
                                    </div>
                                </li>
                            </ul>
                            <!--  Defining Angle Gradient Colors  --> 
                            <svg width="0" height="0">
                                <defs>
                                <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
                                    <stop stop-color="#9FC63B"/>
                                    <stop offset="100%" stop-color="#9FC63B"/>
                                </linearGradient>
                                </defs>
                                </svg>
    
                            <!-- <div class="workprocess-sixflows">
                                <div class="flowbox">
                                    <div class="green-border animated-box top">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/discover.png" alt="">
                                        </div>
                                    </div>
                                    <p>Discover</p>
                                </div>
                                <div class="flowbox">
                                    <div class="green-border animated-box bottom">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/define.png" alt="">
                                        </div>
                                    </div>
                                    <p>Define</p>
                                </div>
                                <div class="flowbox">
                                    <div class="green-border animated-box top">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/design.png" alt="">
                                        </div>
                                    </div>
                                    <p>Design</p>
                                </div>
                                <div class="flowbox">
                                    <div class="green-border animated-box bottom">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/develop.png" alt="">
                                        </div>
                                    </div>
                                    <p>Develop</p>
                                </div>
                                <div class="flowbox">
                                    <div class="green-border animated-box top">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/dispatch.png" alt="">
                                        </div>
                                    </div>
                                    <p>Dispatch</p>
                                </div>
                                <div class="flowbox">
                                    <div class="green-border animated-box bottom">
                                        <svg>
                                            <circle cx="105" cy="105" r="100"></circle>
                                            <circle cx="105" cy="105" r="100" style="--percent: 70"></circle>
                                        </svg>
                                        <div class="icon-wrapper">
                                            <img src="assets/images/icons/dissect.png" alt="">
                                        </div>
                                    </div>
                                    <p>Dissect</p>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- Work Process Flow Six Part -->